Hybrid Mobile Development Guideangularorange.io/docs/Mobile_Hybrid_Development.pdf · Mobile Hybrid...

Mobile HybridDeveloper Guide

(Ionic/Cordova)(Version 1.0)

Steve BuonincontriWeb Team6/28/2018

Mobile Hybrid Developer Guide

Introduction................................................................................................................................................4

Technology Stack.........................................................................................................................................4

NodeJS.................................................................................................................................................4

Ionic Framework..................................................................................................................................4

Ionic Native..................................................................................................................................4

Cordova Framework............................................................................................................................5

High Level Architecture...............................................................................................................................6

Development...............................................................................................................................................7

High Level Process...............................................................................................................................7

Enterprise Team Development...........................................................................................................8

Base Environment Setup.....................................................................................................................9

Installing NodeJS.........................................................................................................................9

Installing Webstorm....................................................................................................................9

Installing Ionic Cordova...............................................................................................................9

Verify Installation of Ionic...........................................................................................................9

Verify Installation of Cordova.....................................................................................................10

Using Cordova pluggins...............................................................................................................10

Checking Cordova pluggins.........................................................................................................11

Generating Icon & Splash Screen................................................................................................................12

Code Quality – Using TSLint........................................................................................................................13

TSLint Sample Project..........................................................................................................................14

Ionic Logging Service...................................................................................................................................15

Emulators....................................................................................................................................................16

Debugging...................................................................................................................................................17

Android Debug Bridge (adb) ...............................................................................................................17

iOS Debugging......................................................................................................................................18

Distribute, Release and Publish..................................................................................................................19

Email....................................................................................................................................................19

Commercial..........................................................................................................................................20

On Premises.........................................................................................................................................20

Automation.................................................................................................................................................21

Gulp......................................................................................................................................................21

Jenkins..................................................................................................................................................21

Mobile Device Management (MDM)..........................................................................................................22

Android........................................................................................................................................................23


Installing Java 8 and Android Studio...................................................................................................23

Configure Emulation Accelerator........................................................................................................24

Create Emulator...................................................................................................................................24

Create Andriod Platform using Cordova.............................................................................................24

Debugging a Cordova App...................................................................................................................24

Create Android Release Using Cordova...............................................................................................24

Distribute Android Application............................................................................................................25

IOS...............................................................................................................................................................26

Code Signing Process...........................................................................................................................26

Install iOS Deploy Tools.......................................................................................................................27

Create a Cordova Project.....................................................................................................................27

Create an Ionic Cordova Project..........................................................................................................27

Creating iOS Platform Release............................................................................................................28

APPENDIX ....................................................................................................................................................29

Package.json........................................................................................................................................29

Gulp Script...........................................................................................................................................30

Webstorm Configuration.....................................................................................................................34

BIOS Intel-VT Configuration.................................................................................................................34

Android Configuration.........................................................................................................................35

SDK Tools Configuration..............................................................................................................35

SDK Platforms Configuration.......................................................................................................35

User VARIABLES Configuration....................................................................................................36

System PATH and ENVIRONMENT Configuration.......................................................................36

iOS Config Files....................................................................................................................................37


· Introduction

This is a guide for developers for building hybrid mobile applications using Ionic 3 and Cordova 8. Everything in this guide is based on things needed to produce a mobile application that runs on Android and iPhone and essentially documents everything a typical developer might need to not only get started but to produce a functioning client based application.

· Technology Stack

The hybrid solution can consist of the following:

NodeJS

This will provide the javascript repository and package manager needed for development system.

Ionic Framework

This framework will provide the look and feel for mobile devices and consists of javascript, HTML and CSS:

• HTML 5 – for browser and webview rendering.

• SASS for implementing varying look and feels for mobile devices (Human interface for iOS and Material Design for Andriod)

• Angular Framework for providing the model view control system and reactive capabilities needed to call REST/JSON web services,

• Native wrappers around the mobile systems (i.e. cordova integration)

Ionic Native

This is a Typescript wrapper that wraps the cordova plugins in order to provide more reactive capabilities and a higher level Angular API expected in Ionic apps. Ionic apps should use ionic-native since it plugs well into the MVC/Typescript model of Angular. It also provides the capability to provide mock native services. Below are some of the ionic-native libraries that will be immediately important when developing mobile apps:

@ionic-native/core@ionic-native/file@ionic-native/file-path@ionic-native/file-transfer@ionic-native/camera@ionic-native/native-storage@ionic-native/sqlite@ionic-native/media@ionic-native/splash-screen


@ionic-native/status-bar@ionic-native/transfer

Documentation for ionic-native can be found here:

https://ionicframework.com/docs/native/

Cordova Framework

This provides the javascript API wrapper around the mobile OS systems andprovides javascript plugins to allow javascript code to call mobile native functions.Also the most important aspect of this framework is providing the browser-based WebView within the native mobile platform. Below are some cordova plugins thatare needed by you application.

cordova-plugin-cameracordova-plugin-devicecordova-plugin-filecordova-plugin-file-transfercordova-plugin-filepathcordova-plugin-ionic-keyboardcordova-plugin-ionic-webviewcordova-plugin-mediacordova-plugin-splashscreencordova-plugin-whitelist


