wmdmark / backbone-project-1 Goto Github PK

Prototype

Purpose

In this phase of the project you will be adding the ability for users to add their own albums to your album application.

Pre-work

• clean-up your existing code to make sure we're starting from a good baseline
  • remove any unused .js, .scss, or .hbs files
  • make sure all files and classes are named logically
  • make sure view/routers functions are organized well. There are lots of good resources on organizing backbone code.
• refactor your existing HTML code to use Bootstrap or something similar.
• deploy your existing code on Bitbaloon

User stories

User stories are a way of describing the features of a product but from the end user's perspective. It's a good way for designers and developers to think since it forces us to think about the problem in the user's shoes.

As a user, I want to...

• sign up for the website using Facebook
  • Create a nab-bar Backbone View with a login button
  • render the nav bar in your primary container but outside of the #app-view (since this will get replaced in your normal routes)
  • Hook in the Parse.FacebookUtils.logIn function to a click event handler for your login button
  • After a successful login, re-render the navbar with the user's data sent to the template. The navbar should now show a sign-out link and a "Hello firstname" message.
  • Read more about Facebook authentication with Parse here
• post a new album to the website
• add a track to an album

Reference

• Read about user signup/authentication in Parse's Docs
• Read more about User Stories.

Purpose

For this phase of the project you'll learn:

• How to fetch data from an external API using Backbone.js (Parse in this case)
• How to organize your project code into multiple files

Resources

• Parse JavaScript Guide

Part 1: Albums

• Signup for a free Parse account
• Create an Album object/class in Parse (use the Add Class button in the Parse admin for your app under Core > Data)
  • Add a name, description and image field to the Album object
  • Add a few sample albums using the Parse data editor
• Create the Album List View
  • Create a new Backbone View (e.g. views/album-grid.js)
  • Create a new Handlebars Template (e.g. views/templates/album-grid.hbs)
  • Create a new Stylesheet(e.g. views/styles/album-grid.scss)
• Load and render the album data
  • In your index.html file, instantiate and render the album grid view
  • Use a Parse Query to fetch the album data and render each album in the grid view.
    • Create an additional view, template and stylesheet for the albums that are rendered in the grid (e.g. album-grid-item.js/hbs/scss)

Part 2: Album Details and Tracks

For this phase we'll be adding the ability to view each album using the full album view created in the original tutorial.

Use a Backbone Router to create two "pages":

1. One for listing all the albums (created in phase one). This route should be the home page.
2. One for viewing an individual album.

• Render the Album's Details

  • Use a Backbone router parameter to pass the ID of the album your viewing in the URL
  • Use the ID from the route to fetch the proper album from parse
  • Render the album details in the header section of the view

• Render the Album's Tracks

  • Create a Track object in Parse and populate it with sample data for each album
    • You'll need at least the following fields: number, name, description, album. The album field should be setup as a Pointer Column to the Album object.
  • Modify your album view to fetch the tracks for the album using a relational query. Something like:

  var query = new Parse.Query(Track);
  query.equalTo("album", album);
  query.find({
    success: function(tracks) {
      // tracks now contains the tracks for album
    }
  });

  • Render the tracks in the album list