whereiam Introduction
(v0.2)

John Yin
Sep. 2013
Requirement
•

Mobile Web Application Scenario

•

The following scenario should be completed using the these technologies...
Technology
We build ‘whereiam’ with following features:
•

Develop tool: Sencha Architect -> Sencha Touch (2.*)

•

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

Screen Width <= 480

Screen Width <= 480

4
App Structure
App controller for logical dispatches
the Main Navigation for future extension
one Ref to the default view: ...
App Initialization
Ext.application( name: MyApp )
launch()
MyApp.view.MainNavi
render( View item: WhereiamTabs )
MyApp.vie...
Main Process: onButtonTap
Controller.onButtonTap()
To fetch Latitude/Longitude
Controller.getPosition( callback1: getAddre...
List ?
Use List component to show detail
address, rather than one Html Panel
or any other types View:
- To practise the wh...
Error Handling

Any time, when Errors or failed
conditions happenning, one Ext.Msg
box will pop out with necessary
informa...
Compatibility Test
This app still can not run normally on
Firefox OS most likely caused by version
compatibility issues.
B...
Upcoming SlideShare
Loading in …5
×

Where I Am (v0.2) introduction by john yin

281 views

Published on

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

Published in: Technology, Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
281
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
1
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Where I Am (v0.2) introduction by john yin

  1. 1. whereiam Introduction (v0.2) John Yin Sep. 2013
  2. 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. 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. 4. Storyboard (viewd on Mobile) Screen Width <= 480 Screen Width <= 480 Screen Width <= 480 4
  5. 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. 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. 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. 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. 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. 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

×