· High Level Architecture

The high level architecture is a pure HTML, Javascript and CSS solution based on Ionic and Cordova integration. The Ionic framework provides the the look and feel via SASS technology and Angular provides the MVC functionality needed to support user actions, data binding and asynchronous web service calls. Ionic also supports the native calls using its Ionic Native with Cordova integration for storage, file system access, camera and audio etc. The integration provides the abilitly to create a CordovaWebView that runs in the native webview supported by the Mobile OS. See diagram below.

High level Architecture of Hybrid Solution


· Development

High Level Process

Mobile development can be done in a team environment. Ionic apps are made up of that provide reusable software Modules. The Development environment can consist of developers working on different Ionic modules and using a source code repository with scripts to enabling auto deploy a mobile app for testing and official distribution. This can be done with the Webstorm IDE with node, typescript and source code control configured. In addition, gulp and jenkins can be used to automate tasks (see automation section). Pictorially a simple general development environment can be represented in the following fashion.

Development High Level


Enterprise Team Development

When working in a large mobile team environment its good to modularize the app so that different teams can work on separate modules. In a DevOps environment we can use Git Enterprise which provides team based access control and we can form teams to build separate javascript modules that can be easily integrated to form a large scale mobile hybrid application. Loosely speaking there can be a team that produces the main application module as well as the core framework modules that provide cross cutting concerns such as logging, configuration, security, utilitiles and common services. This should put the structure of the application in place so that other teams that are building featured modules can code according to the appropriate company standards. The diagram below shows how teams can be developing modules, themes, web services and unit tests.

Team Development and DevOps


Follow the Base Environment Setup to get started with developing Ionic/Cordova apps.

Base Environment Setup

Installing NodeJS

NodeJS is the foundation of Javascript libraries which consists of a repository, packagemanager and other things needed in a development environment. The latest version of Node can be found at https://nodejs.org. after downloading and installing the executable and package manager should be placed in your PATH (e.g. ...Program Files\node8).

• node – executable• npm – package manager

Developers can verify node and npm in PATH using the following commands

node -vnpm -v

Installing Webstorm

The webstorm IDE is a good choice for development. In order to install, developers cango to http://www.jetbrains.com/webstorm/ to download and install.

The installation process created the projects directory (e.g WebStormProjects). Go to settings and make sure that the installation points to the proper Node installation directory and typescript version.

Define projects directory:

C:\Users\steve\WebstormProjects>

Creation of ionic and cordova projects shoud be done in the projects directory using the ionic or cordova CLI. Keep in mind that there is a global and local node_modules directories used in development. The global modules are used across projects and the local modules are used for a specific project. If newer versions of modules are needed for a new project you can install them locally without breaking all other projects.

Installing Ionic Cordova

Install Ionic and Cordova globally using npm:

C:\Users\steve\WebstormProjects>npm install -g ionic cordova

Verify Installation of Ionic

Verify that ionic works by creating a simple project using ionic CLI commands and a blank starter template:


http://www.jetbrains.com/webstorm/

https://nodejs.org/

C:\Users\steve\WebstormProjects>ionic start helloworld blank (e.g. using blank template)√ Creating directory .\helloworld - done!√ Downloading and extracting blank starter - done!? Would you like to integrate your new app with Cordova to target native iOS and Android? No

C:\Users\steve\WebstormProjects>cd helloworldC:\Users\steve\WebstormProjects\helloworld>ionic serve

This will create a blank project and run it withing a browser using the default port.

Verify Installation of Cordova

Verify that cordova works before using the mobile SDKs:

C:\Users\steve\WebstormProjects>cordova create hello com.example.hello HelloWorldC:\Users\steve\WebstormProjects>cd helloC:\Users\steve\WebstormProjects\hello>cordova platform add browserC:\Users\steve\WebstormProjects\hello>cordova platform ls C:\Users\steve\WebstormProjects\hello>cordova build browserC:\Users\steve\WebstormProjects\hello>cordova run browser

This will create a project and run it withing a browser using the default port.

Using Cordova pluggins

When creating an ionic cordova app, you should use ionic-native to talk to cordova. Ionic-native wraps cordova with typecsript style observable patterns making your application much more reactive. In addition, ionic-native simplifies cross platform capabilities.

C:\Users\steve\WebstormProjects>ionic start mypics blankC:\Users\steve\WebstormProjects>cd mypicsC:\Users\steve\WebstormProjects\mypics>npm install @ionic-native/camera --save C:\Users\steve\WebstormProjects\mypics>npm install @ionic-native/file --save C:\Users\steve\WebstormProjects\mypics>npm install @ionic-native/file-path --save C:\Users\steve\WebstormProjects\mypics>npm install @ionic-native/transfer --save

C:\Users\steve\WebstormProjects\mypics>ionic plugin add cordova-plugin-camera --saveC:\Users\steve\WebstormProjects\mypics>ionic plugin add cordova-plugin-file --saveC:\Users\steve\WebstormProjects\mypics>ionic plugin add cordova-plugin-file-transfer --saveC:\Users\steve\WebstormProjects\mypics>ionic plugin add cordova-plugin-filepath --save

