Internet Computing Lab
Mobile App
Chin-Chih Chang/張欽智
Chung Hua University/中華大學資訊工程學系
[email protected]
中華大學資訊工程學系
Outline





Introduction
Android, iOS, and Windows 10 Mobile
Mobile App Development
App Development Practice
Apps Keep Going
1
Introduction – Device Market
Analysis

World device shipments (Source: Gartner)

http://www.gartner.com/newsroom/id/3676117
Worldwide Devices Shipments by Device Type, 2016-2019 (Millions of Units)
Device Type
2016
2017
2018
2019
219
205
198
193
49
61
74
85
PC Market
268
266
272
278
Ultramobiles (Basic and Utility)
168
165
166
166
Computing Devices Market
436
432
438
444
Mobile Phones
1,888
1,893
1,920
1,937
Total Devices Market
2,324
2,324
2,357
2,380
Traditional PCs (Desk-Based and Notebook)
Ultramobiles (Premium)
2
Introduction – Mobile Phone OS
Andorid Nougat
iPhone 7 iOS 10
Windows 10
3
Introduction – Mobile Phone OS
Market Analysis

Smartphone Operating System Sales
(Source: Gartner, May 2017)

http://www.gartner.com/newsroom/id/3725117
Operating
System
1Q17
Units
1Q17
Market
Share (%)
1Q16
Units
1Q16
Market
Share (%)
Android
iOS
Other OS
327,163.6
51,992.5
821.2
86.1
13.7
0.2
292,746.9
51,629.5
3,847.8
84.1
14.8
1.1
Total
379,977.3
100.0
348,224.2
100.0
4
Introduction – Smart Phone
Market Analysis

Smart phones share (Source: Gartner, May 2017)

http://www.gartner.com/newsroom/id/3725117
Vendor
Samsung
Apple
Huawei
Oppo
Vivo
Others
Total
1Q17 1Q17 Market
Units
Share (%)
1Q16 1Q16 Market
Units
Share (%)
78,671.4
51,992.5
34,181.2
30,922.3
20.7
13.7
9.0
8.1
81,186.9
51,629.5
28,861.0
15,891.5
23.3
14.8
8.3
4.6
25,842.2
158,367.7
379,977.3
6.8
41.7
100.0
14,001.0
156,654.2
348,224.2
4.0
45.0
100.0
5
Android Introduction

Android is a mobile operating system developed by
Google, based on the Linux kernel.
 Android is the world's most popular mobile platform.

Android devices are everywhere.
 Prices fit customers’ needs.
 Customization
 Multi-tasking
 Google integration
 The industry moves fast, and so does Android.

Platform versions and distribution

http://developer.android.com/about/dashboards/index.html
6
Android History





Android Inc. was founded in Palo Alto, California, USA
in 1998.
In 2005 Google acquired Android Inc.
When Android was unveiled in November, 2007, the
Open Handset Alliance – a consortium of firms was
founded to develop open standards for mobile devices.
T-Mobile announced the first commercial Android
device manufactured by HTC in September 2008.
The first Android phone appeared in Taiwan in May
2009 and was made by HTC.
7
Android Versions and Distribution
Version
1.5
1.6
2.0–2.1
2.2–2.2.3
2.3.3 -2.3.7
3.0–3.2.6
4.0.3 -4.0.4
4.1.x
4.2.x
4.3
4.4–4.4.4
5.0
5.1
6.0
7.0
7.1
Codename
Cupcake
Donut
Eclair
Froyo
Gingerbread
Honeycomb
Ice Cream Sandwich
Jelly Bean
8.0
O
KitKat
Lollipop
Marshmallow
Nougat
API
3
4
5-7
8
9-10
11-13
14-15
16
17
18
19-20
21
22
23
24
25
26
Distribution Release Date
April 27, 2009
September 15, 2009
October 26, 2009
May 20, 2010
December 6, 2010
February 22, 2011
0.8%
October 18, 2011
3.1%
July 9, 2012
4.4%
November 13, 2012
1.3%
July 24, 2013
18.1%
October 31, 2013
8.2%
November 3, 2014
22.6%
March 9, 2015
31.2%
October 5, 2015
8.9%
August 22, 2016
0.6%
October 4, 2016
N/A
June 8, 2017
Support status
Unsupported
Unsupported
Unsupported
Unsupported
Unsupported
Unsupported
Unsupported
Unsupported
Unsupported
Unsupported
Supported
Supported
Supported
Supported
Supported
Supported
Supported
8
Android Architecture





