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.
Starting with PhoneGap
The best way to start PhoneGap project is to use its command line interface (also called Cordova CLI). Its a little handy tool which is used from the command line with many pre-built Cordova helper methods.
Cordova CLI requires Node.js to be installed on your machine as its using Node package manager (npm) for installation. Once you have Node.js installed on your development machine here is the command to install Cordova CLI globally (MacOSX)
$: sudo npm install -g cordova
After install is completed successfully, you should be able to run cordova command to invoke CLI from the terminal. For example, this should work
$: cordova help
Synopsis
cordova command [options]
Global Commands
create ................... Create a project
help ..................... Get help for a command
Project Commands
info ..................... Generate project information
platform ................. Manage project platforms
plugin ................... Manage project plugins
Now you have Cordova CLI installed and can use it to initialise new PhoneGap project. Here is the example
$: cordova create htmlcenterLogin com.htmlcenter.loginapp HTMLCenterHello
We are sending create command to the cordova utility together with the application directory name, unique id (reverse domain name serves as unique app id) and a title of the new application. All of these can later be changed in the project’s config.xml configuration file.
PhoneGap relies on mobile OS SDK’s being available on your development machine. This is a separate procedure to download and install them. You can find these on the mobile OS developer sites. I’m going to use iOS project as and example for this tutorial and this requires me to have Apple Xcode installed. Android SDK has its own requirements.
$: cordova platform add ios $: cordova platforms ls $: cordova build ios
First line adds Cordova iOS platform to the project (again by using Node’s npm). The second one shows what platforms are added to the project and which ones are available. Third line builds PhoneGap project for iOS platform.
What exactly did this command for adding platforms did? It has created new directory within your project platforms directory. It does it for each different mobile platform you add in order to maintain separate file sets.
Worth to note that you only have to maintain main code in www directory with your application code, Cordova CLI maintains the specific platform directories itself (copying files from main www directory etc.)
And what about cordova build ios? This command has copied files from your main www directory and builded .app file in order to be tested in iOS simulator (in my case its HTMLCenterHello.app). Usually, very first build run requires more compilation time but subsequent builds are much faster as Cordova is reusing already compiled components.
Your projects/ios directory now contain a fully working iOS native application project. Once I open it in XCode and run the emulator I can see a native iOs app which is running default PhoneGap mobile web application in it.
Adding Framework7 project to PhoneGap
In order for our Framewok7 application to become working native iOS app we just have to add it to www directory in PhoneGap project which we have created in tutorial parts one and two. It currently contains example index.html file with some CSS and JavaScript. This application is what you currently see running in your emulator.
While replacing existing html, css and js files we will maintain the example index.js file as it contains example code how to bind to events Cordova framework distributes to your app. Just copy the index.js file to you Framework7 project js directory and reference it in the index.html file. This is how I updated references in index.htm for our example project.
... <!-- Cordova index.js file with all Cordova bindings --> <script type="text/javascript" src="js/index.js"></script> <!-- Path to Framework7 Library JS--> <script type="text/javascript" src="js/framework7/framework7.min.js"></script> <!-- Path to your app js--> <script type="text/javascript" src="js/my-app.js"></script> ...
After copying all the files and adding index.js we launch the app from within XCode and our Framework7 application is now running within iOS simulator as native iOS application. It still has all the functionality we added in previous tutorials. Users can register and login, and their details are being saved and validated on Parse BaaS platform.
Conclusion
In this tutorial, we have created new PhoneGap project, generated iOS build and converted Framework7 based mobile web application to a native iOS app. The native app we have generated is very simple, but it already has navigation, transitions, secondary side views and HTTP communication (cloud APIs) enabled. Next natural steps for development would be to create application icon, add loading view and add more screen views.
We already mentioned that PhoneGap provides plugin functionality and there are many plugins out there for developers to use in order to leverage native mobile OS functionality via JavaScript. PhoneGap plugins are the best way to use native mobile OS APIs from within your JavaScript code. This Cordova plugin directory will get you started.
You can find a source code for the application we created during all 3 parts of this tutorial in PopularOwl Labs repository on GitHub. Any improvement suggestions are most certainly welcome. Let us know!
4 Responses
Plz tell me..How to integrate Framework7 into my Cordova Project?
Is it any git url or npm package?
It is wrote: just to put all files in the www folder of Cordova
use intel xdk and choose design. it is really cool
Delete the contents of your Cordova project www folder after first copying the js/index.js file to your FW7project /dist/js and referencing it in that index.html file, then copy everything in dist folder to Cordova project www folder.