Other plugins can be used when needed. Keep in mind that not all these commands are needed. As long as you have your package.json file set up properly to include these packages (see appendix) you can just type the following command to install all

C:\Users\steve\WebstormProjects\mypics>npm install


Checking Cordova pluggins

Always use a the most up to date plugin possible.

The cordova-check-plugins utility can be installed and run to determine which pluginsare installed in the project and what updates are available.

C:\Users\steve\WebstormProjects>npm install -g cordova-check-pluginsC:\Users\steve\WebstormProjects>cordova-check-plugins

* Up-to-date plugins ***********************plugin: cordova-plugin-filesource: npm://cordova-plugin-file@^6.0.1installed version: 6.0.1remote version: 6.0.1

* Plugin update available ****************************plugin: cordova-plugin-ionic-keyboardsource: npm://cordova-plugin-ionic-keyboard@^2.0.5installed version: 2.0.5remote version: 2.1.2


· Generating Icon & Splash Screen

Icon in an Ionic App is a small image seen when your app is installed. It is usually placed on home screens or installed apps. On the home screen it is accompanied by the app name that appears underneath it.

Splash Screen in an Ionic App is a image seen when you launch an application, and then disappers after a delay, moving to your main application.

Ionic provides a simple CLI command for generating the icon and splash screen for all your platforms. see

https://blog.ionicframework.com/automating-icons-and-splash-screens/

for more information. But here is the process:

Step 1:

Create 2 files with name icon.png (192×192 px) and splash.png (2208×2208 px) and place in the projectfolder/resources folder.

Step 2:

Use ionic CLI to generate all the icon and splash screen images needed for all device orientations. This will automatically generate all the required files and place relevant entries in config.xml.

C:\Users\steve\WebstormProjects\hello>ionic resources

The generated resources can be found in the following directories

C:\Users\steve\WebstormProjects\hello\resources\android\icon\...C:\Users\steve\WebstormProjects\hello\resources\android\splash\...C:\Users\steve\WebstormProjects\hello\resources\ios\icon\...C:\Users\steve\WebstormProjects\hello\resources\ios\splash\...

Note: The name of the app can be changed by editing the config.xml name:

<name>MyApp</name>


https://blog.ionicframework.com/automating-icons-and-splash-screens/

· Code Quality – Using TSLint

Lint is used by the javascript community for enforce code quality by providing best coding styles and practices within your IDE. Ionic (angular) CLI produces a starting point by providing appropriate installed node_modules defined in package.json as wellas a tslint.json file for initial set of coding rules definitions. These rules can be ES6 or typescript specific but typcially maps to the project created by CLI. We can also supplement starting rules with more specialized coding rules that help with specific features such as Angular 6 or RxJS etc. The typical thing to do now is let CLI create project and then use NPM to install more rules. Once they appear in the package.json file, you can update the tslint.json file to include them in your project. When developing your IDE will inform you of any rules violated and the ability to fix by point and click.

To install a tslint project that is appropriate for an Ionic 3 app you can execute the folllowing comands:

C:\Users\steve\WebstormProjects\hello>npm install tslint-consistent-codestyle –save-devC:\Users\steve\WebstormProjects\hello>npm install tslint-eslint-rules –save-devC:\Users\steve\WebstormProjects\hello>npm install tslint-origin-ordered-imports-rule –save-devC:\Users\steve\WebstormProjects\hello>npm install tslint-rxjs-subject-restrictions-rule –save-dev

The following shows the package.json file exhibiting addition rules

package.json{ "name": "hello",", "scripts": { ... "lint": "ng lint", }, "dependencies": { ... "rxjs": "^6.0.0-rc.0", },"devDependencies": {

"tslint": "~5.9.1","tslint-consistent-codestyle": "^1.13.0","tslint-eslint-rules": "^5.3.1","tslint-origin-ordered-imports-rule": "^1.0.4","tslint-rxjs-subject-restrictions-rule": "^1.0.4"', "typescript": "~2.7.2"

...}


Once rules are installed we can update our tslint.json to include the rules directories and use them.

