Created while recording a demo video on IOnic. No editing has been done...

1. Demo on Mobile App Development using
Ionic Framework
Sayed Ahmed
Toronto, Canada
http://justetc.com

2. Anyway
This will be more hands on demo than powerpoint - still - i will create slides as I go
and wanna share…
The demo can be thought of
-Ionic Framework installation demo
-Creating mobile app using ionic : demo
-HTML 5, angularJS based Hybrid mobile app creation demo : can be thought as
-demo on how to create a mobile app to connect to a/an LMS and show contents

3. The LMS
That the mobile app will connect to or will show as a mobile app or the mobile app
that we will build will work as mobile version for: http://sitestree.com/training/
What will the mobile app look like….

4. This is how it will look like to start with

5. Let’s demo a bit ...
Anyway..this is how is the flow..
The mobile app only gives to the publicly open section of
Sure, now we will create the mobile app that can be deployed to Android store and
iOS store.
I will focus on Android though if we replace Android with ios in the ionic
commands that I will show - this will work fine for Ios as well

6. The guide that I will use
https://ionicframework.com/docs/v1/guide/installation.html
You can check https://ionicframework.com/docs/v1/guide/preface.html for some
background on IoNic…
The hands on work starts at
https://ionicframework.com/docs/v1/guide/installation.html

7. Now installation...
I have already installed ionic..still I will redo and go through the command
You will need nodejs to be installed before this demo can work for you..
I will not show nodejs installation
I am using Windows here
Will use Git Bash for windows also Git CMD for windows as well

8. Let’s do it
So node is already installed ; hence, npm will work
Ionic requires Cordova/Phonegap to make HTML5/AngularJS based app to
android native app...kinda..
Installing cordova..other git screen shows the last step to convert unsigned apk to
signed apk...we are developing mobile app - so assumed that you know apk and
what signed mean...

9. While cordova is being installed/re-ins
Some tools that we will need
---jdk (not only jre but jdk as well)
--Android Studio
--Ant build tool
--then we have to set some environment variables in Windows …. Kinda shell
variables in Linux/Mac
--cordova done

10. Let’s see the other stuff
As was told in the expanded view
Just showed you the jdk and ant that I downloaded and installed
Jdk got installed at:
C:Program FilesJavajdk1.8.0_161
Ant got installed at:
D:apache-ant-1.10.3-binapache-ant-1.10.3

11. Setting environment variables
JAVA_HOME to JDK-path
We can also put bin folder under JAVA_HOME in the PATH variable
Either System or User variable will work
You can put only in user to allow only current user..
I placed in both
C:Program FilesJavajdk1.8.0_161 is not required in path but
C:Program FilesJavajdk1.8.0_161bin is required in the path

12. Ant Builder Path
D:apache-ant-1.10.3-binapache-ant-1.10.3bin
Ant helps in the build process of applications (i.e. Java applications)
We will not write any Java code here..however, the framework will do many stuff
with Java in the back…
Now, you need android studio as well…
Note, you need path of android-sdk, not the installer path of Android Studio..
Android-sdk is more crucial and core than android studio..android studio will be of
great help

13. C:Program FilesAndroidAndroid Studio -- the studio path
The sdk path
D:Android
We need to set ANDROID_HOME=D:Android also need to point to tools and
build-tools and platform-tools in the PATH variable
Build-tools is not too important..
Let’s see

14. D:Androidplatform-tools
D:Androidtools
So you see them
For ANT - just download and extract…and point in the PATH variable
Re-installing ionic and -g is for global install...

15. Will create a demo and empty mobile app - ionic based..
Then we will bring code for our mobile app from another folder
We will need a github repo for this as well...let’s create in the meantime
Ionic pro sdk- we said yes
Will help in building, testing, deploying, debugging and monitoring applications -
though not a must…
I did quit - probably the linking was not right

16. Git bash - was having issues to select the project i.e. arrow key moves
Will use git cmd for windows

17. Basic files
├── bower.json // bower dependencies
├── config.xml // cordova configuration
├── gulpfile.js // gulp tasks
├── hooks // custom cordova hooks to execute on specific commands
├── ionic.project // ionic configuration
├── package.json // node dependencies
├── platforms // iOS/Android specific builds will reside here
├── plugins // where your cordova/ionic plugins will be installed
├── scss // scss code, which will output to www/css/
└── www // application - JS code and libs, CSS, images, etc.

18. Then we have to use
Git remote add url ….
Then git push to push the code to github
You might need to configure username and email for git/github
Anyway…
Pushing as well as set the upstream (default for push)

19. The code is there on github repo
Now, we have to add support for Android and/or IOS.
Will do for Android for now..ios all the same
Shortly we will test the basic app … in browser as well
Then we will bring code for sitestreemobile - html5/angular/ionic/moodle based
code. Will see how it looks..
Then we will build apk to deploy to android store

20. We will create unsigned apk first = debug
Then we will create a key pair then sign the unsigned and release apk
Then zipalign and compress the unsigned release to create the final apk to deploy
to android store
Let’s check the steps then we will do hands on
https://ionicframework.com/docs/v1/guide/starting.html: just bringing more content-
we will skip

21. Just finished platform add
To check we can use --livereload with prev command or ionic serve…
So you see the file opened in browser and - not deployable without….all that we
did..
The mobile app opened in browser : can be deployed to android store
--livereload was one option to test or: ionic serve: auto browser open

22. Will bring our code…
So we see the app though logged in
Just the app in Angular, HTML, CSS and related…
Anyway….nest we will build and sign and so ...

23. We already did for android
ionic cordova build ios
$ ionic cordova emulate ios
ionic cordova run android
Not much important now
With ionic pro sdk - you can test in your mobile as well...

24. We will just go for build i.e. publish step
Build as show on the page - just modifying code - not that important..we brought
enough code…
Removing
debug console plugin enabled,
so we should remove it before generating the release builds:

25. We see app-debug.apk - result of our tests so far
Now will create release build i.e. release .apk
ionic cordova build --release android
So we saw the release and unsigned apk
Will create a key now
Just brough the apk in the same folder for
Use the right alias

26. Now to zip and create the final signed apk for android store
Will use Git CMD
Git bash i.e. linux bash shell like approach ..showed little issues..
So we are done with creating APKs to deploy to Android Store..
Just create an app there and configure
This is an app...I can show where to upload the apk...

27. So you saw..just create a production or beta or alpha release and then upload the
apk
Configure other options like store presence, content rating
App availability...and publish…
I did not publish this app...will do soon…
Have fun…..
Any questions: sahmed@justetc.com
Bye bye...