Generating, Sideloading, and Publishing Windows App Studio 8.1 apps for Tablets and PCs
0 (0 Likes / 0 Dislikes)
[Introduction to mobile App Development]
[male] >> Welcome to this video,
Formatting Windows App Studio Apps for Tablets.
[Formatting for Tablets]
In this video, I'm going to show you how to ensure
that your app works just as well on Windows tablets
and Windows 8.1 PCs
as it does on Windows phones.
By the end of this video,
you will have seen everything you need to know
to ensure that your apps for Windows phone
work just as well on Windows tablets.
We've already logged in to App Studio,
and we created an app in the first video in this series
which we'll now open and edit.
To start off with, we need to see how our app
will look on a tablet screen.
We can go to each section in the app
and click the Windows Preview button
to see how it looks.
You will see that the content looks great on different screen sizes
and very little work is required.
The My Useful Links section looks a bit empty on a tablet however,
and so we'll add some additional content.
We don't want to add too much because in this case,
the app will be released for both phones and tablets,
and so it needs to look good on both devices.
We'll add two new links which should work well on both device types.
We'll add a link to the official City of Venice website
and paste in a URL I've already copied to the clipboard.
When you preview the new link, you will see that it initially has no icon.
We'll close the preview and change the icon now.
To change the icon, I must first open the list of links
and then edit the new link.
When I click on the existing icon, I can choose a replacement.
I'll use an icon on my computer.
Now we can preview the slide for a tablet device
and see that it is better,
but there is still some space on the phone app.
We'll add a link to a Bing search for Venice hotels.
Once I save the change, I can see the preview of the new link.
This number of links looks good on both phones and tablets.
Again, we'll add an icon to improve the appearance
and use Windows Preview to check
that the tablet layout is as expected.
When the app was created for phones,
there was no need for a Windows 8 splash screen,
but now we can see that the splash screen
would be blank on a tablet device.
We need to upload an image with a 620 by 300 pixel resolution
for the Windows 8 splash screen,
and the image will be stored as a PNG file.
So let's upload a PNG with those dimensions.
We should also check the other design elements for tablet compatibility.
So we'll check the tile appearance on a tablet screen.
We'll also check the theme and see
that we can cycle through the screens of the app
in the Windows Preview.
[Generating Tablet Apps]
If you were going to publish this app to the Windows Store
using your Dev Center account,
you'll need to complete the information here.
These instructions are detailed in our other video titled
How to Publish an App Studio App to the Windows Store.
For this video, we will focus on
how to download and open the source code
and how to sideload the app using the installable package.
Next we will generate the app.
This is very similar to generating a Windows phone 8 app
except now we are generating a Windows phone 8.1
and a windows 8.1 app.
Just as with the phone app,
it will take a few minutes to generate the app
and will email you when it's complete.
Once you have generated an app, you can download the source code
and modify it further in Visual Studio.
I will download the code now so that we can make a small revision
and see how to republish the revision.
I will also demonstrate how to sideload a Windows Store app.
I've unpacked the app.zip package
and will now open it in Visual Studio 2013.
We'll make a simple change by adding a link
to the My Useful Links section
in the same manner described in the video
How to Get to the Source Code and Make a Modification.
I'll open up the My Useful Links data source
in the AppStudio.Data project.
I'll copy it any existing data source
and make some changes to reflect on new hyperlink.
To view the change, I need to make sure my Windows app
is selected in the solution
since the Windows phone app is also included.
I will switch my viewing device to simulator
to invoke a tablet device simulator,
and then run the app.
I can take a quick look and see my new link added.
Now let's build a new app package
that can be used to republish and sideload it to Windows.
The option to create a new app package is under the Project menu.
In the Store option, I select Create App Packages.
I will run through the wizard and take note of the output location.
I'm going to skip the validation step for now.
If I wanted to republish this new version,
I can do so under the same project menu.
Under the store option, I can select Upload App Packages
which will take me to the Windows Dev Center.
[Uploading app package]
As you can see, I have already created and published this app before.
So our small change will be a revision.
I simply need to upload the new app package
and republish my app.
This can be done under the Packages link.
Now I'm going to use File Explorer
to go to the file location I took note of in the wizard.
This interface supports dragging and dropping,
so I simply need to drag the app package to the packages box.
The Dev Center will evaluate the app package as it uploads.
Once the upload is complete, I scroll down and select the Save button.
Once I select the Submit for Certification button,
the package will run through a series of automated validation tests
and ultimately be updated on the Windows store
assuming the tests complete properly.
This process can potentially take up to five days
as a conservative estimate,
but I've also seen the Publish process complete
in a shorter time as one hour.
[Installing the certificate]
Let's switch back to App Studio
and take care of loading the code-signing certificate
to our Windows device and then sideloading the app.
After having used App Studio to generate our app,
a package for installing the certificate
and one for sideloading the app are created.
We will need both of these packages.
As you can see at the bottom of my browser,
I have already downloaded and expanded them on my Windows device.
I'll just use the Open Folder button to locate the files now.
You cannot use the packages properly while they are zipped,
so be sure to unpack them into a normal folder before proceeding.
Let's install the certificate first.
Note that the following process is for installing the certificate
on a Windows 8.1 device
but not on Windows RT.
If you are using a Windows RT device,
the details for installing the certificate
will be found at the end of the video.
Let's start with instructions for a Windows 8.1 device.
Both the certificate and a power shell script for installing the certificate
are contained in the folder titled Add-RootCertificate
that I just downloaded.
Note that the default action
for double clicking a power shell script is to open it.
Instead, we must alternate select to the dot ps1 script
titled Add-RootCertificate to execute it.
An alternate select is performed by a tap and hold
or a right click on the file.
When the menu opens, select Run with PowerShell.
At the security prompt, I select the Open bar.
The script will warn you that you need sufficient privileges
in order to complete the task
and wait for you to hit Enter.
So I'll press Enter now, and if the UAC window
we were just warned about now pops up,
I'll select Yes.
PowerShell will then warn us about using trusted scripts.
I will press the letter R and then hit Enter
to run the script once.
Another quick warning about digital certificates loads
which we will also accept by pressing the Y key and Enter.
The script will complete, and the certificate is now installed.
Remember that this process needs only be completed once for this app.
[Sideloading the app]
Now we are ready to sideload the app onto our Windows device.
I've also downloaded and extracted this package
titled Store App to my local device.
Similar to the certificate package,
this package contains the app, its resources,
and a PowerShell script to install the app.
Before running this script, I would suggest uninstalling the app
if you have previously installed it on this device.
This is as simple as right clicking on the app on the start screen
and selecting Uninstall.
Just as before, I will right click on the dot PS1 script
titled Add-AppDevPackage,
and choose Run with PowerShell.
At the security warning, I select the Open button.
if you have already successfully
downloaded App Studio apps to this device,
the PowerShell script will install the app at this stage.
If you're observant, you might catch the installation thermometer bar
displayed in the PowerShell window as it installs the app.
Otherwise, a few notes about the operation performed or displayed
with the message success, your app was successfully installed.
If this is the case, we can hit Enter to continue.
For this demonstration, you will see the behavior
of a first-time installation
of an App Studio app.
First, a warning about administrative permissions is displayed,
and we will hit Enter to continue.
if you see an additional UAC window at this point,
select yes to continue using PowerShell.
Next, a PowerShell screen will display a security warning.
Type the letter R then Enter to continue.
Finally, you will see a notice to grant a developer license.
Select I agree to continue.
You will then be asked to sign in using the same
Microsoft account email and password
that you used for App Studio.
A message will confirm your developer license
and prompt you to close.
An installation progress indicator will briefly show,
and then a message in PowerShell
will tell you that your app was successfully installed.
Click Enter to continue which will close PowerShell.
Now that the app is being installed,
we can take a look at it on our device.
Return to the start screen and search for your app by name.
You can see all the familiar items we added when building our app.
Selecting an item that links to a website
will open up the site in a browser pane.
I'll go ahead and close the app now.
[Installing the certificate
(Windows RT)]
Installing the certificate on a Windows RT device
involves using the certificate import wizard.
This process is quite simple.
In this case, I have already downloaded
and expanded the certificate package
as described earlier.
First I will right click on the SymantecEnterpriseMobilityRoot.cer file,
select the in-store certificate option,
change the radio button to Local Machine,
and select the Next button.
If you're presented with a UAC pop-up window,
select the Yes button,
change the radio button so we can specify a specific certificate store,
then press the Browse button.
Select Trusted Root Certification Authorities,
and then press OK.
Select the Next button.
Once you've selected the Finish button,
you will get a message indicating the import is completed.
Thank you for joining me in this demonstration
of how straightforward it is
to convert a Windows phone app for use by both Windows phones
and Windows tablets.
[Introduction to Mobile App Development]