Sunday 27 September 2015

Showcasing IONIC Framework : Developed a Location Book with integration with Sygic, Google Maps API with Clipboard and ShareTo plugin

What is Location Book?


  • Its an hybrid app and is built on IONIC
  • Get and store current location (offline)
  • Search for locations (online) and store them to be used later for offline navigation.
  • Search a place and view details (when online)
  • Store the locations with custom name
  • Sygic Companion
  • Share the location
  • Copy location position to clipboard (Can be pasted in other apps e.g. Google Maps)
Location Book mobile app build powered by IONIC, Cordova  and Google

Tabs (Row #1, Col #1) 

  • Home Page – Have all the saved location
  • Search – Search for a place or address (This is Powered by Google Search and optional MAPS API, if you add an API Key)
  • Options – Application settings and current location finder.

Search (Row #1, Col #1)  


  • Location / Place / Address Search Bar (#1)
  • Show Search Results
  • Ability to add to Saved List (#2)
  • Ability to open Sygic (Car Icon in #2)
  • Optionally MAPS API keys can be generated and used to provide better search results.

Details Page (Row #1, Col #2, #3) 

As shown in Pic #3 and  #4 

  • Shows a details of the search out address / saved address.
  • Location name can be customized.
  • Location address can be edited.
  • Location can be shared to other applications. (#10)
  • Location data can be copied to clipboard.
  • Location can be added to saved list.
  • Location static map is shown. (Powered by Google)

Saved Locations (Row #2 Col #2, #3) 

  • Shows the list of saved location (#5)
  • List can be rearranged (#6)

Options (Row #3 ) 

  • Current location position details can be obtained  (#8)
  • GPS Settings can be tweaked (#11)
  • Its recommended to add a MAPS API key for better search results (#7)

Current Location (Row #3, Col #2, #3) 

Having data (or Internet Connectivity) is not necessary
  • Current location position details can be obtained  (#9)
  • Current location address can be edited and a meaning full name can be given
  • Share your location to others or store it

Code


Only the www folder of the  IONIC app has been placed in GitHub

Ionic Plugins installed are
com.ionic.keyboard 1.0.4 "Keyboard"
com.verso.cordova.clipboard 0.1.0 "Clipboard"
cordova-plugin-console 1.0.1 "Console"
cordova-plugin-device 1.0.1 "Device"
cordova-plugin-geolocation 1.0.2-dev "Geolocation"
cordova-plugin-inappbrowser 1.0.1 "InAppBrowser"
cordova-plugin-splashscreen 2.1.0 "Splashscreen"
cordova-plugin-whitelist 1.0.0 "Whitelist"
nl.x-services.plugins.socialsharing 4.3.20-dev "SocialSharing"



Download

Feel free to download the APK of this mobile app.
Feel free to refer to code in GitHub


TO DO

  • Need to build grouping the location.
  • Need to Export/Import the locations.
  • Try a reverse geo coding for “Where am I?” i.e. Get Current Location

Thanks To

Thanks to 

  • Google
  • Ionic Framework
  • Cordova
  • AngularJS
  • Sygic
  • All the developer for all sharing knowledge, tools, plugins and API’s





1 comment: