70 likes | 191 Vues
This project illustrates the creation of a native mobile app that effectively combines cloud functionalities with mobile capabilities. It focuses on maintainability-related issues through a modular code structure, decoupling code via event handling, and introducing new APIs like network detection. The app features functionalities such as browsing short text snippets and automatic network connectivity detection, ensuring a seamless user experience. Key concepts include network status checks, modularization for better maintainability, and event-driven code execution.
E N D
Putting it together http://www.flickr.com/photos/ourcage/8343799386/
Let's put the pieces together • Creating a little native mobile app • To show how to combine cloud with native mobile • To illustrate some maintainability-related issues • Including modular code structure • Including use of events to decouple code • To introduce a few new APIs • Detecting network connection • Closing windows / back button • Minor styling APIs
Key functionality of this example app • For a native mobile app user… • Browse through a list of short textual snippets previously entered • Enter a new textual snippet • Native mobile app should automatically detect network connectivity & copy to server
Code Walkthrough: DearDiary (Note: tested only on Android emulator)
Detecting network connection • Key concepts • Network connectivity is flaky • You can ask the operating system for the current network connection status • Key code • if Titanium.Network.networkType != Titanium.Network.NETWORK_NONE
Modular code structure • Key concepts • Splitting into modules promotes maintainability • Each module (file) exposes selected functions (effectively presenting an interface) • Key code • Put related code in the same JS file; put unrelated code in different JS files • exports.fnName = function(…) to declare a function • varmylib = require('filename') to reference a module
Decoupling code using events • Key concepts • Exposing events makes it possible to trigger code without explicitly referencing that code • When something happens in object Y, then object Y can cause function X to run without Y having to reference X • Key code • object.fireEvent('myevt', param) to fire off an event • object.addEventListener('myevt', function(param) { … }); to register event handler