tslint.json{ "extends": [ "tslint-eslint-rules" ], "rulesDirectory": [ "node_modules/codelyzer", "node_modules/tslint-origin-ordered-imports-rule/dist", "node_modules/tslint-consistent-codestyle/rules", "node_modules/tslint-rxjs-subject-restrictions-rule/dist" ], "rules": { "rx-subject-restrictions": true, "class-name": true, "no-multi-spaces": true,…}

C:\Users\steve\WebstormProjects\hello>ng lintAll files pass linting.

TSLint Sample Project

To access a sample project that utilizes the above mentioned tslint best practice modules go the url and download the zip file. Or install GIT and clone.

https://github.com/soacs/MyLintProject.git git clone https://github.com/soacs/MyLintProject.git

Then run npm install in order to install appropriate node_modules needed by the lint project.

Alternatively you can copy the package.json entries needed, then execute

npm -install –save-dev

and you will see you local node_modules directory updated. Then copy the the piece ofthe tslint.json code into you project tslint.json file.


https://github.com/soacs/MyLintProject.git

https://github.com/soacs/MyLintProject.git

· Ionic Logging Service

Logging on mobile devices is critically important. Since most of the time we are dealingwith a client server application that runs on a variety of user devices. We recommend using one that at least encapsulates log4js capabilities but also has the appropriate appenders needed for the mobile environment.

With Ionic 4, Angular 5 we can use the following service:

https://www.npmjs.com/package/ionic-logging-service

This service has the following appenders which will be useful in any logging senario:

• AjaxAppender: sends the log messages to a backend server • MemoryAppender: keeps the log messages in memory • LocalStorageAppender: stores the log messages in local storage

A useful example is the following:

https://github.com/Ritzlgrmft/ionic-logging-sample

This will easily render different logging levels messages on the front end template. The following commands can get the app running easily.

C:\Users\steve\WebstormProjects> git clone https://github.com/Ritzlgrmft/ionic-logging-sample.gitC:\Users\steve\WebstormProjects>cd ionic-logging-serviceC:\Users\steve\WebstormProjects\ionic-logging-service>npm installC:\Users\steve\WebstormProjects\ionic-logging-service>ionic serve


https://github.com/Ritzlgrmft/ionic-logging-sample.git

https://github.com/Ritzlgrmft/ionic-logging-sample

https://www.npmjs.com/package/ionic-logging-service

· Emulators

There are several emulators that can be used to do rapid hybrid mobile development. Some commonly used emulators are listed below.

1) Android Studio – this is something that you will depend on for emulation immediately in the development process. The studio comes with Andriod Virtual Devices (AVD) this allows you to create an emulator. The studio also allows us to install things that are needed for accessing resources such as drivers needed for the emulator to access the camera, video etc. The studioand the emulator take up lots of memory (~3GB).

2) IOS Simulator – Apples iMac version of simulating the app running in mobile device. This comes with Xcode 9 and runs seamlessly in the development environment. Provides device console capabilities.

3) AWS Device Farm – AWS provides a site area that provides a way to upload your app and run diagnostics to determine which devices your app will run on and what errors appear when running on a device etc. It also allows you to run a session of VMWare based emulator. So picking a Galaxy 6 for example to run you application can be done quicky and installing the app and testing is simple. In addition it creates videos, logcat files and other resources to tap into to help with the development process.

It is a good idea to start initially to use emulators since it ensures the code foundation is avaiable on your system and using tools like Android Studio and Xcode also provide simple ways to install whatever is needed on your system.

However, you will find quickly that the memory consumption is high and slows down development. In addition, using the device native services are sometimes emulated and does not allow camera and sound recording properly. So using a connected device to run your app will be the most efficient way to develope an app. Using the adbdebugger while connected is also convenient.


· Debugging

Android Debug Bridge (adb)

This is versatile command-line tool that lets you communicate with a device such as installing and debugging apps. It also provides access to a Unix shell that you can use to run a variety of commands on a device. It is a client-server program that includes three components:

• A client, which sends commands. The client runs on your development machine. You can invoke a client from a command-line terminal by issuing an adb command.

• A daemon (adbd), which runs commands on a device. The daemon runs as a background process on each device.

• A server, which manages communication between the client and the daemon. The server runsas a background process on your development machine.

The SDK Platform-Tools package contains the executable adb in your path. The executable must be included in your path in order to use it

e.g. C:\Users\steve\AppData\Local\Android\Sdk\platform-tools

You can run an emulator and log console out to the mobile.log as follows:

C:\Users\steve\WebstormProjects\hello>ionic cordova run androidC:\Users\steve\WebstormProjects\hello>adb logcat > mobile.log

You can also connect to your device (e.g. ASUS Xenfone 5) and run adb and fire up an app on the mobile device.

C:\Users\steve\WebstormProjects\hello>adb devices

List of devices attachedHAAKCX013802BMJ device

C:\Users\steve\WebstormProjects\hello>ionic cordova run android --deviceC:\Users\steve\WebstormProjects\hello>adb logcat

If your device does not show up when listing devices, you make sure your device has developer options set – this makes sure the debugger daemon (adbd) is running on your device:

Go to Settings > About phone > Software info > Build number. Tap Build number seven times this will unlock the developer options. Once activated, you will see a message that reads, “You are now a developer!” Go back to Settings, where you’ll find a Developer options entry in the menu. USBdebugging can then be activated.

Documentation: https://developer.android.com/studio/command-line/adb


https://developer.android.com/studio/command-line/adb

iOS Debugging

Xcode is typically used for debugging your iOS application. However console.log output might not get logged in the simulator console.

Use the web inspector in safari to debug devices and simulators.

In simulator or iOS device go to settings--> safari-->advanced and make sure web inspector is enabled.

In Safari go to preferences → advanced make sure it shows develop in menu bar. Go to develop-->simulator-->index.html

then debug just like browser debug.


· Distribute, Release and Publish

There must be a process to distribute mobile applications for testing on devices. There are several ways to do this depending on your needs.

Email

There are several environments which can serve as the distribution service for testing. For example an android APK file or an iOS IPA file can be uploaded to this site http://diawi.com for distribution. Just send a tester the URL generated after upload.

