• Go DevMENTAL

    Step by Step Creating a Windows 8 app from Windows Phone App Studio

    • 6 Comments

    Windows Phone App Studio now supports the creation of Windows 8 apps in additional to Windows Phone! This post will show you how to generate a Windows 8 app and get it ready to publish.

    If you haven’t used Windows Phone App Studio before, you should check out the other resources on our  Windows Phone App Studio Resources page which include a post which explains how to build an app using Windows Phone App Studio. Don’t forget if you are in Canada your apps could earn you rewards!

    This post will explain how to

    • Preview the Windows 8 app
    • Change the Windows 8 Splash Screen
    • Update the information for publishing the application
    • Associate your app with the Windows Store
    • Generate the app files for testing and publishing
    • Test your app and capture screenshots for publishing

    Preview the Windows 8 app

    When you have finished building your app. You can preview the appearance of your app as a Windows 8 app, select Windows Preview to change from the Windows Phone preview to the Windows 8 application preview.

    image

    A pop up windows will appear giving you a preview of your application as a Windows 8 app.

    image

    Changing the Windows 8 Splash screen

    Once you are happy with the basic appearance of your app (changed the background color, content, etc, as explained in the previous posts of this series, you need to specify a Windows 8 splash screen background.

    Select Tiles | Splash & Lock. Then you can choose between two splash screen designs.

    • Solid color background with the icon you selected for your tiles.
    • A photograph as a background.
    • image

    For a solid color background, simply select the desired background color from the color drop down box.

    image

    If you wish to use a photograph as a background, Select Edit and then choose an image to use as a background. The image you use as a splash screen for a Windows 8 app should be 620x300 pixels.

    image

    Tip: If the image you want to use isn’t 620x300 pixels, you can resize it using a tool such as MSPaint. You may need to turn off the “Maintain aspect ratio” checkbox if your original image isn’t the same proportions as 620x300 pixels. This may cause the image to be skewed when you resize it, so you may have to play around a bit to find a suitable image that looks good in those proportions.

    image

    Updating the information for publishing the application

    Now you are ready to specify the information that will affect how the app appears in the Windows store.

    Select the Publish Info Tab

    Enter the app name

    Enter the app name you wish to use when you publish your app to the store. Do give this some thought, the app name is the first indication to a user of what your app can do. There is a nice MSDN article called “What to name your app” with some tips on selecting a good name.

    Enter the app description

    When a user brings up details of your app in the store, they will see the app description. This is your chance to convince a user that yes your app is the right app to download! The description should make it clear who should use this app and what the app can do. There is an MSDN article with tips on writing a good description “Your apps description

    Select your language

    Specify the language of your application. Although it is possible to create multilingual applications for both Windows Phone and Windows 8. The Windows Phone App Studio does not currently give you the ability to create multilingual applications, so you should specify the primary language of the application. If you want to make the app multilingual, you will need to export the source code into Visual Studio and add the necessary language support. For more information see localizing your apps why and how

    Specify whether you wish to include an About page for your application

    An about page allows the user to see basic information about your app

    Specify whether you wish to include advertisements in your application

    Advertising is one of the ways you can make money from your application. The more time advertisements spend displayed to users, the more money you earn. However, adding advertisements to your app isn’t quite as simple as flipping the toggle switch to enable ad clients. There are additional steps you must complete to include advertising. The Windows Phone App Studio ‘how to’ describes the additional steps. If this is your first application, I would suggest you get your app working and published, and then you come back and add the advertising later.

    image

    Windows Store Association

    The Windows Store requires you to reserve your App Name before you submit to the store. Once you have reserved the name the store will assign your application a Package Identity. You need to know this information and your name and ID as the publisher before Windows Phone App Studio can generate a package you can publish for your Windows 8 app.

    Once Windows Phone App Studio has that information, it can update a file in the package called the application manifest. That’s why you have the “Associate the App with the Store” in the Publish Info tab within App Studio.

    So how exactly do we do all that?

    Reserve your app name in the Windows Store

    First you will need a Windows Dev Center account. If you are a student, you can get one for free through DreamSpark. If not, you’ll have to pay a registration fee of $20. We won’t look at the exact steps in this tutorial, but you can create an account here. It’s a single store account for Windows Phone and Windows Store

    Once you’ve registered and logged in to your account, go to the Dev Center home page. Select Dashboard | Submit an app.

    image

    Select App Name

    image

    Specify the app name you have selected and select Reserve Name.

    image

    If someone else is already using your app name you will have to pick another name. If you have selected a valid app name then you get a message informing you that you can Save to reserve the selected app name.

    image

    The app name you just reserved will be your App Display name! Make a note of it.

    Get the information from the store needed to associate your Windows Phone App Studio app with this reserved app name.

    Find out your app identity.

    While still in the Windows Store, go to Dashboard, and select Edit for your application

    image

    Now select Services from the menu and in the text select Live services site.

    image

    Under Application Identity, make a note of the Identity Name it will be something like 1234user.YourAppName. This is your App Identity.

    image

    Now go back to the dashboard and select Profile to get your publisher information

    image

    In your profile take a note of your publisher id and your publisher name

    image

    Associate your Windows Phone Studio app with the Windows Store

    Now you have all the information you need to associate your app with the store. Return to Windows Phone App Studio, go to the Publish Info tab and select Associate app with the store.

    image

    When you select Associate App with the store, a popup window is displayed. Use the information you just collected from the Windows Store to populate the fields.

    • App Identity: This was the App identity you got from the Store Dashboard, when you selected the app you reserved, then selected Edit | Select Services, and selected the “Live Services site”.
    • App Display Name: This is the name you defined when you reserve the App name in the store
    • Publisher ID: This is the id you got from your Account profile. It should have the following format “CN=AAAAA-1111-2222-BBBBBBBBB”
    • Publisher Name: This is the name you got from your Account profile.

    Add your privacy policy

    Whenever a Windows Store app collects personal information, you must declare a privacy policy. Apps that connect to the internet retrieve the IP address of the person using the app. This information is considered personal, so therefore any Windows Store application that connects to the internet must have a privacy policy. The privacy policy tells the user how the information collected is used by the application.

    Here is a link to a post entitled “Windows 8 Certification tips: The privacy statement” . This post tells you more about the privacy statement and how to set up the privacy statement for your application.

    Once you have set up a web page (you can set up a free website for your privacy policy using Azure Web Sites). Include the URL for your privacy policy on the Publish Info page in Windows Phone App Studio

    image

    Generating the App Publishing Files

    First, open up the app you want to publish in the Windows Phone App Studio browser. It doesn’t matter what page you’re on. Select the Finish button.

    image

    This will take you to a page where you can GENERATE your app packages. You’ll notice that there is a section labelled “Previous versions” – currently this is probably blank, because this is the first version you have created.

    Select Generate.

    image

    A pop up will appear that gives you the choice of generating the code for a Windows Phone app or a package that contains code for a Windows Phone and Windows 8 application.

    image

    Once you’ve generated your app, you will see a version listed in the “Previous versions” section. Now, in the main body of the page, you will see three major options:

    · Download package – choose this option if you want to download your app to your own phone only. This is useful if you want to use your app yourself without publishing to the store, or if you want to see how it works on your phone before publishing it.

    · Download publish package – choose this option to go straight to publishing without changing your code or taking screenshots. If you do not have Visual Studio, this is the option you should take.

    · Download source code – choose this option if you want to edit your code or take screenshots using an emulator.

    Test your app and capture screenshots for publishing

    Now we are going to install the app on our pc, so we can test it and capture screenshots. You will need a screenshot to publish your app to the store.

    Install the certificate

    First we need to install a certificate so that our PC or laptop will trust the app we are about to install. Expand Pre-requisites and choose Install Windows 8.1 Certificate. Save the downloaded file to somewhere you can find it afterwards. I created a subfolder called AppStudio.

    image

    Navigate to the folder and you will find a file called Add-RootCertificate.zip. Select that file and either right click and choose Extract All, or select the file and choose Extract All from the menu to extract the contents of the zip file.

    image

    Now right click the file Add-RootCertificate.ps1 and select Run as PowerShell script

    image

    image

    You will probably get a prompt warning you that this is a script file that could harm your computer. You must allow the program to run to continue and install the certificate.

    When the program runs you will see a window appear asking you to make sure you are logged in as the administrator on your machine. It will prompt you to hit Enter. When you hit Enter, you will receive one or two more warnings, after you select the option to run the script the certificate will be installed.

    NOTE: The reason you are getting so many warnings is because PowerShell is a tool system administators often use to change settings on your computer. It’s very useful, but because it can change computer settings, that means if a hacker managed to trick you into running a malicious powerscript file on your computer it could get your computer pretty messed up. As is always the case! Only download and run files from sources you trust!

    Install the application

    Now we have our certificate installed, we can install our application

    Under installable packages select the Windows 8.1 installable package

    image

    Navigate to the folder and you will find a file called StoreApp.zip. Select that file and either right click and choose Extract All, or select the file and choose Extract All from the menu to extract the contents of the zip file. Just like you did with the certificate zip file.

    Now go into the extracted contents and find the file called App-AddDevPackage.ps1 . This is another PowerShell script, but this one will install your application. Right click on the file and choose Run with PowerShell just like you did with the script that installed your certificate. A window will open as the app runs and after it runs a message will display saying your app has been installed successfully

    NOTE: This app is a Windows 8.1 app so you must be running Windows 8.1 to install and run your application.

    Run the application and capture screenshots

    Now you can run your application. The easiest way to launch your application is to press the Windows Key button on your keyboard and then type the name of your application.

    image

    image

    Then select your application from the search results and you can see your app up and running!

    When you publish your app you will want a screenshot, you can use the keyboard combination of <Ctrl>+<Shift>+<PrtSc> to get a screenshot to your clipboard. Then open Paint, and choose Paste and now you have your screenshot in Paint where you can save it to use when you publish your application. You many want to create several screenshots showing off different aspects of your application. Here is a screenshot of my application in Windows 8.1

    image

    I now have a working application for Windows 8.1 and screenshots so I have everything I need to publish my app to the store! Now it’s your turn!

  • Go DevMENTAL

    Visual Studio Tips and Tricks – Formatting your code

    • 1 Comments

    VisualStudioLogoWith a little setup and a keyboard shortcut you can easily keep your code formatted the way you want it!

    We all have our habits in terms of how we format our code. So why not take 5 minutes to modify the Visual Studio settings so the code looks the way you want all the time! No matter what programming language you work with, there are settings you can control that affect the readability of your code.

    Find more Visual Studio tips and tricks here

    In this post I’ll share tips on how to modify a number of formatting settings, including

    • Fonts and Colors
    • Indenting
    • Spacing
    • Braces
    • Line Wrapping

    Fonts and Colors

    In addition to be able to changing the color theme in Visual Studio, you can also modify the font size or the colors used for different highlighting in your code. If you find the green hard to read for comments, you could change the font size, font color, or background color.

    Just go to Tools | Options | Environment | Fonts and Colors (TIP: if you can’t remember that and are in Visual Studio 2012 or higher you could just use Quick Launch to find the Fonts and colors setting!)

    image

    image

    Indenting code

    Is the indenting too much or too little? You decide. The default indentation and tabs is 4 spaces, but you can increase or decrease the indents. Once again, you want to start in Tools | Options | Text Editor | C# | Tabs

    image

    image

    When you return to your code, you will notice the changes have not taken effect. Just use the keyboard shortcut <CTRL><K><D> anywhere in your code to apply your formatting changes. Here you can see the code with the increased indentation after I apply the changes.

    image

    If you are using the Quick Launch featured just search for “tabs”

    In addition to controlling the number of spaces used when code is indented, you can control what is indented. For example, do you prefer to have your braces indented? or inline with the method declaration?

    image

    image

    Braces

    Does the opening brace for a method go after the method name or on the next line? I could start a whole debate over that, but instead I’m just going to let you set it up the way you want it to work! You can control where opening braces appear for method declarations, control blocks and more! Just go to Tools | Options | Text Editor | C# | Formatting | New Lines or search for braces in Quick Launch.

    image

    image

    If you make a change in the settings, don’t forget you will have to use the keyboard shortcut <CTRL><K><D> to apply your formatting changes to existing code.

    Spaces

    Did you know you can control whether you have spaces around parameters in method calls, or expressions in your if statements? Once again this is really a question of personal preference, but great that you can control the settings yourself! Just go to Tools | Options | Text Editor | C# | Formatting | Spacing

    Some people prefer spaces around expressions in if statements to make them more readable.

    image

    image

    Line wrapping

    If you grew up coding in C or using Unix you probably love to fit as much code on one line as you can! But some programmers really like to keep code spaced out across line with clear indentation to make code more readable. Once again, it’s all up to you! Just go to Tools | Options | Text Editor | C# | Formatting | Wrapping and pick the settings you prefer.

    image

    image

    Where can I get Visual Studio 2013?

    All the features above are available in earlier editions of Visual Studio, but there is a lot of great stuff waiting for you in Visual Studio 2013. So if you haven't downloaded a copy yet. Download it and start exploring today.

  • Go DevMENTAL

    Visual Studio Tips and Tricks: Enhanced Scroll Bar

    • 6 Comments

    Preview and identify code faster with the enhanced scroll bar feature added in Visual Studio 2013

    Find more Visual Studio tips and tricks here

    Fans of Sublime will be happy to see new feature in Visual Studio 2013. The enhanced scroll bar highlights and previews code in your file. This post will cover

    • Highlighting code with the enhanced scroll bar
    • Previewing code with the enhanced scroll bar
    • How to get Visual Studio 2013

    Highlighting code with the enhanced scroll bar

    Take a look at the following screenshot from Visual Studio 2013, notice the different color indicators in the scroll bar. These indicators highlight different points of significance in my code.

    Visual Studio 2013 Enhanced Scrollbar

    When you make changes to your code, the scrollbar highlights the locations of your modified code using yellow

    image

    Locations of breakpoints are highlighted with purple.

    image

    Locations of compilation errors are highlighted with red

    image

    The current cursor location is highlighted with a bar.

    image

    Previewing code with the enhanced scroll bar

    By default when you install Visual Studio 2013, the scroll bar is in bar mode. If you want to preview code with the scroll bar you must change it to map mode. To change the scroll bar mode, right click on the scroll bar itself and choose Scroll Bar Options from the context menu. You could also locate the scroll bar settings by typing “scroll bar” in the Quick Launch, or by navigating to Tools | Options | Text Editor | All Languages | Scroll Bars from the menu.

    To see a preview of code using the scroll bar change the behavior from “Use bar mode for vertical scroll bar” to “Use map mode for vertical scroll bar”

    image

    In map mode, the scrollbar shows thumbnails of the code, and if you hover over the a portion of the scrollbar, you see a preview of the code at that location.image

    You can control the width of the scrollbar in map mode by changing the Source Overview in the scroll bar settings. Turning off the Show Preview Tooltip setting would turn off the code preview that appears when you hover over the scrollbar.

    image

    Yet another reason to upgrade to Visual Studio 2013!

    Where can I get Visual Studio 2013?

    The enhanced scroll bar is a new feature in Visual Studio 2013. So if you haven't downloaded a copy yet. You can download it and start exploring today.

  • Go DevMENTAL

    Winning on the Marketplace: Tips on getting promoted

    • 0 Comments

    Once you have built your app or game and have published it into the Windows Phone Marketplace, you’re likely going to want to monitor the uptake of your app via download and (potentially) revenue statistics.  You are also going to want to find ways to market your app to people who may not know about it.  There are several ways of doing this, some more costly than others.  One of the most effective ways of marketing your app is actually completely free – have the Windows Phone Marketplace showcase your app!  It sounds easy but there are a few things you need to do to increase the chances of this happening and that is what this post focuses on.

    One of the more effective ways of marketing your app is being chosen for promotion in the Windows Phone Marketplace.  We’ve seen how being promoted in the Marketplace can materially affect the download numbers of you app in a positive way.  The Windows Phone Marketplace offers a great number of different ways your apps can be promoted as well, which we will talk about, but first here is a graphic that shows the different ways you can be promoted and how each type of promotion increases your downloads (based on averages from apps that have been promoted on the Windows Phone Marketplace in similar ways in the past):

    PromotionStats

    In essence, there are 3 types of promotion available on the Marketplace and the graphic above shows those ways.  Each has value and being featured in any of those buckets can mean good things to the adoption of your app or game.  Each type of promotion is unique and their values are described below:

    • Panorama Placement:  Panorama placement is the premiere placement for promotion on the Windows Phone Marketplace.  In essence, the when a user opens the Marketplace app on his/her phone, that user will be greeted by a panaroma image of your app (this is the panorama image that you included with your app upon its submission for certification).  The value of this placement is immense as we have seen a 2000% increase in downloads for an app (on average) that is featured in panorma mode.
    • Featured Icon Placement:  Being promoted as a featured icon is the second best way to be featured on the Marketplace.  Your app/game will be seen on the very left portion of the screen of the panorama of the Marketplace (i.e.:  if you flip the screen left by one full phone screen).  Your tile is prominently shown as is the app name, basically enticing users to tap on it and explore what your app entry on the Marketplace says.  Apps that get Featured Icon Placement on average see an 800% increase in app/game downloads during their time being featured.
    • Featured List:  The third mode of getting featured in the Marketplace is the Featured List.  In this list, your app will be featured alongside a number of other apps.  Featured List apps appear in the list of apps in the categories of the Marketplace.  While your app is not as prominently visible compared to the other two methods, it does return an average of a 150% increase in app/game downloads.

    As you can see, being featured is very much worth your while.  While your app is featured (usually for a period that lasts anywhere from 3 to 5 days), you will likely see a noticeable uptick in your app downloads which you can then amplify through any other marketing methods you choose to use throughout your app’s lifecycle.

    So how do I get promoted?

    So you’re sold on the whole featured app thing and want in.  How exactly do you get your app featured?  While there is no specific steps that will guarantee your ability to be featured, the featured apps process is implicitly a fair one (the best, most popular apps will bubble up to the top).  If you feel you have a great app or game, you should read the following sub-sections to get a better understanding of how the Marketplace team assesses quality apps.

    gettingpromoted

    Functionality

    A functional app is more than one that passes the Marketplace certification.  Think of a functional app as a contract between yourself and the user.  When a user downloads your app or game, they are likely doing so either from the description of your app on the Marketplace, it’s screenshots or by recommendation from friends or other users (including ratings).  In any case, they expect your app to have an experience that is consistent with any of those inputs.  If it’s not, then the app is likely to be less popular and as a result, be less likely to be promoted.

    Functionality

    Utility

    An app that shows utility is one that thoughtfully includes features that take advantage of the Windows Phone platform.  Features like Live Tiles, Search Extras, multi-tasking and the like.  It also refers to apps that differentiate themselves with amazing user interfaces that are both visually appealing as well as intuitive and productive.  The Marketplace team also look at the stickiness of the app, which is another way of saying “is this an app that users will use often?”.

    Utility

    Delight

    The final area of differentiation that the Marketplace team will look at in apps and games is how the app will delight users.  This is where most featured apps really, really shine.  If the app shows a “wow factor” (a decidedly unscientific term for sure, but you generally know it when you see it), if it is really unique and has something that no other app or game has, then that is a way that your creation will delight users. 

    A must for the delight factor is proper and effective use of Metro, the Windows Phone Design language.  This is more than just square tiles and lots of text.  To implement Metro properly, you need to take into account a number of principles of the Metro design language (see here and here).  If your app follows these principles properly, your app will look amazing on Windows Phone and have a truly awesome experience on the platform.

    delight

    As you can see, you need to think hard about the quality of your app if you hope for it to be featured.  That said, the payoff of getting featured might very be worth the effort you put in.

    I have just one last tip for you before this blog post series on Marketplace success strategies is finished:  When looking at apps to build, sometimes being featured is a numbers/statistics game.  If there are categories within the Marketplace that are currently underserved compared to other categories (for example, as of the publication date of this post, the Politics section is light in apps compared to other categories like Entertainment and Sports), then your chances of getting featured are that much greater.  Just food for thought…

    This post was the fifth and final post in a series of five posts on strategies for being successful on the Windows Phone Marketplace. The first post (publishing in the right geographies) is here. The second post (trial mode and the art of the upsell) is here. The third post (finding the pricing sweet spot) is here. The fourth post (the differentiation game) is here.

  • Go DevMENTAL

    Got a WordPress site? Bring it to Windows 8 quickly and easily

    • 3 Comments

    wordpress This open source template makes it easy for you to take a WordPress site and provide it’s content through a Windows 8 store app

    if you are a WordPress user (Wordpress.org this template does not support Wordpress.com), there is an open source Windows 8 template built by IdeaNotion you can use to quickly create a Windows 8 store app to showcase the content on your WordPress site.

    The app created by the template allows a user to

    • View your blog posts by category
    • View recent blog posts
    • View your pages
    • View and post comments
    • Bookmark favourite posts
    • See post information in the live tile for the application
    • Use the Search charm to find content
    • Use the Share charm to share a favourite post

    You can download the source code and there is a quick start guide from IdeaNotion to help you out as well.

    Make your WordPress site available to more users through the Windows 8 store! Don’t forget students can publish their Windows 8 apps for free!

Page 5 of 82 (409 items) «34567»