• Go DevMENTAL

    Your last chance to get awesome prizes for your app!

    • 10 Comments

    There are tons of prizes to be won! $2500 grand prize.Would you like a chance to win $500? $2500? a new Nokia 820 phone? Time is running out to publish an app and get great stuff through the developer movement.

    The final challenge is underway, Publish as many qualifying Windows 8 apps as you can from May 13 until June 15th, 2013 and for each app you publish you’ll automatically be entered into a draw for a chance to win

    What could you win?

    • A grand prize of $2500
    • 1 of five $500 cash prizes
    • 1 of ten new Windows Nokia 820 phones

    That’s just the challenge! Remember everyone who submits a qualifying Windows Phone, Windows 8, or Azure app gets rewards!

    • Publish a Windows Phone or Windows 8 app get 5000 points
    • Get a 5000 point bonus for publishing your first app
    • Get 1000 points just for registering for Developer Movement

    If you are a few points short of that reward you are after, look up all the ways you can earn points

    Aside from the challenge which gives you a chance to win the prizes listed above, everyone gets to cash in their points for rewards!

    • 11,000 points gets you an Xbox 360 Kinect
    • 13,000 points gets you a Seagate hard drive

    Check out all your amazing choices of rewards

    So dust off that half finished app you started three months ago and finish it up! Or build that app that you’ve been thinking about for the last 6 months but just haven’t gotten around to sitting down and coding. Below are some resources to help you create and publish your app!

    Never published an app before?

    Never built an app before?

    Just looking for a few things to help you build an app faster?

  • Go DevMENTAL

    Step-by-Step – Making Windows 8 Pong for a complete beginner

    • 0 Comments

    Instead of building Hello World to get started learning Windows 8 development, consider customizing your own version of Pong.

    “I want to build a Windows 8 app/game, but I don’t know how to get started.”

    “I want to do a workshop with some kids but I am not sure what to do.”

    “I want to do a workshop with a group who has little or no coding experience, what can I do?”

    “I know how to code but I’ve never built a game, how do I get started?”

    In my role as technical evangelist, I get asked questions like that a lot! A couple of months ago, one of my team members built a version of Pong with HTML5/JavaScript. It’s not a complicated game, in fact he originally wrote it as a tool to help XNA developers get started with HTML5/JavaScript. But, because he took the time to structure and comment the code, we discovered this template also makes a fun workshop/hands on lab for beginners.

    When I’m learning I work best with a goal in mind, and it helps if I am having fun. That’s the spirit of this how to guide.

    I sat down with my 10 year old son, who is comfortable playing with computers but doesn’t really know how to code, and I gave him these instructions and with it he was able to create PokePong (which we also published, he was VERY excited to download it from the store).

    But enough talking. If you or someone you know is interested in getting started with Windows 8 development, but is not an experienced coder here are step by step instructions to get started with Windows 8 apps by making your own version of pong. Here’s what you’ll find in this Step by Step guide.

    • Getting everything installed to edit the game. (Download and install Windows 8 SDK, Do you already have a copy of Visual Studio 2012? If you don’t already have a copy of Visual Studio 2012. How do I know the SDK is installed correctly and I can start coding?)
    • Download and install Pong. (How do I know Pong is installed correctly?)
    • Create the art assets for your pong game (What images do you have to create? How do you create a new image and specify the size? How do you make transparent backgrounds?)
    • Replace the default Pong images with your own images. (Change the Asset images, Is your background getting cropped? Change the tiles and icons for your game, Changing the background color of your splashscreen or tile.)
    • Updating the information about your app so its ready to publish!
    • Create a production version of your app for the store.
    • Take your game to the next level (now that you are comfortable with Visual Studio and the environment, explore and change the code!)

    Getting everything installed to edit the game

    Download and install Windows 8 SDK

    Install the Windows 8 SDK. Installing the Windows 8 SDK gives you a copy of Visual Studio Express you use to edit the project. NOTE: You must be running Windows 8 to install the Windows 8 SDK.

    Do you already have a copy of Visual Studio 2012?

    If you do have access to a full version of Visual Studio 2012 and Expression Blend, install it before you install the Windows 8 SDK. When you install the Windows 8 SDK it will detect your copy of Visual Studio 2012 and install the Windows 8 templates into your existing copy of Visual Studio. Visit the windows dev center (dev.windows.com) to download the tools and SDK.

    If you don’t already have a copy of Visual Studio 2012

    If you do not have a copy of Visual Studio 2012 already, then all you need to do is download the tools and SDK and it will install a copy of Visual Studio 2012 Express and Blend for Visual Studio on your system so you can start developing.

    How do I know the SDK is installed correctly and I can start coding?

    If you can launch Visual Studio 2012 or Visual Studio 2012 and choose File | New Project then choose either Visual C#, Visual Basic, Visual C++, or JavaScript and you can see a set of templates called Windows Store similar to the screen shot below. You are ready to start coding!

    File New Project

    Download and install Pong

    Download the Pong Game from SkyDrive to your computer. You will get a .zip file containing all the files required for Pong.

    Unzip the package to a folder on your computer.

    How do I know Pong is installed correctly?

    Launch Visual Studio 2012

    From the menu choose File | Open | Project/Solution and then navigate to the folder where you unzipped the package.

    Go to the subfolder HTML5 Template Complete and select the file HTML5_Template.sln and select Open.

    file list

    The .sln file is called the solution file, when you open a solution file Visual Studio will open the solution and all the files that make up that solution. In this case, Visual Studio will open up all the files that make up the Pong Game.

    You may be prompted to only open projects from a trustworthy source, you will have to select OK to continue and open the project.

    clip_image005

    After the solution is open, your Visual Studio should look something like the screenshot below. The name of the project you opened is in the top left corner and you should see a list of files in the Solution Explorer Windows on the right hand side.

    clip_image007

    Next you need to run the pong game to make sure all the code is working on your computer.

    There are two ways to test the game.

    • You can launch it inside a simulator, this pops up a separate windows on your desktop with the game running inside the window. It takes up more memory and will be a bit slower to launch if you run it this way.
    • You can launch it on your local machine. If you do this, your PC will actually run the game as if you had clicked on the tile to launch the game from your Start Screen. When you want to exit the game and go back to Visual Studio just use <CTRL>+<D> on your keyboard to return to the desktop.

    To test the game go to the menu and find the drop down arrow beside the play button where it says Local Machine, use that drop down to select either Local Machine or Simulator.
    After you select your preferred testing option, select the play button or use <F5> to start the game.

    clip_image008[4]

    Go ahead and try out the game. You have now successfully installed the Windows 8 SDK and the Pong game on your computer

    clip_image010

    When you want to leave the game, return to Visual Studio (<CTRL><D> takes you back to the desktop) and select the Stop button to Stop running the code.

    clip_image011

    Create the art assets for your pong game

    In this workshop we are going to have some fun personalizing your own version of Pong. You can create your own paddles, ball, background, sounds, and tiles.

    What images do you have to create?

    Here are the assets you should create and their dimensions. Don’t worry I’ll explain what tools you can use to draw your assets and how to set the size of the images.

    • Game Background 480 X 320 pixels
    • Paddle 22X75 pixels (you can create one or two paddles, it depends if you want the player to have the same paddle as their opponent)
    • Ball 30X30 pixels
    • You Win pop up screen 200X90 pixels
    • You Lose pop up screen 200X90 pixels

    Because you are creating a Windows 8 app you will also need to create images to display on the various size tiles and the splash screen that is first displayed when you launch the app

    • Splashscreen Image 620X300 pixels
    • Logo 150X150 pixels
    • StoreLogo 50X50 pixels
    • SmallLogo 30X30 pixels

    If you have no artistic talent, here are some royalty free art assets to help you out

    How do you create a new image and specify the size?

    I would suggest downloading the free tool Paint .NET

    Let me walk you through creating a paddle image. These should be 22X75 pixels.

    Start Paint .NET choose File | New from the top menu. When the popup windows is displayed enter the width and height in pixels of the image you want to draw then select OK.

    clip_image002

    Now you can start drawing! For the smaller images, you will want to zoom in using the zoom buttons so you can see what you are doing.

    clip_image003

    The toolbar on the left lets you choose how you draw your object.

    • Use the paintbrush to draw thicker lines
    • Use the pencil to draw thinner lines
    • Use the paint bucket to fill an entire area with a single color
    • Use the shape buttons to draw specific shapes such as squares
    • Use the Text button to add text
    • Use the Eraser to erase the background and make it transparent

    clip_image004

    As you start to draw you will see a history Window appear, this is very useful because you can use the back arrow to undo one or more steps if you make a mistake.

    clip_image005

    To change the color, you will need the Colors Windows. So go to the top menu and choose Windows | Colors

    TIP: If you accidentally close any of the other windows like history, or the toolbox, you can open them again by selecting them in the Windows menu.

    Choose Primary from the dropdown list and pick the color you want to use when you draw from either the color wheel or the color palette.

    clip_image006

    Have fun drawing and experimenting until you have the image you like, then save it as a .png file

    clip_image007

    How do you make transparent backgrounds?

    Have you ever put an image on a PowerPoint Slide and there was a white rectangle around the image? To avoid that effect with your paddle and ball you will want to create a transparent background.

    The easiest way to do that in Paint.NET is to select an area that you want to be transparent and then use the DELETE key to erase that area.

    There is a magic wand selection tool in the toolbox. If you click that wand and then click on an area it will select everything of the same color.

    clip_image008

    Tap the DELETE key and you will see a checkerboard background, the area with the checkerboard background is now transparent.

    clip_image009

    If the area you are trying to make transparent isn’t all one color, you have two other ways to erase the background

    Option 1 – Use the eraser on the toolbar to erase the background. Set the brush width to control the size of your eraser and zoom in and out for up close work.

    clip_image011

    Option 2 Use the lasso select to select an area and delete it.

    clip_image013

    clip_image015

    TIP: You can also use Lasso select to select the part you do NOT want to make transparent and then use <CTRL>+<I> or Edit|Invert Selection from the menu to invert the selection and erase everything else!

    clip_image017

    clip_image019

    There you have it, you are ready to build some cool art assets for some fun versions of Pong!

    Replace the default Pong images with your own images

    Now that you have the game loaded in Visual Studio you can start changing the art assets.

    Change the Asset images

    In Visual Studio, in the Solution Explorer window, expand the Assets folder.

    clip_image002[4]

    This is the folder where the images are location

    • ball.png – the ball
    • bg.png – the game background
    • paddle.png – the paddle
    • win.png – the You Win screen
    • lose.png – the You Lose screen

    Now you can go to Windows Explorer and overwrite these files with the art assets you created.

    Go to Windows Explorer and navigate to the folder where you unzipped the project files. Then navigate to the subfolder HTML5 Template Complete | Assets.

    Replace the existing files with your image files.

    Now test the game and see how it looks (Select the play button or use the <F5> key)

    Is your background getting cropped?

    Depending on the type of background you drew, you may find that the image is being chopped off at the edges. There are two variables in the code called SCALE_X and SCALE_Y that determine the size of your background image in the game. You can adjust this number up and down until you like the way it looks. For my background image, setting these variables to 2.9 worked nicely.

    To adjust the scale:

    1. Go to Solution Explorer

    2. Expand the js folder

    3. Double click on the file default.js to open it in the file editor

    clip_image004

    You will now see the code for the default.js javascript file appear in the code editor.

    Scroll down until you locate the variable declaration for SCALE_X and SCALE_Y

    clip_image005[4]

    Change the values and test the game again, keep trying different numbers until you are happy with the appearance of your background on the game screen.

    Now save your changes by choosing Save All in the menu. Wondering why there are two different save buttons? That’s because the solution is made up of multiple files. Clicking on the single diskette only saves the active file, clicking on the multiple diskettes saves all the files that make up the project.

    clip_image006[4]

    Change the tiles and icons for your game

    When you launch the game you may have noticed you get a box with an x through it. That’s the default splash screen image. If you look at your start screen you will also notice you have a default tile for your game as well. Our next step is to change the images that appear on the tiles and splash screen of your game.

    Go to Solution Explorer and expand the images folder.

    clip_image007[4]

    The images folder contains the files for the logos that are displayed on the splashscreen and tiles.

    • Logo.png – appears on the tlie
    • Smalllogo.png – appears on the tile when you zoom out on the start screen
    • Splashscreen.png – appears when the app is starting up
    • Storelogo.png – appears when someone is looking at your app in the store.

    Now you can go to Windows Explorer and overwrite these files with the art assets you created.

    Go to Windows Explorer and navigate to the folder where you unzipped the project files. Then navigate to the subfolder HTML5 Template Complete | Assets.

    Replace the existing files with your image files.

    Now test the game and see how it looks (Select the play button or use the <F5> key)

    Chances are your new splash screen image looks great but now you are thinking, ugh how do I change the background color so it looks nicer.

    Changing the background color of your splash screen or tile

    The background color of your splash screen and tile is set in a file called the app manifest.

    1. Go to Solution Explorer

    2. Double click on the file package.appxmanifest to open the app manifest editor in the editor window.

    clip_image009

    3. Scroll down the tab marked Application UI, you will find a field where you can specify the background color of the tile and a field where you can specify the background color of the splash screen.

    The field expects you to enter the hexadecimal or hex code for the color. A hex code is a code used to specify colors on web pages it represents the amount of Red, Green and Yellow required to create the color. Since you probably have no idea what the code is for different colors here are two ways to find the hex code for the color you want.

    If you just want to look at different colors and pick one you like

    · go to this Web Color Picker (www.colorpicker.com) and click on the color you want, and find out the corresponding code.

    If you are a perfectionist, and want the color to match the color you put on your splash screen logo perfectly.

    1. Open your splash screen logo in Paint .Net

    2. Select the color picker from the Tools Window

    clip_image011[4]

    3. Now click on the area that has the color you would like for your splashscreen

    4. Now display the Colors Windows, by using the <F8> key or choosing Windows Colors from the menu.

    5. The primary color is the color you just selected. Select More and you can get the hex code for that color.

    clip_image012

    One you have the code for the color you want, enter it as the background color. Don’t forget to put the # in front of the code! If you forget you will get an error message telling you it’s an invalid color.

    clip_image013

    Now test the game and see how it looks (Select the play button or use the <F5> key)

    Updating the information about your app so its ready to publish!

    Okay you now have a working Pong game and it looks good! Your next step is just to specify a few values in the app manifest file to get it ready to publish.

    Go to the Application UI tab of your app manifest (the same file you edited to set the background color)

    Set the Display name to the name you want to give your app

    Populate the Description with text that describes your game.

    clip_image015[4]

    Now go to the Packaging tab

    Specify a Package Display Name and a Publisher Display Name (your publisher display name should be the name of your Windows Store account)

    clip_image016

    Save your changes by selecting Save All from the toolbar.

    clip_image017

    Create a production version of your app for the store.

    Your next step is to create a build of your app that is production ready!

    Change the Build type in the menu from Debug to Release.

    clip_image018

    From the menu select Build | Build Solution this will create a compiled version of your application ready to package and submit to the store! You will know the build worked if you see the message

    Build: 1 succeeded, 0 failed appear in the Output Window.

    If you see a few warnings appear in the Output Window don’t panic your app can still be published and still works. If you see Errors, those will need to be fixed before you can publish your app.

    clip_image019

    Congratulations you have an app that is ready to submit to the store!

    Take your game to the next level

    Of course you can do more than just change art assets, you can start exploring the code to make the game more interesting or challenging! Here are some suggestions of code changes you can try

    Less than 10 lines of code

    • Make the ball faster
    • Make the paddle or ball smaller

    10-100 lines of code

    • Make the ball go faster every ‘x’ hits
    • Change the appearance of the ball every ‘x’ hits

    More than 100 lines of code, but still something you can do!

    • Make a target of some sort appear on the screen and if you hit it get extra points, or change something in the game (ball speed, paddle size)
    • Allow the player to move the paddle left and right as well as up and down
    • Use your imagination!

    If you want to publish your game, follow the links to find instructions on how to create your account and publish your app .

  • Go DevMENTAL

    Step-by-Step creating an app to find the nearest…

    • 2 Comments

    Can you really just take a template, change the data source and have a useful app? If you find the right data source, then the answer is yes.

    OpenDattoronto parking screenshota is an amazing concept. Organizations (especially municipal, provincial, and federal government) give the public access to their data so it can be used for websites and apps.

    That’s how we get apps that tell us stuff like how did this restaurant do on the health inspection, or find the hockey arena. I was very excited when I saw the Finder App Template developed by Mark Arteaga because it claims to be a template that allows you to use Open Data to create a useful Windows 8 app.

    The promise: A template developed to allow developers to quickly and easily create a location based type application for the Windows 8 store. It allows a developer to easily pull existing point of interest data into the app to visually display on a map.

    The reality: It works, but there is  little extra homework for the app developer. You have to get a Bing Maps Key so your app can use Bing Maps (details in the section “Creating a Bing Maps developer account”.) It will take you a little while to find a suitable Open Data set (details in the section “finding a data source”), and you’ll have to edit the code to add a privacy policy (details in the section “Adding a privacy policy”) but once you overcome those hurdles, you have an app with very good functionality!

    • Map displaying the points of interest
    • Ability to show detailed information for a particular point
    • Ability to search the data using the search charm
    • Ability to share a particular point of interest on the map with the Share Charm
    • Ability to get directions from current location to a selected point of interest on the map

    What will you need before you start?

    • The Windows 8 SDK installed on your PC (which includes Visual Studio 2012 Express)
    • The Bing Maps SDK installed on your PC (since this app template uses Bing Maps)
    • An Open Data Source, in JSON format, that contains latitude and longitude information (more information on that and how to find it in the explanations below
    • A name for your application

    Downloading the template

    The template is available on github it’s called Win8_FinderApp_Client

    You download it by selecting the Zip button from the toolbar

    Github

    Then you just unzip the file and you will have an Project that shows you a map representing flu data.

    Running the project the first time

    If you are like me you will want to run the project as is to make sure it works before you start making any changes.

    To open the project in Visual Studio, go the folder where you extracted the zip file. Go to the subfolder Win8_Finder_App_Client-master | FinderApp and you will find a file called FinderApp.sln. Double click on the FinderApp.sln file to open it in Visual Studio. FinderApp Solution File

    As always happens when you try to open an open-source project in Visual Studio, you are warned that Visual Studio has no way of knowing if you can trust this source code, you will have to select OK to continue and open the solution.

    security warningDebu

    After the project is open in Visual Studio, launch it by selecting the Debug button on the top menu.

    debug

    If you have not already installed the Bing Maps SDK the app will not run and you will get the following error message.

    bing error

    You can download the Bing Maps SDK here

    The app will launch and ask permission to access your location (that enable the app to provide directions to the locations on the map). But when the app launches you get an error message on the screen

    “The specified credentials are invalid. You can sign up for a free developer account at http://www.bingmapsportal.com

    You see this app template uses Bing Maps, and in order to use the Bing Maps API in an app you have to sign up for a Bing Maps developer account. Creating an account is free, so don’t let this stop you from continuing.

    Creating a Bing Maps Developer Account

    Okay so let’s create a Bing Maps Developer Account and then maybe we’ll be able to get rid of that error message, besides which we’ll need it for our app!

    Go to www.bingmapsportal.com and select Create a Bing Maps Account

    create bing map account

    You will be prompted to log in with a Microsoft account (e.g. live.com account, outlook.com account). If you don’t have one you can create one now by selecting Sign Up Now from the bottom right corner of the log in screen. You will need a Microsoft account to publish your app to the store anyway.

    Then you will be asked if you want to use this Microsoft account as your Bing Maps Account.
    Select Continue to continue and access your Bing Maps Account.

    access Bing maps account

    Now you specify the account details for your Bing Maps Account

    bing account details

    Okay you have an account, now what!

    Getting a Bing Maps Key

    Bing maps offers some great services, and if you start using their services a lot, at some point you end up paying for them, but don’t worry, you won’t reach that point building one Windows 8 app!

    For each app that you build that will access the Bing Maps APIs you have to have key. So the next step is to Create a key. Select Create or view keys from the left hand menu.

    Create key

    If you read the notes under the heading My keys, it says you can create two keys (Trial or Basic) for most application types and one additional Windows Store app Trial key under this account. Trial keys expire after 90 days. If you are just exploring you can create a trial key, but I want to publish my app so I am going to create a Basic Key that will not expire.

    So I specify the name of the application I am creating, key type Basic, and Application Type Windows Store App, then I enter the captcha (that’s what they call those combinations of characters used for security), and select submit.

    NOTE: If you aren’t sure what app name you want to use, don’t worry. You can come back and change the app name later.

    create key

    After you hit submit you should see a message Key created successfully and at the bottom of the screen you will see your Key, along with the associated app name and expiry date. If you selected a Basic Key type Expiration Date should be None.

    Updating the Finder App to use your Bing Maps account

    Now you have a Bing Maps account and a key, we can return to Visual Studio to update the code with our key and get rid of that error message!

    In Visual Studio go to the Solution Explorer window, expand the js folder and double click the config.js file to open it in the code editor window.

    Config.js file

    Now Search through your config.js file <CTRL><F> can be used for search, or you can just scroll down and find bingMapsKey

    Change the string “SET-YOUR-KEY-HERE” to the key you just created in your Bing Maps account

    bingMapsKey: "SET-YOUR-KEY-HERE"

    becomes something like the following

    bingMapsKey: "CjPXec5-PjxGZYbhyroKJlNr-eGxSNnB1MG5j-QtvhRYhvxlj7Go67zqnUiMoKiI"

    NOTE: Yes you can cut and paste the key from the screen in your browser!

    Now run the program again, you should no longer see the error message and you can now try out the app, click on one of the pushpins, choose directions or details, try bringing up the Charms ( <Windows><C> ) and try Search or Share.

    Congratulations you now have a valid Bing Maps account, so now all we need to do is change the data displayed in the app!

    Finding a data source to display in your app

    If you scroll through the config.js file you will find the following code, this is the code that defines what data will be displayed on the map.

    /**

    Sample Flu Data from server

    **/

    appName: "Sample Server Flu Data",

    staticUrl: "http://finder-server-sample.azurewebsites.net/api/data/flu_data",

    pathToArray: "",

    latitudeField: "latitude",

    longidudeField: "longitude",

    nameField: "location",

    secondaryField: "address",

    detailField: "location",

    If you read Mark Arteaga’s Finder App quick start guide, when he describes the point of interest data, he mentions that you have to have JSON data.

    NOTE: If you are a coder and comfortable with data, you can of course update the code to read other data formats. But if you are not a coder, I would suggest you find a data source that provides the JSON format to keep it simple for now.

    So where do I find Open Data in JSON format that would be good for a Windows 8 app?

    There are LOTS of Open Data Catalogues out there, so now it’s time to have some fun doing some pouring through web sites and see what you can find.

    Try search terms such as “your city name” “Open data” you may discover your hometown has an open data catalogue ready to use. You can also search for open data for a particular country or region.

    I grew up in Fredericton, New Brunswick, so let’s see what I can find for Freddy Beach…

    search results

    Instantly you see an Open Data Home page for the City of Fredericton, further down there is another promising link called Open Data Sites which appears to provide a catalogue of open data for the government.

    Once you select a link, try to look for a list of all the different open data available, it’s often referred to as a Data Catalogue.

    Once you find that list, keep an eye out for the Format! You are looking for data that is in JSON format.

    Fredericton open data

    Some data catalogues will even let you search by format, which is helpful since we are looking for a specific format.

    Unfortunately Fredericton has lots of great data, but none of it is JSON, so let’s try somewhere else!

    The City of Vancouver has some JSON, this is interesting, how about data about local playing fields and their status. I might well use an app that I could quickly use to see if my soccer or softball field was open the day after a big rain storm or early in the spring when the snow is still melting.

    Open Data format

    If I click on the Lync to see the JSON Data, I see the following data for each park:

    {

    "json_featuretype":"WeekendPlayfieldStatus"

    ,"weekend_status":"User discretion"

    ,"park_name":"Adanac Park"

    ,"closure_notes":"Summer field"

    ,"site_area":"NW"

    ,"park_id":65

    ,"last_updated":"May 3 2013"

    }

    If you look back at the flu data currently being displayed in the app, you will notice it has a latitude and a longitude field. If I want to display pushpins on a map for each location, I need latitude and longitude data. So Although this data about parks in Vancouver is in the correct format, it doesn’t have the fields I need to use it in this template.

    So I’ll keep looking…If I visit the City of Toronto, their Green P Parking data is JSON

    Let’s check out the data, at the link

    http://www1.toronto.ca/City_Of_Toronto/Information_&_Technology/Open_Data/Data_Sets/Assets/Files/greenPParking.json

    {"carparks":[{"id":"1","address":"20 Charles Street","lat":"43.668997","lng":"-79.385093","rate":"$2.00 \/ Half Hour"

    BINGO! We have a winner, the lat & lng fields look like co-ordinates to me!

    So you can see part of the challenge when using this template is finding suitable data. It’s out there, you just have to do a little digging to find useful data in the right format.

    I do think an app to help someone find a parking lot in Toronto would be useful!

    Updating the app to point to your chosen Open Data source

    Now I go back to Visual Studio and edit the config.js file. You can find additional instructions in Mark Arteaga’s Quick Start guide in the customization section for these steps as well.

    Remember that code we saw for specifying the flu data?

    appName: "Sample Server Flu Data",

    staticUrl: "http://finder-server-sample.azurewebsites.net/api/data/flu_data",

    pathToArray: "",

    latitudeField: "latitude",

    longidudeField: "longitude",

    nameField: "location",

    secondaryField: "address",

    detailField: "location",

    We need to change that to point to our data!

    Let’s update the values

    • appName should be our app name, in this case “Toronto Parking
    • staticURL should be the URL that points to the JSON data we found in the open data catalogue.
    • pathToArray is going to depend on what your JSON data looks like. You see at the start of my data before the open bracket where it starts listing the data for each individual parking lot? Where you see the string “carparks” that is the pathToArray. Here’s another examples, so you can see the pattern. Go to splash parks in Milton JSON, you will see a pathToArray of “items”.
    • LatitudeField – should be the label for the field that contains the latitude, for my data that is lat
    • longitudeField – should be the label for the field that contains the longitude, for my data that is lng
    • nameField – is the field that appears in the table on the left hand side of the screen under the column heading Name. the parking lots don’t have a name field, so I think in my case the address would be useful to display in the table
    • secondaryField is the additional field that appears in the table on the left hand side of the screen. I don’t really have a name field, but I think it might be helpful to indicate if parking is a surface lot or a garage (in winter a garage means you don’t have to brush the snow off your car), so I will choose the carpark_type field to display in the table.
    • detailField – this is the extra information displayed when someone selects details for a particular lot. I think the most useful information to display from my data set would be the rate for the parking lot.

    So when I update the code to point to my new fields (and update the comments to indicate that this is parking lot data not flu data, my code looks like this.

    /**

    Toronto Parking Lots

    **/

    appName: "Toronto Parking",

    staticUrl: "http://www1.toronto.ca/City_Of_Toronto/Information_&_Technology/Open_Data/Data_Sets/Assets/Files/greenPParking.json",

    pathToArray: "carparks",

    latitudeField: "lat",

    longidudeField: "lng",

    nameField: "address",

    secondaryField: "carpark_type",

    detailField: "rate",

    When I am done and I run my app it looks like this

    parking lots main screen

    If I select a pin on the map and choose details you can see the detail pane with the parking rate

    parking lot detail screen

    So now I have a working app that displays the location and information about parking lots in Toronto. Now I just have a little tidying up.

    I don’t like the title Location for my garage type, so I want to change that header.

    I did a quick search of all the files in the project for the word “Location” using <CTRL><SHIFT><F> or you can go to Edit | Find and Replace | Find in Files. I found a declaration of the table header in the file home.html.

    <thead>

    <tr>

    <th class="hidden"></th>

    <th><span id="distanceHead" class="header">Distance</span></th>

    <th><span id="nameHead" class="header">Name</span> <span id="nameFilter" class="filter win-answerButtonGuide win-replayWriting"></span></th>

    <th><span id="addressHead" class="header">Location</span> <span id="addressFilter" class="filter win-answerButtonGuide win-replayWriting"></span></th>

    </tr>

    You can change the string “location” to “type” to change the column heading.

    Updating the messages and text in the app

    Okay now back to Mark’s starter guide to see what other messages I should customize so the app better represents the data I selected. Scroll down to the Config.JS section where he mentions Helper Text. These are messages that would be displayed to the user, so I should make sure they are suitable for my data.

    /***************************************************

    * Various helper text

    ***************************************************/

    waitText: "Finding parks near you ...",

    poiDataAvailable: "Found {0} parks!",

    noPoiData: "Unable to find parks :(",

    noPoiDataMessage: "We could not locate any parks near your location.",

    noPoiDataMessageTitle: "Parks Unavailble",

    includeUserLocationOnPoiSelected: false,

    includeUserLocationOnPoiDisplayed: false,

    Here’s a description of the above data

    • waitText – the text to display while a search is in progress
    • poiDataAvailable – text to display when data is found
    • noPoiData – text to display when no data is found
    • noPoiDataMessage – text to display in message box when no data is found
    • noPoiDataMessageTitle – the title of the message box for noPoiDataMessage
    • includeUserLocationOnPoiSelected – determines if the users current location should be included in the map bounds when a POI item is selected
    • includeUserLocationOnPoiDisplayed – determines if the users location should be included in the map bounds when all the POI data is displayed on the map

    Let’s update the values for our data

    /***************************************************

    * Various helper text

    ***************************************************/

    waitText: "Finding parking lots near you ...",

    poiDataAvailable: "Found {0} parking lots!",

    noPoiData: "Unable to find parking lots :(",

    noPoiDataMessage: "We could not locate any parking lots near your location.",

    noPoiDataMessageTitle: "Parking lots Unavailble",

    includeUserLocationOnPoiSelected: false,

    includeUserLocationOnPoiDisplayed: false,

    Mark also mentions that the config.js file allows you to configure the information that is shared from your app if a user selects the share charm for a particular location. You can configure the data that will be shared.

    /**************************************************

    * SHARING CONFIGURATION

    *

    * available tokens:

    * nameField: this is the nameField element of the given point.

    ***************************************************/

    shareTitle: "Finder App",

    shareText: "I'm at {{nameField}}",

    shareDescription: "Finder Share Description",

    Since the nameField contains the address of my parking lot, and I think that’s useful information to share, I only need to update the wording.

    shareTitle: "Find a Toronto Parking Lot",

    shareText: "I'm parking at {{nameField}}",

    shareDescription: "Sharing selected parking lot",

    Below you can see how the shared data appears if you choose to share it by email.

    share parking lot

    Next I should update the text that appears if someone brings up the About page under the Settings Charm

    /***************************************************

    * About Flyout text

    ***************************************************/

    aboutText: "This application is built on top of the <b>Finder App Template</b>",

    copyright: "RedBit Development © {0}".format(new Date().getFullYear()),

    version: RedBit.Utilities.appVersion(),

    versionFriendly: RedBit.Utilities.appVersionFriendly(false),

    contactUsText: 'If you have any comments or suggestions for {0}, email us at <a href="mailto:support@redbitdev.com">support@redbitdev.com</a>'.format('Finder.Config.appName'),

    So if I update the fields

    aboutText: "This application is built on top of the <b>Finder App Template</b>",

    copyright: "HockeyGeekGirl © {0}".format(new Date().getFullYear()),

    version: RedBit.Utilities.appVersion(),

    versionFriendly: RedBit.Utilities.appVersionFriendly(false),

    contactUsText: 'If you have any comments or suggestions for {0}, email me at <a href="mailto:xyz@microsoft.com">HockeyGeekGirl</a>'.format('Toronto Parking Lots'),

    Now my About page looks like the screenshot below.

    About Page

    Customizing logos and the splash screen

    Setting logos

    If you expand the images subfolder you will see the files used for the logos and splash screen. If you replace these files with new images with the sizes specified below, you can display your logo for the tiles and splash screen.

    logos

    • Logo.png - 150x150 pixels - displays on the tile on the start screen
    • Smalllogo.png – 30x30 pixels – displays on the tile on the start screen if you zoom out
    • Splashscreen.png – 620x300 pixels – displays on the screen when you start up your app
    • Storelogo.png – 50x50 pixels – displays in the windows store when someone is looking for your app
    • Pin.png is the image used for the pushpin, you can change this if you want, or leave it as is.

    You can use a tool like Paint or Paint.NET to resize your logo. Paint .NET will keep transparency.

    Setting names and colors

    If you open the file package.appxmanifest in Solution explorer.

    images in solution explorer

    Navigate to the tab called Application UI and specify your own values for fields that affect the appearance and name of the application.

    app manifest

    Display Name – the name you want displayed in the store for your app

    Description – the description of your app

    Scroll down to the Tile fields and specify a Short name for your app to display on the Start Screen tile.

    You can also specify a background color for the tile and whether you want the text on the tile to be dark or light.

    Scroll down to the splash screen fields, you can change the background color here so it better matches the image you selected for your splash screen.

    Navigate to the Packaging Tab

    Set the Package Display name to the name you have given your app

    Set the Publisher Display name to the name of your Windows 8 store account

    Adding a privacy policy to the app

    Because your app accesses used location and connects to the internet you require a privacy policy. The privacy policy explains to the user what data your app collects and how the data is used.

    The easiest way to support privacy policy is to create a web page with your privacy policy and then navigate to the folder js and open the file default.js

    default.js

    Find the code that defines the settings page for the application

    app.onsettings = function (e) {

    e.detail.applicationcommands = {

    "settingsDiv": { href: "/pages/settings/settings.html", title: "Options" },

    "about": { href: "/pages/about/aboutflyout.html", title: "About" },

    "privacyDiv": { href: "/pages/privacy/privacy.html", title: "Privacy Policy" },

    };

    Now comes the fun part, because you need to create a page in your app for the privacy policy. You can do a little cut and paste and create a page based on the files used for the About page (AboutFlyout.html) and so on. Then update the HTML to contain text that describes your privacy policy. You will also need to make sure the <div> tag in your HTML page matches the <div> tag after the <body> statement of your HTML file. There is a blog that explains where this code is located here.

    Here is the code after I added the privacy policy flyout to my app.

    app.onsettings = function (e) {

    e.detail.applicationcommands = {

    "settingsDiv": { href: "/pages/settings/settings.html", title: "Options" },

    "about": { href: "/pages/about/aboutflyout.html", title: "About" },

    "priv": { href: "/pages/privacy/privacyflyout.html", title: "Privacy Policy" },

    };

    Here is the relevant code from inside my HTML page showing the div tag that matches the label I specified in the javascript code.

    <body>

    <!-- BEGINPRIVACYFLYOUT -->

    <div id="priv" data-win-control="WinJS.UI.SettingsFlyout" aria-label="Privacy settings flyout">

    I wasn’t exactly sure what to put in my privacy policy, so I looked at a few similar apps in the store and used their privacy policies as a starting point.

    NOTE: When you publish your app to the store, in the Decription section you will be asked for a URL to your privacy policy. So you will need to set up a web page with the same privacy policy you included in your app and provide the URL that points to that page when you submit your app to the store. I had a wordpress blog so I just added an extra page to my blog with the privacy policy. You can also create a free website using Azure if you don’t have a site set up already. Tim Heuer wrote a blog post about how to do it http://timheuer.com/blog/archive/2012/09/26/use-azure-free-web-site-for-windows-store-app-content.aspx

    Now I can publish my app to the store!

    So in summary, the template works, and creates an app with very good functionality, you don’t have to be an experienced programmer, but you do have to be comfortable opening up and editing the code in the files. An experienced programmer could do a lot more in terms of customizing the data displayed and the types of data sources supported.

    NOTE: The WACK test told me my launch time was too slow for some devices. So in order to pass I was unable to support ARM devices. I selected x86 and x64 packages instead. Disappointing because I think this sort of app would be popular on the smaller tablets. I will pass this along to the team who built the template in case it can be fixed. It is also possible that this performance issue varies depending on the data source you select for your app.

  • Go DevMENTAL

    How Blend made creating a Windows 8 app in 24 hours easy.

    • 0 Comments

    Having never used Blend before I was amazed how fast and easy it was to create my simple appFI-BlendRTW.

     

    The source code for this Windows 8 app and many others can be found on my GitHub (http://bit.ly/17NwuAw)

    After joking with a friend of mine, we came up with a fun little app that would tell you your fortune, we called it “Cookie fortune”. This oracle disguised as a chocolate chip cookie was something I thought would be easy to implement and would be a fun app to make.

     

    Why I built my app with Blend (instead of Visual Studio)

    After deciding on a language, C#, my next step was research. I was looking for the fastest way to create the XAML layout I wanted for my app. This is where I bumped into Blend. I remembered briefly looking at Blend a few years ago but never really sat down and used it. Reading through the documentation I quickly discovered that it had some awesome features that should really speed up the design process. One of the biggest ones that jumped out at me was the fact that it’s a visual editor, what you see is what the user will see. I loved this because it means less compiling and running just to see simple changes. Another feature that also helps in this regard is Interactive mode. Interactive mode lets you design your apps in states that would normally only be available at runtime. No more guessing how snap view would make my app look. Add in the ability to drag and drop Windows app controls onto the design surface and I was falling in love. I was even more delighted when I realized Blend for 2012 was already installed (It’s comes with Visual Studio 2012 including Express for Windows 8 and free trial versions). To get a better feel for the tool I decided to follow along with the example “Design your first Windows Store app in Blend” (http://bit.ly/FirstWindowsApp) on the Windows Dev Center website. Within 30 minutes I had completed it. This made my confidence soar. I was ready to create my Cookie Fortune app with Blend.

    Below are some highlights from the development of my app, but in no way is it meant to be a step by step guide. Feel free to download the code for a more complete picture.

    I started by creating a new project and selected the blank app, because of the simple nature of my app it seemed like the best fit.

    blankapp

     

     

    Adding the artwork

    My next step was to change the background image to one that I had created. I imported it as an existing item Project>Add Existing Item or Ctrl+i. Then I placed the newly imported asset in the design view, the image below shows the result.

    backgroundCF

     

     

    I then added three more images, one of the cookie whole and the two pieces of the cookie when it was broke.

    My plan was to hide the two broken pieces when the cookie was being shown then to hide the cookie image and show the broken cookie pieces when the user clicked or tapped. This gives the illusion that the cookie breaks in two on the user’s input. The image below shows the cookie in its whole state.

     

    cfwhole

     

     

    Adding the Fortune cookie logic

    I completed the cookie’s breaking ability by writing some basic lines of code. One big thing to note here is I never had to leave Blend to write the code, I actually wrote it right inside of Blend’s code editor.

    Below is the code I used to make this happen.

     

     private void Grid_Tapped(object sender, RoutedEventArgs e)
            {
                if (isFirstTap)
                {
                    if (ApplicationView.Value != ApplicationViewState.Snapped)
                    {
                        //Hide the whole cookie
                        CookieWhole.Visibility = Visibility.Collapsed;
                        //Display the broken pieces of the cookie
                        CookieBrokenLeft.Visibility = Visibility.Visible;
                        CookieBrokenRight.Visibility = Visibility.Visible;
                        isFirstTap = false;
                    }
                }            
                else
                {
                    //Display the whole cookie
                    CookieWhole.Visibility = Visibility.Visible;
                    //Hide the broken pieces of the cookie
                    CookieBrokenLeft.Visibility = Visibility.Collapsed;
                    CookieBrokenRight.Visibility = Visibility.Collapsed;
                    isFirstTap = true;
                }
            }

     

    At this point I was on a roll I had dragged a dropped a few images wrote a few lines of code and in extremely little time I had a pretty cool breakable cookie. Next it was time to make the cookie dispense some wisdom. I quickly gathered together some fortunes from lists I had found on the web. I picked XML as my method of storing these fortunes and found a great example and information on how to parse the XML file using the XmlReader Class on the MSDN library website (http://bit.ly/KE9Ges). Below is a sample of the code I wrote to parse the fortune XML and add it to a the “fortune” list.

                string fortuneString = null;
    
                // Create an XmlReader
                using (XmlReader reader = XmlReader.Create("Assets//Fortunes.xml"))
                {
                    while (reader.Read())
                    {
                        switch (reader.NodeType)
                        {
                         
                            case XmlNodeType.Text:
                                fortuneString = reader.Value;
                                fortunes.Add(fortuneString);
                                break;
                           
                        }
                    }   
                }
     
     

    Adding Share

    After writing a few more lines of code to make the fortune text appear when the cookie was in its broken state and disappear when the cookie was whole, I now had a fully functioning fortune telling cookie. I could hardly believe how quick I managed to get to this point. Since it was moving along so quickly I decided to add a feature. I thought wouldn’t it be great if you could share your fortune with others. With Windows 8’s share feature this was a snap. While still in Blend I added the following code to easily add the share function to my app.

     

            private void RegisterForShare()
            {
                DataTransferManager dataTransferManager = DataTransferManager.GetForCurrentView();
                dataTransferManager.DataRequested += new TypedEventHandler<DataTransferManager,
                    DataRequestedEventArgs>(this.ShareTextHandler);
            }
    
            private void ShareTextHandler(DataTransferManager sender, DataRequestedEventArgs e)
            {
                DataRequest request = e.Request;
                request.Data.Properties.Title = "Cookie Fortune";
                request.Data.Properties.Description = "Share your fortune with your friends.";
                request.Data.SetText(FortuneDisplay.Text);
            }

     

     

    Adding Snap view

    My app was almost ready for the store it only needed one more feature to be complete and to pass the Windows Application Certification Test, snap view. Again to my delight Blend made this unbelievably easy. Like I said in the beginning, Blend has a very useful feature called Interactive mode. With interactive mode you are able to design your application in various states like snap, filled and full screen. Check out this link if your would like to know more about how to use Interactive mode (http://bit.ly/11xje4d). The image below is a screen shot of Blend while in the app is in the “snap” state.

     snapped

     

    As you can see creating a simple app is very fast using this powerful tool. In under 24 hours I was able to create my application, add custom layouts for the various states and even add the share contract feature. Blend can truly speed up your development time, I know I will be using it for designing my future applications.

    Check out this great documentation for more information on getting started with Blend(http://bit.ly/18ESHSH) and as an extra challenge why not try using this as a starting point for creating a “Magic 8-ball” style application.

    Happy Coding!

  • Go DevMENTAL

    How to update your app in the Windows 8 store

    • 0 Comments

    Windows Store How do you submit a new version of an app to the Windows store after you have made updates to the code?

    You’ve submitted your app, and now you’ve made some improvements based on comments or feedback from users, or maybe just because you had some time to improve it. Let’s see how you submit an update for your app!

    I recently submitted an app to the store and I had to remove a feature because it wasn’t working. Later I had time to go back and finish up that feature, so now I want to update my app in the store. Here’s how you do it.

    Log in to the Windows Store at dev.windows.com and go to the Dashboard.

    image

    Select Details for the app you want to update

    App details

    When you get to the Details page, select Create New Release

    Create New ReleaseYou will need to upload a new package to the store containing your new code.

    Go to Visual Studio, open the .appxmanifest file, go to the Packaging tab and increase the Version number, so it indicates this is a new version of your app.

    You decide how you want to increment the version numbers, but here is some general guidance:

    • Increment the Major number if you are adding significant functionality
    • Increment the Minor number when minor features or significant fixes are added
    • Increment the Revision number when minor bugs are fixed.

    Version Number

    Now go to the menu and choose Project | Store | Create App Package and follow the prompts to build your new app package. It’s always a good idea to launch the Windows Application Certification Kit on your updated app to make sure it still passes the tests with your updates.

    After you have built your new package, return to your app submission screen, select Packages, and upload the new package from your Visual Studio project AppPackages folder (REMINDER: the package is the file with the extension .appxupload).

    When you submit a new version of an app, you must indicate the contents of your update in the Description section.

    App Description

    Enter a description of the update in the Description of Update field.

    Description of Update

     

    Although it is not required, if you are adding new functionality to your app, consider updating other fields that describe your functionality to users. You want to ensure potential users are aware of the full functionality of your application when browsing the store. Attributes you might want to updated include the Description, the App features list, or the Screenshots.

    If you wish you may change other attributes of your app such as price, age ratings, but that is not required to submit the update.

    After you have uploaded your new package, completed the description of update and made any additional changes you wish to make, select Submit for Certification to submit your updated app to the store.

    Submit for certification

    Congratulations you have just submitted an updated version of your app to the store!

    Take pride in your work, talk to your users, find out what they would like to see improved. Learn more about the capabilities of Windows 8 apps, could you create a live tile that shows current information on the start screen. Are you leveraging Search? Share? Could you improve the snap view? Check out Azure Mobile Services. Now that you have a handle on creating and updating apps the sky is the limit!

Page 1 of 3 (11 items) 123