Video_1_CompleteVideo

[Speaker] Welcome to this video. The ins and outs of windows app studio. In this video, I'm going to give you a guided tour of all the key features of app studio. A web-based tool that you can use to build store-ready apps for PCs, Tablets, and Phones. App Studio also allows you to download the source code of your app if you want to make further customization using Visual Studio. But that feature is outside the scope of what I'm going to cover in this first video. In a single session we will create a universal app that will will run on any PC, Tablet, or Phone running Windows 8.1. By the end of this video, you'll have seen everything you need to know to start creating universal apps for Windows 8.1 devices. I'm starting at the site appstudios.windows.com. If I click on the start new project link, I can sign into App Studio using my Microsoft account. If you don't already have a Microsoft account, you can sign up for one at signup.live.com. Now that I've signed into App Studio, I would be able to view any projects that I might have created by clicking My Projects. However, since I'm starting my first project, I'll create start new project again. On the choose your template page in App Studio I see a list of templates I can pick from to use for my new app. Two new templates recently added to App Studio are the touch develop and web app templates. Touch develop integration allows you to add a section that will import apps or games created in touch develop. Check out touchdevelop.com to get started. Not all types of apps or games, called scripts, are able to be imported in Windows App Studio. The web app template or WAT, for short, allow me to create universal Windows apps for mobile websites. If you already own a mobile optimized website that includes all the content you need and want to create an app out of, this can be a good option for you. See wat.codeplex.com for more information about WAT. Additional information about these and other updates, recently added to App Studio can be found on the App Studio Homepage under the Windows App Studio news section. Here I can view a set of templates such as my trip, sports team, or birthday party. I can explore the template in this preview simulator to understand what the template contains. This video I'm focusing on creating a new universal Windows app. Because I'm starting from scratch, I'll click on the empty app template, on the Create page. I'll click create here. I'm now at the first of the 4 tabs where I design my app. You can the 4 tabs near the top of the section. And you'll see that I can switch between them. The app I'm going to create will display information about my upcoming trip to Venice. So I'm going to start filling this page out with suitable data. Visit Venice in the title box. And I'll upload a PNG image I prepared earlier to use as my app's logo. You can see here that I can upload a PNG file from my computer or from my One Drive account. You can also use one of the images provided by App Studio. We recommend creating a unique image for each app. Think of this as your logo. I'll show you more about customizing the title later. Typically you also use the same image to represent your app in the App Store. Start with a 300 by 300 pixel image to use as a logo. You can use many free programs, such as Microsoft Paint to work with photos and images. Although I'm using a PNG image, you could also upload JPG images, which App Studio will convert to PNG format. This will just lack the transparent effect. While I'm making the changes, you may have noticed that the preview image over here has been updating. This helps you to make sure that your information will display correctly when the app is installed on a real phone. The preview isn't perfect but it gives you a real good indication of what your app will look like. Next, I want to start adding some sections to my app. This is the page where you define your app's content. An app created with App Studio is organized into sections, where each section contains a particular type of data. For example, one section might hold a collection of images, while others hold a collection of news articles. And another might simply be text that you enter directly into App Studio. Users of your app can navigate through your sections by swiping left and right on the main sections of the app. I can create a new section by clicking on the component I want to use from either the basic or advanced set. Notice that an app is limited to six sections in total. So it's a good idea to plan in advance what your sections are going to be. Although you can always come back and add or remove sections later on. As well as sections that hold content, such as images, videos, and news articles, there are also menu sections. A menu holds a collection of links. Either links to information stored externally to your app, such as websites and phone numbers, or links to other sections in your app. I'm going to go ahead and create a section that contains a photo gallery. To add a section that contains images, I could create a collection, an Instagram section, or a Flicker section. For this app I'll use the Flicker data source. I'll give the section a name, configure my Flicker user ID to show the pictures in my photo stream, and confirm the addition. Instead of using a Flicker ID, I can provide a search term or tag for the pictures I want to display. To obtain your Flicker user ID, a number of third party sites exist to find your Flicker ID. If I click edit, I can customize the section further. On this page I can choose the layouts for the list and detail pages in the section. I'm going to choose slightly smaller thumbnails for the listing page and a larger picture for the detail page. I can also modify the search terms if I click on data. When I'm happy with the results, I'll return to my list of sections. Now I'm going to add another section that contains a collection of videos from YouTube. I'll give the new section a name and customize the list of videos from YouTube that my app displays by entering a YouTube user name, play list, or search term. I'll click confirm when I'm done. I'll save my new section. I can edit the pages for my video section in the same way I could edit the pages for my picture section. I can add or remove detail pages and select different layouts. Notice that if I click on data, I can modify the criteria used to select the videos. As I mentioned earlier, touch developed integration allows you to add a section that will import apps or games created in touch develop. Not all types of apps or games, called scripts are able to be imported into Windows App Studio. And I will show you how to tell which is which, shortly. In one approach I can create an app or game, called a script, in Touch Develop and import it as a data source section, directly into App Studio. And then use App Studio to publish my app or game to the store as a single section app. The other approach is to take that same app or game script, you created, into App Studio. And integrate it into an App Studio app that has multiple sections creating sort of a hybrid app. We'll take that last approach. So, let's see how to add a Touch Develop script into the Visit Venice app I'm currently developing. I'll start by opening up another browser and go to touchdevelop.com. I then click launch Touch Develop here. Next I sign into Touch Develop with a Windows account. Once signed in, over here on the far right, I click search everything. In the search text box, I type in the name of the script I'm looking for. I'll type coin flipper. I'll select the script highlighted here. Next, I click the share tile to view the Share this Script window. After a short while, if the script is found to be compatible with App Studio, the Windows App Studio logo will appear. This tells me that I can continue to import this script into my App Studio project. I'll go ahead and click cancel Next I need to copy the script ID for the script, XGMJ. I'll highlight it and copy it to the clipboard, the return to App Studio. In App Studio, I click Touch Develop. I give this section a name and paste the script ID that I copied from the Touch Develop Website. I then click confirm. I now have a new section called Coin Flip, which contains the new script. Later on in this video I will show you how to side load an app to the phone. And now I can show you how the script runs on my phone. Here on my phone, you can see that the Visit Venice app is running. I swipe to the right to view the coin flip section. When I click on the quarter it flips. Now I'll show you how the other approach I can use with the touch vault script, how to load the script into it's own App Studio project. Here I started a new copy of App Studio. One that contains no apps. I switch back to Touch Develop and click share on the Coin Flip script. This time on the share this script dialog, I click make it an app. That brings up App Studio and you can see that a new app has been created, but the Coin Flip script has been automatically added to the first available section. Clicking on My Projects shows you the new project that was created. Now let's return to our original Visit Venice app in App Studio. I'm going to need all 6 sections for this app, so I'm gonna make some space and delete the Coin Flip script. In the next section, I'll add an RSS feed to my app. Next I'm gonna add a section that shows news from the Venice Biannual Festival. To do this, I'm adding a section with an RSS data source. Many news sites and blogs use RSS as a way to publish articles to subscribers as they become available. This is a great way to add a data source that stays up to date with the current latest news on a topic. Here I'm adding the address of an RSS news feed from the New York Times. Again, when I'm happy with this, I'll click confirm and save. So you can now see news from the Biannual Festival as one of the sections in the app. The app will check for news articles and display them as and when they're published. Again, if I want to change how the information is displayed, I can edit the page layouts for this section. I'm going to add another section that displays results from a Bing search. I'm going to use Bing to look for events that are happening in Venice. As with an RSS data source, this type of data source updates automatically because the app executes the search when the app is running on the device. For the search, I'm specifying the country and then providing a search string. I'll click confirm when I'm done. I'll save the new section. If I want to modify the layout for this page, I'll click on edit. Notice that there's only one layout for the search results. On the data page I can modify the search criteria. The next section I'm going to create is an About the Author section, that says a bit about the app and the author. For this I'm going to use an HTML component. I can create the content for my page using this editor. I can use the formatting buttons to apply basic HTML formatting to my content. If I want to, I can also edit the HTML directly by clicking here. A useful tip for creating content in an HTML data source, is that you can cut and paste from an existing website and keep the formatting. Let me save this for the new section. At this point, on the Main Sections page, you can see that I've reached the maximum number of sections. I still have one more important section to add. So I'll delete the section that contains videos of singing gondoliers. For this last section, I'm going to use the collection component to create a mini-database of museums in Venice. I can define the data that my collection will hold here. I'm going to start by adding a set of default columns for my data by clicking here. I'm going to add a new column called address to store each museums address. Notice I can choose between all these different types for each column. I'm also going to add a column to store a phone number. When I finish with the column definitions, I'll click confirm to save them. To add data to my collection, I'll click edit. Next I need to add some data. So I'll click on data and then edit data. Add some details and then click save. To speed up entering the data, you can use the import and export feature. First I'm going to click export data to export my single item to a file. I'll save the file on my local hard drive. I can then open the file in a text editor to add more records, following the format of the existing records in the file. Notice how each field is surrounded by quotation marks, and that there is a semi colon between each field. To save time I'm going to paste a set of records I created earlier. Back in App Studio I'll click on import data and select the CSV file I edited. Note that the image column is empty. I need to upload the images separately using App Studio. I'll upload the image for each museum and then accept the new records by clicking save for each museum entry. I want to show you one last feature in page layout design. I'm going to use these bindings to configure what information, from the collection, is displayed on the list of museums. Notice how the preview updates. I'm also going to edit the detail page layout for my museum's collection. In addition to being able to map other columns from my data source into the placeholders on the page layout, I can also map columns that have particular data types, such as a phone number to actions on the page. In this example, by clicking on an icon of a phone, a user will be able to dial the museum's information number. Clicking on another icon will display the museum's location on a map. Let me save the changes. The collection I just created was a static resource. In a static resource, the items are embedded in the app. The app can display the items without needing an Internet connection. But I can't change the collection without generating the app and redistributing it to all my users. On the other hand, I have the option of creating a dynamic resource. Once an app has been published using dynamic resources, items you create in App Studio are stored in the cloud. The app needs an Internet connection to display them. But I can edit the collection within App Studio and have the changes automatically picked up by all of my users because the app loads the collection from the data services in the cloud. Now I've defined the content for my app. It's time to make a few changes to how it looks. Just before I start making changes to the color scheme and other user interface elements, I want to change the order of my sections on the main section screen. I can do this by dragging the sections to a new location. When I'm done, I'll save the changes and click themes to move on to styling my app. On the themes page, I can change the colors of various key user interface elements. I can either user the standard dark or light styles or choose a custom set of colors. But I must be careful not to choose combinations of colors that make it hard to read my content. Notice how the preview display updates to reflect my choices. If you select the custom style you can choose a background image. But again, be careful that your text remains legible. It's best to use an image that is very dark and use light text, or use an image that is very light and use dark text. The ideal image size is 1,366 pixels wide by 768 pixels high. I'll save the changes. On the tiles tab, I can change the appearance and behavior of the tile that represents the app on the phone start screen. The Flip template enables me to customize the front and back of a tile with different content. The Cycle template cycles through up to 9 images from one of the collection sections in my app. If you have a section that uses an App Studio video data service collection that you can update the images on your user's phone by editing the content of the data service in App Studio. This tile uses a scheduled task that enables your app to execute code in the background even if your app is not running in the foreground on the phone. And the Iconic template shows a single image with customizable text for 3 different sizes of tile. For my app, I'm going to select the Cycle template and configure it like this. The final option configuration choices for my App Studio app are for splash screen images. A splash screen displays as the app is loading. If you create your own custom images, they should be 1,366 by 768 pixels in size. You can upload these images from your computer or from your One Drive account. I'm using the same image for both in my app. I'll save the changes. If you do not intend to publish your app at this time, you can skip this process. On the publish info tab I'm going to complete some information in preparation for publishing my app to the store. I'll add a description. Select the language. And optionally include an about dialog and enable ads in my app. Next I want to associate this app within the store. Here you need to fill in the information for the 4 parameters listed. App Identity, App Display Name, Publisher ID, and Publisher Name. I'll show you how to find the information for each parameter in the order listed. The first step is to open another browser and got to Windows Dev Center. At Dev.windows.com. I sign in here with my Windows ID. It is important that you use the same Windows ID here in Dev Center as you used in App Studio. I will sign in with my account. Now I'll click on the dashboard and from there I click Windows Phone Store. On the dashboard screen I click Submit App. And on the Submit App screen I click App Info. On the App Info screen I will enter the name for my app, Visit Venice Demo App. And then click Reserve App Name. Here's where you collect the information you need for the first 3 parameters you need in App Studio. Next I will select the package identity name and copy it to the clipboard. And I'll switch back to App Studio and paste the name into the App Identity field, then switch back to Dev Center. In the same manner, I select the names reserved for this app value, copy it into the clipboard, go back to App Studio and paste it into the App Display Name field. Then switch back to Dev Center. I now select the Windows Publisher Name, copy it to the clipboard, go back to App Studio, and paste it into the Publisher ID field. Now back to Dev Center again. To obtain the information we need for the last field in App Studio, I need to go to my account screen. To do this, I click on dashboard and then click on account. On the account page I select the Publisher name and copy it. I then switch back to App Studio, paste it into the Publisher Name field, click confirm, and then click save. Before we leave Dev Center completely, there are a couple of items I need to attend to. I switch back to Dev Center, click Submit App, and then click App Info. In the name field, I type in the name of our app, and then click Associate App. I scroll down the page a bit and set an appropriate category and sub-category for our app. Setting the categories correctly will help users find my app. I set category to Travel plus Navigation. When I do that the sub-category field is set to the default value of City Guides. Looking at the drop-down list, I think I'll stick with City Guides. I can set the price for my app. Because this app is not a game, I will choose the default setting for market distribution to distribute my app to all available markets. I'm now finished with Dev Center and publish info in App Studio. Note, next we'll move on to generating our app. In this section we will generate the Visit Venice app package that I can side load to phone. Here in App Studio, I have saved all my changes so now I will click finish. App Studio will create 3 different types of packages. And installable package that you can side load directly to your Phone, Tablet, or PC, a published package that you can use to upload your app to publish to store, and a source code package that you can download and then edit with Visual Studio. To start building a package, I click Generate. For this section, I want to side load the app to my phone. So I will de-select publish packages, and then click generate. It takes App Studio a few minutes to generate the app. And when it's done it will send me a notification email. Before I can side load the app to my phone, I must first install a certificate. And I do that clicking Install Windows Phone 8.1 certificate and the QR code for installing the certificate display. I will now go to my phone and install the certificate. On my phone I start the camera, switch to the Bing vision lens, scan the QR code and click the link. At the sign in page, I sign in with the same Microsoft account that I'm using in App Studio by entering my user name and password. When prompted to download the file, I click open. I don't actually need to tap the screen at the tap prompt. I'm almost immediately presented with the prompt to add a workplace account. I click add. That finishes the installation of the certificate. Let's go back to App Studio. Back on the App Studio screen, I will click cancel to close the QR code for the certificate. To side load the app I need to scan the QR code here. Let me show you on my phone how I can scan this QR code to start the installation. Like with the certificate, I start the camera, switch to the Bing lens, scan the QR code and click the link. On the downloading file prompt, I click open and the file starts downloading. On the tap to open screen, there's nothing I need to do. And now I'm presented with the install a company app prompt. I click install. I'm again prompted to tap to open the appx file. But at this point,the app has been installed and there's no need to do this again. I'll ignore this second prompt to tap and instead tap the Windows button on the phone. I swipe over to my list of apps, locate Visit Venice, tap it and the app starts. I have now downloaded and installed both the Windows certificate and the Visit Venice app. In the next section, I will show you how to go about testing the app. Now I will test the app I just side loaded to my phone. I find Visit Venice in my list of apps and pin it to the start screen. I then increase the size of the tile. When I launch the app, you'll see the splash screen as it loads. As I navigate through the app, you can see the various sections I defined. You can see the list of museums I added in my collection. And here you can see the custom actions I defined for the museum items. If I click on one of the museum entries, the information is displayed on the detail page. I can navigate between entries by swiping left and right. I don't need to return to the list page first. If I had to find multiple detail pages for this section, then swiping would navigate between the different pages for the entry. Having multiple detail pages is useful if your collection has more than 4 columns, as you can display different column data on different pages. You can also see the action items that I defined using the action binding. Clicking on the phone number enables me to dial the number and clicking on the location item would show the location on a map. Thanks for watching this video. If you want to learn more about extending and enhancing your app using Visual Studio, then watch the next video, How to get you the source code and make a modification. Have fun and build some great apps.