AM6: First Meteor App

Overview

AM6 is very different from the previous achievement milestones in this course. Given that Meteor is a new topic for us (but also in the programming community) and due to its non-trivial philosophy, in order to give you time and opportunity to understand it better, instead of creating an app from scratch, you'll be following along with the book "Your First Meteor Application" to build a game leaderboard as you read the book.

When you complete the book and you add some CSS to make the app look more interesting, you'll be uploading it on the meteor server, for everyone to test it. Here is how a commpleted version might look like:

Requirements

Create a meteor project with the name username_am6.

Once you have created such a project, you will be following the chapters of the book Your First Meteor Application. This book takes a very gentle approach and explains everything that you need to know to build a first app, even how to work on the command line.

As you read the book, there are little challenges that either the author or I introduce in order to make you go beyond of what is being shown in the book.

You will be solving these challenges or answering questions (see below) and then completing a document with your answers.

You should be able to complete the book and the questions in about 3-4 sessions of 90 minutes each. Don't try to complete the whole book in one sitting, it is a lot to take in at one time, and you would like to think more about some of the topics.

Some of the concepts were already introduced in class (or will be soon), and the book will reinforce them and give you a good opportunity to practice.

List of Questions

Create either a Google Doc or a Word Doc to record the questions and answers. Copy one question at a time from the list below, then, after having completed a particular step related to that question, record your answer. In some occasions you'll be asked to provide a screenshot.

Important: Keep in mind that not all code shown in the book will go into your JS or HTML file. Sometimes code is only shown to explain a point or to be run on the console. Don't copy code mindlessly in your app, because this might cause errors and problems that are difficult to debug.

Note about the data: In chapter 4 (Database Part 1), in the section "Inserting Data", instead of using the names provided by the author, use names of the students in our CS249 class, putting your name first in the list. Here is some code you can run in the browser console once, in order to insert multiple names at ones in the database:

var names = ['Sophia', 'Audrey', 'Meridian', 'Lucy', 'Susie', 'Jamie']
for (var i in names){PlayersList.insert({name: names[i], score: 0})}

Question Numbering: To allow us to give you credit for your work, keep the same number of questions as in this list. Don't break the question or skip some. If you cannot answer a question, simply write "I couldn't solve this part" and move on.

  1. In chapter 4: What happens in the client and in the server when the following line of code is executed: 
    PlayersList = new Mongo.Collection('players');
  2. In chapter 5: Show an example of the old-way of writing a template helper function. What warning message did you see in the browser console about using this old-way template?
  3. How does the new syntax for defining helper functions look like?
    What it allows us to do?
    Why is this approach better?
  4. Move the {{#each}} block outside the template.
    What kind of error do you see in the browser console?
    What kind of error do you see in the server console?
    Which message is more useful?
  5. At the end of Chapter 5 (Templates), implement this feature formulated in the book:
    Create a helper function that uses the find and count function to return the number of players in the leaderboard. Then display this data inside the interface.
    Take a screenshot of your page and include it on the solution document. At this point, my solution looks like this. Yours might have different names with yours at the top.
  6. At the start of Chapter 6 (Events): If we click on the h1 element with the text Leaderboard, we don't get to see a message in the console, as it happens when we click on other parts of the page. Why?
  7. At the end of Chapter 6: Try to add the dblclick event in your code, so that whenever you double-click on a list item, you can see on the console a message like in this screenschot. Remember that event handler functions can take a parameter, "event", through which, you'll be able to access the text of the clicked li item.
  8. Include a screenshot of your app at the end of Chapter 7 (Sessions). Challenge question:In this chapter, the code for the "click" event was defined at the beginning and no code for highlighting a list item is in it. Why then do the list items change color whenever we click.
  9. In Chapter 8, section "Advanced Operators Part 1", the update for incrementing by 5 points, replaced some elements entirely, for example see this screenshot. Show here the code you wrote to make this problem disappear.
  10. Related to previous question: We want to replace the broken list elements (": 5"), to show the same text as before, for example, "Sophia : 5". Show here the code you can write in the console to fix this problem.
  11. At the end of Chapter 8, my app looks like in this screenshot. Describe in words what I have done to show the name in red. Then, try to implement this feature and show here the code for its implementation.
  12. At the end of Chapter 9, this is the state of my app, after having removed or added some players with the form. Make some modifications to your leaderboard this way and include the screenshot of your app here.
  13. Once you have added accounts (end of Chapter 10), log in with a fictional name and add some new players. Here is a Hogwarts example. Show the screenshot of your app here.
  14. What security problem has our current version of the app?
    How was that exposed?
    Which easy fix removes this problem?
    What happens to our app as a result of this fix?
  15. After fixing the problems above using Meteor.Publish() and Meteor.Subscribe(), create two different user logins and add a few different players to each account. Then, run PlayersList.find().fetch() on the browser console and get a screenshot of your app at that point. This is my app's screenshot. Include your screenshot here.
  16. In Chapter 12, what problem with our app will Meteor methods help solve?
  17. After you perform "meteor remove insecure", try to add a new player to the leaderboard. What message do you get in the console?
    Then, try to increment points for a player. What message do you get in the console?
  18. Show here some examples of how Meteor.call was used during the Chapter 12. Can you explain the signature of this versatile method? How does it work?

You can skip Chapter 13 in the book and move directly to Chapter 14 Deployment. However, do not deploy the app before adding your CSS styling to it, so that you can received the points for that requirement.

Submission

In your cs249 folder, create a subfolder am6 and a page index.html. In this HTML page, write your name, date, the Honor Code statements that the linked code and material is your own work, and then add three links:

  1. The link to the meteor.com page where you deployed your app (it should be something like "username_am6.meteor.com".
  2. The link to the PDF file,am6_answers.pdf that contains your answers to the questions for AM6.
  3. The link to the ZIPed folder of your project (e.g., zip first your folder on your computer, upload it on the server, and provide a link to the ZIP file).

Grading

To be graded for this AM, it is not sufficient to write the code and upload it. You will need to upload the PDF file with all your answers that you generated while building the code. The score of your answers amount to 8 points if it is also accompanied with working code.

Finally, you'll receive the last 2 points if the user interface for your app uses either Bootstrap or your own CSS for a better layout of the page (similar to the provided screencast, or in some other creative way of representation).