Great OAuth tutorials for HTML5 applications

Applications we build are more and more dependent on 3rd party data sources. And as Internet of things continues to grow, this fact becomes even more stronger.

It allows us to create great experiences for the app end users by presenting them data gathered from across the Internets. But at the same time we have to spend more time ensuring that our applications are consuming all this data securely and they only get access to the data they need. OAuth protocol was designed and developed for this exact reason.

Building AngularJS based native mobile application. Part 2

This is the second part of tutorial for building native mobile application based on AngularJS, HTML5 markup and CSS styles. In the first part you will find how to setup the new project, add routes, controllers, HTML5 views and do simple testing in a standard web browser.

What we are doing in this tutorial?

In this tutorial part we are going to take previously created application and add back navigation button, sliding animations between the views and functionality to retrieve data from web services by using asynchronous HTTP communication. Finally I’ll give some hints how to wrap this application into PhoneGap framework in order to create installable version. Lets get started.

Crossing platforms between iOS and Android. Extending PhoneGap project

One of the main reasons to use hybrid mobile application framework like PhoneGap for development is to maintain you project code base in one programming language, while deploying mobile applications across many mobile platforms. PhoneGap is the wrapper for HTML5 applications to make them run on multiple mobile operating systems as native apps. Applications are written in JavaScript and framework provides API’s to access native mobile device functionality. Developers can even write their own plugins to get any specific native OS functionality they want.

I have recently published 4 piece tutorial about developing PhoneGap based mobile application for Apple iOS platform. In the beginning of that tutorial I promised to use the same application JavaScript code for another mobile app which is created to run on Android powered mobile devices. This post is about doing exactly that. I will share my experience of taking PhoneGap application code from iOS based app and moving it over to the Android platform. Some native elements will have to be changed but we will talk about them once we get there. Now, lets do some work.

Developing PhoneGap mobile project. Part 2

In the part one of these series we have checked what PhoneGap mobile application framework is, downloaded its latest version and have created our initial first project for iOS smartphone platform. I have also outlined frame for example mobile app we are going to build and the set of web APIs that we will be using to make this example application somewhat useful for its users.

In this part of the tutorial we will take a closer look to PhoneGap framework structure, its main files and will write code to consume data from the web based APIs. Lets call it slightly advanced “Hello World” example which instead of printing just simple text will display 5 yummy receipts retrieved from external web service.
We will continue working on the code of the initial project created in the part one of this tutorial. You can follow the steps we took last time, they are quite simple.
As we have much more code in this part, the all source code for today’s finished tutorial is located at the bottom of the post. Feel free to download and use it for testing. Now, lets get started.

PhoneGap structure for iOS mobile project

Let’s take a look at the structure and contents of the project created by PhoneGap script. Open the project with XCode (key tool for developing iOS based mobile applications). The structure will look the same as I have pictured below, with the key files for iOS project as well as PhoneGap specific www directory and few configuration files.
For iOS apps main.m objective-c implementation file represents the main loop application is constantly running. From the contents of this file we see that AppDelegate is being referenced as a main controller. Quick view to AppDelegate.m implementation file shows us that it sets some configuration parameters for the mobile project. Cache size, window size, splash screen, default start page for view controller (project default is always index.html) and other properties. The main directory where all application files have to be placed is www and they will be served via special custom view (web view).

AppDelegate.m implementation file for newly created PhoneGap iOS project.

PhoneGap project files for iOS

Developing PhoneGap mobile project. From start to finish

This is the first part of the tutorial. Second, Third and the last tutorial parts can be found by following the links.

After receiving good reader feedback for HTML5 widgets tutorial for iOS digital books today I’m starting with new tutorial for developing hybrid mobile applications with the help of PhoneGap framework (or Apache Cordova wrapper as some people like to call it).

The goal is to create a fully working and somewhat useful mobile application from the ground up. To make things more interesting and useful for our readers I’m planning to implement (and go into technical specs) today’s most used mobile application functions. Web services (the way for client devices to communicate with servers and each other over the World Wide Web network), Authentication (after which mobile applications can consume online resources on behalf of third parties), Geolocation, Maps and on device Storage.

I’m estimating that it will take little bit of time to get to the end of the project and to write everything in blog post format. Therefore I will split this tutorial into several parts and will publish them separately here on htmlcenter. It will make it easier to follow for everyone who is reading as well.
You are much welcome to join the discussion any time by posting comments or asking questions. There is much work ahead so lets get started!

Creating HTML5 widgets for Apple iBook applications

Recently I had a chance to take a closer look at relatively new tool for creating interactive iPad tablet reading experiences called iBooks Author. It was released by Apple in January 2012 and is aimed at book authors and publishers to allow for an easy publishing of their books on Apple iBook platform. Application supports its own format .ibooks as well as .pdf and .ePub formats for exporting.

But what really caught my attention was the possibility to embed interactive elements inside actual ebooks. It can be done in the form of HTML5 widgets, with CSS styling and JavaScript support for building interactivity.  As it was a good fit for one of interactive digital mobile content projects we will be crafting at PopularOwl and I went through the process of creating and adding HTML5 widget to iBook project to understand how it all comes together.

In this tutorial I’m going to walk you through the steps for building fully working HTML5 widget to be used in iBooks Author projects. This sample widget will help eBook authors to easily add social follow option to their digital books so their readers can interact from within the eBook.

Source code for finished widget project is located at the bottom of this tutorial, feel free to download and test it. The final result:

html5 widget in ibook author