3 1

2 0

BM2301
Business Application Development

Introduction
Objectives
 Introduction: Various Cross-platform apps (Xamarin, Ionic, Sencha, Flutter, React Native);
 Installing the IDE, responsive design,
 Basics of Angular JS (MVC, Services, Factories)

2
Hybrid mobile apps
 Objective-C or Swift for creating iOS-based applications
 Java for creating Android-based applications
 Hybrid mobile applications: One shared application to create cross applications
 Using Web (HTML, CSS, JavaScript) and some incredible frameworks

 Ionic Framework?
 User interface framework built with HTML, CSS and JavaScript for use with hybrid mobile
application development
 Includes robust command-line interface (CLI) and a suite of additional services such as Ionic View
and Ionic Creator
 Top layer is Ionic Framework, which provides user interface layer of the application
 Beneath is Angular (formally known as AngularJS), an incredibly powerful web application framework
 These frameworks are on top of Apache Cordova, which allows for the web application to utilize the
device’s native capabilities and become a native applicaiton
3
Mobile applications
 March 2017: Ionic 3 was released
 Primary mobile solutions:
 Native mobile applications: write in the default language for each targeted mobile application.

 Objective-C or Swift for iOS devices, Java for Android, and C# or XAML for Windows Universal
 Advantages: tightly integrated into the device platform; IDEs with option to create mobile
applications: Xcode for iOS, Android Studio for Android; all native APIs and features are available
to the developer; Performance is good as there is no need for intermediate layers of code.
 Disadvantages: centres around development language issues. Needs proficiency in all different
languages and API to release app in android and iOS. Maintain multiple code bases. Client-side
code cannot be reused and should be rewritten
 Mobile web applications

 Hybrid mobile applications

4
Mobile applications
 Primary mobile solutions:
 Mobile web applications:

 apps are loaded though the device’s mobile web browser. This is just like
creating your application using web technologies and delivering it through the
device’s browser.
 Advantages: there is no need for application approval process (for native apps)
as just access to the web server is enough. Updating the app is just about adding
new content to the web server.
 Disadvantages: as the app is run inside the native browser, we don’t have access
to the full capabilities of the device. For example, you cant access the contact list.
How to discover the application by the users, is questionable as the application is
not hosted through the app store.
5
Mobile applications
 Primary mobile solutions:
 Hybrid Mobile applications

 Native mobile application that uses a chromeless web browser (often called a WebView) to run
the web application
 Uses a native application wrapper that interacts between the native device and WebView
 Advantages: same code can be deployed to multiple platforms. Maintenance of code base is
easier. For a web developer, there is no need to learn a new programming language. Have full
access to the system through some plug-in system
 Disadvantages: Performance and capabilities are limited by the web app. Performance might be
poor due to mobile browsers’ performance. Even though it is a native app, communication
between WebView and device’s native features is done via plug-ins. Native user interface
components are available within the WebView, entire UI/UX should be written by you.
 Ionic is of hybrid app approach. Web-based UI components that look and feel like native user
interfaces are made available. Cordova and other plugins help access the device capabilities

6
Various cross-platform apps
 Xamarin, Ionic, Sencha, Flutter, React Native

7
Ionic Stack
 Three layers: Ionic, Angular, Cordova
 Ionic Framework:
 Provide user interface components. Example, tab in UI component, which is not available in native
HTML element, is provided by Ionic Framework
 Created using HTML, CSS, JavaScript and looks like native controls

 CLI tool: makes creating, building, and deploying Ionic applications much easier

 Several add-on services: online GUI builder to visually lay out the interface of your Ionic
applications and packaging and updating solutions. Development is free but production requires
monthly charge
 Angular
 Provide a MVW (Model-View-Whatever) framework to build complex, single-page web applications

 Ionic’s custom UI components are just Angular components

8
Ionic Stack
 Three layers: Ionic, Angular, Cordova
 Cordova
 Open source. Named after the street where the Nitobi (software company which originally
developed Cordova in 2009) offices were located
 Provides interface between WebView and the device’s native layer

 Was called as PhoneGap because it bridges the gap between the two technology stacks

 Functionality is provided through plug-in modules, which allows the core library to be smaller

 Has its own command-line tool to assist in scaffolding, building, and deploying your mobile
