1604C054 – Hybrid Mobile Programming

Hybrid Mobile Programming

Introduction

Week 00
Program Studi Teknik Informatika
Fakultas Teknik – Universitas Surabaya
Ionic
Why Ionic
A single codebase across various platforms
Ionic was built on Angular framework and Apache Cordova, as well as using HTML 5, CSS, and JavaScript as core
technologies for app development. While the latest version of Ionic offers framework-agnostic capabilities for the
first time, you can still use Angular with all its pros and cons.
That said, Ionic allows you to build mobile applications without hiring native developers. Anyone acquainted with
web technologies and Angular can use it, leveraging web skills to create fully functional applications. Forming just
one codebase for all of your platforms, guarantees:
• Reduced costs on development, hiring native devs, codebase maintenance
• Faster time-to-market on both platforms
• Ease of maintenance via built-in browser instruments and debugging tools
• Availability of transforming your Ionic application into a desktop app or PWA
The economic purpose of utilizing Ionic is clear if you focus on the quick launch of the app in both application
stores. Developing across Android, iOS, and maybe even Windows devices is a lot cheaper within a single
codebase, compared to native development.
Why Ionic (2)
Popular technologies and ease of learning
It’s no secret that web technologies are the most widely spread, with JavaScript being the most popular
programming language. According to the Stack Overflow survey 2019, frontend developers are the third largest
group of all developer types. Having Ionic as your mobile application development tool will ensure that you will
have no problem hiring developers for your project.
Ionic is considered an easy-to-learn tool: frontend developers can quickly grasp the basics or choose between
various web frameworks that Ionic supports.
Of course, having expertise in native development would only be a plus, as Ionic doesn’t compile the whole app
into a native language. Instead, it compiles UI elements, using Cordova or Capacitor (a native-bridge platform for
Ionic) plugins for the rest of the functionality. It’s easy to build and maintain an application with just the web
technology stack.
Why Ionic (3)
Wide range of integration capabilities and plugins
If you feel that you are not gaining enough of your Ionic application, you can always integrate it with numerous
tools. The official list of technologies to integrate with can be found on Ionic’s website, providing easy access to
analytical instruments, payment systems, security, and testing tools. It also contains a number of plugins that
help integrate with a device’s hardware. But keep in mind that some plugins are available as a part of the
Enterprise version of Ionic, which requires payments to use Premier plugins and tools.
For more plugins, you can also check the Cordova plugins list, which can be sorted by the platform availability. Or
you can also use Capacitor plugins, downloading them from npm. A full procedure of using Capacitor plugins is
described in the guide.
Why Ionic (4)
An extensive choice of UI elements and quick prototyping
Older versions of Ionic have already proven to be efficient in mimicking the look and feel of native applications
thanks to its UI components library. These components can be used as ready-made elements to construct your
graphic user interface (GUI) or utilize those elements for customizations. Paired with web components, Ionic is
capable of speeding up the process of developing UI logic and retaining native look without additional costs.

UI components of Ionic consist of two parts, which can be broken out in the actual graphic element of your GUI
and its functionality. Accessing the code of the UI component, you can change the way an element works. You
may add an animation to the button, modify the type of scrolling, reconstruct the order of items, and so on.

Another aspect that boosts the speed of Ionic development is prototyping capabilities. Using ready-made UI
elements helps to create prototypes of your future applications in a comparably short-time period. For that
purpose, you are free to use a prototyping tool called Ionic Creator. It’s maintained by the Ionic team, offering a
drag & drop interface to construct interactive prototypes, but it can’t be used for constructing the whole app.
Why Ionic (5)
Testing convenience

As long as Ionic apps work only via a webview, the device’s browser can be used for testing the app. It is much
more convenient because you don’t even have to use a testing device to ensure that everything runs smoothly.
The same concept is applicable to a variety of mobile devices in the modern world.

Browsers offer built-in testing and debugging tools that make the whole testing process convenient. To test
Angular components used in older versions, Angular CLI can be used, while Ionic CLI is suitable for web
components testing. So, a testing device or emulator might be needed to test some native functionality only.
Why Ionic (6)
Concise documentation
What do we use the documentation for? Most often, when you have a question about the tool, you would
research specific forums and communities to find the answer. In the case of Ionic, everything is grouped on their
website. The documentation can only be described as exhaustive, covering each and every useful topic on what
the components of Ionic are, how to use them, and how they interrelate. In the documentation, you also can find
guides for various tasks on installing, configuring, launching, and fine-tuning various instruments used with Ionic.

Strong community
As long as creators of Ionic take care of accessibility of their tool for the users, the community will be growing.
With more than 5 million developers and constant activity on the forum, you will be able to find the answer to
any question, if it wasn’t covered in the documentation.
More about ionic can be found at:
www.ionicframework.com
Materi dan Evaluasi
UTS UAS
- Introduction and installation - Database 1 : viewing data
- Ionic Basic, Routing and Navigation - Database 2 : modifying data
- Angular Binding and Directives - Local Database
- Ionic build-in Components - Camera handling
- Ionic Service and Ionic Component - Working with Google maps
- Styling and Theming - Adding Push Notification
- Setting up PWA - Additional Topic

