1

Module Folder 2 CS3216: Software Engineering on Evolving Platforms

Module description

a. Aims and objectives

This experiential programming module involves extensive hands-on learning in small team projects. Students are expected to work independently in small, interdisciplinary teams to design, develop, and deploy new applications. Students will also have the opportunity to explore the latest Internet programming APIs and open-source tools. Students will also work together in small teams to study and critique existing Facebook applications. The teams will then present their findings to their classmates during a seminar in the middle of the course.

b. Class enrolment :

Semester Enrollment AY2007/2008, Sem 2 51 AY2008/2009, Sem 2 26 AY2009/2010, Sem 2 39 AY2011/2012, Sem 1 44

c. Structure of the module (lecture, tutorial, etc)

The classroom component for this modules consists of 2-hour weekly lectures (many of them guest lectures) and a student-led seminar on Facebook applications. In addition, we also conducted a number of optional technical workshops. The students are also required to complete two team programming assignments and also a Final Project.

2

Contribution to the syllabus review and course design

I started this course in AY2007/2008, Sem 2 and I have successful taught the course over the past 4 academic years. Truthfully, I wasn’t completely sure of what I was doing the first year and I was making things up as I went along. The second time round however, it was much clearer. While the first course was relatively successful, there were some complaints about the schedule and the workload. The complaints were addressed and a thematic approach was taken in the organization of the course schedule. Since AY2008/2009 Sem 2, the course has been restructured into two halves: the first half was focused on ideas and skills, while the second half was focused on execution. The following is a summary of the innovations and changes that we made to the course over the past 4 years.

AY2007/2008, Sem 2

a. Show-and-Tell. After the first lecture, the students are ushered to the foyer outside SoC Seminar Room 1 where they would stand in a circle and share something about themselves with the class. Some students will play a tune on a music instrument. Some bring their pets. Some tell stories. Others do magic tricks. It turns out that we typically have very talented students in CS3216 and this is an extremely interesting activity for all involved. The purpose of this activity was to serve as an ice-breaker. For CS3216, the students have to form teams and start working on their assignments even in Week 1, so they really need to get to know each other in a hurry.

b. Facebook Application Assignments. I worked with the tutors to develop three Facebook application assignments to introduce Facebook application development to the students in a step-by-step way. It turns out that we had over-estimated the difficulty of Facebook application programming and under-estimated the ability of the students. On the whole it did not turn out too bad, but the students felt like there were too many Facebook assignments.

c. Facebook Application Seminar. In this activity, the students are divided into groups and each group gets to pick an existing Facebook application to study and critique. Since the students are expected to develop Facebook applications in their assignments, it was important for them to learn from

3

existing applications. Each group of students then gets some air time to present their findings to the rest of the class. This assignment is graded as a component of CA and serves to help students develop confidence and presentation skills.

d. Peer Appraisals. We decided to introduce peer appraisals in the middle of the semester, because we wanted to get a better handle on the contributions of each student in their team assignments. Since there is a 10% participation component in the grade, we used the feedback from the peer appraisals to make some adjustments through this component where adjustments were appropriate. It turns out that these peer appraisals also come in useful when the students needed recommendation letters for NOC and SEP.

e. Mutual Code Reviews. One idea that we tried to implement was to have the students mutually exchange the source codes for their projects to critique each other's work. Unfortunately, there were serious logistical and practical difficulties for this process and we were not able to achieve our objectives. We decided to discontinue these code reviews because they were difficult to implement in the context of the class.

f. Collaboration with Industry. One interesting aspect of CS3216 is the collaboration between the students and the industry. As it turns out, Facebook was the best thing since sliced bread at the start of the class and everyone wanted a slice of the action. Very few people actually knew what they were looking for, but they wanted to be a part of the action -- and they were all willing to come to work with the students to create Facebook applications. We had a pitching session by these industry folks for this purpose. There are many reasons for this: (i) it showed the students what the industry wanted - it is always good to understand how the real world works; (ii) it provided the students with interesting contacts. There was much interest from the industry as evident from the large number of projects proposed over the years. All in all, it is not at all a simple thing to work out collaborations with the industry, but we tried and we found some success.

g. Final Project Pitching Party. After the pitching session by the industry, one of the students suggested that we should do something similar for the students, i.e. the students should pitch their own ideas for the final project to their friends. This is helpful because some of them needed to

4

recruit members for their team while others wanted some feedback on their ideas. Instead of a regular classroom lesson, we did it quite differently and had a party on a Saturday instead. It turned out well and we have been holding these sessions every year since. Over the past two years, ex-students of the class were also invited to come back to attend these sessions.