The Linux Kernel
Hardware Abstraction Layer
(HAL)
Android Runtime + Native
C/C++ Libraries
Java API Framework
System Apps
9
Android Architecture

The Linux Kernel


Hardware Abstraction Layer (HAL)


The foundation of the Android platform is the Linux kernel for
underlying functionalities such as threading and low-level
memory management.
HAL provides standard interfaces that expose device hardware
capabilities to the higher-level Java API framework.
Android Runtime

Ahead-of-time (AOT) and just-in-time (JIT) compilation
 Optimized garbage collection (GC)
 Better debugging support
10
Android Architecture

Native C/C++ Libraries


The Android platform provides Java framework APIs to expose
the functionality of some of C/C++ native libraries to apps.
Java API Framework
A rich and extensible View System for building an app’s UI
 A Resource Manager, providing access to non-code resources
 A Notification Manager that enables all apps to display custom
alerts in the status bar
 An Activity Manager that manages the lifecycle of apps and
provides a common navigation back stack
 Content Providers that enable apps to access data from other
apps, such as the Contacts app, or to share their own data

11
Android Architecture

System Apps




Android comes with a set of core apps for email, SMS
messaging, calendars, internet browsing, contacts, and more.
A third-party app can become the user's default web browser,
SMS messenger, or even the default keyboard.
The system apps function both as apps for users and to provide
key capabilities that developers can access from their own app.
Android application statistics – Google Play

Number of Android applications 3,072,637 (July 10, 2017)
http://www.appbrain.com/stats/number-of-android-apps
 free apps: 2,856,247 paid apps: 216,727
12
Why is Android so successful?

Why is Android so successful?





Highly customizable to diverse hardware
Open source, free market system
Large developer community
The Google support
How to earn from Android Apps?





Choose the right monetization model
Sell in-app digital goods with Play billing
Sell subscriptions with Play billing
Sell goods and services with Android Pay
Get paid to show ads with AdMob
13
iOS Introduction

iOS (formerly iPhone OS) is a mobile operating system
created and developed by Apple Inc..



iOS was originally unveiled in 2007 for the iPhone and then
extended to support other Apple devices such as the iPod Touch
(September 2007) and the iPad (January 2010).
watchOS is the OS specifically for Apple Watch.
Benefits of iOS

Longer support
 Security and privacy
 User friendly
 High hardware and software integration
14
iOS Versions
Version
Release date
Apple TV
1.0 – 1.1.5
2.0 – 2.2.1
3.0 – 3.1.3
3.2 – 3.2.2
4.0 – 4.3.5
5.0 – 5.1.1
6.0 – 6.1.6
7.0 – 7.1.2
8.0 – 8.4.1
June 29, 2007
July 11, 2008
June 17, 2009
April 3, 2010
June 21, 2010
October 21, 2011
September 19, 2012 OS X 10.4
September 18, 2013
2
September 17, 2014
3
9.0 – 9.3.5
September 16, 2015
10.0 – 10.3.1 September 16, 2016
iPad
Supported Devices
iPad
iPad
iPad
Air
Mini
Pro
1
1–2
1–3
2–4
2–4
2–4
1
1–2
1
1–2
1–3
tvOS
2–4
1–2
1–4
tvOS
4
1–2
2–4
9.7
12.9
9.7
12.9
1
1 – 3G
1 – 3GS
iPod
Touch
1
1
1–2
3G – 4
3GS – 4S
3GS – 5
4 – 5S
4S – 6Plus
2–4
3–4
4–5
5
5–6
4S – 6S Plus
5–6
5 – 7 Plus
6
iPhone
15
iOS Architecture

The implementation of iOS technologies can be viewed
as a set of layers.


