Setting up

If you would like to develop locally, first clone the repository from Github classroom. Then, navigate into the repository and run npm install -g nativescript@latest to install the latest version of NativeScript locally. Then, run ns create to set up your local file structure. You will be prompted to name the project, choose a frontend technology, and select a template; these choices are up to your preference as a developer! To preview the application on a mobile phone, cd into your project directory (which will have the name you picked in the previous step), run ns preview, and scan the QR in the NativeScript Playground app.

To use the Google Places API, you must have Google Maps Platform enabled. If you have not used this platform before, please refer to the following instructions:

1. Visit Google Maps Platform . Switch to a non-Brown Gmail account.
2. Click Get Started m choose Places , name your new project, read the terms & conditions.
3. Create a billing account. You will receive a free, 12-month trial with $300 (trial ends when whichever is used up first) and will not be auto-billed for the next cycle unless you’ve turned on automatic billing. This assignment will not exceed $300.
4. Fill out the survey (optional). Then click Continue and set up your API key. You can also set up API key by clicking Credentials , + CREATE CREDENTIALS , and choose API key .
5. Key security: since we are grading on different computers, you can skip this step. In practice though, it is always highly recommended to protect your API key. You can read more on how to Add Restriction to API Keys

Now that you have set up your account, we recommend referencing Google Places documentation to figure out which requests to use. You may need to include optional parameters.

Finding your location

Trying to find the nearest restaurants to you requires Google Places to know your current location. Google Places isn’t able to do this, but we can import something that can.

To find your device’s location, import the npm module nativescript-geolocation . You can do this by clicking the + button beside the Explorer and then clicking add NPM package . This will add a folder called nativescript-geolocation to your project. To import the module in your code, use require like so:

                    
const Geolocation = require("nativescript-geolocation");
            

This module will let you:

• request permission to access location data
• retrieve location data

To retrieve location data, you can include options or parameters to tell the module what details of the data you need returned.

                    
getMyLocation() {
Geolocation.enableLocationRequest();
Geolocation.getCurrentLocation({
desiredAccuracy: 100,
updateDistance: 0.1,
timeout: 20000
}).then(
loc => {
if (loc) {
    // this is your location data, may need to parse
    console.log(loc);
}
},
function(e) {
    console.log("Error: " + e.message);
}
);
},
                    

Then, you can pass in this location data as a parameter for your API calls, and Google Places will return restaurant data that is closest to this location.

To read more about nativescript-geolocation, visit the official documentation . This will come in handy while completing the assignment.

Finding nearest restaurants

We recommend using an HTTP GET request to retrieve data from the Google API. You can set up a method (function if you do not use Vue) that does this like so:

getMyRestaurants() {
Geolocation.enableLocationRequest();
Geolocation.getCurrentLocation({
desiredAccuracy: 100,
updateDistance: 0.1,
timeout: 20000
}).then(
loc => {
  if (loc) {
      const key = "your api key goes here";
      const request = "your call type goes here, eg nearbysearch";
      const output = "your output type here, eg json";
      const parameters = "your parameters here";
      const url = `https://maps.googleapis.com/maps/api/place/${request}/${output}?${parameters}&key=${key}`;
http.request({ // http is a separate module and similarly to the Geolocation module, you will need to import it by including "const http = require("tns-core-modules/http");" at the top of script
          url: url,
          method: "GET"
      }).then(this.parseResponse); // parseResponse is a method to be defined yourself
  }
},
function(e) {
  console.log("Error: " + e.message);
}
);
},
      

In the url http request, separate parameters with & . For example: "https://maps.googleapis.com/maps/api/place/nearbysearch/json?location=-33.8670522,151.1957362&radius=1500&type=restaurant&keyword=cruise&key=ABC123"