Another method that might give a developer much more control is to use gulp tasks within your IDE. That is using tasks for building, uploading to web server and emailing a URL to testers is point and click once gulp tasks are developed. Once the gulp task sends testers an email with distribution information, users can read their email on their mobile device, click on the email link sent via the email message and install the application on their mobile device. Mobile users will see that the app is signed with a trusted digital certificate and they can install or update their device. Below is the recommended format of such an email.

Email Distribution Notification

Note that directories and filenames are usually used appropriately on a web server. That is directory categories and filenames based on date attributes yield unique names.

e.g. Month_Day_Year_Hours_Minutes_Seconds.ext

$ …mobileapps/android/06_20_2018_12_44_23.apk$ …mobileapps/ios/06_20_2018_23_01_59.ipa


http://diawi.com/

Commercial

Google Play – Google provides the ability to publish rapidly to over 2 billion active Android devices, Google Play helps you grow a global audience for your apps and games and earn revenue.

https://developer.android.com/distribute/

Apple Store - The App Store lets you easily deliver apps to hundreds of millions of people around the world on their Mac, iPhone, iPad, Apple Watch, and Apple TV. With over $100 billion paid to developers and a rapid adoption rate of new software by Applecustomers, it’s an incredible time to distribute on Apple platforms.

On Premises

Enterprise Mobile Device Managers can be used for an on-premise solution.

e.g. apple's MDM https://www.jamf.com

as well as gartner's site for information and comparing systems.

https://www.gartner.com/reviews/market/enterprise-mobility-management-suites.

The long term strategy for on-premise can also include using a Jenkins pipeline for automation in a DevOps environment.


https://www.gartner.com/reviews/market/enterprise-mobility-management-suites

https://www.jamf.com/

· Automation

Gulp

We can automate our build, deploy and distribution process by using GULP within a development environment. The GULP script is kept in source code control and can be checked out and run by any developer Below is a configuration of GULP appearing in the IDE that can execute a sequence of tasks (such as build_release_distribute).

Automate Task Management

See https://github.com/soacs/myionictabscordovaproject for GULP source.

Note: Using Gulp in conjunction with AWS CLI one can easily implement a DevOps environment using AWS Services. Purchasing a Jenkins AMI instance or using AWS DevOps services will suffice.

Jenkins

Jenkins can also be used on premises to provide a DevOps environment. This is a good solution for client and server and can also be used to interact with a MDM.


https://github.com/soacs/myionictabscordovaproject

· Mobile Device Management (MDM)

Mobile Device Management is needed for organizations that will be doing large scale mobile application development for their users. Typically they are used to provide the following services:

✔ set up - configure settings like Wi-Fi and email and on all of your devices quickly and consistently.

✔ inventory - automatically collect hardware, software and security configuration details from your Apple devices

✔ manage - centrally deploy apps over the air and reassign licenses as your workforce changes.

✔ protect - secure your sensitive data, enforce passcodes and remotely lock/wipe devices.

✔ self Service - Empower users with your own app store. Let them install apps, update software and maintain their own device without a help desk ticket.

✔ patch Management - Automatically combat security vulnerabilities and ensure you users always get the latest and greatest software.

✔ integrations - integrates with with other device managers, directory services, single sign-on and API integrations.

✔ advanced Options - From advanced configurations and custom scripts to in-house or third-party app deployment.

Visit Gartner's Report of Enterprise Device Management Solutions (EDMs).

Visit JAMF for apple's Mobile Device Management Solutions (MDMs).


https://www.jamf.com/

https://www.gartner.com/reviews/market/enterprise-mobility-management-suites

· Android

Ionic Cordova can be used to create platforms for Android. However the Java and Android Studio must be installed and cofigured correctly before using Cordova.

Installing Java 8 and Android Studio

In order for Cordova to work properly for the Android platform. The following needs to be installed and configured. This will vary based on operating system and other factors.

Download and install Andriod Studio: https://developer.android.com/studio/index.html

*Make sure you can run andriod studio and the Tools menu includes the Android item and the AVD and SDK tools can be used from within this menu. If not, re-install studio.

When installing must ensure the following are installed:

SDK Platforms• Android API 27• Android Oreo

SDK Tools• Andriod appears in tools menu• Simulators are installed• emulators are installed• HAXM emulator accelerator is installed• SDK platform tools• SDK tools

Go to System Settings, Set user variable ANDROID_HOME to:C:\Users\steve\AppData\Local\Android\Sdk

Set System PATH to include:C:\Users\steve\AppData\Local\Android\Sdk\toolsC:\Users\steve\AppData\Local\Android\Sdk\platform-toolsC:\Program Files\Java\jdk1.8.0_161\bin

see appendix for snapshot


https://developer.android.com/studio/index.html

Configure Emulation Accelerator

Enter BIOS and turn on Intel-VT

• hold shift key and restart• enter bios mode• go to Intel-VT and enable• save• leave bios mode

Create Emulator

An emulator is needed by Cordova to run apps in debug mode. Depending on Ionic Cordova ro Cordova, this might startup automatically or you might need to start the emulator before running emulation commands

Create an emulator in android studio

tools menu --> Android --> AVD Manager -->Create Emulator -->Samsung Galaxy 6

Create Andriod Platform using Cordova

