I have left Microsoft and this blog is no longer under my control. All of the content should remain for some time however and any new updates can be found at http://davedev.net.
-Dave, September 2013
If you’re a web developer focused on HTML5 like me then chances are you’ve looked into how to port your web apps to one of the App Marketplaces out there. I recently sat down with appMobi’s Developer Evangelist, Andrew Smith, to chat about how Web Developers can create Hybrid Apps which run on iOS, Android and Windows. Due to the popularity of that interview I’ve asked Andrew to guest post here on how you can get started!
Smartphones running mobile apps are spreading quickly, just like Websites did in the 90’s. However, in order to have your software in the mobile app stores developers need to create native apps written in the programming language of the particular operating system. Rather than writing the same application over and over so your app can run on all smartphones, wouldn’t it be great if your current Web developers could build your application once but allow you to deploy it to a variety of devices? Perhaps appMobi is the answer.
The key to creating a mobile app that is written once but runs anywhere is the concept of the hybrid mobile app. These apps are called “hybrid” apps because they are native apps that are coded using the exact same technologies that power the World Wide Web.
Native applications are written specifically for a particular operating system of the device it is meant to run on. That would be xCode/Objective C for iOS, Eclipse/Java for Android, and Visual C# or Visual Basic for Windows Phone 8. There is no native universal programming language for all device platforms.
Hybrid apps are a marriage of these two technologies. Like a native app a hybrid app runs natively on the device and are distributed through the smartphones’ distinctive app stores. However, these apps are coded using Web technologies rendered locally on the device so it does not require an Internet connection. Furthermore a Web to native abstraction layer gives the hybrid app access to device capabilities that are not accessible to mobile Web applications such as the accelerometer, contacts database, and camera.
With the advent of Windows Phone 8, the appMobi appHub will soon include the capability of creating a native application for a Windows smartphone as well. Meanwhile, you can follow these easy steps to create your very own Windows Phone 8 application using the free tools Microsoft has provided.
Once you have an app project bundle finished, it is time to build it for Windows Phone 8. To build an appMobi application as a hybrid Windows Phone 8 app, you’ll need to install Visual Studio Express 2012 for Windows Phone on a Windows 8 PRO computer. The Windows 8 PRO operating system is key since The Windows Phone 8 emulator relies on Windows 8 Professional, so be sure you have the appropriate operating system before getting started.
First create a Windows Phone 8 project in Visual Studio. Start Visual Studio for Windows Phone and select New and then Project. On the New Project setup screen, create a Windows Phone App using Visual C#. Supply a name for the project and select OK. This will create your new project.
Select the Windows Phone 8 operating system. Click OK to continue.
Once you have a project prepared, you will want to install one of appMobi’s Windows Phone 8 templates from NuGet to transform your empty new project into an appMobi application project. To install one of the appMobi templates visit:
Consider trying one of the specialized templates another time, but just for the purposes of creating a Windows Phone 8 build you’ll want to stick with a simple template. Select the appMobi Windows Phone 8 Hello World template.
Click on the template and find the install command. Copy the Install-Package command to your clipboard. Do not include the PM> prompt portion.
Return to Visual Studio and open the Package Manager window by selecting View > Other Windows > Package Manager Console. Paste the Install-Package command on your clipboard into the Package Manager Console and press the Enter key.
After successfully installing the package, you will note that the Solution Explorer window updates to include an “html” folder and other specific “appMobiPage” files. You will also notice that a readme.txt file is displayed in the VS edit window. This file contains information about the contents of the template, and how to use it. Continue with those instructions, or follow the next few steps here.
To bind the project to the appMobi template selected, you will need to modify the WMAppManifext.xml file loaded at project creation. This file can be found in the Properties directory. In the editor window for the WMAppManifest.xml file, you will need to update the Navigation Page field value.
Change the Navigation Page value to “AppMobiPage.xaml” and then save the file.
Now you’ll want to import the appMobi project bundle into your newly created project. Copy all the files in the bundle with the exception of the files in the “_appMobi” directory. Paste all those files into the “html” directory of your Visual Studio project in the Solution Explorer.
Once your project bundle is in position, you’ll need to identify which files you want included in the build. Make sure to reference all the files you use for your project bundle in AppMobiWebSource.xml.
At this point, you are now ready to start developing and debugging your application in the Windows Phone 8 environment. Use the WP8 emulator within Visual Studio to aid with device debugging.
So you want to get started? Head to the Chrome Web Store to grab the XDK, and download Microsoft Visual Studio 2012 for Windows Phone 8.
Thanks for posting this... very helpful.
First off good article in terms of ease of understanding but it didn't worked.
I followed this article to convert my existing AppMobi project which works fine for ios and android, into
windows phone 8 App, but didn't worked. Its giving me some unhandled string format exception right after I am calling
$.ajax() to get json.
Some one suggested me to use WinJS.xhr but I dont see many examples on web for that.