COURSE 7 Mobile Web App Design F.pdf

Web and mobile system Course 7: Mobile Web App Design Professor Okba Kazar Email: [email protected]/[email protected] Course Objectives • • • • • • Mobile Application Development (MAD) Intro to Android platform Platform architecture Application building blocks Development tools Textbook: Hel...

Web and mobile system Course 7: Mobile Web App Design Professor Okba Kazar Email: [email protected]/[email protected] Course Objectives • • • • • • Mobile Application Development (MAD) Intro to Android platform Platform architecture Application building blocks Development tools Textbook: Hello, Android Few reasons to go MAD… • Smart Phones – Internet access anywhere – Social networking • Millions of mobile users • Open standards Mobile Applications Mobile application development – New Challenges – More Difficult Few reasons to go MAD… • Smart Phones – Internet access anywhere – Social networking • Millions of mobile users • Open standards Introduction to Android • Open software platform for mobile development • A complete stack – OS, Middleware, Applications • An Open Handset Alliance (OHA) project • Powered by Linux operating system • Fast application development in Java • Open source under the Apache 2 license Mobile DevOps Mobile Apps + APIs = Mobile DevOps API (Application Programming Interface) Mobile App Introduction Mobile Apps are a new paradigm of application development Mobile App Introduction How did we get here? Waterfall Development Methodology Web Applications Web application development – Continuous Integration – Monitoring vs. Testing – Browser access and CDNs (Content Delivery Network ) – Agile / Iterative / Scrum Web Applications Web application development – Single Code Base – REST APIs enable app developers to mash multiple services together A REST API consists of an assembly of interlinked resources. This set of resources is known as the REST API's resource mode REpresentational State Transfer Apple Launches the App Store in 2008 2008 – Apple launches App Store Mobile App Launches Continue to Grow Mobile App Platforms Grow 40k Apps / Month Added Mobile Applications Mobile application development – Multiple Code Bases – API connectivity + persistence becomes an issue due to 2G / 3G / 4G iPhone web application tool kits • iUI: iPhone User Interface Framework – http://code.google.com/p/iui/ – License: BSD • iWebKit: ditto – http://iwebkit.net/ – License: GNU LGPL JavaScript libraries, CSS code, images… I didn’t have to start from scratch. • jQTouch (jQuery plugin) – http://www.jqtouch.com/ – License: MIT Handheld emulators/simulators System OS SDKs • Generally come with Operating handheld – webOS (Palm) • http://developer.palm.com/ Software Development Kit – iPhone (Apple) • http://developer.apple.com/iphone/ – Android (Google & Open Handset Alliance) • http://developer.android.com/ • Web-based simulators (be leery) – Opera Mini Simulator – good • http://www.opera.com/mini/demo/ – TestiPhone.com – absolutely worthless Example docs and websites • iPhone – Principles and Guidelines for Creating Great iPhone Content – iPhone Human Interface Guidelines for Web Applications – Google Groups: iPhoneWebDev • Others – Opera Mini Developer resources – many, many, more… – still more… Oooohh Handheld emulators/simulators Android Palm iPhone Opera Mini Mobile design – platform compatibility viewport Mobile design – platform compatibility Larger buttons for finger tapping Mobile design – platform compatibility 2 Introduction to Android • Open software platform for mobile development • A complete stack – OS, Middleware, Applications • An Open Handset Alliance (OHA) project • Powered by Linux operating system • Fast application development in Java • Open source under the Apache 2 license Android Application Development Linux Kernel • • • • • Works as a HAL (Hardware Abstraction Layer) Device drivers Memory management Process management Networking Libraries • • • • • C/C++ libraries Interface through Java Surface manager – Handling UI Windows 2D and 3D graphics Media codecs, SQLite, Browser engine Android Runtime • Dalvik VM :The Dalvik Virtual Machine (DVM) is an android virtual machine optimized for mobile devices. It optimizes the virtual machine for memory, battery life – Dex files – Compact and efficient than class files – Limited memory and battery power • Core Libraries – Java 5 Std edition – Collections, I/O etc… Application Framework • API interface • Activity manager – manages application life cycle. Applications • Built in and user apps • Can replace built in apps Application Building Blocks • • • • Activity IntentReceiver Service ContentProvider Activities • Typically correspond to one UI screen • But, they can: – Be faceless – Be in a floating window – Return a value IntentReceivers • Components that respond to broadcast ‘Intents’ • Way to respond to external notification or alarms • Apps can invent and broadcast their own Intent Intents • Think of Intents as a verb and object; a description of what you want done – E.g. VIEW, CALL, PLAY etc.. • System matches Intent with Activity that can best provide the service • Activities and IntentReceivers describe what Intents they can service Intents Home System picks best component Photo Gallery for that action Contacts “Pick photo” GMail Chat Client component makes a request for a specific action Blogger Blogger New components can use existing functionality Services • Faceless components that run in the background – E.g. music player, network download etc… Course Objectives • • • • • • Mobile Application Development (MAD) Intro to Android platform Platform architecture Application building blocks Development tools Textbook: Hello, Android Development Tools • Eclipse • Android SDK 2.0 or higher developer.android.com The Emulator • QEMU-based ARM emulator • Runs the same image as the device • Limitations: – No Camera support Devices Hello World • A great starting point: http://developer.android.com/guide/tutorial s/hello-world.html • Generating UIs – Views – building blocks – E.g. TextView, EditText, Button – Placed into Layouts – E.g. LinearLayout, TableLayout, AbsoluteLayout Application Lifecycle • Application run in their own processes (VM, PID) (Virtual Machine Process ID) • Processes are started and stopped as needed to run an application's components • Processes may be killed to reclaim resources Lifecycle • System Process • Home • Mail Home • Map Contacts GMail • Browser Location Manager XMPP Services Extensible Messaging and Presence Protocol (XMPP, originally named Jabber) is an open communication protocol designed for instant messaging (IM) • Allows any app to send device-to-device messages to other android users • Data Messages are Intents with name/value pairs • Works with any gmail account… • Can also build servers to deliver server-todevice messages Notification Manager Notification Manager • How background app interact with users • Consistent notification presentation Views Views Location Manager Mobile app architecture design usually consists of multiple layers, including: Presentation Layer - contains UI components as well as the components processing them. Business Layer - composed of workflows, business entities and components. Data layer - comprises data utilities, data access components and service agents Three Layer Mobile App Development Mobile Application Testing A Challenge • Thank you for your attention