C:\Users\steve\WebstormProjects\hello>cordova platform add androidC:\Users\steve\WebstormProjects\hello>cordova platform lsC:\Users\steve\WebstormProjects\hello>cordova requirements C:\Users\steve\WebstormProjects\hello>cordova build android C:\Users\steve\WebstormProjects\hello>cordova emulate android

emulate should use default emulator in AVD (android virtual devices)emulate uses the app-debug.apk file generated by Cordova.

Debugging a Cordova App

Andriod SDK does provide a debugger which you can run. It provides console output which you application is emulated. It is called Andriod Debugger (adb). Directory is:

C:\Users\[user]\AppData\Local\Android\sdk\platform-tools\abd.exe

Create Android Release Using Cordova

It is recommended that signed files be used for releases. They are required for users to trust the application install and updates.

Using Android Studio:

• create release.keystore in android studiogo to build-->generate signed SDK-->create new keystorethen use values in properties file below:


• create release-signing properties

storeFile=release.keystorestoreType=jkskeyAlias=MyCordovaKeykeyPassword=UINET123storePassword=UINET123

• temporarily place both files in

C:\Users\steve\WebstormProjects\hello\platforms\android

Note: Need strategy for doing this consistently for projects.

C:\Users\steve\WebstormProjects\hello>cordova build –release android

OUTPUT

C:\Users\steve\WebstormProjects\hello\platforms\android\app\build\outputs\apk\release\app-release.apk

Distribute Android Application

There are 3 ways to distribute an APK file:

• email the URL pointing to the APKhttp://angularorange.io/app-release.apkhttp://angularorange.io/ionicapp-release.apk

• email APK file to user (e.g send app-release.apk via email)

• upload to google play (e.g. upload app-release.apk)

see distribution section in this document for more information.


http://angularorange.io/ionicapp-release.apk

http://angularorange.io/app-release.apk

· IOS

The iOS environment can be used to create Ionic/Cordova mobile apps. You can use the following versions of software or higher to get started:

• Node 8• Ionic version 3.2• Cordova 8.0• macOS EL Captian 10.11• Xcode 8.2 • Xcode tools: (run xcode-select –install)• node packages (npm install -g ios-deploy)

Using these tools you can develope and build Ionic/Cordova applications and simulate iOS devices using the standards commands documented in the Ionic/Cordova documentation. In this scenario, the generated App.app folder contains the app bundlethat can be emulated.

Parts of this process are outlined in the URL below:

http://cordova.apache.org/docs/en/latest/guide/platforms/ios

Code Signing Process

In order to successfully run Ionic/Cordova applications on a device or set of devices you must create a App.ipa file that is signed and provisioned. There are several things that are needed:

1) Join the Member Center - registered for the Apple Developer Program and login to the member center. Here you can do the following which are all needed in the process:

• create Provisioning Profiles

• create App Ids

• create Certificates

NOTE: Xcode used for viewing and creating your Signing Identities or to download and refresh Provisioning Profiles.

2) Register an iOS App ID - uniquely identifies an application with the Apple applicationservices (e.g Push Notifications) and lets you incorporate them in your app. Set a bundle identifier associated with the app ID.

3) Create a Code Signing Identity - Use the Keychain Access Application to create a Certificate Signing Request (CSR) . Upload the CSR to apple developer and apple generates a certificate that is downloaded, double clicked it and it installs in the keychain. The certificate is used to sign the application and is called your Code Signing


http://cordova.apache.org/docs/en/latest/guide/platforms/ios

Identity. Loosely speaking it is the public key corresponding to your private key stored in your keychain.

4) Create a Development Provisioning Profile – this will contain a set of iPhone Development Certificates, Unique Device Identifiers and an App ID. This is done usingthe member center and Xcode can help with this process.

An App ID is a two-part string used to identify one or more apps from a single development team.

Note You must have an account on http://developer.apple.com in order to participate inthe code signing and provisioning of iOS applications. in order to test a iOS mobile appon a device or set of devices, it must be provisioned.

See this article for best reference for provisioning apps:

https://medium.com/ios-os-x-development/ios-code-signing-provisioning-in-a-nutshell-d5b247760bef

Install iOS Deploy Tools

Install the deploy tools:

$ xcode-select –install $ npm install -g ios-deploy

Create a Cordova Project

$ cordova create hello com.example.hello HelloWorld$ cd hello$ cordova platform add ios$ cordova build ios $ cordova emulate ios$ cordova run ios --device (run on a connected device)

emulate should use the default simulator in iOS. Will use the app bundle generated by Cordova App.app file system.

Create an Ionic Cordova Project

With Ionic you create a project using a starter template like “tabs”.

$ ionic start MyIonicCordovaTabs tabs$ cd MyIonicCordovaTabs$ ionic cordova platform add ios $ ionic cordova build ios $ ionic cordova emulate ios


https://medium.com/ios-os-x-development/ios-code-signing-provisioning-in-a-nutshell-d5b247760bef

http://developer.apple.com/

Creating iOS Platform Release

In order to create a distribution, that is a App.ipa file to put on a web server, you need to run:

$ ionic cordova build ios –device –release

