Microsoft App Studio Timber Creek High School BY KATHRYN SINGKORNRAT & MICHAEL POWELL Introductions Kathryn Microsoft Student Partner Computer Teaching Science Undergraduate Assistant at UCF Michael Microsoft Digital Student Partner Forensics Graduate Student Computer Science Senior Design Assistant Introductions Joe Healy Technology 14 Evangelist Years with Microsoft Previously worked with IBM, ES, and other companies Covers North and Central Florida Introductions Stop us if we go to fast! Feel free to ask us questions, but please try to save them until the end. We will give you our email addresses if you have additional questions later! What Are We Going To Cover? App Studio Walkthrough We are going to show you how to make a 4 section application. Publishing How Your Applications to export to Visual Studio Questions & Answers What is App Studio? App Studio is a web based tool that allows you to build apps for both Windows Phone and the Windows 8 It features a simple mouse driven UI Includes prebuilt templates for content and app ideas What else can I do with it? You can easily enable advertisements in your applications to make money Your applications can be published straight from App Studio to the Stores You can export your code to further work on it in Visual Studio Where do we begin? Go to this address: http://appstudio.windows.com Once there click you will need to sign in. Where do we begin? Think of a place, a team, or a person that would have a YouTube account, a Facebook page, and a news feed or personal site. We’re going to choose the University of Central Florida. Other examples would be the Orlando Magic, City of Orlando, etc… Where do we begin? At this point you have two options: 1. Create your own Live account, or sign in with your existing account. 2. Otherwise we will come around and sign you in with our demo account! Starting a New Project Once you’ve signed in you will want to click “Start a New Project” Choose a Template Choose a Template You can click on any of the templates to see an interactive example of the app. Use your mouse to swipe up/down and left/right to explore the template in the preview window. Choose a Template For this demonstration we’re going to show you how to make a simple informational application. The best template for us to use is the “Empty App” template. Once selected, click “Create”. Now Name Your App In the top left you should have a box to fill in your application name: Now Name Your App If you plan to publish this application to either the Windows Phone and/or Windows 8 Store, make sure your that you identify your application as “Unofficial”. Michael has a funny story about why and the NBA… Give Your App a Logo Click on “Sample Logo”, you can see from this image we named my app UCF News Give Your App a Logo Now click on “App Studio Resources” Give Your App a Logo You can choose any of the logos they give you for now. We went ahead and found a logo that matched the requirements. We wanted to use this logo, so it stands out! Make sure the logo or images are legal for you to use! Check It Out! As we make changes the preview application gets updated: Every change you make should appear quickly within the preview window. Try it out! Now What Do We Do? Now your application will need content! There are four tabs, make sure you’re viewing the first one labeled “Content”. Now What Do We Do? At this point we’re going to show you a few examples for our application, but you’re welcome to try any of the content options on your own! We are going to focus on the “Basic Sections”. The First Step Choosing “Html” content as your first content section is the easiest way to start. Click this icon to add a Html section. The First Step “Section Name” is the title you want to give this screen. For ours we chose “Welcome” since it is the first screen users will see when they open my application. “Data Configuration” is the content. For HTML this can be a simple text blurb. The First Step The First Step Once you’ve written a blurb, and you like what you have. Click “Confirm” to save the changes. You should now see a blue square saying “Html </> Welcome” The First Step If you click on the X in the top right, it will delete this section. You can make changes by clicking on “Edit” beneath the section. The First Step You should now see your new section in the preview. Saving Your Work At any point you can click this button to save the changes you’ve made: It’s a good idea to do this frequently! Read All About It! It is common for large corporations, sports teams, and the like to have RSS feeds. UCF’s main website (ucf.edu) has a RSS feed listed on it. http://events.ucf.edu/?upcoming=upcom ing&format=rss Read All About It! To add an RSS feed to your app, click the “RSS” button. We named the section “Upcoming Events” to match the contents of the RSS feed. Data Configuration is the link to the RSS feed. Read All About It! Example: Read All About It! To see it in your preview swipe right to left once: Videos Text is a great way to convey information, but people like videos and pictures more! Let’s add a YouTube channel. UCF’s YouTube channel is conveniently called “UCF”. Videos You’re now… Click probably noticing a pattern by the YouTube Icon to add a YouTube section to your app. Videos For the “Section Name” we chose “Videos”. From the dropdown, we chose “User”, and for the box beneath that we entered “ucf”. Videos There down are two other options under the drop Search You can tell it what to search for and it will pull the newest related videos. This is great to help users find videos that they might not know about. Playlist Playlist allows you to control what set of videos get displayed in the application. This allows you to show videos from a variety of users/channels. Videos These are the settings we used: Videos How it appears in the preview: Facebook Everyone has a Facebook. This is an easy way to pull information about your subject into your application. UCF’s Facebook URL is “UCF”. https://www.facebook.com/UCF Facebook Click the Facebook Icon to add the Facebook section to your application. Facebook Here are the settings we used: Facebook Here is the preview: Have You Saved? Now would be a good time! Click this button: Give Your App Some Style After saving, click on the “Themes” tab. Give Your App Some Style By default the “Dark Style” theme is chosen. Give Your App Some Style UCF’s colors are black and gold. We want to match those colors in our application. We are going to change the “Foreground” to the default yellow color. We’ve also changed “Application Bar” to a light grey so that it stands out. Give Your App Some Style Here is what we chose: Give Your App Some Style Here is how the preview looks now. Give Your App Some Style Background images are great final touch, but are totally optional. Make sure you find a dark background if you have light text, and light background if you have dark text. Give Your App Some Style Click the Upload Icon next to the words “Background Image” Give Your App Some Style We chose “My Computer” to pick the background we found online. For this demo choose App Studio resources Give Your App Some Style Here is an updated preview. You should see the faint UCF logo in the background now. Give Your App Some Style Make sure to save again! Last Step Before Publishing! Tiles are the last thing we need to worry about! Tiles are the application’s icons. You will see them on a Windows Phone, or in the Start Menu on Windows 8. Tiles We would recommend again that you use “App Studio Resources” when choosing a graphic for your tiles. We are going to use the previous logo we chose, for the tiles also. Tiles Here is how it looks when you finish. Don’t worry, purple is just an example color! Users chose their own color. Splash & Lock Make tab. These sure to check out the Splash & Lock are the images that will temporary appear when your application is loading. For our application we choose to the App Studio resources. Splash & Lock Here is what we chose: Splash & Lock Time to save again! Once tab. you’ve saved click the “Publish Info” Publishing Info Your page should be similar to our example. Publishing Info Here you can finalize your application name. You can add a description for your application. This can appear on the store. If you want to publish an application that isn’t in English, you can select the language here. Publishing Info You do not need to worry about the Privacy Statement URL unless you’re going to make further changes with Visual Studio. We’ll cover that in a minute. You can enable advertisements on this tab. This requires going through PubCenter, which we won’t cover today. Finished… Almost.. Once you’re done with the Publish Info tab, click Finish. Finished… Almost.. Here is how our app looks: Finished… Almost.. Play with the previews. Make sure they look good! This is how your app should look on both devices. If everything looks good click Generate! Generate Clicking generate creates three things: Installable package: An immediately installable package that you can load onto any phone, PC, or tablet running Windows 8.1. Publish package: A zip file with screenshots, your tile, and your appx package you can take to Dev Center to publish your app to Windows Phone Store and Windows Store. Source code package: The complete source code you can edit using Visual Studio 2013. Generate It will take just a minute or two for App Studio to generate the packages. While it is generating the packages the button should look like this: Finished! Finished! From this page you can download your application and install it on your computer. (This might not work on the school computers if they have security in place!) If you would like to see your application run on a Windows phone call Michael over! The Next Step When You Leave You can export your code into Visual Studio. Take what you learn from class and expand your application! Try whatever you want! Make an application for anyone! To Export to Visual Studio Click the Source Code tab Click Download Source Code The End! THANKS FOR LISTENING TO OUR PRESENTATION AND FOLLOWING ALONG! Questions? App Studio Publishing University of Central Florida Computer Anything Science Else?