applications
 Ionic CLI is built atop the Cordova CLI

9
Ionic Application Development
 Prerequisites for Ionic Application Development
 Understanding HTML, CSS, and JavaScript (variable scoping, asynchronous calls, events)

 Understanding Angular

 Access to a mobile device: Use emulators; but real device both iOS and Android is better to test

10
Development Environment Setup
 Installation of two parts: the base Ionic installation (for developing basic Ionic application), the
platform-specific SDK installations (to test your application on emulators and eventually submit them
to the app stores)
 In macOS, use Terminal; In PC, use Git Bash (which can be installed when we install Git)
 Test your application on browser and this is an web application
 Install Ionic Framework
 Four components: Node.js, Git, Ionic, Apache Cordova

 Node: platform that enables you to run JavaScript outside the browser

 Both Ionic and Cordova CLIs are written using Node

 Download from Node website [https://nodejs.org/en/]
 Check node version: node –v OR node --version
 Package manager for node modules (npm is not “node package manager”): npm –v
 Upgrade npm: npm install npm –g OR npm --version OR npm install –g npm@latest

11
Development Environment Setup
 Git [http://git-scm.com]
 Ionic CLI leverages Git for the management of templates

 git –version

 Install Ionic CLI [https://ionicframework.com/docs/cli]

 Supports bunch of dev tools and help options to create and develop Ionic applications

 npm install –g @ionic/cli

 -g means global install

 ionic --help

12
Development Environment Setup
 Visual Studio Code [https://code.visualstudio.com/]
 Microsoft’s free code editor Visual Studio Code (VSC)

 IDE (Integrated Development Framework)

 Alternative to “big” Microsoft Visual Studio, Atom, Eclipse, Ionic Studio

[https://ionicframework.com/studio]
 Once installed, activate the integrated terminal (menu View  Terminal) so that you could code
and use Ionic in one interface
 Google Chrome [https://www.google.com/chrome]
 Browser for development

 Built-in Developer Tools helps for developing, debugging and testing Ionic applications

13
Target APP: BoB Tours
 Imaginary Tourism company “Best of Bonn Tours GmbH”
 Offers city tours, biking, hiking, and segway trips around Bonn
 Search: by regions, by types (Round trips or segway tours), price range
 Can view the details with photo and save them as favourite
 Route from current location to the destination tourism spot is shown
 Make a booking request with a validated form
 User can change the appearance or design
 Look at https://bonntouren.de/ & https://ionic.andreas-dormann.de/demo

14
Ionic Application Development
 Angular
 Published as open source software

 Developed by community of individuals and companies, led by Google

 Has data updating as an automatic way of updating the view, controllers to manage the DOM,
directives to establish new HTML syntax, reusable components, form validation and much more
 Ionic has @ionic/angular package that helps with integration with Angular

 http://angular.io

 App-Scripts
 ionic serve or ionic cordova run calls npm scripts, which calls @ionic/app-scripts library to execute
the build process
 Many preconfigured elements are made available

15
Ionic Application Development
 Autoprefixer [https://github.com/postcss/autoprefixer#browsers]
 Tool that adds vendor-specific prefixes to hand-written Sass/CSS code

 Closure Compiler [https://developers.google.com/closure/compiler/]

 Parses JavaScript and analyses it, removes dead code and rewrites and minimizes what’s left

 Checks for syntax, variable references and types, warns about common JavaScript pitfalls

 Provides efficiency (reducing code size) and code checking

 Cordova and Capacitor

 Apache Cordova (formerly PhoneGap) generates standard web technologies mobile/hybrid apps
for many platforms
 Enables wrapping of CSS, HTML JavaScript based on the platform of the device

16
Ionic Application Development
 Ionic apps use Cordova plugins to provide near-hardware functionalities like camera, accelerometer or
geolocation
 Capacitor is Ionic’s “spiritual successor” to Cordova
 Git [https://git-scm.com]
 Free and open source distributed version control system for managing code

 Better than Subverison, CVS, Perforce, Clearcase with features like cheap local branching,
convenient staging areas, and multiple workflows

17
Ionic Application Development
 Node.js [https://nodejs.org]
 Allows JavaScript to be written on the server side

 Used for web services

 // HTTP server of hello world program in Node.js using text/html as Content-Type header and port
3000
 var http = require('http');

 http.createServer(function (req, res) {

 res.writeHead(200, { 'Content-Type': 'text/html’ });

 res.write('Hallo Welt');

 res.end();

 }).listen(3000);

 Projects use Firebase or MongoDB as backend, Nod.js as middleware and Ionic as frontend

18
Ionic Application Development
 Stencil (new) [https://stenciljs.com]
 Web component compiler built by Ionic Framework team

 Helps to create new custom, reusable, encapsulated HTML tags to use in web pages and web apps

 Stencil uses Virtual DOM, Async rendering (inspired by React Fiber), Reactive data-binding,
TypeScript, and JSX
 Leads to improvement in performance, latency and code size; mainly for PWA (Progressive Web
Apps)

19
Ionic Application Development
 TypeScript [https://www.typescriptlang.org]
 JavaScript + type declarations and interfaces

 Ionic is built with TypeScript

 Build an Ionic pap using TypeScript is optional but recommended

 TypeScript doesn’t render JavaScript a static typed language, but allows strong typing. With this,
variables and methods can be typed, whereupon certain errors can be detected even at compile
time
 Basic types in TypeScript: Any, Array, Boolean, Enum, Never, Null, Number, Object, String, Tuple,
Undefined, Void

20
Ionic Application Development
 Webpack [https://webpackjs.org]
 Bundles together JavaScript and other assets

 Used to create single or multiple “chunks” that are only loaded when needed

 Used to take many files and dependencies and bundle them into one file, or other types

 Can bundle HTML, CSS, and even images, if corresponding plug-ins are included

21
Ionic Application Development
 Electron, Angular, jQuery, React, Vue

22
Angular
 Create web applications
 Work can be aligned not only on the server, but via JavaScript on the client
 Application can fulfill modern architectural concepts by separating the responsibilities and is thus
more maintainable and testable
 Angular was developed with TypeScript and is aligned to a component-based architecture
 By using TypeScript, Angular has similar type security as developers know it from other languages like
C# or Java
 Developers can use JavaScript or TypeScript
 Designed for component-based architectures: separates the responsibilities and the view from the
logic
 Developer can divide an application so that it becomes maintainable, testable, and expandable
 Communicate with components, feed them with data and receive events from components; it makes
components reusable and more isolated

23
Angular
 You can extend your application to almost any JavaScript library and use its flexibility
 Components: [01-ComponetClassForTourList.html & 01-ComponetClassForTourList.js]
 No direct manipulation of the HTML-DOM

 Separation according to model-view-controller (MVC) pattern

 View: has templates to connect with static HTML tags with dynamic contents from the controller

 Custom tag is represented by a component class decorated using @Component

 Template can be specified in a template property or refer to a HTML file using templateUrl

 Component can have its own CSS (inline or external) OR can refer to the parent and child
components with additions :host or /deep/
 Custom tag can be used by child component to interact with parent component through properties
and events
 @Input() and @Ouptut() decorators are used to define which properties and events are accessible
to other components

24
Angular
 Angular has its own event emitter for event communication
 A component triggers various events throughout its lifecycle that the developer can hook into
 As per TypeScript, OnInit is a class that has to be integrated with import {OnInit, …} from
‘@angular/core’
 Other events are related to data binding {ngOnChanges, ngDoCheck}
 Angular Lifecycle Hooks
 Understand different phases an Angular component goes through

 Know how to hook into those phases and run your own code

 Know the order in which different phases happen and what triggers each phase

 Certain methods are called during the different lifecycle phases of our component. These methods
are called as hooks

25
Angular
 Hooks are executed in this order.
 Constructor: invoked when a component or directive is created
using new on the class
 ngOnChanges: invoked every time there is a change in one of the
input properties of a component
 ngOnInit: invoken when a component has been initialized. Called
only once after first ngOnChanges
 ngDoCheck: invoked when the change detector of a component is
invoked. We can implement our own change detection algorithm
 ngOnDestroy: invoked just before Angular destroys a component.
Use this hook to unsubscribe Observables and detect event
handlers to avoid memory leaks

26
Angular
 Hooks for a component’s children
 ngAfterContentInit: invoked after Angular performs any Projection into a components view

 ngAfterContentChecked: invoked each time the content of the given component has been checked
by the change detection mechanism of Angular
 ngAfterViewInit: invoked when a component’s view has been fully initialized

 ngAfterViewChecked: invoked each time the view of the given component has been checked by the
change detection mechanism of Angular

27
Angular
 Dependency Injection
 Core technique for the development of loosely coupled systems where the parts of the application
are assembled at the start of the application
 In a component-based system, or when using a service, the client normally instantiates the
server/component/service
 Assumes that the concrete implementation of the service is variable and is passed from the
environment to the client, e.g., into the constructor or by passing a property, a method call
 Either the type of the service, an instance of the service, or an initialization object describing the
service can be passed

28
Angular
 Routing and Lazy Loading
 Route: defines an URL path and a component to display its content
 Three main type of routes:
 Eager: routes that point to a single component

 Lazy: routes that point to a module

 Redirect: routes that redirect to another route

 Root configuration for an Ionic application router lies in src/app/app-routing.module.ts

 For pages generated using ionic generate page …, all corresponding routes are defined automatically
 Lazy loading: breaks the application into smaller chunks and loads what is necessary at the time
 When the application is first loaded, only the components necessary to display the first screen are
loaded. Beneficial for Progressive Web Apps
 With lazy loading, the app can load faster

29
Angular
 Ionic’s <ion-router-outlet> is same as Angular’s <router-outlet> except that it will automatically apply
the screen transition animations with a “direction” (e.g., a forward navigation will animate the new
screen in from the right)
 ActivatedRoute:
 bring data from one page to another

 Contains the information about a route associated with a component (page) loaded in an outlet

 More properties available in ActivatedRoute

 Content Projection:
 To display a component property is to bind the property name through Content Projection

 Put the property name in the view template, enclosed in double curly braces: {{myStar}}

 When you bootstrap with the AppComponent class (in main.ts), Angular looks for an <app-root> in
the index.html, finds it, instantiates an instance of AppComponent, and renders it inside the <app-
root> tag

30
Angular
 *ngFor
 Repeater directive and helps you to iterate through an array of objects

 Never forget the leading asterisk (*)

 Pipes
 Enable data to be transformed and/or formatted in the DOM before rendering (for strings, for
example)
 With regard to the user experience, you don’t want to display the data within an app to one, even in
the view
 Many prefabricated pipes are available: DatePipe, UpperCasePipe, LowerCasePipe, CurrencyPipe,
PercentPipe

31
Angular
 Promises
 Like Callbacks 2.0

 Advanced functions that are given to other functions that take care of their execution (maybe in the
future)
 If an asynchronous function returns a Promise, it gives you a promise that this part of the program
will be executed
 Either this succeeds and the promise is held (resolve) or not (reject). As a result, we can react to a
successful or incorrect execution
 If the asynchrony is finished or the promise has been resolved (by resolve or reject), then execute.
Promises are often called thenables. The then function has two callback functions. One for success
and the other in case of error

32
Angular
 Observables
 Object that emits events or notifications

 Object that listens for these events, and does something when an event is received

 If another part of the application wants to be informed by the observer about changes to the
observable, it can subscribe to it (subscribe) and also unsubscribe (unsubscribe)
 Observables are data streams that could be linked or combined

 The principle is similar to Observer pattern and is called Reactive Programming. Angular uses
observables of the ReactiveX architecture as a basis
 Through Microsoft’s Microsoft Reactive Extensions, there is a very good implementation in
JavaScript and other languages – called as RxJS for short
 Observables are used to provide functionality by many JavaScript libraries

 One example is http.get(), which is provided by the HttpClient object from the
@angular/common/http library

33
Angular
 Async / Await
 Declare an asynchronous function

 Based on Promises

 async/await are the JavaScript keywords that greatly simplify asynchronous programming

 async defines a function as asynchronous

 await is used to wait for the fulfilment of the promise
 await can only be used within an async function
 With a couple of keywords, your code will behave as though it is synchronous code

 You get the benefits of async, with the readability of sync

34
zzz
 aaa

35
zzz
 aaa

36
References
 aaa

37