In this AM, you will work as a group to create your own version of Wellesley Course Browser website and integrate it with the Google Calendar.
Differently from other AMs, there will be no template AM solution that you should follow. Instead, you are free to create the app according to your vision, as long as you follow these generic guidelines:
Another difference from other AMs is that you can divide the AM tasks among the team members, given its large scope. For more details read the next sections.
You will be working in groups of three to implement the AM. I have assigned students to teams, to ensure that you are working with students who you have not worked before.
Meet as a team as soon as possible and work on the following aspects:
There are three sources of information for this AM.
$.getJSON() method. Once you have the data
in your app, you can reorganize it in any way that makes it easy for you to process,
sort it, filter it, search it, etc. A graded component of the AM will be blog posts that summarize your learning and working progress. You don't need to blog everyday, but keep track of every single session that you engage with the AM and write blog posts that combine several of such sessions and enter them in a post in reverse chronological order.
For example, this might be an example of a post combining two sessions:
Mar 1, 2015 Spent some time looking at the JSON feed, learning
about the different attributes of each entry. Some of the fields have extranous information, such as
a number before the day: "2\n T". It looks like that is the index of the day of the week
(0 for Sunday, 1 for Monday, 2 for Tuesday, etc.) It might have been used to sort data in the table
of the Course Browser. Given that I have to work with dates and times of day (needed to enter the
fields in the calendar), I need to understand Javascript's Date() object. I started with the class,
notes, and then I saw some more examples in W3Schools. I think I know more now, but I will have
to test this with some concrete small examples.
Feb 27, 2015 First meeting with my team. We discussed our strengths and weaknesses. Given that I have taken CS230 and I have a better understanding of data structures, but still feel unsure about Javascript nested objects, I decided to work on the part that processes the JSON feed to create a meaningful representation of the data, which would be easy to sort (based on different attributes, such as days of week, or times of day). We also made a mockup for our page, Luna Lovegood posted it on her blog.
Given that you're working as part of a team, you'll need a way to share code with one-another. The best way would be to use GitHub. GitHub has interfaces for Mac and Windows, which make it easy to push your code in an online repository hotes on GitHub, as well as pull the code from your partners.
If you don't want to spend time learning to work with GitHub at this moment, you can use jsFiddle to fork each-other's code.
It will be beneficial that all students complete this mini-task. You are given a file
that contains some jQuery code to access the feed of courses. You should process the
entries of the feed to create one list of objects or an object of objects that can
be used by your app. Choose whatever organization of data you prefer: group by the
distribution requirement, group by departments, by day of week, by time of day, by size
of class, etc. Each of you should have this working file in the final AM4
folder.
Working as a team of three is difficult. You need to find time to work together and coordinate with one another. At any given week, one (or more) of you might have something more important in their life going on. Thus, to make it easy for you, in case your team finds itself in such a situation, I'm offering you a "blue pill" or "red pill" choice. This is possible, because in this course you can entirely drop an AM and not suffer a grade penalty (the AMs allocation is 50%, the rest of components together is 50%). Of course, your team can also decide to drop this AM, if you can afford it.
Here are the points if you choose the Red Pill:
If you choose the Blue Pill, you get 1.25 points (out of 3) for the data organization, and 0.75 points for the user interface. This is becasue the prototype already has in place many of the required pieces. The other 4 points are the same.
Extra-credit - to make it appealing to choose the red pill, there will be two extra points to perform the search without a complicated user interface. That is, instead of using buttons, drop-down lists, radio boxes, etc. to gather the user criteria, your interface uses one single search box (like Google), where a user enters a search in free text: "200 level poli-sci courses that meet twice a week". You can choose to restrict the range to three fields of your choice and any combination of them, but you cannot ask users to enter structured text such as: "subject=polisci;level=200;days=M,Th". Dealing with free-form text is difficult, but it's a good challenge for students who consider themselves strong in data structures.
Finally, remember to blog as part of documenting your progress. You should have a few blog posts summarizing the steps toward the completion of your AM4. If such posts are missing, there will be a deduction in the grade.
Every student should have a subfolder AM4 in their cs249
folder and link to the am4.html file from the index.html page.
You should divide your Javascript code in three files, given that there are three students working on the AM:
data.js - that will contain the code that accesses the JSON feed, cleans, and organizes
the data in different ways for immediate access.ui.js - that will contain the Javascript or jQuery code for manipulating
the user interface and dynamically update the page with the results.calendar.js - that will contain the code for dealing with the Google
Calendar API for adding the user entries on the calendar.You can have other HTML, CSS, or JS pages if necessary.
Remember to comment your code and add information that identifies who was in charge of the file, if you are dividing the work.