Mobile Development with JavaScript

Andrey Kucherenko

$ sudo npm install -g cordova
/usr/local/bin/cordova -> /usr/local/lib/node_modules/cordova/bin/cordova
cordova@5.3.1 /usr/local/lib/node_modules/cordova
├── underscore@1.7.0
├── q@1.0.1
├── nopt@3.0.1 (abbrev@1.0.7)
└── cordova-lib@5.3.1 (valid-identifier@0.0.1, osenv@0.1.0, properties-parser@0.2.3, bplist-parser@0.0.6, unorm@1.3.3, semver@4.3.6, shelljs@0.3.0, rc@0.5.2, dep-graph@1.1.0, npmconf@2.1.2, xcode@0.8.0, glob@4.0.6, elementtree@0.1.6, request@2.47.0, tar@1.0.2, cordova-registry-mapper@1.1.11, cordova-serve@0.1.3, init-package-json@1.9.1, aliasify@1.7.2, plist@1.1.0, cordova-app-hello-world@3.9.0, cordova-js@4.1.1, npm@2.14.5)


$ sudo npm install -g plugman
/usr/local/bin/plugman -> /usr/local/lib/node_modules/plugman/main.js
plugman@1.0.2 /usr/local/lib/node_modules/plugman
├── q@1.0.1
├── nopt@1.0.9 (abbrev@1.0.7)
└── cordova-lib@5.3.1 (valid-identifier@0.0.1, osenv@0.1.0, properties-parser@0.2.3, underscore@1.7.0, bplist-parser@0.0.6, unorm@1.3.3, shelljs@0.3.0, semver@4.3.6, dep-graph@1.1.0, rc@0.5.2, xcode@0.8.0, npmconf@2.1.2, elementtree@0.1.6, init-package-json@1.9.1, request@2.47.0, glob@4.0.6, cordova-registry-mapper@1.1.11, cordova-serve@0.1.3, tar@1.0.2, aliasify@1.7.2, plist@1.1.0, cordova-js@4.1.1, cordova-app-hello-world@3.9.0, npm@2.14.5)
$ cordova create js-mentoring com.epam.js JavaScriptMentoring
Creating a new cordova project.

<?xml version='1.0' encoding='utf-8'?>
<widget id="com.epam.js" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
    <name>JavaScriptMentoring</name>

    <description>
        A sample Apache Cordova application that for JavaScript Mentoring Program.
    </description>

    <author email="Andrii_Kucherenko@epam.com" href="http://epam.com">
        Andrii Kucherenko
    </author>

    <content src="index.html" />
    
    <plugin name="cordova-plugin-whitelist" version="1" />
    
    <access origin="*" />
    <allow-intent href="http://*/*" />
    <allow-intent href="https://*/*" />
    <allow-intent href="tel:*" />
    <allow-intent href="sms:*" />
    <allow-intent href="mailto:*" />
    <allow-intent href="geo:*" />
    
    <platform name="android">
        <allow-intent href="market:*" />
    </platform>
    
    <platform name="ios">
        <allow-intent href="itms:*" />
        <allow-intent href="itms-apps:*" />
    </platform>
</widget>

$ cordova platform add ios
Adding ios project...
iOS project created with cordova-ios@3.9.1
Discovered plugin "cordova-plugin-whitelist" in config.xml. Installing to the project
Fetching plugin "cordova-plugin-whitelist@1" via npm
Installing "cordova-plugin-whitelist" for ios
Plugin doesn't support this project's cordova-ios version. cordova-ios: 3.9.1, failed version requirement: >=4.0.0-dev
Skipping 'cordova-plugin-whitelist' for ios
Installing "cordova-plugin-whitelist" for ios
Plugin doesn't support this project's cordova-ios version. cordova-ios: 3.9.1, failed version requirement: >=4.0.0-dev
Skipping 'cordova-plugin-whitelist' for ios


$ cordova platforms ls
Installed platforms: ios 3.9.1
Available platforms: amazon-fireos, 
                     android,
                     blackberry10,
                     browser,
                     firefoxos, osx, webos
$ cordova build
Running command: /Users/Andrii_Kucherenko/Workspace/js-mentoring/platforms/ios/cordova/build 
Building project  : /Users/Andrii_Kucherenko/Workspace/js-mentoring/platforms/ios/JavaScriptMentoring.xcodeproj
        Configuration : Debug
        Platform      : emulator
Build settings from command line:
    ARCHS = i386
    CONFIGURATION_BUILD_DIR = /Users/Andrii_Kucherenko/Workspace/js-mentoring/platforms/ios/build/emulator
    SDKROOT = iphonesimulator8.4
    SHARED_PRECOMPS_DIR = /Users/Andrii_Kucherenko/Workspace/js-mentoring/platforms/ios/build/sharedpch
    VALID_ARCHS = i386

