Where I Am is one web/mobile app with following features: 1) Develop tool: Sencha Architect -> Sencha Touch (2.*) 2) Use HTML 5 Geolocation API to fetch device's geography address: latitude and longitude 3) Use Google Map API to convert geo address to real world detail address: no, street/road, city, state, country, postcode 4) Use Memory Proxy to read the newly created JSON data (the detail address) into Store and show them out on one data List

1. whereiam Introduction
(v0.2)
John Yin
Sep. 2013

2. Requirement
•
Mobile Web Application Scenario
•
The following scenario should be completed using the these technologies HTML5, Sencha and PhoneGap.
Additional frameworks can also be utilised if necessary (jQuery, JavaScript, PHP).
•
Main Screen - This screen will consist of a tab bar that resides at the top of the sceen and which contains three
buttons.
•
•
1. The first tab is a navigation controller. The root view has one button and by
pressing this button it will acquire the device's current location in Latitude/Longitude, create a new view and then
push it to the navigation view with a transition effect. Display the Latitude and Longitude as numeric values on the
screen and also convert it to the real address (street, city, etc) using a service of your choice (Google's
GeoLocate API, etc).
•
2. The second tab shows the map with the current position if device's position was obtained on the first tab. If
position is not detected show a relevant error message.
•
•
3. The third tab is a table view with an 'Add' button in top bar.
When clicked a text field and a button labelled 'DONE' should appear. The text field should allow a user to enter a
URL to an image. After the 'DONE' button is clicked, the image should obtained from the entered URL and
displayed in the table. The associated URL string should be placed in another cell besides the image. The image
should also be able to be downloaded and opened locally.
•
2

3. Technology
We build ‘whereiam’ with following features:
•
Develop tool: Sencha Architect -> Sencha Touch (2.*)
•
Use HTML 5 Geolocation API to fetch device's geography address:
latitude and longitude
•
Use Google Map API to convert geo address to real world detail
address: no, street/road, city, state, country, postcode
•
Use Memory Proxy to read the newly created JSON data (the
detail address) into Store and show them out on one data List
•
The default Welcome Panel and detail address List are Card
Layout children of their common Container, so as to be actived
on reqired
3

4. Storyboard (viewd on Mobile)
Screen Width <= 480
Screen Width <= 480
Screen Width <= 480
4

5. App Structure
App controller for logical dispatches
the Main Navigation for future extension
one Ref to the default view: WhereiamTab
one Tab Bar to better control each Tab
one Tab item having Card layout
the default ‘Welcome’ Panel
One container having address List
one Toolbar better control button
one Map component using Google Map API
one Memory Store to load memory data
one data Model having data definitions
link to Sencha Touch library
link to Google Maps API library
one css style file: whereiam.css
5

6. App Initialization
Ext.application( name: MyApp )
launch()
MyApp.view.MainNavi
render( View item: WhereiamTabs )
MyApp.view.WhereiamTabs
render( View item: AddressTab)
MyApp.view.AddressTab
render( active View item: welcomePanel )
welcomePanel.render(html)
render( Toolbar )
Toolbar.render( Button )
6

7. Main Process: onButtonTap
Controller.onButtonTap()
To fetch Latitude/Longitude
Controller.getPosition( callback1: getAddress() )
Parameter( location )
To decode and store detail address
callback1: Controller.getAddress( callback2 )
To load data to view
Parameters( location, store )
callback2: Controller.getAddressList.setStore()
Tap event listener
Tap button
To show detail address
Controller.Ref( addressTab ).setActiveItem( )
7

8. List ?
Use List component to show detail
address, rather than one Html Panel
or any other types View:
- To practise the whole process of
manipulating JSON data: to fetch by
proxy, to save into store/model,
and to show on view
- Not need to make a custome list
css style
8

9. Error Handling
Any time, when Errors or failed
conditions happenning, one Ext.Msg
box will pop out with necessary
information.
When in production, it’s better to
have one custome Error handling.
9

10. Compatibility Test
This app still can not run normally on
Firefox OS most likely caused by version
compatibility issues.
Before launch on production, it’s
necessary to make a series of test on all
kind of OS and browser emulators, like
iOS, Android, Windows Phone/Mobile.
10