Lower layers contain fundamental services and technologies.
Higher-level layers build upon the lower layers and provide
more sophisticated services and technologies.
16
Windows 10 Mobile

Windows 10 Mobile is a mobile operating system
developed by Microsoft.
 Windows 10 Mobile is designed for use on smartphones
and phablets running on ARM processor architectures.
 The future of Windows 10 Mobile is still uncertain.
 Windows 10 Mobile versions:
Version
Code name
Release date
Support retired
1507
Threshold 1
July 29, 2015
May 9, 2017
1511
Threshold 2
November 10, 2015
N/A
1607
Redstone 1
August 2, 2016
N/A
1703
Redstone 2
April 5, 2017
N/A
17
Windows 10 Mobile Architecture –
Universal Windows Platform

Universal Windows Platform (UWP) is a common app
platform for every device that runs Windows 10.
 You can create a single app package that can be installed
onto all Windows 10 devices.
18
Mobile App Development

Approaches of Mobile App Development:





Native App: An application program is developed for use on a
particular platform or device.
Web App (HTML5): A Web application program is wrapped as
an app.
Hybrid of Native and Web App: A mix between Web and native
application programs is wrapped as an app.
Cross Platform Compilation App: An application program is
compiled to different apps for different platform using the same
programming language.
Online App: An application program is developed online.
19
Native App Development

Android App



Platforms: Windows/OS X/Linux
Languages: Java/Kotlin
Java JDK (Java Development Kit)
 http://www.oracle.com/technetwork/java/javase/downloads

Android SDK (Software Development Kit)
 https://developer.android.com/studio/index.html

Integrated development environment (IDE):
 Android Studio: https://developer.android.com/studio/index.html
 Eclipse: https://www.eclipse.org/downloads/

Android Emulator:
 Nox App: https://www.bignox.com/
20
Native App Development

iOS App


Platforms: OS X
Languages: Objective C/Swift
 Swift is a powerful and intuitive programming language for iOS, OS X,
and watchOS.


iOS SDK: https://developer.apple.com/ios/
Integrated development environment (IDE):
 Xcode: https://developer.apple.com/xcode/

Windows 10 Mobile App

Platforms: Windows
 Languages: Visual C#/C++/Basic
 Visual Studio 2017: https://www.visualstudio.com/downloads/
21
Android vs. iOS vs. Windows 10
Mobile

App Stores:



Android App stores: Google Play, SlideME, Amazon Appstore,
1Mobile Market, Mobile9, Opera Mobile Store
iOS App stores: App Store, Cydia, Lima, Premier AppShop
Windows 10 Mobile Store: Microsoft Store
Items
Android
iPhone
Windows 10 Mobile
Platform
PC, Mac, Linux
iMac
Windows
Language
Java, Kotlin
Objective C, Swift
Visual C++, C#
App Market Fee
US$ 25
US$ 99/Year
US $19
App
Google Play
iTunes App Store
Microsoft Store
22
Web App Approach

Responsive Web Design (RWD): One Size Fits All

main scenarios:





Corporate Websites/Blog Sites
Media/News Sites
Location-based Services
Social networks
Challenges
 Less mobile specific functionalities
 Navigation is like Web pages from top to bottom by default.
 Longer development cycle


Development Kit: Boostrap, Foundation, Pure, Skeleton, UIKit
Mobile Web App: Device-Specific Approach

Development: jQuery mobile
23
Web App Approaches
Criteria
Versions
Responsive Web Design
Single version
Development Cost
One design cost but more complex.
Implementation Time Longer development cycle but more
flexible.
Design Approach
Knowledge for various devices is
required.
User Experience
•Slightly lower user experience
•Navigation enabled from top to
bottom by default.
Performance
Might need higher bandwidth but
careful design could lessen the
problem.
Maintenance
•Lower maintenance cost and effort
•Single revision to maintain for the
website and across a wide range of
mobile devices
Mobile (Optimized) Web App
Two separate versions – one for website
and another for mobile
Two design cost but less complex
Less time but only for two devices.
Only mobile specific knowledge is
required.
•Better user experience, specifically
designed for mobile phone.
•Left to right navigation is supported.
Designed specific for mobile devices
with better performance
•Medium
•One revision for website version and
one for mobile web app version
24
Hybrid of Native and Web App

