#Kii Javascript SDK 101 (v0.2)
We want to explore how to create a simple HTML5 mobile application based on the new Kii Javascript SDK. Basically Kii Company offers a rich cloud mobile backend to help the development of a mobile application providing some services out of the box such as user registration and login.
###Quick Links
- Kii Cloud SDKs
- Kii Javascript SDK doc
- Kii Javascript Guide
- Kii Javascript SDK v2.1.1
- Preview of the application in Plunker
###Preview of the application in Plunker What we are going to implement can be seen and tested in Plunker using username/password test/test or creating a new user.
In order to make it work I had to brutally copy/paste the content of the Kii Javascript SDK in a file because Plunker seems not allowing file upload.
##1. Create a Kii cloud application First of all create a new Kii application, put the name and select the HTML5 logo. Now download the Kii Javascript SDK.
##2. Create a signup and signin user interface In the index.html file a minimal form has been implemented to allow registration and login of a user. Just to make a bit more fancy the UI, Boostrap framework has been added to use some styles.
###Local test with node.js
In order to display and test the application we are going to develop, we have to set up a server to serve files declared in the html page. Download and install node.js. For instance on mac you can use macports or <a href="http://brew.sh/"target="_blank">homebrew then use npm to install connect npm install connect.
Then copy the file server.js in your project folder and run the command node server.js. Type in a browser tab http://127.0.0.1:8081/ to load the web page.
##3. PhoneGap Integration PhoneGap wraps a native web application written in HTML, CSS and JavaScript in a native application of a given platform such as iOS, Android, Windows8 and more.
Here it is possible to find a more detailed tutorial about hot to build a mobile application using PhoneGap.
###PhoneGap vs Cordova
PhoneGap is a distribution of Apache Cordova. You can think of Apache Cordova as the engine that powers PhoneGap, similar to how WebKit is the engine that powers Chrome or Safari.
More here
###Prepare the environment
-
Install PhoneGap
npm install -g cordova -
To debug install Apache Ripple emulator
$ npm install -g ripple-emulator -
Install Android SDK
####Note for OSX users To simplify the installation of all the required packages install Homebrew and use it to install NodeJs, Android SDK and so on.
###The approach There are different way to develop a web application and then wrap it into a PhoneGap container. The approach chosen in this brief tutorial is developing a web application and finally put it inside of an empty PhoneGap project.
The web application can be developed for instance in an online editor such as Plunkr or in an editor such as Atom or Sublime and let node serving the page.
####Step 1 Run the command
$ cordova create kii101phonegap com.kii.phonegap Kii101PhoneGap
This command will create a project named Kii101PhoneGap in the folder kii101phonegap.
####Step 2 - Add project files
Copy index.html, index.css, index.js and kiisdk.js in the corresponding folder under the www from the project just created.
www -
| - js
| - index.js
| - kiisdk.js
| - css
| - index.css
|
index.html
####Step 3 - Add platforms
Switch to folder kii101phonegap and add the supported platforms, for instance iOS and Android
$ cordova platform add ios
$ cordova platform add android
####Step 4 - Build and emulate Build the application and test it in each platform before added. For iOS
$ cordova build ios
$ cordova emulate ios
The application for the iOS platform is built and the emulator is started. Wait some seconds to see appearing the default Cordova project. For Android
$ cordova build android
$ cordova emulate android
#####Android Emulation on OSX