Page 1 of 152

LESSON 1: INTRODUCTION TO MOBILE APPS AND SETTING THE

DEVELOPMENT ENVIRONMENT
(Reference: https://thinkmobiles.com/blog/popular-types-of-apps/)

What is Mobile app?

A Mobile App is versatile application otherwise called portable application (or
just called "app"), is a PC program or programming intended to work on a smartphones
or mobile devices, for example, a tablet, advanced cells, present day machines, savvy
watches and keen apparatuses. Apps were originally meant for efficiency and support
of task in businesses and due to its effectivity, it now applies to other sectors such as
in Education, Government, Medicine, Military, Science, Industry and Personal
entertainment and wellness, Since App is designed for small devices it can run in a
minimum amount of RAM.

Apps can be in the form of calendar, email, distribution list and contacts, it can
also in the form of database dependent Apps such as Accounting systems, order-
tracking, factory systems, banking systems, Transportation and cinema ticket
purchases and inventory management, most common Apps are mobile games, GPS
services and E-commerce services.

Apps can be purchased and uploaded to the distributors platforms these are
Google Play Store, Microsoft Store, Amazon App Store Appstore, F-Droid,
Blackberry world, and App Store (iOS), the profit is divided into the App Creator and
the distributor, however many apps are free but when installed there will instances
that advertisements appear while the App is active, Mobile applications can run in
desktop computers thru the use of Emulators.

Types of Mobile app

Mobile applications are distinguished into 3 types: native, crossbreed (or
hybrid), and web-based apps.
 Native app
The principle reason for making of Native applications is to run in a particular
versatile working framework. Native applications run toward a specific portable device
for instance an Application made in Android Studio can just disagreement Android
Working Frameworks and Applications made in “Objective C” which can only execute
in iPhone Operating systems.
 Web-based app
This application is made in JavaScript, HTML5 and CSS these applications
utilizes just least memory, however connection to internet is required to run the best

NEUSTCICT 2020
 Page 2 of 152

possible conduct and client experience, these Applications are associated into
individual databases and Web servers to gather and disperse information.

 Hybrid app
This Application is a mix of both the native applications and the web
applications, it utilizes single code base to work and work in numerous versatile
working frameworks. It can bolster web and local innovations over numerous stages.
these applications are simpler and quicker to create.
Mixture applications are basically web applications that have been placed in a
native application shell. In spite of such favorable circumstances, crossover or hybrid
applications show lower execution.
When they are downloaded from an application store and introduced, the shell
can interface with the abilities of the portable working framework, gave through a
program that is implanted in the application.
Applications created utilizing React, Apache Cordova, Xamarin, Sencha and
other comparative innovation fall into this arrangement.

App Creation and Development Tools

Mobile application development requires the utilization of specific programming
which are called IDE's, Portable applications inside these IDE's are first tried utilizing
emulators. Emulators give a simple method to test the model applications without the
utilization of physical cell phone or portable device.
Creating applications for smartphones, smart appliances, tablets and smart
watches includes in considering the limitations and capacities of these devices’
highlights, for example, GPS area location, sensors and cameras.
Software Engineers, Programmers or Developers must have a worry in client's
concentration and collaboration with their gadget, and the easy to understand
interface must be perfect to the segments of both equipment and programming.
When planning the Software engineer must make arrangement in the broad
scope of equipment highlights, abilities, determinations, screen or sensor input,
screen sizes, and designs. what's more, should likewise place at the top of the priority
list that mobile or portable device work on battery and doesn't have ground-breaking
processors contrast with the work area and PCs
Some Applications are associated with front-closes which are needy in back-
finishes to help access to big business frameworks these frameworks are Portable
Backend as an assistance and versatile application server foundation, these back-end
are databases, security verification, and record synchronization.
NEUSTCICT 2020
 Page 3 of 152

There are many examples of IDE for building mobile Apps these are divided
into Native Mobile Development Tools and Cross-Platform Mobile Development
Tools.
 Native Mobile Development Tools
o AppCode
o Android Studio
o Xcode
 Cross-Platform Mobile Development Tools
o Alpha anywhere
o Quick Base
o AppSheet
o TrackVIA
o Fliplet
o OutSystems
o Onsen UI
o NativeScript
o Sencha
o Ninox
o MobiLoud
o React Native
o Ionic
o Adobe PhoneGap
o Xamarin
o Appcelerator
In this course we will concentrate on the Ionic framework which is an open
source, making Applications in this framework is versatile and can run in different
platforms, since this is anything but difficult to-utilize and but somehow simple to-learn
structure that takes into consideration in fast prototyping. In our Ionic we will
incorporate it with Angular way of programming, this Precise is a TypeScript-based
open-source web application system made by Google which is a built on standard
web technology, Ionic helps developers build cross-platform hybrid and Advanced
Web Apps with ease and mobile UI.

Introducing the Ionic mobile development software

(Reference: https://ionicframework.com/docs/cli)
Ionic is open source development framework used for programming or creating
hybrid applications in mobile devices. Compare to other mobile app Software
Development Kit (SDK) Ionic requires a wrapper to be able to be installed and run on
portable devices and emulators. Ionic contains services, components, sub-

NEUSTCICT 2020
 Page 4 of 152

components. commands and tools for building Mobile Apps with common user
interface. Ionic is under MIT license.
Ionic contains elements such as HTML5, CSS and JavaScript to build and
design its UI or user interface (front end) and to create a look and feel of the
environment in using mobile devices, Ionic is built-on top of AngularJS and Apache
Cordova.
Ionic Framework pros and cons

Pros

Below are some of the known advantages of Ionic Framework–

 Organized and modular
 Ionic provides useful pre-created app arrangement with modest layouts which
makes your app quick and simple to start
 Ionic can bundle your apps for Android, IOS, Firefox OS and Windows Phone.
 Easy to maintainable and to upgrade.
 The updates are regular and forums and community support group are always
willing to assist.

Cons

 Since it depends on the internet browser and sometimes give you innacurate
info about the device environment the testing and debugging is somehow
difficult
 Uses numerous kinds of devices and platforms
 Build errors that are tough to debug because of Plugin compatibility issues
exist.
Below are the features of Ionic
 Ionic Command Line Interface (CLI) – This contains commands for building,
starting, running, executing and emulating the Ionic created applications. This
CLI utility is powered by NodeJS.
 HTML5 − These components are encompassing webpage markup and
application programming interfaces (APIs) for complex web applications,
HTML5 contains elements in cross-platform mobile applications designed with
low-powered devices in mind and its natively include and handle multimedia
and graphical content
 JavaScript components − These components are encompassing JavaScript
capabilities to manage all elements of mobile device such as event-drive and
functional programming styles that cannot be ended by HTML or CSS.

NEUSTCICT 2020
 Page 5 of 152

 CSS components – Use in designing and to allow the parting of content,

presentation and colors, including layout, and font giving the native
appearance and feel of components and essentials that a mobile application
need.
 AngularJS − Ionic is uses the AngularJS Model–View–Controller (MVC) and
model–view–view model (MVVM) architecture for construction and simplifying
the development and the testing of rich single page apps enhanced for mobile
devices.
 Cordova Plugins − Apache Cordova plugins features wrapping up of CSS,
HTML, and JavaScript code. It encompasses the features of HTML and
extends the JavaScript to function in the portable devices.
 Ionic View – This is the platform used for testing uploading, sharing your
application on mobile devices.


List of elements needed to run with Ionic.

 Cordova and the Ionic
These are the important prerequisites expected to begin working with Ionic.
 Node JS
Is the base platform of Ionic needed to generate Mobile Apps , these NodeJS
executes JavaScript code outside of a web browser it allows developers use
JavaScript to write command line tools and for server-side scripting.
 Android SDK
This software is needed especially for those who are doing Ionic in Windows
O.S the Android SDK is somehow replaced by android studio.
 XCode
Because Ionic defines as a hybrid, this platform is used to work in the platform
of Macintosh and are developing apps for the iOS platform.
Cordova and Ionic (in Windows) Installation
1. In Windows open your command prompt by clicking Start and by typing CMD,
click and open when the word command prompt appears.
2. In Command prompt Go to your personal Folder profile, example:

C:\Windows> cd\
C:\> cd\users\Mario
C:\Users\Mario>

3. install the Cordova and Ionic by typing the command of npm shown below:

NEUSTCICT 2020
 Page 6 of 152

C:\Users\Mario> npm install -g cordova ionic

Installing other required tools

 The Visual-Studio Code is the SDK that we are going to use to manage and
edit our codes in Ionic to install it go to https://code.visualstudio.com/
 install the Node.js because this is used in interacting with the Ionic ecosystem
https://nodejs.org/en/
 Install the latest jdk of java
 Install the Android Studio or SDK https://developer.android.com/studio/
 And then arrange the environment variables of Android and path of java shown
below

NEUSTCICT 2020
 Page 7 of 152

Creating Apps
(Reference: https://www.tutorialspoint.com/ionic/ionic_environment_setup.htm)

There are following three templates to create an App in Ionic:

1. Blank App
2. Tabs App
3. Side menu app

1.Blank App
This will allow you to create blank mobile app from scratch. The following is
the command:

First create a folder for your App example. NOTES: the command MD means Make
a Directory (Folder) and the CD means Change Directory (Folder):

C:\Users\Mario> cd Documents
C:\Users\Mario\Documents> MD Ionic
C:\Users\Mario\Documents > CD Ionic
C:\Users\Mario\Documents\Ionic >

Then type the ionic start and your desired filename of the app and the word “blank”
the following example uses ExampleAPP as an example filename:

NEUSTCICT 2020
 Page 8 of 152

C:\Users\Mario\Documents\Ionic > ionic start ExampleAPP

The command “Ionic Start” will generate a folder named ExampleAPP and then
arrange and install folders and files.

C:\Users\Mario\Documents\Ionic> cd ExampleAPP
C:\Users\Mario\Documents\Ionic\ ExampleAPP >

Making android applications requires right stages to do these for the Android Platform
include the Cordova extend and introduce the fundamental Cordova modules
demonstrated as follows:

C:\Users\Mario\Documents\Ionic\ExampleAPP>ionic Cordova platform add android

next phase is to build the app

C:\Users\Mario\Documents\Ionic\ExampleAPP> ionic build android

NOTES: In case of error type the command npm i -g native-run

To run and start the App type the following code:

C:\Users\Mario\Documents\Ionic\ExampleAPP> ionic run android

This command will output your App in the browser which is a blank interface with a
title “Ionic Blank starter”.

2.Tabs App
Allows you to create a default Ionic tabs template which contains a readymade
tab menu which are headers, common screens and functionalities. Open the
command prompt get out of the folder of our blank ExampleAPP folder:

C:\Users\Mario\Documents\Ionic\ExampleAPP> cd\
C:\Users\Mario\Documents\Ionic>

The command below begins the creation of the basic tabbed app:

C:\Users\Mario\Documents\Ionic> ionic start ExampleTabApp tabs

NEUSTCICT 2020
 Page 9 of 152

The command” Ionic Start” will generate a folder ExampleTabApp and then arrange
and install folders and the required files.

Enter into the newly created root folder of our Tabbed App (in this case
ExampleTabApp)

C:\Users\Mario\Documents\Ionic> cd ExampleTabApp
C:\Users\Mario\Documents\Ionic\ExampleTabApp >

Install the basic Cordova plugins and Install the Android Platform this will allow our
app to run in android emulators

C:\Users\Mario\Documents\Ionic\ExampleTabApp>Ionic cordova platform add

android

Now build the app:

C:\Users\Mario\Documents\Ionic\ExampleTabApp>ionic cordova build android

NOTES: In case of building errors during this command run, Install the Android SDK
and its supporting files.  npm i -g native-run

Then finally run your app, this will start if a mobile device is connected or an emulator
is present.

C:\Users\Mario\Documents\Ionic\ExampleTabApp> ionic cordova run android

This command will output your App in the browser with a tabbed graphical toolbar on
it.

3.Side Menu App

This App Template contains sidemenu from the start.

Open the command prompt get out of the folder of our blank ExampleTabApp folder:

C:\Users\Mario\Documents\Ionic\ ExampleTabApp > cd\

C:\Users\Mario\Documents\Ionic>

NEUSTCICT 2020
 Page 10 of 152

To create an app with side menu type the following (in this example our filename will
be ExampleSideMenuApp):

C:\Users\Mario\Documents\Ionic>ionic start ExampleSideMenuApp sidemenu

This above command creates a folder ExampleSideMenuApp and then create and
install folders arrangements and the required files.

Get inside of the folder in our newly created App:

C:\Users\Mario\Documents\Ionic>cd ExampleSideMenuApp
C:\Users\Mario\Documents\Ionic\ExampleSideMenuApp>

To run it in Android Emulator, install the basic Cordova plugins and then install the
Android Platform the command is shown below:

C:\Users\Mario\Documents\Ionic\ExampleSideMenuApp> ionic cordova platform add

android

To finalize the app command, type the following code:

C:\Users\Mario\Documents\Ionic\ExampleSideMenuApp> ionic cordova build

android

Finally, we will run the App shown in the command below:

C:\Users\Mario\Documents\Ionic\ExampleSideMenuApp> ionic cordova run android

This command will output your App in the browser with a built-in menu on it.
NOTES: To deploy Ionic App in your mobile device please visit:
https://ionicframework.com/docs/v3/intro/deploying/

Opening your Ionic Code

If you wish to view and manage your codes in visual studio type the following
command

C:\Users\Mario\Documents\Ionic\ExampleSideMenuApp> code .
NOTES: there are only single space between the word “code” and the “.”

NEUSTCICT 2020
 Page 11 of 152

Test App in Browser

The building process of ionic is fast since it uses any web browser testing the
app requires a native emulator such as android SDK or android studio, also testing
can be done directly to Mobile devices. To start coding type the “ionic serve”
command:

C:\Users\Mario\Documents\Ionic\ExampleSideMenuApp> ionic serve

With the ionic serve command, the web browser (Google Chrome
recommended) will open showing your App. To access the browser developer
console, Press the F12 key.

The webpage is auto refreshed, whenever. you make changes in the code.

Folder Structure of the Project

Below are the most used folders created by Ionic to form the anatomy of the
mobile App as mentioned:

NEUSTCICT 2020
 Page 12 of 152

 Platforms − is the container where the Android and known platforms

particularly the IOS projects are developed.
 Plugins − This folder holds the Cordova plugins.
 Resources − This directory contains the resources such as your project’s icon
and the splash screen.
 www and src – www and src is the working folder that you will access most of
the time. This is where you devote most of your time in developing Ionic
programs
 Other important Files
o config.xml is the configuration file of the Cordova.
o package.json comprises the materials connected to apps and the
dependencies and the plugins which are mounted utilizing the package
manager of the NPM.

NEUSTCICT 2020
 Page 13 of 152

EXERCISE
Answer the following question (send the answer thru Email of your instructor or
Facebook messenger, if there is any problem contact your instructor or ask
assistance to your class group)
1.) Describe the importance of Mobile Apps
2.) How can mobile apps help business, industry, education and
government?

LESSON 2: Ionic – Forms

The forms in Ionic are the least complex and for the most part generally
utilized type of communication among clients and the App you are planning these
structures are utilized to gather the information required
(Reference : https://ionicframework.com/docs/v3/developer-resources/forms/)
Making an Input Form
Utilizing item and the list as your fundamental classes permits your application
to comprise more than one-structure component and arrange the labels or
components in a rundown.

Utilizing the Label will give the capacity to center your content info.

The input type with a placeholder allows you to display any text that will act as
a caption, it will disappear as soon as you start typing and gets back again if you delete
all the text you type

The following examples are based on the traditional and previous version of
Ionic on how to put a label and text(with placeholder):
<div class = "list">
<label class = "item item-input">
<input type = "text" placeholder = "Type your Studno" />
</label>

<label class = "item item-input">

<input type = "text" placeholder = "Type your Name" />
</label>
</div>

NEUSTCICT 2020