AY2008/2009, Sem 2

a. Focus on Skills. One problem we had in the first year was that we had three Facebook App assignments for the first half of the semester. There was intensive competition among the students to deliver cool apps and they became quite burnt out. We also under-estimated their technical ability. In this light, we had two different assignments during the first half of the Semester: one Facebook app and one WPF app. The focus of these assignments was not so much on delivery of a product, but on picking up skills for the two new platforms. The goal was to demonstrate that it was possible to learn and do something with a new platform within 3 weeks.

b. Microsoft WPF Assignment. We collaborated with Microsoft to introduce Microsoft WPF as a new platform to the students. Instead of having three Facebook application assignments like the first year, we instead had two assignments on Facebook and Microsoft WPF. We developed materials for a workshop and also an assignment with the assistance of a Microsoft engineer. The TA and some tutors were also sent to Microsoft for training. The teaching was conducted in-house by our teaching staff. We also included a sample application to help make learning curve less steep for the students. Unfortunately, we still found that the learning curve for WPF was too steep for the students and it was very tough for the students and for the teaching staff.

c. Blogging for Credit. We found that the use of the IVLE Forum the previous year as a means to allow students to reflect on what they learnt in the class to be only moderately successful. In the second year, we made the students blog. While a small number of students didn't put too much effort into their blog, the majority did well and the results were very encouraging. The list of student blogs can be found in the sidebar of the class blog (http://cs3216.blogspot.com).

5

d. Case Studies. We created two case studies this year from the Final Project reports from the previous year. The case studies were discussed and former students were invited to come back to facilitate the sessions. This turned out to be quite successful because the case studies (one success and one catastrophic failure) were real and the students were able to identify with them. Success is celebrated in society and failure often frowned upon. One of the case studies was about a failure and one of the lessons to be gleaned is that even in failure, there is value.

e. More In-Class Presentations & Discussions. It turns out that we have very energetic and entrepreneurial students enrolled in the class. Along the way, the students expressed the desire to engage in more in-class discussions instead of having guest lecturers give talks. To allow for this, we made changes to the schedule and removed some guest lectures from the course. In particular, we dropped a talk on Google Web Toolkit and a talk on OpenSource software (by RedHat). It turned out well.

AY2009/2010, Sem 2

a. New Team Dynamics Case Study. We replaced the Team Dynamics Case Study from the previous year with a new case study that was based on the Varsity Chronicles project from last year. Justin Lye and Wei Man came back to do sharing and also lead the discussions. It is always good to have real war stories. The students were deeply engaged.

b. Google Wave Assignment. We replaced the Microsoft WPF assignment with a new Google Wave assignment. This new assignment was much more accessible. We also got Pamela Fox, a Google Wave developer who was based in Sydney to evaluate and comment on the submissions. It is unfortunate that Google recently decided to pull the plug on the Google Wave project. Not withstanding Google Wave’s performance issues and lack of popularity, it was a good platform a class assignment.

c. Amazon Web Services (AWS). We secured sponsorship from Amazon and the students deployed their projects on AWS. Because Amazon only recently opened their data centre in Singapore, the students ended up hosting their apps on the overseas Amazon data centres and the latency performance achieved wasn't so good.

6

d. Additional Focus on Soft Skills. We introduced a workshop on presentation skills to help students level up on their presentation skills. The response from the students was quite positive.

e. Pecha Kucha. In past years, we often had to grapple with a problem of the FB App Seminar presentations running way over time. To mitigate this problem, we introduced Pecha Kucha for the FB app presentations. In Pecha Kucha, each presenter can only have 20 slides, each to be shown for 20 seconds. With only 6 minutes 40 seconds of air time each, the students were forced to think harder about how to structure their presentations. Overall, the effect was good. The talks shorter, but more succinct and polished compared to past years.

f. Peer Grading. We introduced an element of peer grading for the in-class Final Project presentations. The grade did not have a huge impact on the Final grades, but this experiment on crowd-sourcing seemed to work quite well.

AY2011/2012, Sem 1

a. Mobile HTML5 Assignment. To keep up with the times, replaced the Google Wave assignment with a new Mobile HTML5 assignment. This is a brand new assignment that took quite a lot of time and work to create. It was well-received.

How the pedagogical strategies contribute to the module’s intended learning outcomes

The lectures were designed to provide students with insights into different topics that are directly and indirectly relevant to software development in the latest Web 2.0/agile systems. I invited a large number of experts to come speak to the students. In the first year I taught CS3216, there was quite a large variance in the quality of the guest lectures, but after that experience, I invited only the better speakers to come back, so the quality of the guest lectures the past two years was uniformly high.

