HTML5 Development Mobile hybrid App Series 1-Development environment building

Source: Internet
Author: User

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

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.