We recently built an App using Intel App framework with Apache Cordova. Thought to share it with you all the steps I followed. We are going to build demo healthcare services application, to get start with it we are going to list(static list) hospitals.
We are going to have following steps
- Install Apache Cordova & Ant(For Linux and Windows)
- Install Apache Ant
- Setting environment path for cordova
- Create Cordova application
- Using Intel framework create pages
Install Nodejs before to get start with Cordova application.
Installing Apache Cordova (Windows)
Cordova needs apache ant to be installed, download Apache ant path from here http://ant.apache.org/bindownload.cgi .
Install Apache Ant
Extract downloaded ant to directory, e.g [source] C:\apache-ant.x.x-bin\bin [/source]. Add this path to windows environment.
Setting environment path for cordova
In windows cordova plugin will be installed at AppData(C:\users\username\AppData\npm\ directory. I added npm path to environment. Make sure you have installed nodejs before proceed.
[source]
npm install -g cordova
[/source]
Make sure you have installed java and configured JAVA_HOME path in windows environment.
Add ADD_HOME path in windows environment ,it should point to extracted folder( C:\apache-ant.x.x-bin\bin). So I added following environment variable
[source]
ANT_HOME = C:\apache-ant.x.x-bin\
JAVA_HOME = C:\Program Files\java\jdkx.x\
ANT_OPTS = -Xmx256M
[/source]
Installing Apache Cordova (Linux)
Install cordova and Apache ant
[source]
sudo npm install -g cordova
sudo apt-get -u install ant
[/source]
Setting environment path
Add android path to bashrc
[source]
nano ~/.bashrc
[/source]
Download android SDK(adt-bundle) from here http://developer.android.com/sdk/index.html and add android SDK paths, In this example I kept my sdk at /home/android/adt-bundle-linux-x86_64-20140321/sdk/.
[source]
export PATH=$PATH:/home/android/adt-bundle-linux-x86_64-20140321/sdk/tools#Android SDK path
export PATH=$PATH:/home/android/android/adt-bundle-linux-x86_64-20140321/sdk/platform-tools # Android platform tools path
[/source]
Create Cordova application
Open the command prompt and try cordova. It should display help message. To Create first cordova application type
[source]
cordova create HelloWorld
cd HelloWorld
[/source]
Add android platform to cordova and run the application
[source]
cordova platform add android
cordova build
cordova run
[/source]
Using Intel framework create pages
Download app framework from here http://app-framework-software.intel.com/. In this example I am going to use jq.mvc and jq.templates.In this example I am going to show the list of nearby hospital(static list)
Here is my application folder structure.
[source]
HelloWorld
..www
..controllers
….hospital.js
..views
….hospitals/list.tpl
..app.js
..index.html
[/source]
Include intelframework jq.mvc and jq.tempaltes in index.html
<!– index.html–!>
[source language=”html”]
[/source]
Initialize application in app.js file
[source language=”javascript”]
var app = new $.mvc.app();
app.loadControllers([“hospitals”,”home”]); //You can pass in array or a string. You do not need to reference the .js extension.
app.ready(function(){
$.mvc.route(“home/index”);
});
[/source]
Here we are loading two controllers, home and hospitals. Next we have to create controllers
controllers/home.js
[source language=”javascript”]
$.mvc.controller.create(“home”, {
views:{“index_tpl”:”views/index.tpl”},
index:function(){
$(“#backButton”).hide()
var content=$.template(“index_tpl”,{name:’MVC’});
console.log(“home index “)
$(“#main”).html($.template(“index_tpl”,{name:’MVC’}));
},
init:function(){
console.log(“home init”)
},
default:function(){
console.log(“home default”)
},
});
[/source]
We have three methods inside home controller, index, init and default. Next Create hospitals controller
controllers/hospitals.js
[source language=”javascript”]
$.mvc.controller.create(“hospitals”, {
views:{“hospital_tpl”:”views/hospitals/list.tpl”,”header_tpl” :”views/shared/header.tpl”},
list:function(){
console.log(“home list”)
$(“#main”).html($.template(“hospital_tpl”,{name:’Hospitals list’}));
$(“#header”).html($.template(“header_tpl”,{name:’Doctors list’}));
},
init:function(){
console.log(“hospitals init”)
},
default:function(){
console.log(“hospitals default”)
},
});
[/source]
We created home and hospitals controllers successfully, next we need to create views for actions.Home controller renders “views/index.tpl” and hospitals controller index action renders “views/hospitals/list.tpl“. Next steps we need to create view files.
- views/index.tpl
- views/hospitals/list.tpl
views/index.tpl
[source language=”html”]
[/source]
views/hospitals/list.tpl
[source language=”html”]
[/source]
Index.html will include app.js, all routes and views are configured in app.js file. First, I am going to create app and load controllers.
[source language=”javascript”]
//app.js
var app = new $.mvc.app();
app.loadControllers([“hosptals”]);
[/source]
This will invoke hospitals.js from controllers folder. In hospitals.js we need to define view file.
[source language=”javascript”]
$.mvc.controller.create(“hospitals”, {
views:{“hospital_tpl”:”views/hospitals/list.tpl”,”header_tpl” :”views/shared/header.tpl”},
list:function(){
views:{“hospital_tpl”:”views/hospitals/list.tpl”},
$(“#main”).html($.template(“hospital_tpl”,{name:’Hospitals list’}));
},
init:function(){
},
default:function(){
},
});
[/source]
In hospitals controller I defined list method which will invoke list.tpl from views/hospitals folder. In this way you can add more controllers,methods and views required by the application. Fork the repo for more information https://github.com/sivakumarbdu/appframework-demo-icare
