1. Week 1 Introduction to Mobile Development & Phone Gap Introduction to Javascript

2. Introduction to Mobile Development & Cordova

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

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

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

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

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

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

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

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

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

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

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

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

15. 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 cases o Useful for CPU-intensive operation such as games and heavy graphics. PhoneGap/Cordova o Created by a software company called Nitobi, purchased and maintained by Adobe o Ability to create Android applications using a familiar group of technologies (HTML/CSS/Javascript)

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

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

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

19. Phonegap Build Process

21. Introduction to JavaScript

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

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

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

25. JavaScript Allows Interactivity Improves UX/UI – Especially graphics – Instant feedback Site navigation Perform calculations Validation of input

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

27. JavaScript Statements My Page document.write('This is my first  JavaScript Page'); must be written between script tags

28. JavaScript Statements My Page document.write(' This is my first  JavaScript Page '); HTML written inside JavaScript

29. JavaScript Statements My Page My Page <a href="myfile.html" onMouseover="window.alert('Hello');"> My Page JavaScript written inside HTML An Event

30. HTML Forms and JavaScript JavaScript is very good at processing user input in the web browser HTML elements receive input Forms and form elements must have unique ids – Each unique element can be uniquely identified – Uses JavaScript Document Object Model (DOM)

31. Naming Form Elements in HTML Name: Phone: Email:

32. JavaScript Variables containers for storing data. JavaScript is untyped – i = 10; – i = "ten"; Scope – the region of your program in which it is defined.

33. Decision Making/ Conditional Statements Common across many programming languages Used to allow application to respond to (true/false) conditions If (Today == Sunday) { Go_To_Church(); }

34. In Class Activity