Advertisement

Create a Location-Aware Site with Sencha Touch

by
Final product image
What You'll Be Creating

This tutorial will guide you through the development of a Location-based mobile website using the Google Place search engine and Sencha Touch 2.1 . This is a two part tutorial and in this first part we'll learn how to create a project with Sencha cmd, create a cool theme using SASS/Compass, and find services close to the user's location.


1. Google Place Search API

Google provides a set of APIs for searching different services by types and user location. At the present time, Google supports a total of 96 service types. There are 30 more services that can only be retrieved via search. Google has a full list of them.

To access the Places API, the primary goal is to register the application at Google's API console. Once we authenticate, we'll get an API key which is required for each API request. Google has a step by step guide.

The Google Places API uses an API key to identify your application. API keys are managed through the Google APIs Console. You'll need your own API Key before you can begin using the API. To activate the Places API and create your key:

  1. Visit the API Console at https://code.google.com/apis/console and log in with your Google Account.
  2. A default project called API Project is created for you when you first log in to the API Console. You can use the project, or create a new one by clicking the API Project button at the top of the window and selecting Create. Maps API for Business customers must use the API project created for them as part of their Places for Business purchase.
  3. Click the Services link from the left-hand menu.
  4. Click the Status switch next to the Places API entry. The switch slides to On.
  5. Click API access from the left navigation. Your key is listed in the Simple API Access section.

2. Create and Structure the App

I'm assuming that you've got a local server and Sencha setup is done. If not, please go through the detail documentation here with all the steps. We generate the Locator app using this command inside our local server.

Once we're done, we'll open the app in the browser with the url http://localhost/locator and see a basic tabbed application.


Now we need to structure the app with the MVC components.

Controllers

  1. App.js

Views

  1. Main.js
  2. Categories.js
  3. PlaceList.js

Stores

  1. Categories.js
  2. Places.js

Models

  1. Category
  2. Place

A Sencha application can have multiple controller files. However, for a small application like this, one controller will be okay. We'll keep all the event's bindings and related functionality inside this controller.

The views represent the pages of the application.

  • Main view works like a parent of all the views.
  • Categories will list all the services Google supports.
  • PlaceList view will show a list of all the places near the user's location and based on a particular service.

Since we have two lists, we maintain two models: Category and Place. Similarly, two storage Categories and Places are needed for retrieving and saving related data. We need to add all these component details in app.js so that the Sencha engine can load them up on start.


3. Common Functions

For every application, we need a set of common functions and properties that will be used throughout the application. We create a Util singleton class for the same thing and put the file under the app/util/ directory. You do not need to understand the functions of this file at present. We'll keep discussing these functions as we move forward.


4. Categories List

We set up the Main view, which is the wrapper of all the views. We use Navigation View for the same thing, which is pretty useful for simple Card layout and back button management. At launch, it only has the categories list as its child.

Now application setup is done. We have the Google Places API key and we're ready to create a list of all the types and show it in the home page. There's a problem, though. Google doesn't provide an API for retrieving all these types. We have to manually create a data file listing all the types. I've created a json file named categories.json listing all the available types, and put it inside the resources/data directory.

Category Model: Model/Category.js

The "name" property of this model uses the same "type" value of the category. Since most of the types have an "underscore", this convert function creates a value omitting the "_" and converting the string into title case. So, "travel_agency" becomes "Travel Agency" and we save it under the name property of this model.

Categories Store: Store/Categories.js

We auto-load the store because it should be the first request in the app. We use a grouper function for a grouped list, and sort by the first character of each service name.

Categories View: View/Categories.js

Category view is a plain list. We use indexBar and grouped functionality for easy accessing all the types.

The list looks like this:



5. Tweaking the Existing Theme

We can add certain sets of pre-existing variables to change the existing Sencha theme and get a new look. The following is the SASS file. If you don't have SASS setup already done, please follow this blog post for a step-by-step guide.

We change the top toolbar color and list header color, and add the list plugin mix-in.


6. Geolocation and Retrieving API Data

Once we click one of the category items, we'll want to view all the businesses near the user's current location in that category. We must follow this set of tasks:

  1. Fetch user's current location using GeoLocation API
  2. With the latitude and longitude, send a request to Google API to fetch the data
  3. Show the place list page

Geolocation

We can either use the navigator's geolocation function directly or use Sencha's Ext.device.Geolocation. We save the latitude and longitude in the Util instance for future use.

Data Retrieval

Google Places API doesn't support JSONP requests yet, so we won't be able to retrieve the data directly from the client side. We have to use a server proxy to retrieve the data. This problem can be solved using PHP and cURL.

The Config file holds a number of constants. We set the base API url, data output type, and image size details.

Locator.php

This is a PhP class which holds the functionality for setting up the URL, sending cURL requests, and retrieving data.

Here's the functionality of each method in this class:

  1. getFinalUrl: This sets up the complete URL with the base URL, the response data type, and the query strings sent from the client side. We call this function from the action.php file.
  2. sendCurlRequest: This is a basic cURL GET request for retrieving the data. You can use the file_get_contents() method as well to get the data here.
  3. getNearBySearchLocations: This fetches the data from Google API for the related type within a certain radius. However, there is a trick: Google doesn't pass the photos of a business with this data. Instead they send references to the images. You need to construct a URL with the image height, width, API key, and photo reference to get that image.

    This URL is constructed with the first image reference and passed with the response data for every place. This helps us show at least one image available for every business.

    action.php

    This file is just used to call the getNearBySearchLocations function of the Locator class. We send the ajax requests from our client side directly to this file.


    7. Place List

    For the Place list, we need a store and a model similar to the categories list.

    Place Model: Model/Place

    Places Store : Store/Places

    Main Controller: Controller/App.js

    Until now, we didn't need a controller for any functionality because the category list was populated automatically by its store. Now we need the controller to handle the events. We'll list all the required components under the controller refs property.

    The list click event in controls:

    When clicking on a category, we want to show the list of places available under that category. As we discussed earlier, first we'll fetch the user's current location and then, with the latitude and longitude, we'll send an ajax request to the action.php file. The controller with the "loadPlaces" function looks like this:

    Place List View: View/PlaceList

    The PlaceList view is also a plain list. We use XTemplate here in order to use some filtering functions. The getImage function receives the image of the business. If the image is not available, it returns the icon for that business.

    We get a rating from zero to five for businesses. Instead of showing the rating number, we can write a simple function to show the ratings as stars. We add the getRating function to the util file, which can be used inside this PlaceList template functions:

    There are three images: no-star, half-star and full-star. The CSS is given below:

    Rating CSS:

    Here is the final PlaceList view.


    CSS for the PlaceList Page:

    Here it goes:



    Conclusion

    This is the first part of the tutorial. We created a list of services provided by the Google Places API and then for a particular service, and we showed a list of all the nearby places. In the next and final part of this tutorial, we'll cover the following functionality:

    1. Showing all the places for a category in Google Maps
    2. Showing the details of each place. This will include showing an individual map for a certain place, creating a mosaic Sencha-based photo gallery, a full screen image carousel, and a list of reviews.

    Sencha is at present one of the strongest HTML5-based mobile libraries. Once you set it up, you'll be able to write great, smooth mobile applications. These applications can either be used as mobile websites or can be wrapped in Phonegap to create iOS and Android hybrid apps.


    UPDATE!

    The second part of this tutorial is available now. Find it here: Create a Location-Aware Site with Sencha Touch – Displaying Locations.

Advertisement