Project : Sistem Informasi , Desain Project : Sistem Informasi complete

Lecturer

• Daniel Hary Prasetyo, S.Kom., M.Sc., Ph.D. (KP A & Z)

[email protected]

• Ahmad Miftah Fajrin, S.Kom., M.Kom. (KP B, C, D, E)

[email protected]
1604C054 – Hybrid Mobile Programming

Installation

Week 01
Program Studi Teknik Informatika
Fakultas Teknik – Universitas Surabaya
Install NodeJS
Download : https://nodejs.org/en/
Select LTS then install
 Ionic Installation
•In HMP class we will use Ionic as environment and UI engine. using Angular as framework, and
new scripting language : TypeScript.
•Ionic can be installed using npm function from NodeJS. The installation process need an internet
connection and it may take time. But we just need to do it one time.
npm install -g @ionic/cli

You have to install NodeJS first, if npm

command is not recognized.
Ionic Installation (2)
•After finish the installation, we will create a new project
•Ionic provide many template starter . Some are free and others are commercial.
https://market.ionicframework.com/starters/
•Above starter template can be use when we create the new project. For the first time, we will use
the “Tabs” template in order to see one of above different templates.
However, in following weeks we will the blank template.
ionic start tes_ionic_1 tabs
The name of our first project is tes_ionic_1 and tabs is the
template name.

When asking about a framework, we choose angular.

Ionic Installation (3)
• Choose NgModule
• Choose yes when asked about integration and capacitor.
More about capacitor will be explained in following slide.
•This create project need internet connection and take time, but we can copy it for
aanother project. Its is suggested to copy the project folder as a master folder project,
and just copy and rename it for the new project.
•If there is some error..and it raise the same error when you repeat the process, you
may need to execute this command first:
npm cache clear –force
And then repeat it again
Ionic Installation (4)
•after finish creating project, you will have new folder with the same name with project name. go to
that folder with cd command. and do serve command. You can browse with address localhost:8100
cd tes_ionic_1
ionic serve

How to run our app in android?

A year ago we can use Ionic devApp, but it already retired right now.
https://ionicframework.com/docs/appflow/devapp

And for running our project in device, it directed to use its native tool
by using Capacitor
•Capacitor is a cross-platform app runtime that makes it
easy to build web apps that run natively on iOS, Android,
Electron, and the web.
•Capacitor provides a consistent, web-focused set of APIs
that enable an app to stay as close to web-standards as
possible, while accessing rich native device features on
platforms that support them. Adding native functionality
is easy with a simple Plugin API for Swift on iOS, Java on
Android, and JavaScript for the web.
We will try to run our project in device.
Because we still run the serve, we have to stop it first by Ctrl + c
The run npx cap init [appName] [appId]
npx cap init tes_ionic_1 com.example.tes1
Next commands to run is ionic build for compiling the ionic project, then we have to
install android platform by using npm install @capacitor/android. Following with
npx cap add android to add android native platform.
At last use npx cap open android to open our project in android studio
ionic build
npm install @capacitor/android
npx cap add android
npx cap open android
After our project opened in android
studio, we can run it in emulator or in
device that connect with out computer
( remember your Native Mobile
Programming class).
Also we can get our apk or aab file.
(aab file is used for delivering application
to google playstore)
• Angular is an application design framework and development platform
for creating efficient and sophisticated single-page apps.
Angular is a development platform, built on TypeScript. As a platform,
Angular includes:
• A component-based framework for building scalable web applications
• A collection of well-integrated libraries that cover a wide variety of features, including routing, forms management,
client-server communication, and more
• A suite of developer tools to help you develop, build, test, and update your code
•Maintained by Google
•it adopt MVW (Model - View - Whatever)
•TLDR: because Angular JS use typescript
• It is a strict syntactical superset of JavaScript and adds optional static typing to the language.
TypeScript is designed for the development of large applications and transcompiles to
JavaScript.
•Typescript supports OOP, strongly typed, and compiled language.
•Extentions of Typescript is .ts and already supported by all browser
•Typescript is a compiler language. It mean Typescript have to compile by a compiler first. TS can
not run directly.
•One of typescript compiler is nodejs server.
•File .ts will be compiled as JavaScript (.js) file. Command to compile is tsc.
Typescript
Typescript Playground
•The purpose of this chapter is to make familiar with typescript
•The simple way to try typescript is by using online tool: http://www.typescriptlang.org/play/
https://playcode.io/typescript/
•You can also use nodejs and VisualStudio Code to code and compile Typescript. You can follow this
tutorial: https://code.visualstudio.com/docs/languages/typescript
Typescript Playground
Variable, Operator, Decision,
Loops
Variable
•Typescript support data type: number, string, boolean, void, undefined, null
•Example declaration : (please try to put and run it in playground) :

let fruit:string = "Orange";

