Assignment Three
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:
- Port jQuery-only based implementation to use Ember.js
- Functionality should remain the same as the jQuery implementation
- 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)
- To add a city, the UI shown below will reside at
- Make sure you use Ember-CLI for build tools
- 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.
Hints
- Using
setTimeout
andsetInterval
will not work well. Instead, look into using theEmber.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
- The city list ->
/
or/#
- The add city screen ->
/#add
- An individual city ->
/#city/cityid
- 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 encodedcallback
: the callback used. If you’re using$.ajax
withjsonp
, then this is automatic.