Exercise Wednesday

Reminder: Don't forget you're required to sign up for a group project by the end of the day Wednesday! See here for more details.


Known Issue: Students have reported receiving errors reading "Promise is not defined" or "Firebase has no exported member Promise". This is a known issue caused by using incompatible versions of the Firebase and AngularFire2 packages. To prevent this error, make sure you're installing version 4.0 of AngularFire2, and version 3.6.6 of the Firebase npm package.

If you receive this error on a project already in development, you can simply change the versions specified in your package.json file, like this:

...
"angularfire2": "4.0.0-rc.0",
"firebase": "^3.6.6",
...

Check out this GitHub Issue discussion both for more details on why this happens, and some exposure to some real-world open-source community troubleshooting and discussion. (You'll likely visit similar GitHub issue discussions on bug hunting expeditions at your future internship and job!)

Goal: Become comfortable integrating Firebase into an Angular application using AngularFire, including saving, deleting, updating and retrieving information from the database.

Warm Up


  • Do we have to use services to interact with Firebase? Why or why not?
  • How do we instruct AngularFire where to save a specific record in our database? Where is this code? What does it look like?
  • What is a FirebaseListObservable object?

Code


Online Store

Begin each morning of this two-day project by following along with the previous night's homework, and implementing new features into the online store application.

Then, choose one of the projects below to work on over the next two days. Note that user stories referring to updating and deleting database entries will require concepts covered in Wednesday's homework.

If you complete one project during the two-day duration, consider tackling the second project or wrapping up any incomplete projects from earlier this week.

Crowdfunding Platform

Crowdfunding sites like Kickstarter, GoFundMe and IndieGoGo are growing in popularity. These sites allow users to post ideas for projects, products, or charitable acts, and to request funding. Other users can browse all the potential ideas, and donate to those they'd like to support.

Create a similar crowdfunding platform of your own! It could work exactly like the existing platforms linked above, or it could be something of your own creation. Here are some user stories to get you started:

  • As a user, I want to see a list of all projects, ideas, and charitable acts that are seeking funding.
  • As a user, I want to click a project to see more details.
  • As a user, I'd like to know the details of a project before I decide whether to fund it. Including things like a name, the project starters/managers, a description, the amount of money the project is hoping to raise, what they'll do with the funds raised, and whether I get any cool swag or rewards for funding a project.
  • As a user, I want to be able to filter projects as I browse them. Perhaps by the amount of funding they still require, or whether they're charitable acts, ideas for products, or other.
  • As a user, I want to click a button or fill out a form to fund a project.
  • As a user, I want the option to post my own project or charitable act that seeks funding.
  • As an administrator, I want to add, update, or delete projects as necessary. (User authentication is not required).
  • As a user, as the site grows I want ideas, projects, and charitable acts to be separate types of objects, each residing on their own page. Things like charitable acts might have different types of properties/details than companies seeking startup funding, too.
  • As a user, I want to select a category to view a page containing all projects in that category.

Further Exploration

  • As a user, I want to "favorite" certain projects, so I can refer back to them if I'd like.
  • As a user, I want to view my favorite projects on a special page in the site.
  • As an administrator, I want to be able to select certain projects to be "Featured". These will appear on a special page in the application.
  • As a user, I'd like to see a list of all donations I've made.

Minesweeper (Challenging)

This is a challenging, further exploration project that will require outside research. You should feel very comfortable with both the objectives for this week's independent project (available here), and locating and using sources outside our curriculum before beginning this project.

The objective of Minesweeper is to clear a board without clicking on a mine. You can check out an example here, and/or read the Wikipedia article here.

Essentially, when you click on a square that is not a mine, you are given a number to indicate how many spaces around the one that you clicked on have bombs. If you click on a bomb, the game is over.

Recreate Minesweeper in Angular. Make sure that your board is created dynamically and that when each tile is clicked it displays the number of tiles around it contain mines.

Peer Code Review


  • A router is used to successfully navigate between multiple pages and routes.
  • Project has been created with Angular CLI
  • Firebase has been integrated using AngularFire (instances of a model can be saved and retrieved successfully).
  • The application can edit and delete instances of a model.
  • A service persists data throughout multiple parts of the application.