As a .NET developer I was feeling left out of the IPhone, Android and BlackBerry world, until now!
Let’s start by looking at the sample application that I created in Visual Studio as learning exercise. The application allows you to create a note at a GPS location. I called it NoteToPlace and you can open it in your phone by going to www.NoteToPlace.com You can register and start using it now.
Here is what the opening screen looks like on an IPhone:
This is the basic look and feel out of the box given the tools I used (talked about below.) You can install this as an app on the IPhone so the browser related stuff at the top goes away. The user will also have an icon on their home screen just like every other app - so it isn’t obvious to them that this is really a browser based app. And no you don’t have to go through the App store. See this link for more details: HTML5 IPhone App.
Once the user clicks the “Create A Note” option from the main menu they get prompted to allow the application to know their GPS location, and then they get this page to add a note:
A few things to note. First, notice the upper left hand corner shows me as logged in (as user “j”). All of the ASP.Net membership stuff came free out of the box (or template.) That includes the pages for a user to register and to log in.
Also note that I used a different emulator for this second image – this is how it looks in a Motorola Droid X. I tried out the following emulators:
- http://iphonetester.com/
- http://dev.opera.com/articles/view/opera-mobile-emulator/
- http://ripple.tinyhippos.com/
- https://www.google.com/chrome/
(The images are in this order.) I mostly used the desktop version of Chrome for development and I use fiddler2 for debugging. I just change the size to be close to a phone’s. All of these emulators were free.
In my sample app, if I go back and select the second main menu option “View My Notes”, I will get a list of my notes. Show below in the Ripple emulator:
It is easy to create lists like these and you see them a lot. If I then click the “Map” link for an item I will see the Google map of the location where I left the note:
Note that I didn’t spend any time optimize this application for performance (it is just a test of the technologies.) It can take some time on the first load. HTML5 has an advanced application caching feature that I didn’t use at all, but looks promising for a real effort. Also note that the Google map page has problems displaying in some situations (sometimes you just need to hit refresh.)
Developer’s Section
Now for the technologies used. First, I downloaded and installed MVC4 beta from ASP.Net. This installs Visual Studio templates that allow you to create a MVC 4 project and then select “Mobile Application” as an option.
Doing this will install JQuery Mobile into your project which is the part that does a lot of the user interface. From there you are doing HTML 5 in the markup, EF4 for the data access layer (YEAH!) and MVC for the application. There was also more JavaScript / JQuery then I would have liked.
I didn’t know MVC before this application and learned it from these free videos: MVC from Pluralsight. (I took heavy notes while I watched them.) You can build a mobile application using ASP.Net WebForms, but in my research it became clear that MVC with JQuery Mobile is the future here. You can add MVC to your currently existing WebForms application, see HERE.
Also, I found this book to be very helpful when I started:
It is a good overview of mobile development and is heavy on JQuery Mobile. They even have a chapter talking about PhoneGap where you can turn your application into a native IPhone or Android application. PhoneGap is open source and more information can be found HERE.
The Google maps page was done with a JavaScript call to the Google maps API. More information can be found HERE.
I wouldn’t build a game using this technology, but it looks very promising for building web related apps. I think it will be valuable in extending some of the web applications that I currently work on. Now I have the option to include a little mobile where it makes sense and adds value.
Subscribe