Chrome, HTML5, JavaScript

Mobile Web App – Real Life Example

App scriptThis week in Google Developers Live Israel, we showed a live example of a mobile web app that is built in two ways. One we used jQueryMobile as our UI framework and for cases where we need to support IE we used bootstrap. All the code can be found on github. The nice aspect in this real demo is that we used google sheets are our ‘server side’ and since its got a cool way to publish their content to the web as RSS, ATOM, XML, JSON feeds we could work with them from the web/mobile apps. The three main elements we used are:

  • Google Docs – More specifically, we used google sheets as our back-end to hold that data and share it with the people that will be responsible to maintain it.
  • Google Maps API v3.0 – Everyone like a good map when it is coming to geo locations. In our case, we want to show users where are the stations located and give them the option to navigate to them with one click (ya… it’s opening Waze app on their mobile device).
  • jQueryMobile – This powerful HTML5-based user interface framework will work on all the popular mobile device platforms. They are saving us (=web developers) a lot of leg work because they already tested it on many devices. It’s important to remember that JQM won’t work on IE (as they stopped debug it) so if you wish to support it go with a CSS framework like:  bootstrap 3pure etc’.

On the area of building modern / responsive web app we shoed few useful pointers:

  • Mobile Web App Stack –  that cover the aspects of Design, Development, Debug and some tips on productivity.
  • There is also a webcast that I did with O’reilly on the subject
  • From simple and powerful “Server Side” we leverage Google sheets. It gave us the power of easy usage and permissions/sharing capabilities.
  • If you wish to take our “server” to the next level, there are many options to create powerful ‘add-ons’ and features with Apps Script 
  • Google Map API V3.0 which is faster and more applicable to mobile devices. And… a nice touch for mobile devices is Waze web API that let you open a link to a geo location directly in Waze and from there the user can get directions.

In case you missed our live show… Here is the recording.

Part 1

Part 2

The slides from GDL Israel


2 thoughts on “Mobile Web App – Real Life Example

  1. I’ve been surfing online more than 2 hours today, yet I never found any interesting article like yours. It is pretty worth enough for me. In my opinion, if all web owners and bloggers made good content as you did, the net will be a lot more useful than ever before.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s