Because of the diversity in the background of the students for the class, we organized optional workshops help “level up” some of the students who had less background in web developments.

7

We also had a Seminar where the students studies existing Facebook applications in groups and presented their results to their course mates. The presentations were very good. In the first two years, the presentations tends to go overtime but in the last semester, we introduced Pecha Kucha and managed to get the students to be more focused and succinct.

We had much industry interest in the class and folks from the industry were invited to come pitch the projects of interest to them. It was important for the students to recognize the relevance of the platforms that they are learning and working with.

The course is designed to encourage students to go beyond their comfort zone and to “do stuff. The programming assignments and Final Projects were designed to achieve this. It took us a lot of time to design the programming. Each of them is about 25 to 30 pages long, but in general, the students found them to be well-designed and helpful for their learning.

Some of the final projects for the class were edited and formulated into case studies for the course. A total of three case studies were created over the last two years. The case studies were discussed in class and former students were invited to come back to facilitate the discussions. This turned out to be very successful because the case studies (one success and one catastrophic failure) were real and the students were able to identify with their seniors. Success is celebrated in society and failure often frowned upon. The two case studies on team dynamics are case studies about a failure and one of the points we want to emphasize is that failure is to be celebrated because there are always lessons to be learnt

We also introduced blogging in the second year. There were several objectives: (i) to make the students think critically about what they learnt and saw in class; and (ii) to provide an avenue for the students to interact and share ideas. It really worked very well for some of the students.

We also introduced peer grading in this class, i.e. a small proportion of the final project grades are given by their peers. Students do not grade their own projects, only those of the other teams. The results are surprisingly accurate.

Many of the former students for the class got involved in one way or another from the second year. The TA and most of the Tutors were the top students from the previous year. We also invited former students to participate in some of the pitching sessions and talks. Many came

8

back. Some former students also interacted with the students through the class blogs. Being the Facebook course, we also had a Facebook group and that helped too.

How IT tools and other teaching aids are used in teaching IVLE is used heavily in the course for administration. All the course materials are uploaded to the IVLE workbin and the IVLE Lesson Plan is kept updated so that students know what to expected week-to-week and can keep track of the deadlines for assignments easily. A key feature of this class is the use of the new Social Networking platform Facebook to teach Software Development. We also used various free blogging platforms like Blogger to support our blogs.

Representative reading assignments and an explanation of their usefulness

