E45: Digits, Part 4

For this experience, you will “wire up” your Add Contact page so that it performs validation and adds the page to the collection.

As with the last WOD, feel free to watch me solve it first, and then try it yourself.

Before starting this WOD, be sure to have merged the branch containing the “final” version of your previous WOD into master. See the screencast in the Readings for an illustration.

Note that switching branches on a running meteor application has the potential to put the application into an inconsistent state. To minimize problems, whenever you switch branches while doing meteor development, it is best to:

  1. Quit meteor.
  2. Invoke meteor reset to clear out the contents of the database.
  3. Re-invoke meteor. For applications based upon meteor-application-template, the correct invocation is meteor --settings ../config/settings.development.json.

For this WOD, you will need to adapt code from the meteor-example-form system. So, before starting, be sure to have downloaded this code to your laptop, run it successfully, and created an IntelliJ project so you can easily cut and paste code between the two applications.

The WOD

Ready? Let’s begin:

  1. Start your timer.

  2. Create and switch to a branch called “add-contact-1” in your local repository. You will do all the work for this WOD in this branch.

  3. Invoke ‘meteor remove autopublish’ at the command line. For form processing to work correctly, we need to publish and subscribe manually. Fortunately, this is easy to do.

  4. Add a file named publications.js to imports/startup/server. Model this file on the publications.js file in meteor-example-form. Be sure to update the index.js file!

  5. Update the home-page.js file with an onCreated template helper that subscribes to the Contacts publication. Model it on the edit-student-data-page.js onCreated helper in meteor-example-form. The only code you need is the autorun that does the subscription.

  6. Update add-contact-page.html. Using the file create-student-data-page.html from meteor-example-form as an example, update add-contact-page so that the form’s HTML is appropriate for form submission.

  7. Update add-contact-page.js. Using the file create-student-data-page.js from meteor-example-form as an example, update add-contact-page so that the form’s Javascript is appropriate for form submission.

  8. Redirect to the home page upon successful form submission. After validating and inserting the Contact data successfully, redirect the user to the Home Page (where the table should now include the new contact). Use FlowRouter.go('Home_Page'); to accomplish this.

  9. Test that you can create new contacts and that they are shown on the Home Page after being created.

  10. Once you’ve finished, commit your changes to GitHub, and check to see that your changes are there.

  11. Stop your timer and record your time. Be sure to record it, because you will need your WOD time data when you write your technical essay.

Rx: <17 min Av: 17-25 min Sd: 25-35 min DNF: 35+ min

Demonstration

You can watch this before doing the WOD if you like:

If you want to try this WOD again, just commit your branch, then switch to the master branch to reset your system to its state at the end of the first Digits experience. Then create a new branch called add-contact-2 and start over.

Submission instructions

By the time and date indicated on the Schedule page, submit this assignment via Laulima.

Your submission should contain:

You will receive full credit for this practice WOD as long as you have attempted it at least once and submitted the email with all required data before the due date. Your code does not have to run perfectly for you to receive full credit. However, if you do not repeat each practice WOD until you can finish it successfully in at least AV time, you are unlikely to do well on the in-class WOD. To reduce the stress associated with this course, I recommend that you repeat each practice WOD as many times as necessary to achieve at least AV before its due date.