Hybrid apps are a mix between native and Web apps.
 Native code and Web pages are wrapped as a App
package which can be deployed via app stores.
 They are developed use the same technologies as a
native and Web app but run within a hybrid container.


Apache Cordova/PhoneGap: https://cordova.apache.org/
Development Tools:



Ionic Framework: https://ionicframework.com/
Onsenui Framework: https://onsen.io/
Sencha Touch: https://www.sencha.com/products/touch/
25
Cross Platform Compilation App

Cross platform compilation app was built by tool which
lets developers write code in one language but compile
into different mobile platforms.
 Development Tools:

Alpha Anywhere: https://www.alphasoftware.com/
 Languages: C#, JavaScript, Xbasic, VB.NET, or any other .NET supported
language like Cobra and C++.

Corona: https://coronalabs.com/
 Language: Lua

Xamarin: https://www.xamarin.com/
 Languages: C#, Ruby
26
Online App Development

App Inventor is an open-source web application for
Android development.



It is originally provided by Google, and now maintained by the
Massachusetts Institute of Technology (MIT).
MIT App Inventor：http://appinventor.mit.edu/
App Inventor Chinese Learning Network:
http://www.appinventor.tw/

AppMachine: http://www.appmachine.com
 Appypie: http://www.appypie.com/
 EzoApp: https://ezoui.com/app/index.html
 GoodBarber: https://www.goodbarber.com/
27
App Development Comparisons
Native App
Mobile Web
Hybrid
Cross
Compiling
Online
Product
Eclipse
Android Studio
Xcode
Visual Studio
Bootstrap
Foundation,
Pure, Skeleton,
UIKit
ionic
Onsenui
PhoneGap
Sencha Touch
Alpha
Anywhere
Corona
Xamarin
App
Inventor
EZoApp
GoodBarber
Language
Java, Kotlin,
Objective C,
Swift
HTML, CSS,
JavaScript,
JQuery Mobile
HTML, CSS,
C#, C++
JavaScript, Java, JavaScript
Swift
Luby
Visual
Coding
Cross Platform
Low
High
High
Medium
Medium
Integration and
Functionality
High
Low
Medium
High
Low
Learning
Difficulty
High
Low
Low
Medium
Low
Cost
Free
Free
Commercial
Free
Commercial
Free
Commercial
Free
Commercial
28
App Development – App Inventor
Login into: http://ai2.appinventor.mit.edu/
2. Start a new Project and enter project name. Then the
following Designer – interface part is shown.
1.
29
App Development – App Inventor
Add a Label and change Text.
4. Add a Image, upload an image file and set Picture’s
height and width to Fill parent.
3.
30
App Development – App Inventor
3.


Click Build App.
Provide QR code for .apk: Scan QR code to download it.
Save .apk to my computer: Put it into an emulator or your
mobile phone.
31
App Development – App Inventor
Example: Triangle Area

Example: Enter three sides of a triangle and calculate
the triangle area.
32
Exercise 1: Create an App with
text and image using App Inventor
1.
2.
3.
4.
5.
Download Nox App Player from
https://www.bignox.com/ and install it in C:\.
Login into http://ai2.appinventor.mit.edu/
Create an App with Create an App with text and image
using App Inventor.
Build into APK.
Install it on Nox App Player.
33
App Development – App Inventor
Example: Triangle Area

Click Blocks – enter programming part.
34
App Development – App Inventor
Example: Calculator
35
App Development – App Inventor
Example: Calculator
36
App Development – App Inventor
Example: Dice Roll
37
App Development – App Inventor
Example: Calculator
38
Exercise 2: Create an App of
Guessing a number
Create an App of guessing a number between 1 and 10.
2. Build into APK and install it on Nox App Player.
 Hint:
1.
39
App Development – Android

Android apps are written in the Java or Kotlin
programming language.
 The Android SDK tools compile your code along with
any data and resource files into an APK, an Android
package, which is an archive file with an .apk suffix.
 One APK file contains all the contents of an Android
app and is the file that Android-powered devices use to
install the app.
 The Android system implements the principle of least
