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,    explore, faq, find, find-dupes, get, help,  help-search,    home, i, info, init, install, isntall,  issues, la, link,    list, ll, ln, login, ls,  OUTDATED,&NBSP;OWNER,&NBSP;PACK,&NBSP;PREFIX,&NBSP;&NBSP;&NBSP;&NBSP;PRUNE,&NBSP;PUBLISH,&NBSP;R,&NBSP;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,    uninstall, unlink,  unpublish, unstar, up, update, v,    version, view,  whoaminpm <cmd> -h     quick help on <cmd>npm  -l           display full usage  infonpm faq          commonly asked  questionsnpm help <term>  search for help on <term>npm  help npm     involved overviewspecify configs in the  ini-formatted file:    /Users/giti/.npmrcor on the command  line via: npm <command> --key valueconfig info can be  Viewed via: npm help config[email protected] /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 app in folder /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 Add iosrunning Platform task ... Adding platform ioscreating iOS project ... Installing "Com.ionic.keyboard" for Iosinstalling "Org.apache.cordova.console" for Iosinstalling " Org.apache.cordova.device "for iOS

Run the app you created on the emulator.

$ ionic Run iosrunning Run task ... Running app on Platform iosrunning command:/users/zhangxitao/myapp1/platforms/ios/cordova/run No device is connected, tr Ying simulator.build settings from command Line:archs = i386 Configuration_build_dir =/users/zhangxitao/myapp1/pla Tforms/ios/build/emulator Sdkroot = iphonesimulator7.1 Valid_archs = i386=== build TARGET cordovalib of PROJECT Cord Ovalib with CONFIGURATION Debug = = =

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

This article is from the "Zero's blog" blog, please be sure to keep this source http://zerosoft.blog.51cto.com/679447/1655199

HTML5 Development Mobile hybrid App Series 1-Development environment building