0. Chin-Chih Chang/張欽智 Chung Hua University/中華大學資訊工程學系 changc@chu.edu.tw
Mobile App
Chin-Chih Chang/張欽智
Chung Hua University/中華大學資訊工程學系

1. Outline Introduction Android, iOS, and Windows 10 Mobile
Mobile App Development
App Development Practice
Apps Keep Going

2. Introduction – Device Market Analysis
World device shipments (Source: Gartner)
Worldwide Devices Shipments by Device Type, (Millions of Units)
Device Type
2016
2017
2018
2019
Traditional PCs (Desk-Based and Notebook)
219
205
198
193
Ultramobiles (Premium) 49 61 74 85
PC Market
268
266
272
278
Ultramobiles (Basic and Utility)
168
165
166
Computing Devices Market
436
432
438
444
Mobile Phones
1,888
1,893
1,920
1,937
Total Devices Market
2,324
2,357
2,380

3. Introduction – Mobile Phone OS
Andorid Nougat iPhone 7 iOS Windows 10

4. Introduction – Mobile Phone OS Market Analysis
Smartphone Operating System Sales
(Source: Gartner, May 2017)
Operating System
1Q17 Units
1Q17 Market Share (%)
1Q16 Units
1Q16 Market Share (%)
Android
327,163.6
86.1
292,746.9
84.1
iOS
51,992.5
13.7
51,629.5
14.8
Other OS
821.2
0.2
3,847.8
1.1
Total
379,977.3
100.0
348,224.2

5. Introduction – Smart Phone Market Analysis
Smart phones share (Source: Gartner, May 2017)
Vendor
1Q17 Units
1Q17 Market Share (%)
1Q16 Units
1Q16 Market Share (%)
Samsung
78,671.4
20.7
81,186.9
23.3
Apple
51,992.5
13.7
51,629.5
14.8
Huawei
34,181.2
9.0
28,861.0
8.3
Oppo
30,922.3
8.1
15,891.5
4.6
Vivo
25,842.2
6.8
14,001.0
4.0
Others
158,367.7
41.7
156,654.2
45.0
Total
379,977.3
100.0
348,224.2

6. 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

7. 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.

8. Android Versions and Distribution
Codename
API
Distribution
Release Date
Support status
1.5
Cupcake 3
April 27, 2009
Unsupported
1.6
Donut 4
September 15, 2009
2.0–2.1
Eclair
5-7
October 26, 2009
2.2–2.2.3
Froyo 8
May 20, 2010
Gingerbread
9-10
December 6, 2010
3.0–3.2.6
Honeycomb
11-13
February 22, 2011
Ice Cream Sandwich
14-15
0.8%
October 18, 2011
4.1.x
Jelly Bean 16
3.1%
July 9, 2012
4.2.x 17
4.4%
November 13, 2012
4.3 18
1.3%
July 24, 2013
4.4–4.4.4
KitKat
19-20
18.1%
October 31, 2013
Supported
5.0
Lollipop 21
8.2%
November 3, 2014
5.1 22
22.6%
March 9, 2015
6.0
Marshmallow 23
31.2%
October 5, 2015
7.0
Nougat 24
8.9%
August 22, 2016
7.1 25
0.6%
October 4, 2016
8.0 O 26
N/A
June 8, 2017

9. Android Architecture The Linux Kernel Hardware Abstraction Layer (HAL)
Android Runtime + Native C/C++ Libraries
Java API Framework
System Apps

10. 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.
Hardware Abstraction Layer (HAL)
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

11. Android Architecture Native C/C++ Libraries Java API Framework
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

12. Android Architecture System Apps
Android comes with a set of core apps for , 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)
free apps: 2,856,247 paid apps: 216,727

13. 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

14. 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

15. iOS Versions Version Release date Supported Devices Apple TV iPad
iPad Air
iPad Mini
iPad Pro
iPhone
iPod Touch
1.0 – 1.1.5
June 29, 2007 1
2.0 – 2.2.1
July 11, 2008
1 – 3G
3.0 – 3.1.3
June 17, 2009
1 – 3GS
1 – 2
3.2 – 3.2.2
April 3, 2010
4.0 – 4.3.5
June 21, 2010
3G – 4
2 – 4
5.0 – 5.1.1
October 21, 2011
1 – 3
3GS – 4S
3 – 4
6.0 – 6.1.6
September 19, 2012
OS X 10.4
3GS – 5
4 – 5
7.0 – 7.1.2
September 18, 2013 2
4 – 5S 5
8.0 – 8.4.1
September 17, 2014 3
4S – 6Plus
5 – 6
9.0 – 9.3.5
September 16, 2015
tvOS
1 – 4
4S – 6S Plus
10.0 –
September 16, 2016 4
5 – 7 Plus 6