privilege. Most permissions need to be specified before
they can used.
40
App Development – Android

There are four main types of app components:




Activities: It is the entry point for interacting with the user.
Services: It is a general-purpose entry point for keeping an app
running in the background for all kinds of reasons.
Broadcast receivers: It is a component that enables the system
to deliver events to the app outside of a regular user flow,
allowing the app to respond to system-wide broadcast
announcements.
Content providers: It manages a shared set of app data that you
can store in the file system, in a SQLite database, on the web, or
on any other persistent storage location that your app can
access.
41
App Development – Android
Studio

Android Studio is the official IDE for Android app
development, based on IntelliJ IDEA.
 Each project in Android Studio contains modules with
source code files and resource files. Types of modules
include:

Android app modules
 Library modules
 Google App Engine modules

Android Studio uses Gradle as the foundation of the
build system.
42
App Development – Android
Studio

Each app module contains the
following folders:



manifests: Contains the
AndroidManifest.xml file.
java: Contains the Java source code
files, including JUnit test code.
res: Contains all non-code resources,
such as XML layouts, UI strings, and
bitmap images.
43
App Development – Android
Studio
44
App Development – Android
Studio
The toolbar lets you carry out a wide range of actions,
including running your app and launching Android
tools.
2. The navigation bar helps you navigate through your
project and open files for editing. It provides a more
compact view of the structure visible in
the Project window.
3. The editor window is where you create and modify
code. Depending on the current file type, the editor can
change. For example, when viewing a layout file, the
editor displays the Layout Editor.
1.
45
App Development – Android
Studio
The tool window bar runs around the outside of the
IDE window and contains the buttons that allow you to
expand or collapse individual tool windows.
5. The tool windows give you access to specific tasks
like project management, search, version control, and
more. You can expand them and collapse them.
6. The status bar displays the status of your project and
the IDE itself, as well as any warnings or messages.
 Style and Formatting: Click File > Settings > Editor >
Code Style.
4.
46
App Development – Android
Studio: Getting Started
Download Android Studio at
https://developer.android.com/studio/index.html and
install it (at c:\Android).
2. Start up Android Studio.
3. Create a new project.
1.
1.
In Android Studio, create a new project:
 If you don't have a project opened, in the Welcome to Android Studio
window, click Start a new Android Studio project.
 If you have a project opened, select File > New Project.
4.
In the New Project screen, enter the following values:


Application Name: "My First App"
Company Domain: "itri.org.tw"
47
App Development – Android
Studio: Getting Started
48
App Development – Android
Studio: Getting Started
5.
6.
7.
8.

Click Next.
In the Target Android Devices screen, keep the
default values and click Next.
In the Add an Activity to Mobile screen, select
Empty Activity and click Next.
In the Customize the Activity screen, keep the default
values and click Finish.
First, be sure the Project window is open (select View
> Tool Windows > Project) and the Android view is
selected from the drop-down list at the top of that
window. You can then see the following files:
49
App Development – Android
Studio: Getting Started
50
App Development – Android
Studio: Getting Started
51
App Development – Android
Studio: Getting Started

app > java > com.example.myfirstapp > MainActivity.java
 This is the main activity (the entry point for your app). When you build and
run the app, the system launches an instance of this Activity and loads its
layout.



app > res > layout > activity_main.xml
This XML file defines the layout for the activity's UI. It
contains a TextView element with the text "Hello world!".
app > manifests > AndroidManifest.xml
 The manifest file describes the fundamental characteristics of the app and
defines each of its components.


Gradle Scripts > build.gradle
You'll see two files with this name:
 One for the project and one for the "app" module.
52
App Development – Android
Studio

app > manifests > AndroidManifest.xml
 The manifest file describes the fundamental characteristics of the app and
defines each of its components.


Gradle Scripts > build.gradle
You'll see two files with this name:
 One for the project and one for the "app" module. Each module has its own
build.gradle file, but this project currently has just one module. You'll
mostly work with the module's build.gradle file to configure how the
Gradle tools compile and build your app. For more information about this
file, see Configure Your Build.
53
App Development – Android
Studio
54
App Development - Android
Studio: Run Your App

