Week 1

Introduction to Mobile Development & Phone Gap

Introduction to Javascript

Introduction to Mobile Development & Cordova

Mobile Applications

• Based on history: Winners will not likely produce the best products– Superior marketing strategies gain traction quickly

Example: Microsoft versus Apple in the 1980s– Getting to the public to fill a need before standards are established

Example: Early browser war between Netscape and Explorer• Bottom line: Development is expensive; mistakes can be disastrous

Assumption: We have an idea for a hot new mobile application

General Considerations

Hardware Specifications• Mobile Device Resolution

– Low end: 128x128– Mid end: 240x360– High end: 320x480, 1024x768, 1200x800, etc.

• Operating Systems: Android, WebOS, Windows, iOS• Memory: 256MB – 1GB; Storage: 1GB-32 GB• Processor Speed: 500 mhz – 2 ghz

Pixels and Aspect Ratio• Pixels per inch (ppi), or dots per inch (dpi)

– High resolution may mean that you need a magnifier glass to read text

– The retina has a limit of 300 ppi– Zooming in and out may be necessary

• Aspect ratio– Width to height ratio differs between devices– When turning the device, the aspect may change

•Does the device automatically zoom to fit?•Does the device adjust the font to accommodate?

Features & Benefits• Key Entry

– Virtual or physical keyboard– Numeric or alphanumeric entry– External keyboard attachment

• Interacting with applications– Touch or multi-touch– Handwriting and/or voice recognition

• Geo-location• Facial and gesture recognition• Connections: Phone, web, texting, email

The Future of Mobile• Rapid innovations such as:

– Near Field Communication (NFC) technology for near device data exchange (Apple Pay)

– Shared data between applications– Google map integration(such as Uber)– Faster and more stable background services and applications

Best Practices• Handle unavailable or lost network connection• Limit permissions requested as much as possible• Optimal use of storage. Use the SD card if possible• Use standard GUI layouts• Efficient, fast, responsive• Multi thread slow time consuming operations• Save application data when state changes occur• Share data with apps by implementing content providers• Implement activities launchable from other apps• Utilize notification facilities, progress bars, flash screens

Mobile Development Considerations

• User Considerations.

– Never interrupt a user activity, instead use the led notification light, vibration, message bar, or ringtones

– Always be polite– Applications should be intuitive, easy to use, familiar and conform to

standards

• Battery life: Detect when the battery is not charging and avoid compute-bound operations if this is the case. Be mindful of battery at all times

• Life cycle: Applications do not control when they start or end. Seamlessly respond to applications being paused and restarted

Design Considerations• Orientation changes• Varied screen sizes and resolutions• Operating system choice to reach a wide audience• Give a reason for continued use• Well-defined, singular purpose• Multi user support (Novices – Expert)• Upgrades/new features (without feature creep)• Varied font sizes

Additional Considerations• Limited persistent storage (RAM)

– Applications should cache data when possible– Manage data stores to remove unneeded data faithfully

• Limited memory sizes – Minimize application size, optimize images, ect.

• Be mindful of bandwidth and constant connections– Seamless degradated (lower state) operation– Revert to limited operation or previously cached data

• Varied screens– Different, interesting user interfaces other than buttons and

text boxes– Detect orientation changes, respond or block.– Accommodate various display resolutions

Considerations (cont.)• Messaging costs

– Consider frequency and times of updates and minimize the amount of data transferred

– Transfer at off-peak periods– Always respect user preferences

• Limited processing power/battery Power– Code should be as efficient as possible– Make use of background services and worker threads to

maximize responsiveness– Save and restore processing states

Application Security

• Applications can store data persistently with the following limitations– They can only write to their own data folders– They must request user permission for access to

services such as: internet access, audio recording, and near field device interaction, SD card

– Applications can create content managers to expose their data to selected other applications

Android vs. iOS

• Android easier to install (no marketplace• iOS requires paid developer license.• Android has greater market share(70-90%)

Developing Android Applications• Java using the Android Software Development Kit (ADK)

o Most Android applications are developed with the ADK Coded in Java

• C and C++ using the Native Development Kit (NDK)o Does not significantly improve performance in most caseso Useful for CPU-intensive operation such as games and heavy graphics.

• PhoneGap/Cordovao Created by a software company called Nitobi, purchased and

maintained by Adobeo Ability to create Android applications using a familiar group of

technologies (HTML/CSS/Javascript)

What is Cordova

• Interchangeable with “Phonegap”• Cordova ,formerly called as Phone Gap is a

platform to build Native Mobile Applicatons using HTML5, CSS and Java Script.

• Uses Webview that occupies the complete screen, running in a native container

Why Use PhoneGap/Cordova?• General Advantages

– Fully open source framework for quickly building cross-platform mobile apps using familiar HTML5, JavaScript and CSS.

– Supports various API (Application Program Interface)– Create Apps with single code base that runs on multiple mobile

Platforms– Low learning curve for developers and web designers

An Phonegap package• index.html: first file that is ran, similar to a website• config.xml

– Lists permissions, and features required by the application– Lists application activities (user tasks) and services– List permissions granted for access by other applications and

websites– Lists features used by this application

• res– Various resource folders to separate data from application code– Multimedia, user interface layouts, xml files, data values

abstracted from the application, and raw data

Phonegap Build Process

Phonegap Build Process

Introduction to JavaScript

Objectives

– To be able to write JavaScript using Cordova.– To be able to use input and output statements.– To understand basic memory concepts.– To be able to use arithmetic operators.– To understand the precedence of arithmetic

operators.– To be able to write decision-making statements.

What is JavaScript?

• Basic HTML/css has limited functionality – Text, images, tables, frames

• JavaScript allows for interactivity• Browser/page/object manipulation

– Reacting to user actions• A type of programming language

– Developed by Netscape– Easy to learn– Standardized

JavaScript Scripting

– JavaScript is a scripting language- it processes a list of commands

– Enhances functionality and appearance– Improves user experience– Client-side scripting

• Makes pages more dynamic and interactive

– Foundation for complex server-side scripting

JavaScript Allows Interactivity

• Improves UX/UI– Especially graphics– Instant feedback

• Site navigation• Perform calculations• Validation of input

How Does It Work?

• Embedded within HTML page– View source

• Executes on client– Fast, no connection needed once loaded

• Simple programming statements combined with HTML tags

• Interpreted (not compiled)– No special tools required

JavaScript Statements<html><head><title>My Page</title></head><body><script language="JavaScript">

document.write('This is my first JavaScript Page');

</script></body></html>

must be written between script tags

JavaScript Statements<html><head><title>My Page</title></head><body><script language=“JavaScript">

document.write('<h1>This is my first JavaScript Page</h1>');

</script></body></html>

HTML writteninside JavaScript

JavaScript Statements<html><head><title>My Page</title></head><body><p><a href="myfile.html">My Page</a><br /><a href="myfile.html"onMouseover="window.alert('Hello');">My Page</A></p></body></html>

JavaScript writteninside HTML

An Event

HTML Forms and JavaScript

• JavaScript is very good at processing user input in the web browser

• HTML <form> elements receive input• Forms and form elements must have unique

ids– Each unique element can be uniquely identified– Uses JavaScript Document Object Model (DOM)

Naming Form Elements in HTML

<form id=“frm-addressform">Name: <input id=“txt-yourname"><br />Phone: <input id=“txt-phone"><br />Email: <input id=“txt-email"><br /></form>

JavaScript Variables

• containers for storing data.• JavaScript is untyped

– i = 10;– i = "ten";• Scope– the region of your program in which it is defined.

Decision Making/Conditional Statements

• Common across many programming languages

• Used to allow application to respond to (true/false) conditionsIf (Today == Sunday)

{Go_To_Church();}

In Class Activity