16. 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.

17. 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
1703
Redstone 2
April 5, 2017

18. 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.

19. 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.

20. Native App Development
Android App
Platforms: Windows/OS X/Linux
Languages: Java/Kotlin
Java JDK (Java Development Kit)
Android SDK (Software Development Kit)
Integrated development environment (IDE):
Android Studio:
Eclipse:
Android Emulator:
Nox App:

21. 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:
Integrated development environment (IDE):
Xcode:
Windows 10 Mobile App
Platforms: Windows
Languages: Visual C#/C++/Basic
Visual Studio 2017:

22. 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

23. 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

24. Web App Approaches Criteria Responsive Web Design
Mobile (Optimized) Web App
Versions
Single version
Two separate versions – one for website and another for mobile
Development Cost
One design cost but more complex.
Two design cost but less complex
Implementation Time
Longer development cycle but more flexible.
Less time but only for two devices.
Design Approach
Knowledge for various devices is required.
Only mobile specific knowledge is required.
User Experience
Slightly lower user experience
Navigation enabled from top to bottom by default.
Better user experience, specifically designed for mobile phone.
Left to right navigation is supported.
Performance
Might need higher bandwidth but careful design could lessen the problem.
Designed specific for mobile devices with better performance
Maintenance
Lower maintenance cost and effort
Single revision to maintain for the website and across a wide range of mobile devices
Medium
One revision for website version and one for mobile web app version

25. 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:
Development Tools:
Ionic Framework:
Onsenui Framework:
Sencha Touch:

26. 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:
Languages: C#, JavaScript, Xbasic, VB.NET, or any other .NET supported language like Cobra and C++.
Corona:
Language: Lua
Xamarin:
Languages: C#, Ruby

27. 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：
App Inventor Chinese Learning Network:　
AppMachine:
Appypie:
EzoApp:
GoodBarber:

28. 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, JavaScript, Java, Swift
C#, C++
JavaScript Luby
Visual Coding
Cross Platform
Low
High
Medium
Integration and Functionality
Learning Difficulty
Cost
Free
Commercial

29. App Development – App Inventor
Login into:
Start a new Project and enter project name. Then the following Designer – interface part is shown.

30. App Development – App Inventor
Add a Label and change Text.
Add a Image, upload an image file and set Picture’s height and width to Fill parent.

31. App Development – App Inventor
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.

32. App Development – App Inventor Example: Triangle Area
Example: Enter three sides of a triangle and calculate the triangle area.

33. Exercise 1: Create an App with text and image using App Inventor
Download Nox App Player from and install it in C:\.
Login into
Create an App with Create an App with text and image using App Inventor.
Build into APK.
Install it on Nox App Player.

34. App Development – App Inventor Example: Triangle Area
Click Blocks – enter programming part.

35. App Development – App Inventor Example: Calculator

36. App Development – App Inventor Example: Calculator

37. App Development – App Inventor Example: Dice Roll

38. App Development – App Inventor Example: Calculator

39. Exercise 2: Create an App of Guessing a number
Create an App of guessing a number between 1 and 10.
Build into APK and install it on Nox App Player.
Hint:

40. 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.

41. 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.

42. 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.

43. 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.

44. App Development – Android Studio

45. App Development – Android Studio
The toolbar lets you carry out a wide range of actions, including running your app and launching Android tools.
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.
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.

46. 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.
The tool windows give you access to specific tasks like project management, search, version control, and more. You can expand them and collapse them.
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.

47. App Development – Android Studio: Getting Started
Download Android Studio at and install it (at c:\Android).
Start up Android Studio.
Create a new project.
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.
In the New Project screen, enter the following values:
Application Name: "My First App"
Company Domain: "itri.org.tw"

48. App Development – Android Studio: Getting Started

