HTML5 Development Mobile hybrid App Series 1-Development environment building

Recently, the company is preparing to develop a store cashier system, based on the ipad, and decided to adopt a hybrid development model based on Ionic + Cordova + angularjs technology.

• Get ready

A Mac (a virtual machine with Mac OS is also available), Nodejs,ionic,xcode

• Installation

1, install Nodejs

To download the Nodejs installation package (pkg file), need 0.10.* and the following version, high version will be many plugins are not available. I use the version is v0.10.38 (: http://nodejs.org/dist/v0.10.38/), after the download is complete, directly open the prompt to install.

After the installation is successful, open the terminal in Launchpad and enter the command NPM:

koala:~ dev$NPMUSAGE:NPM <command>where <command>is one of:add-user, AddUser, apihelp, author, bin, Bugs, C, cache, completion, config, DDP, Dedupe, deprecate, Docs, edit, Exp Lore, FAQ, find, find-dupes, get, help, help-Search, home, I, info, init, install, isntall, issues, LA, link, list, ll, ln, login, ls, outdated, owner, pack, Prefix, prune, publish, R, RB, rebuild, remove, repo, restart, RM, root, run-script, S, SE, Search, set, show, Shrinkwrap, Star, stars, start, stop, submodule, T, tag, test, TST, UN, uninst All, unlink, unpublish, Unstar, up, update, V, version, view, WHOAMINPM <cmd>-H quick Help on <cmd>NPM-l Display full usage infonpm FAQs commonly asked QUESTIONSNPM help <term> Search forHelp on <term>NPM help NPM involved overviewspecify configsinchThe ini-formatted file:/users/giti/. Npmrcor on the command line VIA:NPM <command>--key Valueconfig info can be viewed VIA:NPM help CONFIGNPM@1.4.28/usr/local/lib/node_modules/npm

The above information indicates that the NODEJS installation was successful.

2, install Cordova

$ sudo npm install-g Cordova

3, install Ionic

$ sudo npm install-g Ionic

4, install Ios-sim

$ sudo npm install-g Ios-sim

• Test app

Ionic website provides developers with a number of development templates, such as the Default tab template (page based on similar tab organization, using the IONTAB Directive), Sidemenu templates, etc.

Create an app based on the tab template

$ Ionic Start MyApp1

Console output

$ ionic Start myapp1running start task ... Creating Ionic Appinchfolder/users/zhangxitao/MyApp1 based on tabs Projectdownloading:https:github.com/driftyco/ionic-app-base/archive/Master.zipDOWNLOADING:https:github.com/driftyco/ionic-starter-tabs/archive/master.zipinitializing Cordova Project. Fetching plugin"Org.apache.cordova.device"via plugin registryfetching plugin"Org.apache.cordova.console"via plugin registryfetching plugin"Https://github.com/driftyco/ionic-plugins-keyboard"Via Git clone

You can see that creating a template app is the code that downloads the ionic framework from Git, then initializes the Cordova project with the Cordova command, and then adds a plugin for device,console Log,keyboard, The last plugin Ionic-plugins-keyboard, developed using Ionic, provides a JS layer notification of soft keyboard events, which is useful on Android.

Add iOS native code, actually call Cordova Platform add iOS, of course this side to do on Mac, and need to install Xcode

$ ionic Platform   " Com.ionic.keyboard "  for  "org.apache.cordova.console"for "  Org.apache.cordova.device" for iOS

Run the app you created on the emulator.

 /users/zhangxitao/myapp1/platforms/ios/cordova/is from command line:    = i386    =/users/zhangxitao/myapp1/platforms/ios/build/emulator    = iphonesimulator7.1    = i386= = = BUILD TARGET cordovalib of PROJECT cordovalib with CONFIGURATION Debug = = =

If the final success status, will launch the app on the iphone simulator, the interface is flat style, very beautiful bar

HTML5 Development Mobile hybrid App Series 1-Development environment construction