Ionic CLI - Build

index.pug

body(ng-app='app')
  .container-fluid
    p
    form
      .row(ng-controller='AppCtrl as app')
        .col-md-6
          h4
            kbd Build Configurations
          p  
          .row
            .col-md-6
              .form-group
                label Directory Name
                input.form-control(type='text', ng-model='app.directory', ng-change='app.bindOncePackage()')
            .col-md-6
              .form-group
                label App Name
                input.form-control(type='text', ng-model='app.name')
          .row
            .col-md-6
              .form-group
                label Package Name
                input.form-control(type='text', ng-model='app.package')
            .col-md-6
              .form-group
                label Platform
                select.form-control(ng-model='app.platform', ng-change='app.platformChanged()', ng-init="app.platform='android'")
                  option(value='android') Android
                  option(value='ios') iOS
                  option(value='windows') Windows
          .row
            .col-md-6
              .form-group(ng-show="app.platform=='android'")
                label Use CrossWalk
                select.form-control(ng-model='app.crosswalk', ng-init='app.crosswalk=1')
                  option(value=1) Yes
                  option(value=0) No
            .col-md-6
              .form-group(ng-show='app.crosswalk==1')
                label CrossWalk Version
                input.form-control(type='text', ng-model='app.cwVersion')
          .row
            .col-md-6
              .form-group
                label Author Email
                input.form-control(type='text', ng-model='app.author.email')
            .col-md-6
              .form-group
                label Company / Team
                input.form-control(type='text', ng-model='app.author.team')
          .row
            .col-md-6
              .form-group
                label Author Website
                input.form-control(type='text', ng-model='app.author.website')
            .col-md-6
              .form-group
                label Screen Orientation
                select.form-control(ng-model='app.orientation')
                  option(value='portrait') Portrait 
                  option(value='landscape') Landscape
          .row(ng-show='app.plugins.facebook')
            .col-md-6
              .form-group
                label Facebook App Id
                input.form-control(type='text', ng-model='app.fbAppId')
            .col-md-6
              .form-group
                label Facebook App Name
                input.form-control(type='text', ng-model='app.fbAppName')
          .row(ng-show='app.plugins.hotCodePush')
            .col-md-6
              .form-group
                label iOS identifier
                input.form-control(type='text', ng-model='app.iosId')
            .col-md-6
              .form-group
                label Hot Code Push URL
                input.form-control(type='text', ng-model='app.hcpUrl')
          .row
            .col-md-6
              .form-group
                label Content in Remote Server
                select.form-control(ng-model='app.remote')
                  option(value=1) Yes
                  option(value=0) No
            .col-md-6
              .form-group
                label Editor 
                  span(style='font-size:11px; font-style:normal;') (eg. TextEdit)
                input.form-control(type='text', ng-model='app.editor')
          hr
          .row
            .col-md-6
              .form-group
                label Pick Cordova Plugins:
                .checkbox
                  label
                    input(type='checkbox', ng-model='app.plugins.backgroundservice', value='com.red_folder.phonegap.plugin.backgroundservice')
                    span Background Service 
                .checkbox
                  label
                    input(type='checkbox', ng-model='app.plugins.barcodeScanner', value='https://github.com/wildabeast/BarcodeScanner.git')
                    span Barcode Scanner
                .checkbox
                  label
                    input(type='checkbox', ng-model='app.plugins.camera', value='org.apache.cordova.camera')
                    span Camera
                .checkbox
                  label
                    input(type='checkbox', ng-model='app.plugins.clipboard', value='https://github.com/VersoSolutions/CordovaClipboard.git')
                    span Clipboard
                .checkbox
                  label
                    input(type='checkbox', ng-model='app.plugins.customurlscheme', value='cordova-plugin-customurlscheme')
                    span Custom URL Scheme
                .checkbox
                  label
                    input(type='checkbox', ng-model='app.plugins.facebook', value='https://github.com/Wizcorp/phonegap-facebook-plugin.git')
                    span Facebook
                .checkbox
                  label
                    input(type='checkbox', ng-model='app.plugins.fileTransfer', value='org.apache.cordova.file-transfer')
                    span File Transfer
                .checkbox
                  label
                    input(type='checkbox', ng-model='app.plugins.geolocation', value='org.apache.cordova.geolocation')
                    span Geolocation
                .checkbox
                  label
                    input(type='checkbox', ng-model='app.plugins.googleAnalytics', value='cordova-plugin-google-analytics')
                    span Google Analytics
                .checkbox
                  label
                    input(type='checkbox', ng-model='app.plugins.hotCodePush', value='cordova-hot-code-push-plugin')
                    span Hot Code Push
                .checkbox
                  label
                    input(type='checkbox', ng-model='app.plugins.ibeacon', value='https://github.com/petermetz/cordova-plugin-ibeacon.git')
                    span ibeacon
                .checkbox
                  label
                    input(type='checkbox', ng-model='app.plugins.imagepicker', value='com.synconset.imagepicker')
                    span Image Picker
                .checkbox
                  label
                    input(type='checkbox', ng-model='app.plugins.localNotification', value='jp.wizcorp.phonegap.plugin.localnotificationplugin')
                    span Local Notification
                .checkbox
                  label
                    input(type='checkbox', ng-model='app.plugins.nativeaudio', value='cordova-plugin-nativeaudio')
                    span Native Audio
                .checkbox(ng-show='app.remote==0')
                  label
                    input(type='checkbox', ng-model='app.plugins.network', value='cordova-plugin-network-information')
                    span Network Information
                .checkbox
                  label
                    input(type='checkbox', ng-model='app.plugins.oauth', value='https://git-wip-us.apache.org/repos/asf/cordova-plugin-inappbrowser.git')
                    span OAuth
                .checkbox
                  label
                    input(type='checkbox', ng-model='app.plugins.pushplugin', value='https://github.com/phonegap-build/PushPlugin.git')
                    span Push Notifications
                .checkbox
                  label
                    input(type='checkbox', ng-model='app.plugins.socialsharing', value='https://github.com/EddyVerbruggen/SocialSharing-PhoneGap-Plugin.git')
                    span Social Sharing
                .checkbox
                  label
                    input(type='checkbox', ng-model='app.plugins.statusbar', value='cordova-plugin-statusbar')
                    span StatusBar
        .col-md-6
          blockquote
            h4
              kbd Generated Commands
            p(style='padding-top:8px;')
              .input-group
                span.input-group-addon
                  i.glyphicon.glyphicon-console
                input.form-control(type='text', value='ionic start {{app.directory}} -a "{{app.name}}" -i {{app.package}}')
            p
              .input-group
                span.input-group-addon
                  i.glyphicon.glyphicon-console
                input.form-control(type='text', value='cd {{app.directory}}')
            p
              .input-group(ng-hide='app.crosswalk==1')
                span.input-group-addon
                  i.glyphicon.glyphicon-console
                input.form-control(type='text', value='ionic platform {{app.platform}}')
            //- .form-group.has-warning
            //-   .input-group
            //-     span.input-group-addon
            //-       i.glyphicon.glyphicon-option-horizontal
            //-     input.form-control(type='text', value='ionic browser list')
            //- .form-group.has-error
            //-   .input-group
            //-     span.input-group-addon
            //-       i.glyphicon.glyphicon-option-horizontal
            //-     input.form-control(type='text', value='ionic browser remove crosswalk')
            //-     span.input-group-addon
            //-       i.glyphicon.glyphicon-trash
            p
              .input-group
                span.input-group-addon
                  i.glyphicon.glyphicon-console
                input.form-control(type='text', value='ionic resources')
              p.help-block # be sure to have “icon.png” and “splash.psd” files in resources folder
            p
              .input-group(ng-show='app.plugins.facebook')
                span.input-group-addon
                  i.glyphicon.glyphicon-console
                input.form-control(type='text', value='ionic build {{app.platform}}')
              p.help-block(ng-show='app.plugins.facebook') # facebook plugin requires to run the build command first
            p
              .input-group
                span.input-group-addon
                  i.glyphicon.glyphicon-console
                input.form-control(type='text', value='rm -rf www/')
              p.help-block # remove all files in “/www” folder
            p
              .input-group
                span.input-group-addon
                  i.glyphicon.glyphicon-console
                input.form-control(type='text', value='mkdir www')
              p.help-block(ng-hide='app.remote==1')
                span # put all html, css, javascript, images and any assets in www directory
              p.help-block(ng-show='app.remote==1')
                span # 
                a(href='http://git.incredible-qr.com/wayne/remote-app/tree/master', target='_blank') download
                span  and replace with following files and folders
                ul(ng-show='app.remote==1')
                  li /www/fonts/*
                  li /www/local-lib/*
                  li /www/index.html
            p
              .input-group(ng-show='app.remote==1')
                span.input-group-addon
                  i.glyphicon.glyphicon-console
                input.form-control(type='text', value='open -a {{ app.editor }} ./www/local-lib/scripts.js')
              p.help-block(ng-show='app.remote==1')
                span # edit the script.js with following steps
                ul(ng-show='app.remote==1')
                  li find the 2 URL with string search “{{app.author.website}}/demo/”
                  li replace with Android url “http://clientstaging.incredible-qr.com/clients/{{app.directory}}/mobile-app/#/#-android-“
                  li replace with iOS url “http://clientstaging.incredible-qr.com/clients/{{app.directory}}/mobile-app/#/#---ios---“
                  li find sitename=“Demo Apps” and replace sitename=“{{app.name}}“
                  li save file and close it
            p
              .input-group
                span.input-group-addon
                  i.glyphicon.glyphicon-console
                input.form-control(type='text', value='open -a {{ app.editor }} config.xml')
              p.help-block
                span # update the attributes & values for <description> and <author> tag
                pre
                  span.code &nbsp; &lt;description>An Mobile App for {{app.name}}&lt;/description><br />
                  span.code &nbsp; &lt;author email="wayne@incredible-qr.com" href="http://incredible-qr.com/">
                  span.code Incredible-Qr Team
                  span.code &lt;/author><br />
                  span.code(ng-show='app.crosswalk==1') &nbsp; &lt;allow-navigation href="*" /><br />
                  span.code(ng-show='app.crosswalk==1') &nbsp; &lt;allow-intent href="*" />
                span.txt # add following preferences into the config file
                pre
                  span.code &nbsp; &lt;preference name="Orientation" value="{{app.orientation}}"/><br />
                  span.code &nbsp; &lt;preference name="loglevel" value="ERROR"/>
                span.txt # save file and close it
            p(ng-show='app.crosswalk==1')
              .input-group(ng-show='app.crosswalk==1')
                span.input-group-addon
                  i.glyphicon.glyphicon-console
                input.form-control(type='text', value='ionic plugin add cordova-plugin-crosswalk-webview')
            p
              .input-group
                span.input-group-addon
                  i.glyphicon.glyphicon-console
                input.form-control(type='text', value='ionic plugin add cordova-plugin-autostart')
            p
              .input-group(ng-show='app.remote==1 || app.plugins.network')
                span.input-group-addon
                  i.glyphicon.glyphicon-console
                input.form-control(type='text', value='ionic plugin add cordova-plugin-network-information')
            p
              .input-group(ng-hide='app.plugins.oauth')
                span.input-group-addon
                  i.glyphicon.glyphicon-console
                input.form-control(type='text', value='ionic plugin add cordova-plugin-inappbrowser')
            p
              .input-group
                span.input-group-addon
                  i.glyphicon.glyphicon-console
                input.form-control(type='text', value='ionic plugin add cordova-plugin-transport-security')
            p
              .input-group(ng-show='app.plugins.backgroundservice')
                span.input-group-addon
                  i.glyphicon.glyphicon-console
                input.form-control(type='text', value='ionic plugin add com.red_folder.phonegap.plugin.backgroundservice')
            p
              .input-group(ng-show='app.plugins.barcodeScanner')
                span.input-group-addon
                  i.glyphicon.glyphicon-console
                input.form-control(type='text', value='ionic plugin add phonegap-plugin-barcodescanner')
            p
              .input-group(ng-show='app.plugins.camera')
                span.input-group-addon
                  i.glyphicon.glyphicon-console
                input.form-control(type='text', value='ionic plugin add cordova-plugin-camera')
            p
              .input-group(ng-show='app.plugins.clipboard')
                span.input-group-addon
                  i.glyphicon.glyphicon-console
                input.form-control(type='text', value='ionic plugin add com.verso.cordova.clipboard')
            p
              .input-group(ng-show='app.plugins.customurlscheme')
                span.input-group-addon
                  i.glyphicon.glyphicon-console
                input.form-control(type='text', value='ionic plugin add cordova-plugin-customurlscheme --variable URL_SCHEME={{app.directory}}')
            p
              .input-group(ng-show='app.plugins.fileTransfer')
                span.input-group-addon
                  i.glyphicon.glyphicon-console
                input.form-control(type='text', value='ionic plugin add cordova-plugin-file-transfer')
            p
              .input-group(ng-show='app.plugins.geolocation')
                span.input-group-addon
                  i.glyphicon.glyphicon-console
                input.form-control(type='text', value='ionic plugin add cordova-plugin-geolocation')
            p
              .input-group(ng-show='app.plugins.googleAnalytics')
                span.input-group-addon
                  i.glyphicon.glyphicon-console
                input.form-control(type='text', value='ionic plugin add cordova-plugin-google-analytics')
            p
              .input-group(ng-show='app.plugins.hotCodePush')
                span.input-group-addon
                  i.glyphicon.glyphicon-console
                input.form-control(type='text', value='ionic plugin add cordova-hot-code-push-plugin')
            p.help-block(ng-show='app.plugins.hotCodePush')
              span # Following steps only for first time HCP setup
            .form-group.has-success
              .input-group(ng-show='app.plugins.hotCodePush')
                span.input-group-addon
                  i.glyphicon.glyphicon-wrench
                input.form-control(type='text', value='open -a Sublime\ Text config.xml')
              p.help-block(ng-show='app.plugins.hotCodePush')
                span # Open config.xml and add following code
                pre(ng-show='app.plugins.hotCodePush')
                  span.code &lt;chcp><br />
                  span.code     &lt;config-file url="{{app.hcpUrl}}chcp.json"/><br />
                  span.code     &lt;native-interface version="1"/><br />
                  span.code &lt;/chcp>
            .form-group.has-success
              .input-group(ng-show='app.plugins.hotCodePush')
                span.input-group-addon
                  i.glyphicon.glyphicon-wrench
                input.form-control(type='text', value='npm install -g cordova-hot-code-push-cli')
                input.form-control(type='text', value='cordova-hcp init')
              p.help-block(ng-show='app.plugins.hotCodePush')
                span # generate chcp.json with following input
                dl.dl-horizontal(ng-show='app.plugins.hotCodePush')
                  dt Please provide: Enter project name (required):
                  dd {{app.name}}
                  dt Please provide: Amazon S3 Bucket name (required for cordova-hcp deploy):
                  dd (enter to skip)
                  dt Please provide: Path in S3 bucket (optional for cordova-hcp deploy):
                  dd (enter to skip)
                  dt Please provide: Amazon S3 region (required for cordova-hcp deploy):
                  dd (enter to skip)
                  dt Please provide: IOS app identifier:
                  dd {{app.iosId}}
                  dt Please provide: Android app identifier:
                  dd {{app.package}}
                  dt Please provide: Update method (required):  (resume) 
                  dd now
                  dt Please provide: Enter full URL to directory where cordova-hcp build result will be uploaded:
                  dd {{app.hcpUrl}}
            p
              .input-group(ng-show='app.plugins.ibeacon')
                span.input-group-addon
                  i.glyphicon.glyphicon-console
                input.form-control(type='text', value='ionic plugin add com.unarin.cordova.beacon')
            p
              .input-group(ng-show='app.plugins.imagepicker')
                span.input-group-addon
                  i.glyphicon.glyphicon-console
                input.form-control(type='text', value='ionic plugin add cordova-plugin-image-picker')
              p.help-block(ng-show='app.plugins.imagepicker && app.crosswalk==1')
                | # must remove the empty &lt;intent-filter /&gt; from plugin.xml when in Crosswalk build
            p
              .input-group(ng-show='app.plugins.localNotification')
                span.input-group-addon
                  i.glyphicon.glyphicon-console
                input.form-control(type='text', value='ionic plugin add de.appplant.cordova.plugin.local-notification')
            p
              .input-group(ng-show='app.plugins.nativeaudio')
                span.input-group-addon
                  i.glyphicon.glyphicon-console
                input.form-control(type='text', value='ionic plugin add cordova-plugin-nativeaudio')
            p
              .input-group(ng-show='app.plugins.oauth')
                span.input-group-addon
                  i.glyphicon.glyphicon-console
                input.form-control(type='text', value='ionic plugin add cordova-plugin-inappbrowser')
            p
              .input-group(ng-show='app.plugins.pushplugin')
                span.input-group-addon
                  i.glyphicon.glyphicon-console
                input.form-control(type='text', value='ionic plugin add phonegap-plugin-push --variable SENDER_ID="818391822477"')
            p
              .input-group(ng-show='app.plugins.socialsharing')
                span.input-group-addon
                  i.glyphicon.glyphicon-console
                input.form-control(type='text', value='ionic plugin add cordova-plugin-x-socialsharing')
            p
              .input-group(ng-show='app.plugins.statusbar')
                span.input-group-addon
                  i.glyphicon.glyphicon-console
                input.form-control(type='text', value='ionic plugin add cordova-plugin-statusbar')
            p
              .input-group(ng-show='app.plugins.facebook')
                span.input-group-addon
                  i.glyphicon.glyphicon-console
                input.form-control(type='text', value='cordova -d plugin add https://github.com/Wizcorp/phonegap-facebook-plugin.git --variable APP_ID="{{app.fbAppId}}" --variable APP_NAME="{{app.fbAppName}}"')
                input.form-control(type='text', value='android update project --subprojects --path "platforms/android" --target android-21 --library "CordovaLib"')
                input.form-control(type='text', value='android update project --subprojects --path "platforms/android/phonegap-facebook-plugin/{{app.directory}}-FacebookLib" --target android-21')
                input.form-control(type='text', value='cd platforms/android/')
                input.form-control(type='text', value='open -a {{ app.editor }} build.gradle')
              p.help-block(ng-show='app.plugins.facebook')
                span # Add following code to the end
                pre(ng-show='app.plugins.facebook')
                  span.code configurations {<br />
                  span.code     all*.exclude group: 'com.android.support', module: 'support-v4'<br />
                  span.code }
                span.txt(ng-show='app.plugins.facebook') # save file and close it
              .input-group(ng-show='app.plugins.facebook')
                span.input-group-addon
                  i.glyphicon.glyphicon-console
                input.form-control(type='text', value='ant clean')
                input.form-control(type='text', value='cd phonegap-facebook-plugin/{{app.directory}}-FacebookLib/')
                input.form-control(type='text', value='open -a {{ app.editor }} AndroidManifest.xml')
              p.help-block(ng-show='app.plugins.facebook')
                span # Change minSdkVersion and targetSdkVersion to your environment settings
                pre(ng-show='app.plugins.facebook')
                  span.code &lt;uses-sdk android:minSdkVersion="16" android:targetSdkVersion="21" />
                span.txt(ng-show='app.plugins.facebook') # save file and close it
              .input-group(ng-show='app.plugins.facebook')
                span.input-group-addon
                  i.glyphicon.glyphicon-console
                input.form-control(type='text', value='ant clean')
                input.form-control(type='text', value='mkdir ant-build')
                input.form-control(type='text', value='ant release')
                input.form-control(type='text', value='cd ../../../..')
            p
              .input-group(ng-show='app.plugins.others')
                span.input-group-addon
                  i.glyphicon.glyphicon-console
                input.form-control(type='text', value='')
            .form-group.has-warning
              .input-group
                span.input-group-addon
                  i.glyphicon.glyphicon-option-horizontal
                input.form-control(type='text', value='ionic plugin list')
            p
              .input-group(ng-show='app.plugins.hotCodePush')
                span.input-group-addon
                  i.glyphicon.glyphicon-console
                input.form-control(type='text', value='cordova-hcp build')
            p
              .input-group
                span.input-group-addon
                  i.glyphicon.glyphicon-console
                input.form-control(type='text', value='ionic build {{app.platform}}')
            p
              .input-group(ng-show="app.platform=='android'")
                span.input-group-addon
                  i.glyphicon.glyphicon-console
                input.form-control(type='text', value='adb devices')
              p.help-block(ng-show="app.platform=='android'")
                span # plug your {{app.platform}} phone with USB cable and connect to your computer
                br
                span # check if device connected to your computer
            p
              .input-group
                span.input-group-addon
                  i.glyphicon.glyphicon-console
                input.form-control(type='text', value='ionic run {{app.platform}}')
              p.help-block
                span # the new app should have built into this location:
                ul
                  li(ng-hide='app.crosswalk==1') /{{app.directory}}/platforms/android/build/outputs/apk/android-debug.apk
                  li(ng-show='app.crosswalk==1') /{{app.directory}}/platforms/android/build/outputs/apk/android-armv7-debug.apk
                  li(ng-show='app.crosswalk==1') /{{app.directory}}/platforms/android/build/outputs/apk/android-x86-debug.apk
            p
              .input-group(ng-show='app.more')
                span.input-group-addon
                  i.glyphicon.glyphicon-console
                input.form-control(type='text', value='')

ionic-cli-build.markdown

Ionic CLI - Build

A Pen by Robert on CodePen.

License.

script.coffeescript

angular.module 'app', []

.controller 'AppCtrl', ($scope) ->
  vm = this

  $scope.greeting = 'Welcome!'
  vm.package   = 'com.incredible-qr.'
  vm.cwVersion = '14.42.334.0'
  vm.fbAppId   = 809049445840255
  vm.fbAppName = 'Incredible-QR'
  vm.hcpUrl    = 'http://'
  vm.iosId     = 'id0000000000'
  vm.remote    = 1
  vm.author    =
    email: 'wayne@incredible-qr.com'
    team: 'Incredible-Qr Team'
    website: 'http://incredible-qr.com'
  vm.orientation = 'portrait'
  vm.editor    = 'Sublime\\ Text'

  vm.bindOncePackage = ->
    name = vm.directory
    vm.package = 'com.incredible-qr.' + name
    return
  vm.platformChanged = ->
    vm.crosswalk = if vm.platform is 'android' then 1 else 0
    return

  return

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular.min.js"></script>

style.sass

.help-block, span.txt
  font-size: 12px
  padding-left: 45px
  color: gray

ul
  margin-top: -8px
  margin-left: 28px
  li
    font-size: 12px
    color: #428bca 

pre
  margin-left: 45px
  .code
    color: #c7254e
    font-size: 11px
    line-height: 11px
    margin: 0
    padding: 0
  
dl.dl-horizontal
  font-size: 12px
  dt
    min-width: 530px
  dd
    margin-left: 540px

styles

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />