Screencast Build a Quiz App With Ember.js JavaScript

  • Nathaniel Bibler
  • 3223 views

Comments

  1. simeonberns said

    I found this video pretty helpful. They point out several little things about Ember that I didn't know prior. Glad I watched this video. Looking forward to watching the next part.

  2. Faculty

    Nathaniel Bibler said

    I'm happy to hear that! And thanks for the feedback, @simeonberns!

  3. LEGOMaster2 said

    For some reason, my results route is using the poll template. I can't figure it out! Good tutorial though.

  4. George Sgouros said

    thanks for the excellent video! is there a github repository which contains the application in its final form??

  5. Faculty

    Nathaniel Bibler said

    The final form of the application from this video is in the linked repository, just under a "complete" branch. See https://github.com/codeschool/TryEmberSoupToBits1/tree/complete.

  6. George Sgouros said

    Thanks a lot for your previous answer. Here's another one which has to do with the proposed design of the app:

    In option.js model we have:

    voteCount: Ember.computed('poll.votes.[].option', function() { return this.get('poll.votes').filterBy('option', this).length; })

    Could you please elaborate a bit more on why an option has to ask a poll for its votes instead of aggregating them in its own attribute inside option.js?

  7. Faculty

    Nathaniel Bibler said

    So, strictly speaking, Option isn't asking Poll for Votes which belong to it. Instead, it's asking for the collection of all Votes from the Poll and then filtering them down to only those Votes cast for itself.

    The Option certainly could have a local "allPollVotes" property which is just an alias to poll.votes and bring that property local to the Option. However, I'm not sure that would be useful to any other aspect of the application, in this case. So, rather than expose a likely single-use property to the rest of the application, I elected to just calculate it internally to that function.

    However, as you point out, it certainly could be done either way. A combination of Ember.computed.alias and Ember.computed.filter could be used to achieve the same goal.

  8. REMeans said

    Maybe I'm a little tired, but are the various static html bits that Nathaniel copies over in the video available somewhere? I looked in the git repo but don't see them. Thanks!

  9. Faculty

    Nathaniel Bibler said

    @REMeans see the "mockups" branch in the repository: https://github.com/codeschool/TryEmberSoupToBits1/tree/mockups

  10. REMeans said

    Thanks!

  11. George Sgouros said

    Thanks Nathaniel, however I was referring to a different design approach like the following: 1. a poll has several options stored in an array 2. a vote (when casted) sends an action to the poll which says that a certain option has been (permanently) selected by the user 3. The poll after receiving the action, it informs the correct option saying: "hey option you've been voted" 4. The option then has the responsibility to increase its own internal attribute (e.g. myVotes), by one

    This way, we could say that everything is a bit more encapsulated (option instances do not have access to other option instances via the poll array) which -maybe- could be a good thing in the long run.

    Do you think this is a viable design using the Ember way?

    thanks again!

    Nathaniel Bibler said:

    So, strictly speaking, Option isn't asking Poll for Votes which belong to it. Instead, it's asking for the collection of all Votes from the Poll and then filtering them down to only those Votes cast for itself.

    The Option certainly could have a local "allPollVotes" property which is just an alias to poll.votes and bring that property local to the Option. However, I'm not sure that would be useful to any other aspect of the application, in this case. So, rather than expose a likely single-use property to the rest of the application, I elected to just calculate it internally to that function.

    However, as you point out, it certainly could be done either way. A combination of Ember.computed.alias and Ember.computed.filter could be used to achieve the same goal.

  12. Thomas Strauß said

    Thank you for this really useful video, it really gave some ideas and things that had not been explicitely pointed out in try ember course or I just missed them.

    For example the model in the default route (routes/index.js) was something I had to see in use before getting the obvious need in some situations. Also thank you for adding a "sub-model" between polls.poll and it's index for votes. also something really not that obvious.

    Nate: you are on the fast pace on the video, without replay I wouldn't have been able to follow in one go - but when you use the rewind button, it actually is really concentrated clear and precise information, not half of the information in half the time :-)

    Also very good questions from Gregg who pulled the handbrake in almost all the right situations. Looking forward for the next ember-data video.

  13. Ayush Sahai said

    I need some help here, when I am running the app through ember serve, the browser window keeps on loading. The "Welcome to Ember" thing is there, but the "spinner" in the browser keeps on spinning. Can I get some help with that?

  14. Faculty

    Nathaniel Bibler said

    @George That is a fair way to approach it, certainly. It just depends on how you want to work it and what works for your project. My immediate thought to the Poll getting a vote and notifying the Option to increment its own value feels a little dangerous. There is a good possibility for some synchronization troubles there. What if someone removes or changes a vote? The notification will have to be more robust than "increment your vote count." Using the delegated/computed values does all of that for you, automatically.

    @Thomas: Thanks! I'm glad you enjoyed it. That's awesome to hear.

    @Student 2291667: It's hard to give you much without knowing more about your environment (this is also probably a better discussion to have in the https://www.codeschool.com/discuss/ than the video comments). Browser and operating system are important, node/npm versions are important... It could be that the LiveReload connection "gracefully" degraded from a WebSocket connection to JSON polling and the browser is continually re-polling for updates.

  15. iYoko said

    Neat video guys, I'm learning a lot! Any idea when the sequel is releasing?

  16. Student #2460238 said

    Can't copy the pictures over after making the new directories. It says "cp: cannot stat '../files/01-assests/images/* ' directory does not exist". I tried "$ cp ../files/01-assets/images/*public/assets/images/ cp: missing destination file operand after ‘../files/01-assets/images/*public/assets/images/’ Try 'cp --help' for more information.

    as well...any assistance?

  17. Faculty

    Nathaniel Bibler said

    @CodeLearner2016: The repository has a "mockups" branch (https://github.com/codeschool/TryEmberSoupToBits1/tree/mockups). In the video I was just copying in HTML snippets from the mockups. You would need to identify the HTML blocks to insert from the static mockup files. :)

  18. Ruslan Sataiev said

    Thank you! Enjoyed learning more on building a real simple app with this soup to bits video! Looking forward to the next course and follow ups.

  19. paul42 said

    also wanted to ask, at about 14min in you type 'ember generate route polls/pool --path ":poll_id" ', and I wanted to ask - is there a way to read options/docs regarding these blueprints, or should I just start digging into the source code?

    Thanks, Paul!

  20. midgitsuu said

    Something worth mentioning, which caused me a lot of confusion, was that there is no route set for just going to '/polls'. Took me some time to realize that the routes '/polls/1' and '/polls/1/results' are tied to the 'index.hbs' and 'results.hbs' respectively and there is no 'index.hbs' file directly within the 'polls' route folder.

  21. midgitsuu said

    Oops, he went on to making/editing those files. I'll hold off on any more feedback until I finish the tutorial.

  22. midgitsuu said

    Just finished this tutorial and have to say, it definitely helped clear up A LOT of the mystery in Ember 2.0. Super thankful the tutorial actually went into components and helpers along with explaining a lot of the obscure functionality that happens within the models (like the Ember.computed '[]', and sorting). Code School has been the only resource I can count on right now to learn Ember as following so many other random tutorials leave me totally lost or only cover very specific parts of Ember. How soon until the Ember Data and Testing screencast is out?

  23. pokervane said

    For these types of demos I think it would be better to do something different (as opposed to doing essentially the same app as was done in the course challenges.).

  24. Hilary Holz said

    The continuous copying of stuff from impossible to find places is infuriating, if you want us to use a bunch of static resources tell us to clone a repo not create the project in console and go through this nightmare. Some of us are actually trying to build the app with you.

  25. pulpozero said

    A question: what role does the index.js file play at each route level -- that is, what is the functional difference between polls/polls.js and polls/index.js, and between polls/poll/index.js and polls/poll/poll.js? I'm an Ember newbie, but as I understood it from the Ember site's own tutorial, index files were used as a catchall when a more precise route is not defined. Everything else in the so far (I'm about half-way through) is great, but I'm quite confused -- when you start divvying up the responsibility between poll/index.js and poll/poll.js in the voting section I become lost…

  26. SinDer Lin said

    Terrible Tutorial..................Not make any sense to people try to make a website... Follow the tutorial and so many error and not working well....

  27. amay25 said

    it looks like everything regarding ember on code school is old and largely out of date and or broken. I wish I had known that before a waisted days watching your content.

About This Screencast

In this episode, we are going to take what we learned from Try Ember and build an application step-by-step. Nathaniel Bibler and Gregg Pollack will walk you through building a Wilderness Safety Quiz app, which is the quizzing/polling system seen in the Try Ember course.

You need to be an enrolled student in order to view this video and subscribe.

Enroll Now