Generating, Sideloading, and Publishing Windows App Studio 8.1 apps for Tablets and PCs

[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]