49. App Development – Android Studio: Getting Started
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:

50. App Development – Android Studio: Getting Started

51. App Development – Android Studio: Getting Started

52. 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.

53. 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.

54. App Development – Android Studio

55. 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.

56. App Development - Android Studio: Run Your App
Run Android Virtual Device (AVD).
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.

57. Exercise 3: Create an Android App with text and image
Create a new project.
Change the text “Hello, World!”.
Add an image into the interface.
Connect to Nox App enumlator.
C:\nox\bin\nox_adb connect :62001
Run your App.

58. 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).

59. 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.

60. 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.

61. App Development - Android Studio: Building a User Interface

62. App Development - Android Studio: Triangle Area

63. App Development - Android Studio: Triangle Area
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android=" xmlns:app=" xmlns: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:layout_width="wrap_content" android:layout_height="wrap_content" android:text="a = " android:textSize="18sp" /> <EditText android:layout_width="56dp" android:layout_height="wrap_content" android:ems="10" android:inputType="textPersonName" />

64. App Development - Android Studio: Triangle Area
<EditText android:layout_width="56dp" android:layout_height="wrap_content" android:ems="10" android:inputType="textPersonName" /> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_weight="1" android:onClick="area" android:text="Area" /> </LinearLayout> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:textSize="18sp" /> </LinearLayout>

65. 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."); } }

66. App Development - Android Studio: Calculator

67. App Development - Android Studio: Calculator
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android=" 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:inputType="text" /> <Spinner android:layout_width="80dp" android:layout_height="wrap_content"
<EditText android:layout_width="60dp" android:layout_height="wrap_content" android:ems="10" android:inputType="text" /> <Button android:text="=" android:layout_width="40dp" android:layout_height="wrap_content" android:onClick="calculate" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_weight="1" /> </LinearLayout>

68. 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)); } }

69. App Development - Android Studio: Guessing Number

70. 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!"); } }

71. 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. x2 + x + = 0 x = 1, x = 2 1 3 2
Solve

72. App Development – Mobile Web App (Windows)
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 and install it in c:\nodejs
Download Apache Ant from and install in c:\ant.
Add Apache Ant Path c:\ant\bin (Your ant is installed in c:\ant).

73. App Development – Mobile Web App (Windows)
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.

74. App Development – Mobile Web App (iOS)
Add paths to ~/.bash_profile.
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
export PATH=/opt/android/sdk/platform-tools:/opt/android/sdk/tools:/usr/local/bin:${PATH}

75. App Development – Mobile Web App (iOS)
cordova platform
cordova run android
cordova run ios
cordova run android –list
cordova run android --target=AVDPhone

76. 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>

77. 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>

78. Exercise 5: Create a Web app of Number Guessing Game
Download and install Node.js and Apache Ant.
Set the necessary paths.
Create a phonegap project.
Replace the index.html with the following guess number HTML.

79. 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>

80. Visual Studio 2017 – Mobile App
Cross Platform Compilation App
Native apps with C# - Xamarin
Native apps with C++
Web App (Online)
Azure app services - A mobile app running on Azure Cloud
Hybrid apps with JavaScript
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.

81. Visual Studio 2017 – Hybrid apps with JavaScript
Create a blank App (Apache Cordova)

82. Visual Studio 2017 – Hybrid apps with JavaScript

83. Visual Studio 2017 – Hybrid apps with JavaScript
Modify www/index.html

84. Visual Studio 2017 – Hybrid apps with JavaScript
Modify security policy.
Choose Devices and run the app.
<meta http-equiv="Content-Security-Policy" content="default-src * gap: ws: * 'unsafe-inline' 'self'
data: blob:;script-src * 'unsafe-inline' 'unsafe-eval' data: blob:;
img-src * data: 'unsafe-inline' 'self' content:;fmedia-src mediastream;">

85. Apps Keep Going References: Apps keep growing.
Amazon Go:
A Day Made of Glass 2:
MicroStrategy:
Masako Wakamiya:
Yuma Interview:
Apps keep growing.
Developing an app will be easier.

86. Topic for next Classes Azure Cloud Platform Google Cloud Platform
Visual Studio 2017 Community
Google Cloud Platform
Google Cloud SDK, Cloud Shell, Android Studio, Cloud Tools for Visual Studio