How Framework7 and PhoneGap fit together

This is the final part of HTMLCenter tutorial about Framework7 mobile HTML5 framework. In previous part one we have created a skeleton mobile web application with several views. In part two we added login functionality and communication to cloud-based service APIs (Parse BaaS). This final part is about wrapping up the existing Framework7 application into PhoneGap (Cordova) wrapper and creating native mobile app as a result.

PhoneGap is a popular choice among mobile web app developers to package their HTML5 applications for distribution as native mobile apps. PhoneGap framework is based on Apache Cordova open source project which provides this exact functionality. It also supports custom plugin system which lets developers hook into native mobile OS API’s.

We are going to start new PhoneGap project and add our existing Framework7 application in.

Framework7 and Parse for User login

This is the second tutorial about building Framework7 HTML5 mobile web application. In the first tutorial part we have prepared the base by creating 3 mobile application views. One of them was the app user login view. In this tutorial part, we will make user registration and login functionality live by enabling login view communication with Parse -cloud-based backend service. The final third part is about wrapping Framework7 application into PgoneGap.

Creating Parse User Database

Nowadays you have many options once it comes to cloud-based storage options for mobile web apps. We did a good summary on HTMLCenter a few posts ago.

For todays tutorial, we are using Parse service. Parse at the time or writing supports 3 main functions – Core for data storage and user management, Push for push notifications and Analytics for logging different app events. They have free tier available for starting apps – it allows for up to 30 requests per second throughput and has 2TB data transfer limit per month. I’m sure we will not need this capacity in our tutorial!

Go ahead and create a free account on Parse. After you signup / login you can create new applications. I created one called framework7test dedicated for this tutorial. You can see it below.

HTML5 frameworks for mobile web applications

We are starting the series of tutorials and short reviews about popular HTML5 mobile frameworks. In this post, we are discussing why would developers use existing mobile web framework instead of building one from the ground up.  And we are creating simple, mobile web application with Framework7. In the second tutorial part we use Parse.com cloud service to integrate user login. The third part is about wrapping Framework7 application into PgoneGap.

Mobile web applications allow us to quickly design and develop prototypes, reuse already written code across multiple mobile platforms and in many cases match look & feel for customers using wide range of devices with different operating systems.

PhoneGap plugins for mobile application projects

PhoneGap is hybrid HTML5 mobile application framework which has nicely growing user community.

Here on HTMLCenter we have published several tutorials about designing and developing Cordova / PhoneGap based HTML5 mobile applications.
One of the main strengths of PhoneGap undoubtedly is the native plugin functionality. It allows developers to hook the native mobile OS components with HTML5 and JavaScript code. This way you can use JavaScript methods across the app to access functionality provided by native code.

In fact, any other developers using PhoneGap framework can just import your plugin and use the functionality in their own apps. Developer community has created many such plugins. And Cordova contributors have developed plugin manager called plugman in order to make installation of plugins simple.

There are several plugin repositories which collect and archive PhoneGap framework plugins.

While working with iOS and Android applications I have used several PhoneGap plugins and want to share some of them which helped me a lot in mobile app projects. Did I miss any good ones?

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.

How to build AngularJS based native mobile application

This is the first part of the tutorial for building native mobile application based on AngularJS framework, HTML5 markup and CSS styles. The second tutorial part can be found by following the link.

I have recently started using AngularJS a JavaScript tool set for building HTML5 applications. As we are covering cross-platform mobile application development here on htmlcenter, I decided to write a tutorial and share my experiences while using powerful and quite easy to understand AngularJS MVC structure for developing cross-platform mobile applications.

This tutorial is about how to build Angular powered HTML5 mobile application, wrap it up with PhoneGap and distribute as a native mobile app (on several mobile platforms if you wish so). We have split the tutorial into 2 parts, just to make it easier for information to sink in. As always, links to the example source code can be found at the end of the tutorial posts.

What are we going to cover?

First, we will briefly explore what is AngularJS (however, this tutorial is not about learning the basics),  we are going to pick Ratchet as a front-end framework for our HTML5 mobile application and create MVC structure. Second tutorial part covers how to make our view transitions animated, how AngularJS communicates with web services  and how to wrap up AngularJS application with PhoneGap. Sounds like we have some ground to cover. Lets get started.

Pages:

Developer Resources