This will generate a file platforms/ios/build/device/App.ipa which can be placed on a web server or uploaded to mobile app server. You can also use:

$ ionic cordova build ios –device –release –buildConfig=build.json

Note there are several files that cordova allows you to control the configuration. Based on my experience the cordova uses them by default and not clear how this fuses with Xcode configurations

• build.json• build-release.xcconfig


APPENDIX

Package.json{ "name": "MyIonicComponentsProject", "version": "0.0.1", "author": "Ionic Framework", "homepage": "http://ionicframework.com/", "private": true, "scripts": { "clean": "ionic-app-scripts clean", "build": "ionic-app-scripts build", "lint": "ionic-app-scripts lint", "ionic:build": "ionic-app-scripts build", "ionic:serve": "ionic-app-scripts serve" }, "dependencies": { "@angular/animations": "5.2.9", "@angular/common": "5.2.9", "@angular/compiler": "5.2.9", "@angular/compiler-cli": "5.2.9", "@angular/core": "5.2.9", "@angular/forms": "5.2.9", "@angular/http": "5.2.9", "@angular/platform-browser": "5.2.9", "@angular/platform-browser-dynamic": "5.2.9", "@ionic-native/camera": "^4.7.0", "@ionic-native/core": "^4.7.0", "@ionic-native/file": "^4.7.0", "@ionic-native/file-path": "^4.7.0", "@ionic-native/file-transfer": "^4.7.0", "@ionic-native/media": "^4.7.0", "@ionic-native/splash-screen": "^4.7.0", "@ionic-native/status-bar": "^4.7.0", "@ionic-native/transfer": "^3.14.0", "@ionic/storage": "2.1.3", "cordova-browser": "~5.0.3", "cordova-plugin-camera": "^4.0.3", "cordova-plugin-device": "^2.0.2", "cordova-plugin-file": "^6.0.1", "cordova-plugin-filepath": "^1.3.0", "cordova-plugin-ionic-keyboard": "^2.1.2", "cordova-plugin-ionic-webview": "^1.2.1", "cordova-plugin-media": "^5.0.2", "cordova-plugin-splashscreen": "^5.0.2", "cordova-plugin-whitelist": "^1.3.3", "ionic-angular": "3.9.2", "ionicons": "3.0.0", "npm-check": "^5.7.1", "rxjs": "5.5.8", "sw-toolbox": "3.6.0", "zone.js": "0.8.20", "cordova-android": "~7.0.0" }, "devDependencies": { "@ionic-native/camera": "^4.7.0", "@ionic-native/core": "^4.7.0",


"@ionic-native/file-path": "^4.7.0", "@ionic/app-scripts": "^3.1.9", "cordova-plugin-filepath": "^1.3.0", "typescript": "^2.8.3" }, "description": "An Ionic project", "cordova": { "plugins": { "cordova-plugin-file": {}, "cordova-plugin-whitelist": {}, "cordova-plugin-splashscreen": {}, "cordova-plugin-ionic-keyboard": {}, "cordova-plugin-media": {}, "cordova-plugin-camera": {}, "cordova-plugin-device": {}, "cordova-plugin-ionic-webview": {}, "cordova-plugin-filepath": {} }, "platforms": [ "browser", "android" ] }}

Gulp Script

var gulp = require('gulp');var clean = require('gulp-clean');var runSequence = require('gulp-run-sequence');var exec = require('child_process').exec;var requireDir = require('require-dir');var mail = require('gulp-mail');var gutil = require('gulp-util');var ftp = require('vinyl-ftp');var mailing = require('gulp-mailing');requireDir('./gulp/tasks', {recurse: true});// Help Commandsgulp.task('ionic_help', function (cb) { exec('ionic --help', function (err, stdout, stderr) { console.log(stdout); console.log(stderr); cb(err); });});gulp.task('cordova_help', function (cb) { exec('cordova --help', function (err, stdout, stderr) { console.log(stdout); console.log(stderr); cb(err); });});// Platform Informational Commandsgulp.task('ionic_cordova_platforms_ls', function (cb) { exec('ionic cordova platforms ls', function (err, stdout, stderr) { console.log(stdout); console.log(stderr); cb(err); });


});gulp.task('ionic_cordova_requirements', function (cb) { exec('ionic cordova requirements', function (err, stdout, stderr) { console.log(stdout); console.log(stderr); cb(err); });})// Distribute Commandsgulp.task('distribute_android_release_to_aws', function (cb) { exec('aws s3 cp platforms\\android\\app\\build\\outputs\\apk\\release\\app-release.apk s3://aws-website-angularorange-wcrwx/ ', function (err, stdout, stderr) { console.log(stdout); console.log(stderr); cb(err); });});gulp.task('distribute_android_debug_to_aws', function (cb) { exec('aws s3 cp platforms\\android\\app\\build\\outputs\\apk\\debug\\app-debug.apk s3://aws-website-angularorange-wcrwx/ ', function (err, stdout, stderr) { console.log(stdout); console.log(stderr); cb(err); });})// All Platform Commands// Platform Commands (Browser)gulp.task('ionic_cordova_platform_add_browser', function (cb) { exec('ionic cordova platform add browser', function (err, stdout, stderr) { console.log(stdout); console.log(stderr); cb(err); });});gulp.task('ionic_cordova_platform_rm_browser', function (cb) { exec('ionic cordova platform rm browser', function (err, stdout, stderr) { console.log(stdout); console.log(stderr); cb(err); });});gulp.task('ionic_cordova_build_browser', function (cb) { exec('ionic cordova build browser', function (err, stdout, stderr) { console.log(stdout); console.log(stderr); cb(err); });});gulp.task('ionic_cordova_run_browser', function (cb) { exec('ionic cordova run browser', function (err, stdout, stderr) { console.log(stdout); console.log(stderr); cb(err); });});// Platform Commands (Android)gulp.task('ionic_cordova_platform_add_androidd', function (cb) { exec('ionic cordova platform add android', function (err, stdout, stderr) { console.log(stdout);


