Category: Ionic

Angular Ionic Button State Override

Peter Dillon

Didn’t seem there was a real easy way to just add an “active” class and call it a day when trying to add a class with ng-class in my Ionic app. So in the provided css file from Ionic, (your-app/www/css) which btw, they have a gulp watch on – I added one single line with the !important rule, and gave it a background color a little darker than the regular button state and was done for now. I will be looking into this closer.

My next post will be exploring how to set a watch onto the my-app/sass/ionic.app.scss file. I want to be able to override directly on the scss file and not create a ton of !important rules in the .css file they provide.

Using The Ionic Framework

Peter Dillon

I am learning to use Ionic to build JavaScript and AngularJS powered multi-platform applications. I will be revisiting this with more tips, issues and shortcut snippets as I come upon them. At this point, I am still early in my career as a JS developer, in the meanwhile this is what I offer:

Why Hybrid:

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 @font-face declaration.

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:

/Users/username/Development/android-sdk-macosx

VIEW OUTPUT LOGS:

$ cd /Users/username/Development/android-sdk-macosx/platform-tools
./adb logcat
./adb devices

IF UNAUTHORIZED:
Revoke USB Debugging on phone
Restart ADB Server:
adb kill-server
adb start-server
http://stackoverflow.com/questions/23081263/adb-android-device-unauthorized

$ cd /Users/username/Development/android-sdk-macosx
tools/android sdk
tools/android avd
———————————————————————

INSTALL:

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
THEN:
$ 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
– THEN
$ ionic build ios
$ ionic emulate ios
———————————–
$ ionic run ios
———————————–

Preparing config.xml, splash screen and icon images

Open config.xml in the ww folder.
Change 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.
Orientation
Generate icon and splash screen images (Ionic to the rescue!)
Use ionic help resources for a list of helpers
Overwrite /resources/icon.png with your new image.
Next command: 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.
Use $ 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
CLI: 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”