Due @ 6:00AM on March 5, 2015 (Submit via Camino)

Okay, now you guys have a Weather App that is interactive using jQuery, the next assignment is to port your assignment 2 solution, or my sample solution, to use Ember.js

The requirements are quite simple:

  1. Port jQuery-only based implementation to use Ember.js
  2. Functionality should remain the same as the jQuery implementation
  3. However, the app will have the ability to add cities using a location autocomplete API and remove cities from the list.
    • To add a city, the UI shown below will reside at #add (see below)
    • To remove a city, it is done inline in the list (see below)
  4. Make sure you use Ember-CLI for build tools
  5. Break out your files into different files per the components (templates, routes, controllers, views, models, etc) like the default output of Ember-CLI

What To Turn In:

  • Your full source code (your project directory minus node_modules since it is VERY large)
  • A built version of the the code (ie. output of ember build command from the /dist directory)

Note: You may use your own HTML and CSS from the first or second assignments or take my solution for the first or second assignments as a starting point. Either choice is perfectly fine and acceptable.

My solution for assignment 2

Hints

  • Using setTimeout and setInterval will not work well. Instead, look into using the Ember.run methods instead so that you schedule updates within the Run Loop.
  • The integration with the autocomplete API is very simple so don’t over complicate it. If you get stuck, just ask me.

The Add City Screen

The add city screen consists of a text field and a cancel button. When you type into the text field, it will populate an autocomplete list below. When a city is tapped, it will add that city to the app and return to the list.



The Delete City UI

On the city list, there is an ‘Edit’ button on the bottom. When pressed, it shows the delete UI for each row. When pressed, it will immediately delete the city from the list. To exit the edit mode, you will press ‘Done’



Video

Routes in the App

  1. The city list -> / or /#
  2. The add city screen -> /#add
  3. An individual city -> /#city/cityid
  4. Edit city list (optional) -> /#edit

The Location Autocomplete API

I created a simple API for autocompleting city locations that returns the latitude and longitude of the matching cities. http://coen268.peterbergstrom.com/locationautocomplete.php. This little API returns an array of cities such as the one for this URL: http://coen268.peterbergstrom.com/locationautocomplete.php?query=San%20Jose

  [
     {
        "formatted_address":"San Jose, CA, USA",
        "id":"2bd6faa8caf56a1cf1c2289a4b5b3810",
        "lat":37.3382082,
        "lng":-121.8863286,
        "displayName":"San Jose"
     },
     {
        "formatted_address":"San Jose, NM 87565, USA",
        "id":"f319e1880a7bf2a348b3c32619748504",
        "lat":35.3972656,
        "lng":-105.4750124,
        "displayName":"San Jose"
     },
     {
        "formatted_address":"San Jose, IL 62682, USA",
        "id":"345db9ea96d5c183b9b03c717474c300",
        "lat":40.305598,
        "lng":-89.6028829,
        "displayName":"San Jose"
     }
  ]

API Parameters

  • query: the text query, url encoded
  • callback: the callback used. If you’re using $.ajax with jsonp, then this is automatic.

As per the syllabus: Late assignments will be deducted 1% per minute late, up to a maximum penalty of 50% (in the absence of evidence of extenuating circumstances). No assignments will be accepted after the due date for the final assignment.