Develop your own Windows App

I was very honoured to be called an Expert Educator by Microsoft. After attending an inspiring Global Forum (Barcelona 2014) and meeting 275 other Expert Educators, I really wanted to discover how to develop your own Windows app.
After a few days (ore was it weeks?) I succeeded in developing my own educational app: Tree Key (http://www.windowsphone.com/en-us/store/app/tree-key/d48779d3-35e9-450d-bf0e-efeb2f0425a4). An app which was the inspiration of our own Learn-a-thon. Offering this app and tutorial is my way to show my gratitude to Microsoft and all my fellow Expert Educators. Maybe we can lift our knowledge to a higher level: it will be a major benefit to our students when all teachers may develop their own apps.

First things first: there is a distinction between developing an app to Windows Phone or Windows 8 (including Surface RT).

Exploring our options

Let?s take a look at our options. After all, there are different possibilities to create an app:

1// Appstudio: offers a very easy tool to create an app, without any form of interactivity.  (http://appstudio.windowsphone.com).

2// PhoneGap: offers the option to convert a website to a native app. It?s possible to make use of HTML, CSS and JavaScript. (PHP/ASP isn?t an option).

3// Project Siena: free Windows8-app from Microsoft that allows you to create apps visually using drag and drop methods.

4// Touch Develop: this is an interactive development environment and a visual programming language being developed at Microsoft Research. Interesting tutorials and manuals can be found on https://www.touchdevelop.com.

5// GameSalad: freeware which offers the opportunity to develop games. http://gamesalad.com

6// Ever developed an iOS app? This can be converted to a Windows App via Visual Studio: http://www.windowsstore.com/developers/ios


Creating a Windows Phone app using Phonegap

PhoneGap is a software package and can be downloaded free from www.phonegap.com and closes the gap between a fully functional website and a native app. PhoneGap has been recently adopted by Adobe.

 

STEP 1: create a website in HTML + CSS (and eventual JavaScript)

HTML is  a universal and relatively simple language. It isn?t a programming language like JavaScript, but a markup language which offers structure to web page content. By learning HTML you get the added advantage of being creating your own website and app! JavaScipt is considerably more difficult for the novice. Javascript enables the background work of programming conditions, repeats, calculations and interactivity. There are many free javascript ?programs?, known as ?scripts? available on the internet.

Example: download TETRIS: http://fmarcia.info/jquery/tetris/tetris.html

Interesting tutorials to learn HTML:

 

STEP 2: installing PhoneGap

The following steps are a bit more difficult. You can download the result here and directly turn to step 3.

If you decide to take the more difficult path then this requires that you install PhoneGap.
First of all you need to install Node.js at first.

1. Download and install node.js from http://nodejs.org

2. Create a folder on your C-drive (Eg: C:\phonegap)

Start the Command Window from your start button or menu by typing in ?cmd? into the ?search programs and files? box. Press Enter.

Navigate to the PhoneGap folder  by typing cd phonegap

Download phonegap by typing:  sudo npm install -g phonegap

PhoneGap is now being downloaded.

Type this command: phonegap create myapp
Press enter.

Open the folder: cd myapp
Press enter.

Look for the folder ?myapp? which can be found in Windows Explorer.


STEP 3: Put the HTML site in the folder www

Adapt the logo in the folder /img and /res. Adapt logo.png too.

Now look for the file ?config.xml? in the folder, and adapt the name, description and author as follows:

Modify the name, description and author of the app in config.xml:

Create a zip file of the folder myapp.

 

STEP 4: Building the app

Now go to your web browser and navigate to https://build.phonegap.com

On the PhoneGap website, you can register a free account limited to one app. If you want to build more apps, a paid account is required.

After registering and logging in, you can upload the .zip file.

Click on Upload a .zip file and browse to the zipped app (see step 3).

The logo and name of the app are appearing. The app can still be deleted.

Click on Ready to build.

The app can be downloaded for Windows Phone, iOS and Android.

To Windows Phone this results in a xap file. By emailing this file (or sharing it by OneDrive) to you device you can install it on a Windows Phone.

However, when you want to distribute your app worldwide, you can better put it in the Windows Store. The cost of a membership is $14.

Publishing an app in Windows store

Navigate to https://appdev.microsoft.com/StorePortals/en-us/account/signup/start and hit  Register now.

Log in using your Microsoft account. Your account needs to be verified on computer.

Verify your email address. Click Next. You?ll receive your code directly by email.

Choice the desired package en pay.

After paying, you can access your account. At first you need to choose how you want to be paid. If you want to offer you app for free, you can skip this step.

If we?d be creating a Windows 8 app, we needed to submit the app in the Dashboard. But!

We?re creating a Windows Phone app, so we need to navigate to Windows Phone Dev Center on http://dev.windowsphone.com.

Click Dashboard and next .

Click ?1?: App info.

Enter the App name and choose the category.

Choose the base price and on which markets you want to distribute.

If you want to sell the app, you need to add financial info (tax, vat and financial info).

Click Save.

Click 2: Upload and describe your package(s)

Click Add new. Make sure you installed Silverlight on your computer (download for free on  http://www.microsoft.com/silverlight/default.aspx. If not, your app can?t be uploaded.

Browse to the XAP file, builded and downloaded on build.phonegap.com (previous step).

The Package is shown: name, version, size, language, etc.

It?s possible to add certain information:

- Language

- Description (important!): add a very clear description to ascertain your app will be found by search engines.

Specifiy keywords and upload an app icon (MUST be 300x300px) and screenshot(s) (MUST be 768x1280px or 1280x768px).

Press on the grey tiles to browse your images.

Click Save.

Optionally in-app advertising and other services can be added.

Click Review and submit to review the app.

After reviewing, click Submit.

The app will be tested by the Microsoft team. This will take up to 5 business days. After this period you will receive an email. The status of your app can be viewed on the lifecycle page.

In the USA it takes 24h to pass certification. Outside the USA up to 72h.

Congratulations, your app can be found on http://www.windowsphone.com !

The result can be found on http://www.windowsphone.com/en-us/store/app/tree-key/d48779d3-35e9-450d-bf0e-efeb2f0425a4

Sharing is caring

Liked this tutorial? Please share it!

 

© 2000 - 2016 Zelfstudie.be - Alle rechten voorbehouden

Website laten maken: kerfuffle.be - Website publiceren: zelfhosting.com