Author(s): Dave Voyles | @DaveVoyles
This lab goes through the process of packaging up this template as an app store installable package for Windows Phone. With these tools though, you can just as easily write an application that works for iOS, Andriod and Windows, by deploying to those platforms. It works on all of them!
By the end of this lab you will be able to:
- Understand how to test an application on an Emulator
- Debug an application running in an emulator
- Package an application for iOS and Andriod
This open source HTML5 app was written using Cordova 3.5, and runs on all modern mobile devices. (Please add more detail on what the app does, technolgies used and ideally a link to another walk-through on how to make this web app).
Cordova is an open source project that allows developers to talk to the native controls and functions of a device through the web browser. Example: Use your browser to access the phone's accelerometer, gyro, or camera.
With the Intel XDK, you can write for, test, and deploy to many devices without having to ever install Visual Studio xCode, or Eclipse.
Use this as a template to get started with your own application. Remove some bits of code, and add your own.
- Runs on Win8, Win Phone 8, iOS, Android, & Browsers
- jQuery mobile for speed and navigation between pages
- Bootstrap for responsive web design
- Single page application
- No need for multiple IDEs
- Emulating and testing of dozens of deviecs from within the IDE
- Deploy to your phone with one click
- You can use any Cordova tool for this, but I prefer the Intel XDK, as it works on a Mac or Windows.
- PC or Mac
- Download the source from GitHub
- Unzip the folder, and put the Ska-Studios folder on your desktop.
- Download & install the Intel XDK (this may take a while)
- Launch Intel XDK and In the top-right corner, log-in or create a new Intel account.
- On your phone, download the Intel App Preview app from your device's marketplace (Apple App Store, Google Play, Windows Store).
- Launch the XDK. In the top-left corner, look for Projects -> New Project
- Click on Import an Existing App
- With your code open, on the top of the screen look for the Emulate tab
- You can select the device type in the top-left corner to change for the device you want to test on
- With the IDE open, click on the TEST Tab on the top of the screen (add TEST screen shot here)
- You will be asked to sync with the server. Click Sync.
- Scan the QR code on your computer, using your phone. This will automatically open the Intel App on your phone, and point it towards the URL that your app is hosted at.
- With the IDE open, click on the BUILD tab
- Select the device that you want to build for
- It will upload your project to the Intel servers
- Follow the instructions for each platform, and include the appropriate image sizes.
Why do I need to create an account?
Your app is stored locally on your own machine, as well as Intel's servers. When you deploy your app to a physical device, it is connecting via a URL, which is a link to your app on Intel's servers.
When I try to open an external web page (ie - one that I did not write), a new window pops up within emulator.
This is a bug. On your physical device, it will load within your application. On the emulator though, it creates a new window.
What is the purpose of the Intel App Preview app?
This creates a debug container which points to your app stored on Intel's servers, and is used for testing.
There is so much JavaScript -- where do I start?
The only .js file that I had to write for this project was ska.js. It's very well documented. Make any changes that you need in there.
Who is Ska Studios?
Some friends in Seattle who make awesome video games. Check out their titles on XBLA and XBLIG, as well as their upcoming game Salt and Sanctuary on PS4.
- Power Point: How to build cross platform mobile apps
- BizSpark, for free MSFT dev licenses and web hosting
- Windows store image generator
- E-mail me with questions
- jQuery mobile documentation
##Change Log ###v1.0.0 Initial build of the app