Framework7 & PhoneGap – Getting Started5 min read

Framework7 & PhoneGap – Getting Started

In this blog post, we will be building a Boilerplate for Framework7 & PhoneGap. We will also look at PhoneGap build for deploying our newly created Framework7 app.

Contents

Code @ Github 

Prerequisites

To build a Hybrid app using PhoneGap, you need to be aware of

1. Git & GitHub

2. PhoneGap Setup and build

Framework7

Framework7 is a

Full Featured HTML Framework For Building iOS7 Apps

But the same can be used to build apps for Android and other Mobile OS. Out of box the theme looks very very close to the iOS7 components. If you are fine with it, you can use the same CSS else, you can modify accordingly.

The Framework7 project (hosted on GitHub) has CSS preprocessor – LESS support. And for markup templating – JADE.

If you are planning to consume the existing application as-is, you need not worry much. It will be mostly plucking components from the Kitchen-sink.

We will setup Framework7 & PhoneGap separately. Then we will integrate the required components.

Step 1 : Clone Framework7

First, make sure the prerequisite steps are completed. Then create a new folder and name it pgFW7 (sounds like a fighter jet right?, pun intended). The name is short for PhoneGap Framework7.

Next, we will clone the Framework7 repo from Github. Open terminal/prompt and CD into this folder and run

git clone git@github.com:nolimits4web/Framework7.git

This will get us the source code for Framework7 components. Then execute

cd Framework7 && npm install

to install all the dependencies. Then build and run the project using

grunt build && grunt server

gulp build && gulp server

By default you will be redirected to  http://localhost:3000/kitchen-sink/. This is the kitchen sink, consists of all the components that comes along with Framework7.

Along with this, there is a simple 2 page application like a base template. Navigate to

http://localhost:3000/dist/

to see the sample application. We are going to use this sample app as our base template. The code for this can be found at /Framework7/dist.

For production apps use app from dist» folder, it also contains latest and most stable version of Framework7 and also minified versions of scripts and css.

Step 2 : Create and clone a Github repo

If you are planning to use PhoneGap build to build a hybrid Mobile App, we need to dump all the code in a Github repo and submit the git URL.

Create a new Github project (pgFW7App). Next, CD back to pgFW7 folder. And then clone the repo by running

git clone https://github.com/<<username>>/pgFW7App.git

Step 3 : Scaffold a PhoneGap project

Next, We will scaffold a new PhoneGap project. Back to terminal/prompt & make sure you are at the root folder (pgFW7 folder) and run

phonegap create myAwesomeFW7app

This will scaffold us a simple PhoneGap project.  The final folder structure of the project would be

Screen Shot 2014-04-01 at 4.50.52 pm

Step 4 : Integrate Framework7 with PhoneGap

First lets clean up the pgFW7/myAwesomeFW7app/www folder. Navigate to pgFW7/myAwesomeFW7app/www. Then delete the following

  • css folder
  • img folder
  • js folder
  • index.html file

Do not delete the config.xml file.

Then copy the contents of pgFW7/Framework7/dist folder to pgFW7/myAwesomeFW7app/www. Next open the www/index.html file and  add the below script tag

 <script type="text/javascript" src="cordova.js"></script>

above the line

<script type="text/javascript" src="js/framework7.js"></script>

This is required for the PhoneGap build to run smoothly.

Step 5 : Update PhoneGap app properties

Open pgFW7/myAwesomeFW7app/www/config.xml. Update the name tag to myAwesomeFW7app and description tag to something you like and also the author tag as you want. The name tag will be the name of your app when this code is processed through PhoneGap build.

Step 6 : Test the PhoneGap app

Lets CD into the myAwesomeFW7app folder. Then run

cordova platforms add ios

or

cordova platforms add android

This will create an iOS/android project inside the platforms folder. Next, build the app by running

cordova build ios or cordova build android  or  cordova build

This will build the project. To run the project execute

cordova emulate ios or  cordova emulate android

Note: For iOS you need to have latest xCode and ios-sim (sudo npm install -g ios-sim). And for Android, if you face issues, you can open the project using ADT. Refer prerequisites. 

And your output should be

Screen Shot 2014-04-01 at 5.14.52 pm Screen Shot 2014-04-01 at 5.15.02 pm Screen Shot 2014-04-01 at 5.15.15 pm Screen Shot 2014-04-01 at 5.15.34 pm

Step 7 : Copy project to the repo folder & commit the repo

Copy pgFW7/myAwesomeFW7app/www folder to pgFW7/pgFW7App. Yup, this is the only folder that is needed to build the app.

Now, using terminal/prompt, CD into pgFW7/pgFW7App folder. Run the following commands

git status

Screen Shot 2014-04-01 at 6.57.03 pm

git add -A

git commit -a -m "Initial Commit" 

git push origin master

Screen Shot 2014-04-01 at 6.59.17 pm

Step 8 : PhoneGap build the app

Navigate to  https://build.phonegap.com/apps  and click on + New App button. Then copy the git URL from the repo (https://github.com/<<username>>/pgFW7App.git) to the “paste .git repo” textbox. And the click on Ready to Build button.

This will trigger the build process & finally see a page like

Screen Shot 2014-04-01 at 7.10.46 pm

I don’t have the iOS developer key, so no iOS installer. But I have a Samsung Galaxy Note, so Bam!! And the app looks very sleek and awesome!

Yeoman Generator

A few days ago I quickly whipped out a Yeoman Generator to build Hybrid Apps using PhoneGap and Framework7. You can find the same here : generator-framework7-phonegap.

Using it is super simple. Create a folder where you want to scaffold the boilerplate. Open terminal/prompt and run

Windows Mac/*nix
npm i -g yo grunt bower generator-framework7-phonegap    sudo npm i -g yo grunt bower generator-framework7-phonegap

Once the installation is completed, run

yo framework7-phonegap

This will scaffold a Framework7-Phonegap boilerplate for you. The final folder structure would be like

You will find 2 Gruntfiles –

  1. Inside the framework7 folder – This is used to manage Framework7 dev
  2. At the root of the project – This is used to manage PhoneGap dev

Development Process

  • Step 1 : To start developing,  cd  into the framework7 folder and begin development. Refer Getting Started With Framework7.
  • Step 2 : Once you are done, run

This is to build your Framework7 dev to a distributable format. make sure you are running  grunt dist  from inside the framework7 folder

  • Step 3 – finally  cd  back to the root folder and run

to copy all the contents of the framework7/dist folder to www.

Note : All your development should happen inside the framework7 folder and then run  grunt dist . Next  cd  back to the root folder and run  grunt copy  to copy the contents of framework7/dist to www folder

From the root folder, run

to spin off a server. You can see the contents of www folder in your browser at  http://localhost:1881 .

Note : You will find cordova.js as a 404 resource during Framework7 dev as well as PhoneGap dev. This will be resolved during PhoneGap Build.

Now you can submit this www folder to PhoneGap Build. Simple right?

Next Steps

You can also build an integrated Boilerplate, where you can make live changes to the Framework7 LESS & JADE files & the www folder simultaneously instead of copy pasting every time.

You can go through the PhoneGap plugins and create your own apps. I have created a sample app using Contacts API and jQuery Mobile. You can try out the same with Framework7 List & Form components.


Thanks for reading! Do comment.
@arvindr21