To run web pages (web applications) through a native component called the ‘WebView’. This allows you to to run a js application (which needs a browser) through this component.
There are frameworks that make it easy to run a webapp in a webview. The most popular, known as Cordova (an open source project) and PhoneGap (owned by Adobe and based on Cordova) that offers features and services on top of it.
Ionic let’s you write a webapp the same way you would for a website and (html, css, js) and package it as a mobile app with Cordova. If you just wrote a webapp from scratch yourself and showed in a webview, users would notice a weirdness in the responsiveness and look… Ionic gives you many components that have the same look and feel as native components, using appropriate styles and behavior for each platform.
Ionic is a front-end SDK for mobile applications containing components that mimic the native platform. Many components are written in css, so adding classes gives you immediate native interface look. More complex interactive components such as navigation and swiping are written in AngularJS and JS. It also includes a collection of icons as a css
Using the Ionic CLI:
View – To share your application with other for testing without needing to compiling to native code first
Creator – lets you design the UI and export a working Ionic project
Push – for push notifications
TO RUN ANDROID SDK and AVD:
VIEW OUTPUT LOGS:
$ cd /Users/username/Development/android-sdk-macosx/platform-tools
Revoke USB Debugging on phone
Restart ADB Server:
$ cd /Users/username/Development/android-sdk-macosx
ruby -e “$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)”
QUIT TERMINAL AND RESTART THEN:
brew install homebrew/versions/node4-lts
Create a new project:
-> new name -> template
$ ionic start new-app-name maps
$ ionic start new-app-name tabs
$ ionic start new-app-name blank
Run Project In Browser:
$ ionic serve
Run as Android (NEEDED ONCE PER PROJECT):
(Navigate to project then…)
$ ionic platform add android
$ cordova platform add android
$ ionic build android
$ ionic emulate android ———————————–
TO RUN ON A USB ATTACHED DEVICE:
1) Attach phone via USB
2) Open settings -> Developer Options -> Check (or re-check) USB Debugging
3) Navigate to application in terminal and run:
4) ionic run android -l (the -l is for livereload)
Run as IOS (new proj comes with it by default):
$ ionic platform add ios
$ ionic build ios
$ ionic emulate ios
$ ionic run ios
Preparing config.xml, splash screen and icon images
Open config.xml in the ww folder.
widget id to reverse domain to ensure uniqueness.
name field will probably need to be chnaged as well.
Further edit description, email and so on.
View Cordova docs for more details.
Generate icon and splash screen images (Ionic to the rescue!)
ionic help resources for a list of helpers
/resources/icon.png with your new image.
ionic resources --icon to auto generate from that file.
Repeat process for “splash” screen images
ionic resources --splash.
Packaging For Release In App Stores
View publishing details here.
$ keytool -genkey -v -keystore my-release-key.keystore -alias alias_name -keyalg RSA -keysize 2048 -validity 10000
…to generate your key – change the path and alias to fit your needs
Keep your keystore certificate in safe place, you will need it for all app releases
ionic build --release android
It will create and UNSIGNED version, copy that version path and change the name to read “signed”
$ jarsigner -verbose -sigalg SHA1withRSA -digestalg SHA1 -keystore my-release-key.keystore HelloWorld-release-signed.apk alias_name
- The above needs editing:
- point to your local keystore
- change path name to “signed”
- edit to use your new alias
Updating your App
As you develop your app, you’ll want to update it periodically.
In order for the Google Play Store to accept updated APKs, you’ll need to edit the config.xml file to increment the version value, then rebuild the app for release.
zipalign your App
Go through the upload process, which asks for many photos, information and more so be prepared.
Publishing To Apple
You will need to ask apple to generate a certificate for you.
As a part of the apple developer program, you will have access to the “Member Center” which has a list of certificates, identifiers, devices and provisioning profiles.
For this case, use ‘App Store and Add Hoc”