Build settings from configuration file '/Users/Andrii_Kucherenko/Workspace/js-mentoring/platforms/ios/cordova/build-debug.xcconfig':
    CODE_SIGN_IDENTITY = iPhone Developer
    CODE_SIGN_RESOURCE_RULES_PATH = $(SDKROOT)/ResourceRules.plist

=== BUILD TARGET CordovaLib OF PROJECT CordovaLib WITH CONFIGURATION Debug ===

/// FULL LOG HERE

Touch build/emulator/JavaScriptMentoring.app
    cd /Users/Andrii_Kucherenko/Workspace/js-mentoring/platforms/ios
    export PATH="/Applications/Xcode.app/Contents/Developer/Platforms/iPhoneSimulator.platform/Developer/usr/bin:/Applications/Xcode.app/Contents/Developer/usr/bin:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin"
    /usr/bin/touch -c /Users/Andrii_Kucherenko/Workspace/js-mentoring/platforms/ios/build/emulator/JavaScriptMentoring.app

** BUILD SUCCEEDED **


$ cordova build ios

// make iOS specific build 
$ cordova emulate ios

$ cordova run ios

Running command: /Users/Andrii_Kucherenko/Workspace/js-mentoring/platforms/ios/cordova/run --emulator
Building project  : /Users/Andrii_Kucherenko/Workspace/js-mentoring/platforms/ios/JavaScriptMentoring.xcodeproj
        Configuration : Debug
        Platform      : emulator
Build settings from command line:
    ARCHS = i386
    CONFIGURATION_BUILD_DIR = /Users/Andrii_Kucherenko/Workspace/js-mentoring/platforms/ios/build/emulator
    SDKROOT = iphonesimulator8.4
    SHARED_PRECOMPS_DIR = /Users/Andrii_Kucherenko/Workspace/js-mentoring/platforms/ios/build/sharedpch
    VALID_ARCHS = i386

Build settings from configuration file '/Users/Andrii_Kucherenko/Workspace/js-mentoring/platforms/ios/cordova/build-debug.xcconfig':
    CODE_SIGN_IDENTITY = iPhone Developer
    CODE_SIGN_RESOURCE_RULES_PATH = $(SDKROOT)/ResourceRules.plist

=== BUILD TARGET CordovaLib OF PROJECT CordovaLib WITH CONFIGURATION Debug ===
$ cordova plugin add org.apache.cordova.network-information
Fetching plugin "org.apache.cordova.network-information" via npm
WARNING: org.apache.cordova.network-information has been renamed to cordova-plugin-network-information. You may not be getting the latest version! We suggest you `cordova plugin rm org.apache.cordova.network-information` and `cordova plugin add cordova-plugin-network-information`.
Fetching plugin "org.apache.cordova.network-information" via cordova plugins registry
Installing "org.apache.cordova.network-information" for ios

http://plugins.cordova.io/

+

=

$ sudo npm install -g cordova ionic
/usr/bin/cordova -> /usr/lib/node_modules/cordova/bin/cordova
/usr/bin/ionic -> /usr/lib/node_modules/ionic/bin/ionic

cordova@5.3.1 /usr/lib/node_modules/cordova
├── underscore@1.7.0
├── q@1.0.1
├── nopt@3.0.1 (abbrev@1.0.7)
└── cordova-lib@5.3.1 (valid-identifier@0.0.1, osenv@0.1.0, properties-parser@0.2.3, bplist-parser@0.0.6, unorm@1.3.3, rc@0.5.2, semver@4.3.6, shelljs@0.3.0, dep-graph@1.1.0, npmconf@2.1.2, xcode@0.8.0, elementtree@0.1.6, cordova-serve@0.1.3, request@2.47.0, init-package-json@1.9.1, tar@1.0.2, glob@4.0.6, cordova-registry-mapper@1.1.11, aliasify@1.7.2, plist@1.1.0, cordova-js@4.1.1, cordova-app-hello-world@3.9.0, npm@2.14.5)

