Hybrid App Development using

Ionic Framework
https://www.youtube.com/watch?v=ekxABqJeRBc
WHO ?
We are from KOFIX TECHNOLOGIES RESOURCES
Focusing on professional IT training and project development
Consist of very passionate and committed people to help you to
code and achieve business success
Education:
Self-taught coders
Certified Ethical Hacker (V8)
Mobile App Developer
Android Native Using Java
Ionic Hybrid App
React Native
Ios Native Using Swift 3
Web App Developer
Laravel PHP Framework 5.4
Front end Developer
Aspiring Data Scientist with passion for Deep Learning Muhammad Nazmi Bin Mat Asri
Undergraduate, Bachelor Degree of ICT
Working Experience:
CEO Kofix Technologies Resources
CTO Trippal Sdn Bhd
Internship in J Studio Kreatif as Programmer
COURSE DESCRIPTION
In this course, we will focus on Ionic Framework and AngularJS to
build a hybrid mobile application.

We will have several sections, where I will explain and demonstrate to you on:
Introduction to HTML, CSS and JS
AngularJS Fundamental
Web Development 101
Getting started: Introduction to Mobile Application and Ionic Framework
Ionic Projects
TYPES OF MOBILE APP
1. Web Application
2. Native Application
3. Hybrid Application
WHAT IS IONIC?
Front-end framework to develop hybrid mobile apps
HTML5 + AngularJS
Build for both iOS and Android platforms
Software needed for Ionic Framework:
1. Sublime Text 3: Modern Text Editor (Personal Recommendation)
2. NodeJS: https://nodejs.org/en/
3. Java JDK:
http://www.oracle.com/technetwork/java/javase/downloads/jdk-
netbeans-jsp-142931.html
4. Android SDK: https://developer.android.com/studio/index.html
Set ANDROID_HOME
Set PATH
5. Ionic Framework and Cordova: npm install g cordova ionic
AngularJS
Javascript framework for building dynamic web application
Extends HTML with directives
Ionic built with AngularJS, so at least you need to know the
fundamental (we will go through after this)
Cordova / Phonegap
Allow us to build cross platform hybrid apps
Single code base (one code, compile to all supported platform)
Provide native functionalities to our HTML CSS JS
Access to phone API
Running Ionic
// To create new ionic 1 project
ionic start project-name blank --type ionic1

// Run the ionic app in browser

ionic serve lab

// Build android project file

ionic platform add android

// Compile the android project file to android apk (android installer)

ionic build android

// Run the app in connected android device

ionic emulate android
*iOS only if you use Apple Mac
Starter kit
Introduction to HTML, CSS and
Javascript
HTML
Hyper Text Markup Language
When saved a Words or Office file, its not simply saved the strings
of words as is you have typed, but in a special format
HTML also like that
This special format is not only consist of your text string, but also
with extra information to keep your document with the exact
appearance you created earlier

* We will be using Sublime Text 3 for our text

editor
HTML Main code
HTML

HTML tags are element names surrounded by angle brackets

Usually in pair, with start tag <example>, and end with end tag
</example>
HTML - Headings
HTML - Styles
HTML - Image
HTML - Table
HTML Lists
CSS
Cascading Style Sheet
Plain text is boring, CSS make it colorful !
The design, color, positioning, and things that make the HTML
beautiful
CSS Background color, text color, font-size
CSS Margin
CSS Padding
CSS Float
Javascript
HTML just displaying the text, while CSS make it colorful
JS help the plain text to do different things depending on the
situation
For example,
on click,
on hover,
on mouse leave,
etc.
Javascript
Bootstrap time !
Up to now
2 most important websites until now:
W3Schools ( https://www.w3schools.com/ )
Bootstrap ( http://getbootstrap.com/getting-started/ )
 AngularJS

Additional reading materials:

https://www.w3schools.com/angular/
http://bit.ly/2tVGKdB
Why AngularJS ?
To create properly architecture and maintainable web application
Write less code
Flexibility with filters
Etc.
AngularJS Fundamental
Directives
Data Binding
Modules
Controllers
Services
Directives
Directive declarative HTML
Its a custom HTML Tag
Ng-repeat, ng-show, ng-hide, ng-if
Data Binding
2-way data binding, linked to each other
Imagine the concept of variable
Modules
Its like a core of app, and can be used to group several object
Used to organize objects which used in the angular application
Controller
Communicate with the view/templates to display data
Only use controller to add behavior to $scope object
$scope link view to the controller
Services
A function which is built to make it available to your application
Example: $location, $http (built-in always start with $)
Lazily Instantiated, Singleton
Get our hand dirty with
AngularJS
Ionic Projects for tomorrow

Project 1
Recipe App: Simple app pagination
Local ToDoList: Simple todo list using local storage
Simple Calculator App: Simple math

Project 2
To Do List with Firebase: Intermediate level, using online database
Chat App: Intermediate level, using online database
References

HTML: https://www.w3schools.com/html/default.asp
CSS: https://www.w3schools.com/css/default.asp
Javascript: https://www.w3schools.com/js/default.asp
AngularJS: https://www.w3schools.com/angular/default.asp
Ionic Docs: http://ionicframework.com/docs/v1/components/
Recipe App: https://github.com/nazmiasri95/Ionic-Class-UTP-CE-July-
2017
Simple Angular Web: https://github.com/nazmiasri95/Angular-Basic-
Class-July-2017
Thank You