The course is focused on doing and the students were supposed to figure out how to find out the information they need on their own. Most (all?) of the information they need can be found online. There was no need to assign readings. The students were however asked to watch the Last Lecture (http://www.youtube.com/watch?v=ji5_MqicxSo) on YouTube prior to the first lecture. It was important to me that the student understood the spirit of the class and what we were trying to achieve. Last year, I added another video clip for the students to watch before the class starts: Steve’s Job’s Stanford Commencement Speech - Stay Hungry. Stay Foolish. (http://www.ted.com/talks/steve_jobs_how_to_live_before_you_die.html). The motto for CS3216 is “Make a difference.” While there are many skills to be learnt, we are working on mindsets for the most part. It was important to set the right tone at the start of the class.

Representative sample of tasks, their cognitive goals, and feedback given The two programming assignments were designed to introduce students to two programming platforms, typically Facebook Programming API and another platform. In addition, we also try to encourage creativity by not

9

prescribing exactly what the students should create, but only specifying some milestones (called “aspirations” in the assignments) that their programs should satisfy. 30% of the grade for each assignment is reserved for this creativity element. The assignment write-ups are rather long (30 pages), so we will only show some excerpts here. A sample grading report is shown in Appendix B. They include a lot of detail comments including comments from the peer grading exercise.

This is the overview of the assignment. Note that students can petition to do something different if they wish and have a good replacement proposal.

10

The assignments typically about 15 parts (aspiration). In this question, the students are expected to explain their work. This tests that they not only know what to do but why they do what they do.

Major problems/difficulties anticipated/encountered and corrective actions taken Problem: I had many guest lectures scheduled for the course and sometimes the guest lectures cannot turn up or cannot confirm their schedules ahead of time. Getting the logistics right was a huge challenge and it kept me on my toes. Solution: Fortunately, I have been able to make appropriate arrangements in most cases and we didn’t have any major issues. Problem: There were complaints about workload in the first year.

11

Solution: This issue was addressed in the second year by replacing the three original Facebook application assignments with a larger Facebook application assignment and something else. The second year we had a Microsoft WPF assignment. In the third year, we switched to a Google Wave assignment and last year, we switched to a mobile HTML5 assignment. While some students still feel that the workload is heavy, it has been moderated so that it is heavy, but not onerous like in the first year, when we didn’t know what to expect.

Major achievements in this module Personally, I derived great satisfaction from seeing that I’ve managed to address and fix all the major issues that came up the first year that the course was taught. The conduct of CS3216 for the 4 years that I taught the module was surprisingly smooth. I was fortunate to have a lot of help from several groups of excellent teaching staff. As far as I remember, there were no “bad” lessons. Every lesson was interesting and different. I look back and I’m happy that I have started a course that adds value to the NUS educational experience. The course presents a very intense learning environment to the students who get the chance to work with perhaps the most diverse and talented group of students across most faculties of NUS. It is interesting that the course is something like the elephant and the blind men. Different students will probably say that they learnt different things from the course – and they are probably all right. This course has also received quite a lot of attention both online and in the mainstream media, see Appendix A.

12

Appendix A: Media Coverage Coverage of CS3216 on Channel U on 19 May 2008 (http://www.youtube.com/watch?v=nXDgO7Yzb5k)

13

14

15

16

Appendix B: Sample Grading Report Application: Meet2Eat URL: http://meet2eat.dyndns.biz/m2e Developers: 1. Lim Xian You, u0906827@nus.edu.sg 2. Ngik Kok Wai Vincent, vincentngik@nus.edu.sg 3. Tey Jun Hong, u0905074@nus.edu.sg 4. Wong Yong Shen, ys.wongk@gmail.com ----- Grading Compulsory section Milestone 0: 5/5 Milestone 1: 5/5 Milestone 2: 3/5 - need better strategy to attract users Milestone 4: 5/5 Milestone 5: 4/5 - no explanation Milestone 6: 5/5 Milestone 7: 5/5 Milestone 8: 5/5 Milestone 9: 5/5 Milestone 10: 0/5 - not working Milestone 11: 0/5 - not working Milestone 12: 5/5 Milestone 13: 5/5 Milestone 14: 5/5 Total: 57/70 Coolness section Coolness Total: 22/30 Total score: 79/100 Note: Test procedure for disconnected operation: 1) Save app to homescreen 2) Open the app once and wait until no more internet activity (to download manifest and all required files). 3) Close the app 4) Open it again without internet connection If all the required files were properly cached then it should work ----- Code reviews: In general, the code is well organized and clean. There are a lot of mixture of php&html and I don't think they are necessary. JS implementation is good. The major problem is the main functionality is not available. * The php/server directory is exposed to public!! It is a BIG security hole! * I don't see your implementation on the "event". I cannot find code which covers "view an event". * You may want to have extra layer for database operation, don't use mysql_query directly , build sth like db_query($query) so that you can prevent sql injection from one single place.

17

----- UI reviews: * Great UX for the login and landing page * Very clear design, easy to focus on key areas * Image after login gives clear idea what user is supposed to do. What could be improved is adding links to trigger the buttons right in the instructions itself instead of asking user to tap on buttons in the top left menu. * After creating an event, I end up on the front page again. My Events and Others' Events don't work. * Also, why is the app prompting me for my location? Is it going to be used for the event I created? I was not asked to set a location for my event. * "My Events" and "Others' Events" don't work * When viewing Promotions, I should be able to add the location of the place to a map. And on tapping the Contact Number, I should be able to make a phone call to the location * Should use FB Connect so that we can easily invite our friends to the events * Overall, the app UX is clear but the flow needs a lot of work. Also, the app seems incomplete and broken. ----- Comments from the prof: 1. It was not to clear how to invite friends? 2. In any case, why need to add friends? Why not draw from FB? 3. UI is quite pretty. Though the label titles look more like buttons than labels. ----- Peer grading: 1) What is good about the app? * The idea is for something that can be solved. * The problem that the app aims to solve is pretty good and even I've always wanted an app that does this well. And the promotions is a good addition. * Clear purpose of what the app does. Great looking UI. UI elements are big and easy to tap on. App feels polished. * Nice UI and very clear instructions. * quite good UI, simple and useful app * Nice UI styling * OH MY GOD YES! YES! YES! A TUTORIAL PAGE! * quite colorful design * An interesting app * design is pretty good. * REALLY great intro page and customization of jquery mobile * Appealing design/ * May be useful for interactive location-based meeting. Have the potential to expand the service to other fields like location-based events organizing, etc. * Not too bad. the UI/UX looks pretty neat. Tries to bring together the otherwise lonely eaters. * It's like an event page app. I like the promotions part. * Interesting idea. Looking for people to eat together is a cool idea. The UI is good (despite some inconsitent style) * Good graphics and informative first page. * Very nice UI, simple but nice. Good idea. * Nice way to organize a meeting. Brings the current deals for places nearby

18

* Nice idea. I wanted to implement something like this myself. Happy to see someone else thought so too * The idea is good. Easy to use. * Nice interface design * The UI looks nice * very nice UI * awesome UI. SImple and intuitive. * Good idea and nice UI design. 2) List of BUGS found. * The instruction image is covered by the bottom buttons. What is the use of the Help button at the top right hand corner? * When I wanted to add my location, it doesn't seem to work the second time. The map doesn't seem to load until I logout and come back again. The Help doesn't seem to work. * Tapping on Help doesn¡¯t seem to do anything? * The back button sometimes appears sometimes doesn't * How do I add a friend? * It does not work properly on iPhone * Map can be use for viewing current location only. Cannot move it around, is there something wrong somewhere? * Adding a fried javascript bug * The content stretches beyond the screen's size in horizontal view mode, and I'm not allowed to scroll in any direction to view the content. * "My events" and "others events" not responsive * I cant seem to access Other's events and My events. * It doesn't work in offline mode. * My evens and others events button unclickable. If you can't click it dont put it there. * Cannot create an event. * Clicking on help in the drop down menu for the Username doesn't work. Button icons failed to load in add location page. Map failed to load correctly in add your location page. Needed refresh. Add your location failed to update my location. * promotions don't work? app dies at obtaining my location ;( * adding of location does not seem to work well * homepage background image is loading well on iphone. other pages not showing well on iphone 3) Suggestions on how the UI/UX can be improved? * Can put everything in one page so that we don't need to change page? It's annoying. People will expect to see animation/slides when they click the "Create Event" button because of the iPhone nature list. * When the friends say yes/no for the location, it would be better if there is a comment window below where they can give some reasons/suggestions too. Coz, the communications between friends seem to be a bit cut off now. It would also be nice, if the app could give me instructions on how to get there from my current location, after we've decided on a place. * Would be nice if it is possible to un-favourite at the same page of favouriting it. Inconsistent capitalisation ¨C sometimes the second word of a button is capitalised while sometimes it is not. My events and Others¡¯ Events, when empty, looks like buttons. But they can¡¯t be tapped in anyway, so it might be good to make it less button looking. * Some of the symbols inside the help doesn't represent the buttons inside the app. It would be better if the symbols and buttons are the same. * integrate with Facebook to increase the social element of the app. * The back button is quite confusing. For example, when I click "back"

19

on Events page, it leads my to the Favourite page * Should support iPhone, since more people use iPhone than iPad * Once added to favourites, i can't remove it i guess. Would be good if i can remove it. * Logos on bottom menu bar * If i don't allow to reveal my location, does it mean i can't see any promotion???? * may provide a map for users to adjust whether the location is correct or not. May simply link the instructions with the corresponding actions. * Would be nice to have a map to show the meeting location/point. * If the promotions page can somehow be shown within the event creating page, that would be great. Maybe a side tab that slides out a panel. This will allow users to view the promotions easily and quickly while they decide on the location. * Make the UI more consistent. For example, the bottom tab bar and the date picker. * Some buttons are not clickable. If you can't click it, then dont put it there. The promotion page, make the big box clickable also not just the smalll box holding the small star. * If no existing friends exist, add the option to add friends directly within the create events page. Some alignment issues in certain pages like Events. * Make the picture inside the footer smaller. Make the left column longer or make it a horizontal nav bar? A short square on the left looks a little bit weird. * Link up friends from FB? * There are a bit too many buttons -> I'm confused. * certain functions like promotions will be attractive to handphone users. consider making a more phone friendly UI * Navigation buttons too big, maybe could resize and make it more 3D 4) Other suggestions/comments about the app. * Need to have form validation. * adding a single friend is a bit of a hassle though * Perhaps integrate with Facebook friends instead of creating your own social network. * Don't know how the promotion work. Every people around the location will be spammed? The meeting location seems to be more important than the user's current location. May consider allowing user to add the meeting place map. * perhaps some photo upload functionality? * Other than being able to display lots of promotions, I don't really see how this app is better than facebook events page which I can also access from the facebook app. * Nice layout. * You can let user log in by their Facebook accounts, by that it can help with the Friend part, easier to suggest Friend to user. The loading is a bit slow by the way. * Can include price range of places in addition to deals. Can add an option to send event invite through facebook. App is completely useless in offline mode. * Link to Facebook? If not don't know how to start adding friends. * Just wonder why there are so many apps about eating in assignment 2.... Meet and eat is a good idea. But maybe you would like to consider meet without eating...