Run on a real device
 Set up your device as follows:



Connect your device to your machine with a USB cable.
Enable USB debugging on your device by going to Settings >
Developer options or go to Settings > About phone and tap
Build number seven times.
Run the app from Android Studio as follows:


In Android Studio, click the app module in the Project window
and then select Run > Run (or click Run in the toolbar).
In the Select Deployment Target window, select your device,
and click OK.
55
App Development - Android
Studio: Run Your App

Run Android Virtual Device (AVD).
1.
2.
3.
4.
5.
6.
7.
Launch the Android Virtual Device Manager by selecting Tools
> Android > AVD Manager.
In the Your Virtual Devices screen, click Create Virtual
Device.
In the Select Hardware screen, select a phone device and then
click Next.
In the System Image screen, click Download for system
image.
select the system image from the list and click Next.
On the next screen, click Finish.
Select the device you just created and click Launch this AVD
in the emulator.
56
Exercise 3: Create an Android App
with text and image
Create a new project.
2. Change the text “Hello, World!”.
3. Add an image into the interface.
4. Connect to Nox App enumlator.
1.

5.
C:\nox\bin\nox_adb connect 127.0.0.1:62001
Run your App.
57
App Development - Android
Studio: Building a User Interface

Create a layout that includes a text box and a button.
 The user interface for an Android app is built using a
hierarchy of layouts (ViewGroup objects) and widgets
(View objects).
58
App Development - Android
Studio: Building a User Interface

In Android Studio's Project window, open app > res >
layout > activity_main.xml.
 To make more room for the Layout Editor, hide the
Project window by selecting View > Tool Windows >
Project (or click Project on the left side of Android
Studio).
 If your editor shows the XML source, click the Design
tab at the bottom of the window.
 Click Show Blueprint
so only the blueprint layout is
visible.
59
App Development - Android
Studio: Building a User Interface

Make sure Show Constraints is on. The tooltip in the
toolbar should read Hide Constraints (because they're
now showing).
 Make sure Autoconnect is off. The tooltip in the toolbar
should read Turn On Autoconnect (because it's now
off).
 Click Default Margins 8 in the toolbar and select 16
(you can still adjust the margin for each view later).
 Click Device in Editor in the toolbar and select Pixel