var price:number = 7500;
var tax:number = 0.15
var total = price + (tax * price);
alert("fruit "+fruit)
alert("total: Rp. "+total)
Variable Scope
var global_num = 12 //global variable
class Numbers {
num_val = 13; //class variable
static sval = 10; //static field

storeNum():void {
var local_num = 14; //local variable
}

}
Operator
Typescript support several operator:
•Arithmetic: +, -, *, /, ++, --, %
•Relational: <, >, <=, >=, ==, !=
•Logical: &&, ||, !
•Bitwise: &, |, <<, >>, <<<, ~
•Assignment: +=, -=, *=, /=, =
•typeof: operator that return the type of variable
•instanceof: operator to check whether an object is created from certain class
Contoh
let nama = 1235
var price:number = 7500
var qty:number = 10
var member: boolean = true
if (typeof (nama) != 'string') {
alert("Invalid name")
} else if(!member) {
alert("Price: Rp. " + (price*qty))
} else if(price*qty > 70000) {
alert("Discounted Price: Rp. " + (price*qty) * 0.9)
}
Loops
•Typescript support 3 type of loop: for, while, and do while
•Typescript also support break and continue statement
•The Syntax is similar with another programming language
Contoh
var budget: number = 100000
var cart: number = 0
while (cart < budget) {
var price = Math.random() * 10000
cart += price
var body = document.body.innerHTML
body += "Rp." + price.toFixed(0) + "<br/>"
document.body.innerHTML = body
}
Function
Defining & Calling a Function
To define function:
function function_name() {
// function body
}
To call function:
function_name()
Function with Return Value
To define function with return value
function greet():string {
return "Hello World"
}

var msg = greet()

alert(msg)
Parameterized function
function test_param(n1:number,s1:string ="oke" ) {
alert(n1)
alert(s1)
}
test_param(123,"this is a string")
example
Array
Array
Example of array declaration and initiation
var vocals:string[];
vocals = ["a","i","u","e","o"]
alert(vocals[0]);
var consonants = ["b","c","d","f","g"]
Some array method can be used are join(), concat(), pop(), push(), toString(), sort(), etc
Example Loop in Array (for...in)
var j;
var nums:number[] = [1001,1002,1003,1004]
for(j in nums) {
alert(nums[j])
}
OOP
Class Definition
class Car {
//field
engine:string;

//constructor
constructor(engine:string) {
this.engine = engine
}
//function
disp():void {
alert("Engine is : "+this.engine)
}
}
Create Instance Object
Tidak berbeda dengan bahasa pemrograman lainnya:
var obj = new Car("SUPER SPEED")
obj.disp()
Objects
Object have key - value pair, and it is not an instance of a class. Object is independent and create
to handle something that not have to much data (so we not need to make the class)
Contoh:
var person = {
firstname:"Tom",
lastname:"Hanks"
};
alert(person.firstname + " " + person.lastname)
Export Keyword
Export
•Typescript is a modular language. It mean in some part function and variable not globally provided
and we have to imported first when we need it.
•The export keyword is used in order to make the interface of the class can be imported by another
class
Contoh
•File Person.ts
export class Person {
. . .
}
•Pada file test.ts
import { Person } from "./Person"
var saya = new Person()
Decarator
Decorator
•Decorators provide a very simple syntax for calling higher-order functions
•Decorators are a design pattern that is used to separate modification or decoration of a class
without modifying the original source code.
•In AngularJS, decorators are functions that allow a service, directive or filter to be modified prior to
its usage

fileName adalah sumber file

(gambar) yang akan diupload.
Example of Decorator in Angular
import { Component } from '@angular/core';

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})

@Component adalah contoh decorator. Awalnya

diimpor dibagian atas, lalu class component ini
dimodif beberapa propertinya (didalam kurung
kurawal). Decorator berbeda dengan class
turunan (inheritance)
Exercise
Exercise
Make a page with 2 textbox and a button.
User input some number in those textboxs and klik the button to get the accumulation of those two
number.

//create first textbox

let textbox1 = document.createElement('input');
textbox1.type = 'number';
textbox1.setAttribute('id', 'txt1');
document.body.appendChild(textbox1);
Exercise
//create the second textbox
let textbox2 = document.createElement('input');
textbox2.type = 'number';
textbox2.setAttribute('id', 'txt2');
document.body.appendChild(textbox2);
Exercise
//create the button
let button = document.createElement('button');
button.textContent='Tambah'
button.setAttribute('id', 'btnTambah');
document.body.appendChild(button);
Exercise
//create onclick button
button.onclick = function () {
var angka1: any = (<HTMLInputElement>
document.getElementById('txt1')).value;
var angka2: any = (<HTMLInputElement>
document.getElementById('txt2')).value;
alert(angka1 * 1 + angka2 * 1);
};
TUGAS
Untuk sementara belum ada tugas minggu ini.
Tapi dipastikan laptop/komputer anda sudah bisa untuk membuat apk
karena minggu depan upload tugasnya dalam bentuk file apk.