ionic@1.6.4 /usr/lib/node_modules/ionic
├── proxy-middleware@0.7.0
├── connect-livereload@0.5.2
├── progress@1.1.7
├── colors@0.6.2
├── open@0.0.5
├── ncp@0.4.2
├── underscore@1.7.0
├── crc@3.2.1
├── q@1.0.1
├── async@0.9.2
├── shelljs@0.2.6
├── semver@4.3.6
├── cross-spawn@0.2.3 (lru-cache@2.6.5)
├── finalhandler@0.2.0 (escape-html@1.0.1, debug@2.0.0)
├── event-stream@3.0.20 (stream-combiner@0.0.4, duplexer@0.1.1, from@0.1.3, pause-stream@0.0.11, split@0.2.10, through@2.3.8, map-stream@0.0.6)
├── optimist@0.6.0 (wordwrap@0.0.3, minimist@0.0.10)
├── connect@3.1.1 (utils-merge@1.0.0, parseurl@1.3.0, finalhandler@0.1.0, debug@1.0.4)
├── form-data@0.1.4 (mime@1.2.11, combined-stream@0.0.7)
├── cli-table@0.3.1 (colors@1.0.3)
├── opbeat-ionic@1.1.3 (console-log-level@1.1.0, json-stringify-safe@5.0.1, stackman@0.2.3, after-all@2.0.2)
├── serve-static@1.7.1 (utils-merge@1.0.0, escape-html@1.0.1, parseurl@1.3.0, send@0.10.1)
├── tiny-lr-fork@0.0.5 (debug@0.7.4, faye-websocket@0.4.4, qs@0.5.6, noptify@0.0.3)
├── request@2.51.0 (caseless@0.8.0, aws-sign2@0.5.0, forever-agent@0.5.2, stringstream@0.0.4, oauth-sign@0.5.0, tunnel-agent@0.4.1, json-stringify-safe@5.0.1, node-uuid@1.4.3, qs@2.3.3, mime-types@1.0.2, combined-stream@0.0.7, http-signature@0.10.1, bl@0.9.4, tough-cookie@2.0.0, form-data@0.2.0, hawk@1.1.1)
├── unzip@0.1.9 (setimmediate@1.0.2, pullstream@0.4.1, readable-stream@1.0.33, match-stream@0.0.2, binary@0.3.0, fstream@0.1.31)
├── prompt@0.2.12 (revalidator@0.1.8, pkginfo@0.3.0, read@1.0.6, winston@0.6.2, utile@0.2.1)
├── vinyl-fs@0.3.7 (graceful-fs@3.0.8, strip-bom@1.0.0, vinyl@0.4.6, mkdirp@0.5.1, through2@0.6.5, glob-stream@3.1.18, lodash@2.4.2, glob-watcher@0.0.6)
├── gulp@3.8.8 (pretty-hrtime@0.2.2, interpret@0.3.10, deprecated@0.0.1, archy@0.0.2, minimist@1.1.2, tildify@1.1.0, semver@3.0.1, chalk@0.5.1, orchestrator@0.3.7, gulp-util@3.0.6, liftoff@0.12.1)
├── cheerio@0.19.0 (entities@1.1.1, dom-serializer@0.1.0, css-select@1.0.0, htmlparser2@3.8.3, lodash@3.10.0)
├── xml2js@0.4.4 (sax@0.6.1, xmlbuilder@2.6.4)
├── npm@2.1.3
└── ionic-app-lib@0.3.8 (vinyl-fs@1.0.0, archiver@0.5.2, ionic-cordova-lib@5.1.7)

$ ionic start jsMentoring sidemenu
Creating Ionic app in folder /home/apk/workspace/lab/jsMentoring based on sidemenu project
Updated the hooks directory to have execute permissions
Update Config.xml
Initializing cordova project

Your Ionic project is ready to go! Some quick tips:

 * cd into your project: $ cd jsMentoring

 * Setup this project to use Sass: ionic setup sass

 * Develop in the browser with live reload: ionic serve

 * Add a platform (ios or Android): ionic platform add ios [android]
   Note: iOS development requires OS X currently
   See the Android Platform Guide for full Android installation instructions:
   https://cordova.apache.org/docs/en/edge/guide_platforms_android_index.md.html

 * Build your app: ionic build <PLATFORM>

 * Simulate your app: ionic emulate <PLATFORM>

 * Run your app on a device: ionic run <PLATFORM>

 * Package an app using Ionic package service: ionic package <MODE> <PLATFORM>

For more help use ionic --help or ionic docs

Visit the Ionic docs: http://ionicframework.com/docs


New! Add push notifications to your Ionic app with Ionic Push (alpha)!
https://apps.ionic.io/signup
+---------------------------------------------------------+
+ New Ionic Updates for September 2015
+
+ The View App just landed. Preview your apps on any device
+ http://view.ionic.io
+
+ Invite anyone to preview and test your app
+ ionic share EMAIL
+
+ Generate splash screens and icons with ionic resource
+ http://ionicframework.com/blog/automating-icons-and-splash-screens/
+
+---------------------------------------------------------+


$ ionic serve
Running live reload server: http://localhost:35729
Watching : [ 'www/**/*', '!www/lib/**/*' ]
Running dev server: http://localhost:8100
Ionic server commands, enter:
  restart or r to restart the client app from the root
  goto or g and a url to have the app navigate to the given url
  consolelogs or c to enable/disable console log output
  serverlogs or s to enable/disable server log output
  quit or q to shutdown the server and exit

ionic $

http://market.ionic.io/

Questions?

Home task

Mobile Development with JavaScript

By Andrey Kucherenko

Mobile Development with JavaScript

  • 2,049

More from Andrey Kucherenko