XL.
60
App Development - Android
Studio: Building a User Interface
61
App Development - Android
Studio: Triangle Area
62
App Development - Android
Studio: Triangle Area
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context="tw.org.itri.myfirstapp.MainActivity">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="a = "
android:textSize="18sp" />
<EditText
android:id="@+id/editText1"
android:layout_width="56dp"
android:layout_height="wrap_content"
android:ems="10"
android:inputType="textPersonName" />
63
App Development - Android
Studio: Triangle Area
<EditText
android:id="@+id/editText3"
android:layout_width="56dp"
android:layout_height="wrap_content"
android:ems="10"
android:inputType="textPersonName" />
<Button
android:id="@+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:onClick="area"
android:text="Area" />
</LinearLayout>
<TextView
android:id="@+id/textView4"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="18sp" />
</LinearLayout>
64
App Development - Android
Studio: Triangle Area
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
}
public void area(View v) {
EditText edtA = (EditText) findViewById(R.id.editText1);
EditText edtB = (EditText) findViewById(R.id.editText2);
EditText edtC = (EditText) findViewById(R.id.editText3);
double a = Double.parseDouble(edtA.getText().toString());
double b = Double.parseDouble(edtB.getText().toString());
double c = Double.parseDouble(edtC.getText().toString());
TextView tv = (TextView) findViewById(R.id.textView4);
if (a + b > c && b + c > a && c + a > b) {
double s = (a + b + c)/2;
double area = Math.sqrt(s * (s - a) * (s - b) * (s - c));
tv.setText("Area = " + area);
} else tv.setText("The triangle cannot be formed.");
}
}
65
App Development - Android
Studio: Calculator
66
App Development - Android
Studio: Calculator
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/ap
k/res/android"
android:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<EditText
android:layout_width="60dp"
android:layout_height="wrap_content"
android:ems="10"
android:id="@+id/editText1"
android:inputType="text" />
<Spinner
android:layout_width="80dp"
android:layout_height="wrap_content"
android:id="@+id/spinner"
android:entries="@array/operators"/>
<EditText
android:layout_width="60dp"
android:layout_height="wrap_content"
android:ems="10"
android:id="@+id/editText2"
android:inputType="text" />
<Button
android:text="="
android:layout_width="40dp"
android:layout_height="wrap_content"
android:id="@+id/button"
android:onClick="calculate" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/textView"
android:layout_weight="1" />
</LinearLayout>
67
App Development - Android
Studio: Calculator
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
}
public void calculate(View v) {
EditText edtA = (EditText) findViewById(R.id.editText1);
double a = Double.parseDouble(edtA.getText().toString());
Spinner sp = (Spinner) findViewById(R.id.spinner);
String op = sp.getSelectedItem().toString();
EditText edtB = (EditText) findViewById(R.id.editText2);
double b = Double.parseDouble(edtB.getText().toString());
TextView tv = (TextView) findViewById(R.id.textView);
if(op.equals("+")) tv.setText("" + (a + b));
if(op.equals("-")) tv.setText("" + (a - b));
if(op.equals("*")) tv.setText("" + (a * b));
if(op.equals("/")) tv.setText("" + (a / b));
}
}
68
App Development - Android
Studio: Guessing Number
69
App Development - Android
Studio: Calculator
public class MainActivity extends AppCompatActivity {
int number;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
number = (int) (Math.random() * 10) + 1;
}
public void guess(View v) {
EditText edt = (EditText) findViewById(R.id.editText);
int guess = Integer.parseInt(edt.getText().toString());
TextView tv = (TextView) findViewById(R.id.textView1);
if (guess > number) tv.setText("Too large!");
else if (guess < number) tv.setText("Too Small!");
else tv.setText("Correct!");
}
}
70
Exercise 4: Android App to solve a
quadratic equation
Create a Android App in which an user input a quadratic
equation ax2 + bx + c = 0 and find the roots of the
equation.
3 x+
2 = 0 Solve
1 x2 +
x = 1, x = 2
71
App Development – Mobile Web
App (Windows)
1.
2.
3.
4.
5.
Download and install Java JDK
Download and install Android Studio in
c:\Android\Android Studio and Android SDK in
c:\Android\sdk.
Download Node.js from https://nodejs.org and install it
in c:\nodejs
Download Apache Ant from
http://ant.apache.org/bindownload.cgi and install in
c:\ant.
Add Apache Ant Path c:\ant\bin (Your ant is installed in
c:\ant).
72
App Development – Mobile Web
App (Windows)
6.
7.
8.
9.
10.
11.
12.
13.
Set ANDROID_HOME c:\Android\sdk (Your android
SDK is installed in c:\Android\sdk).
Run DOS Prompt (run cmd).
c:\> npm install -g cordova
c:\> cordova create hello
c:\> cd hello
c:\> cordova run android
Replace the index.html with the following HTML file
and also copy the necessary image files.
c:\> cordova run android
73
App Development – Mobile Web
App (iOS)
1.
Add paths to ~/.bash_profile.
export PATH=/opt/android/sdk/platform-tools:/opt/android/sdk/tools:/usr/local/bin:${PATH}
2.
3.
4.
5.
6.
7.
8.
Install Xcode
npm install -g ios-sim
npm install -g ios-deploy
sudo npm install -g cordova
Cordova create hello
cordova platform add ios
cordova platform add android
74
App Development – Mobile Web
App (iOS)
1.
2.
3.
4.
5.
cordova platform
cordova run android
cordova run ios
cordova run android –list
cordova run android --target=AVDPhone
75
App Development - Web App
Example: Triangle Example
<!DOCTYPE html>
<html>
<head>
<title>Triangle Area</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script>
function area() {
var a = parseFloat(document.getElementById("a").value);
var b = parseFloat(document.getElementById("b").value);
var c = parseFloat(document.getElementById("c").value);
if (a + b > c && b + c > a && c + a > b) {
var s = (a + b + c)/2;
var area = Math.sqrt(s * (s - a) * (s - b) * (s - c));
document.getElementById("result").innerHTML = "Area = " + area;
} else document.getElementById("result").innerHTML="The triangle cannot be formed.";
}
</script>
</head>
<body>
<input type="text" id="a"><input type="text" id="b"><input type="text" id="c">
<button onclick="area()">Area</button>
<p id="result"></p>
</body>
</html>
76
App Development - Web App
Example: Dice Rolling
<!DOCTYPE html>
<head>
<title>Rolling Dice</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script>
var rolling;
function roll() {
rolling = setInterval(frame, 50);
}
function frame() {
var n = Math.floor(Math.random() * 6) + 1;
document.getElementById("dice").src = "dice" + n + ".png" ;
}
function stop() {
clearInterval(rolling);
}
</script>
</head>
<body>
<img id="dice" src="dice1.png"/> <br/>
<button onclick="roll()">Roll</button><button onclick=“stop()">Stop</button>
<label id="result"></p>
</body>
</html>
77
Exercise 5: Create a Web app of
Number Guessing Game
Download and install Node.js and Apache Ant.
2. Set the necessary paths.
3. Create a phonegap project.
4. Replace the index.html with the following guess
number HTML.
1.
78
Exercise 5: Create a Web app of
Number Guessing Game
<!DOCTYPE html>
<head>
<title>Rolling Dice</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
function guess() {
var number = document.getElementById("number").value;
if (number == 0) {
number = Math.floor(Math.random() * 10) + 1;
document.getElementById("number").value = number;
}
var guess = document.getElementById("guess").value;
if (number == guess) document.getElementById("result").innerHTML = "Correct! " + number;
else if (guess < number) document.getElementById("result").innerHTML = "Too low! Try again!";
else if (guess > number) document.getElementById("result").innerHTML = "Too high! Try again!";
}
</script>
</head>
<body>
<img id="dice" src="dice1.png"/> <br/>
<button onclick="roll()">Roll</button><button onclick=“stop()">Stop</button>
<label id="result"></p>
</body>
</html>
79
Visual Studio 2017 – Mobile App