console.log(stderr); cb(err); });});gulp.task('ionic_cordova_platform_rm_android', function (cb) { exec('ionic cordova platform rm android', function (err, stdout, stderr) { console.log(stdout); console.log(stderr); cb(err); });});gulp.task('ionic_cordova_build_andriod', function (cb) { exec('ionic cordova build android', function (err, stdout, stderr) { console.log(stdout); console.log(stderr); cb(err); });});gulp.task('ionic_cordova_build_andriod_release', function (cb) { exec('ionic cordova build android --release', function (err, stdout, stderr) { console.log(stdout); console.log(stderr); cb(err); });});gulp.task('ionic_cordova_emulate_android', function (cb) { exec('ionic cordova emulate android', function (err, stdout, stderr) { console.log(stdout); console.log(stderr); cb(err); });});gulp.task('deploy_android', function (cb) { runSequence('ionic_cordova_build_andriod_release', 'distribute_android_release_to_aws', cb);});// Platform Commands (iOS)gulp.task('ionic_cordova_platform_add_ios', function (cb) { exec('ionic cordova platform add ios', function (err, stdout, stderr) { console.log(stdout); console.log(stderr); cb(err); });});gulp.task('ionic_cordova_platform_rm_ios', function (cb) { exec('ionic platform rm ios', function (err, stdout, stderr) { console.log(stdout); console.log(stderr); cb(err); });});// Run Commandsgulp.task('ionic_serve', function (cb) { exec('ionic serve', function (err, stdout, stderr) { console.log(stdout); console.log(stderr); cb(err); });});gulp.task('ionic:watch:before', ['watch']);


// Email Notifications using AWS Email Servervar smtpInfoAws = { auth: { user: "AKIAJCGHN4IHSWAPXMCA", pass: "AjAiFzGqtjVGGGVr2REEfd20lsXuxvAKbTrAyB/p" }, host: "email-smtp.us-east-1.amazonaws.com", secureConnection: false, port: 587};gulp.task('distribution_email_notification', function () { return gulp.src('./distribution/html/mobileDistributionEmailMessage.html') .pipe(mail({ subject: 'Mobile App Version 2.0 Distribution', to: [ '[email protected]' ], from: '[email protected]', smtp: smtpInfoAws }));});// Email Notifications using Mochahost Email Servervar smtpInfoMochahost = { auth: { user: "dncnw0kt", pass: "vanhalen91" }, host: "mail.soaconsultingservices.com", secureConnection: false, port: 2525};gulp.task('distribution_email_attachment_notification', function () { return gulp.src('./distribution/html/mobileDistributionEmailAttachedMessage.html') .pipe(mailing({ subject: 'Mobile App Version 2.0 Now Available ', to: [ '[email protected]' ], from: '[email protected]', attachments: [ { path: 'app-release.apk' } ], smtp: smtpInfoAws }));});


Webstorm Configuration

BIOS Intel-VT Configuration


Android Configuration

SDK Tools Configuration

SDK Platforms Configuration


User VARIABLES Configuration

System PATH and ENVIRONMENT Configuration


iOS Config Files

build.json (Warning – Do not update this file like cordva docs say – let Xcode update and config)

{ "ios": { "debug": { "codeSignIdentity": "iPhone Developer", "developmentTeam": "FG35JLLMXX4A", "packageType": "development", "buildFlag": [ "EMBEDDED_CONTENT_CONTAINS_SWIFT = YES", "ALWAYS_EMBED_SWIFT_STANDARD_LIBRARIES=NO", "LD_RUNPATH_SEARCH_PATHS = \"@executable_path/Frameworks\"" ] }, "release": { "codeSignIdentity": "iPhone Developer", "developmentTeam": "FG35JLLMXX4A", "packageType": "app-store", "buildFlag": [ "EMBEDDED_CONTENT_CONTAINS_SWIFT = YES", "ALWAYS_EMBED_SWIFT_STANDARD_LIBRARIES=NO", "LD_RUNPATH_SEARCH_PATHS = \"@executable_path/Frameworks\"" ] } } }


Hybrid Mobile Development Guideangularorange.io/docs/Mobile_Hybrid_Development.pdf · Mobile Hybrid...

Documents

Transcript of Hybrid Mobile Development Guideangularorange.io/docs/Mobile_Hybrid_Development.pdf · Mobile Hybrid...