Cross Platform Compilation App



Web App (Online)


Azure app services - A mobile app running on Azure Cloud
Hybrid apps with JavaScript


Native apps with C# - Xamarin
Native apps with C++
Build cross-platform mobile apps using Apache Cordova
Set up Visual Studio 2017 for hybrid app.


Install Visual Studio with Mobile App Development using
JavaScript.
Install and set up Visual Studio Emulator for Android.
80
Visual Studio 2017 – Hybrid apps
with JavaScript
1.
Create a blank App (Apache Cordova)
81
Visual Studio 2017 – Hybrid apps
with JavaScript
82
Visual Studio 2017 – Hybrid apps
with JavaScript
2.
Modify www/index.html
83
Visual Studio 2017 – Hybrid apps
with JavaScript
4.
Modify security policy.
<meta http-equiv="Content-Security-Policy"
content="default-src *
gap: ws:
https://ssl.gstatic.com;style-src * 'unsafeinline' 'self'
data: blob:;script-src * 'unsafe-inline' 'unsafeeval' data: blob:;
img-src * data: 'unsafe-inline' 'self'
content:;fmedia-src mediastream;">
5.
Choose Devices and run the app.
84
Apps Keep Going

References:





Amazon Go:
https://www.youtube.com/watch?v=NrmMk1Myrxc
A Day Made of Glass 2:
https://www.youtube.com/watch?v=jZkHpNnXLB0
MicroStrategy: http://www.microstrategy.com/
Masako Wakamiya:
https://www.youtube.com/watch?v=-5K08TDvYFA
Yuma Interview:
https://www.youtube.com/watch?v=XPxRlCpHpEQ

Apps keep growing.
 Developing an app will be easier.
85
Topic for next Classes

Azure Cloud Platform



https://azure.microsoft.com/
Visual Studio 2017 Community
https://www.visualstudio.com/downloads/
Google Cloud Platform

https://cloud.google.com/
 Google Cloud SDK, Cloud Shell, Android Studio, Cloud Tools
for Visual Studio
86