Week of End

This is the last week of this semester, as well as the end of CS3216.

4 weeks' hard work and McDonald's were transformed to the current app we have now. It's just one last step from being launched as a complete app. We spent lots of time on it and sacrifised lots of biological needs, as suggested, haha.

It comes to the time when I need to summarize what I have done in CS3216 and what I can take away. Frankly speaking, the most valuable thing I learnt via CS3216 is the programming skills. I did the basic programming modules, but only CS3216 made it possible for me to use them and put them into real practice. I can feel that my programming skills have been sharpend along the way by solving problems one by one, under very tight schedules.

Besides, I also feel very glad that I made lots of friends via the projects and learnt a lot from the great CS3216 community. I was totally new to HTML, PHP, JavaScript, essentially all the basic stuff about web application development when I joined this course. But I managed to work with very experienced teammates KianZhong, Zenan and JinGuan. I learn as I work on the projects. It was really a hard time in CS3216. I had to rush for deadlines, and also coordinate with other module requirements. I should have felt very happy when all this came to the end. Yet I feel a bit sad and lost.

One last semester for me before graduating from NUS. I really want to have a good time in the last semester, instead of unreasonable workloads like what I had in the past years. CS3216 will become a good memory for me to think of, when I wake up in the morning in my hostel and notice that no need to rush to SOC and continue coding. :)

Week of McDonald's

It's been a week since we started coding together at SOC every single night, mostly after midnight. We had a lot of fun discussing how certain parts should be done, and enjoyed trouble shouting together. But we are faced with a big problem.

We are lagging behind. Far behind the proposed schedule.

We finished a fantastic UI design and wireframe two weeks ago, but the actual coding turned out to be very slow. The backend API functions are generally doen, but we are stuck with the frontend organization. Initially we decided to use the Backbone.js framework and everyone spent a few days reading on it, but later we realized there was some problem when integrating it together with jQuery Mobile and the UX on an Android platform turned out to be not that good. We quickly switched to new one called Sencha Touch and after two days, we kind of found the track and got our groove on it.

We'll face a hard time in this coming week. All blessings.

We had McDonald's as dinner for the whole past week. And that will just be the case in this week. Hope the burgers, french fries and cheese shakers will all pay off.

Design and wireframe

We finished our UI design and HTML wireframe last week and also got some positive feedback from Dr. Colin. But we were not able to continue with it as I faced some personal difficulties ( caught a cold and lost my wallet = =) and my concert was at the weekend. We are lagging behind right now, quite a lot. Camping at SOC in this week is a must.

All in all, I am very satisfied with our current UI design. A lot of features, but quite clear in terms of UX. Not too much update for this week, but soon there will be a lot, as we progress over the coming 3-day weekend.

Case study 2 --- team dynamics

Firstly, great sympathy to the biz student Jeremy, for his screwed-up teamwork. Life is full of unexpectedness and wish he had stepped out the nightmare…

My first impression of this team is that they are way too ambitious! They even dared to change the topic for a few times, my team just extended our assignment 3 topic for the ease of continuity and a better execution. Their ideas are quite large but lack a strongly bonded team to implement them well. Anyway, let’s get started with the questions.

1.      For an application to really find its niche and spread ‘virally’, idea is the ultimate decision factor. A good idea never lacks good execution as investments will be drawn, which in turn draws talented people. However, on a smaller scale like our CS3216 class, since our ability and resources are rather limited, execution matters more. To execute an idea well and make it really work becomes the priority, even though the idea might not be that engaging and have a big marketing potential. Personally as a developer, I would rather do something that is executable within my ability constraint.

2.      Facebook is a great social networking platform. The good thing about it is that it positions itself just as a platform, with good API and SDK provided to outside developers. As probably the largest human network on this globe, it holds enormous raw human network resources yet to be exploited. It can’t do much as a single company. Hence it decided to release an API to developers around world (excluding some funny countries) from which they will have access to the human network resources. But Facebook encounters problems with profiting, indicated by its stock price drop.

3.      Both of the two app ideas are too ambitious for CS3216 final project. They are game applications and won’t interest people without good graphics and animations. Especially for Another Life, if 3D computer graphics with good modeling can be implemented, with similar effects to the NUS Second Life, it’s going to be really awesome. But this is way too ambitious in the time frame of 5~6 weeks, even for professional developers. People don’t really want to live a virtual life via plain text and pictures. This also holds true for Fan Gang. They all need lots of aesthetic effects to attract people. Besides, based on the reading and the attached feature list, I found that both the two apps involved too many features for their initial version, which made the implementation hard to control.

4.      There is no yes/no answer to this question. It quite depends on the situation. If the team members really have confidence and a mature plan, and sufficient working hours, they can definitely change to a new idea mid-way. If not, sticking to the original idea might also be deadly because they don’t really know how to proceed but to linger on. So the key is to formulate the idea well from the beginning.

5.      Problems:

·         Poor team bonding

·         Untamed ambition

·         Accommodating each other

A good team should be full of discussions and arguments.

·         Poor commitment from the members

·         Role of project manager is mission

The team could have done better if firstly they had chosen an idea properly. Apparently they lack developers, yet they decided on such difficult projects. Secondly they should have been fully committed to the team with valuable discussions and arguments. They should have expressed how they felt about the team directly within the team, rather than to Dr. Colin. Besides, in such a case where the teammates are not cooperating well, it’s better to elect a project manager who overviews the whole project and gives commands.

6.      Firstly they consulted Dr. Colin, twice. Secondly, they held immediate meetings to deal with the problem after the consultation. Lastly, they carried on till the last poster presentation day and didn’t not give up and run away.

7.      Take a good sleep and write a meaningful reflection blog on the next day, with clear description on how we reached the stage and what are the lessons learnt. If can’t fall asleep, I might call my team mates and cry them a river.

8.      Again…this depends on what the personal problems are, to determine whether they can be excused for not being able to deliver on time. If it’s a guy who was unable to commit well because his girlfriend insisted him accompanying her for a beach trip, well, I guess it’s time to kick him out. In the meanwhile if he had a reasonable excuse, the team should be notified earlier and come up with a solution.  

9.      The biggest key point is to form a group with members who can fully commit themselves to the team project. In this case, idea may come in the second place. Besides, business/marketing people tend to think more out the box and the developers should have enough communication with them on what can be done. In addition, a person must play the role as a coordinator well within the team, a project manager role if necessary. Lastly, if the team really blew up with no measures to take it back, it might be the time to stop and find another way to end it, for example, by a good pitch on the idea on the final day. As a quote says, “it is difficult to hold on, but it is as difficult to let go. But strength is never measured by holding on, but by letting go”.

 

 

CS3216 Case Study 1 ---UI&UX analysis of Get Help!

 

Usability vs. Aesthetics

The two concepts do not contradict each other, although generally developers think that preserving one means compromising the other. In fact, people would consider a product a work of art if grabs attention and is user-friendly. Simple examples include the industrial design of Apple products and the Google search main page. They are all as simple as they look like, but people get mad about them and no one doubt they would become classical designs in human history. Aesthetic appeal does not come from colors and graphics, instead it can be integrated with usability in a proper manner.

Based on this idea, the interface of the initial version of Get Help! is not well designed in terms of aesthetic appeal. The elements are scattered around which distract users’ attention and make them confused. Too many icons or graphics are used for various functions without a consistent manner. User guidance is a bit wordy and not to-the-point. Even though different functions and user actions are distributed to different pages, there is no focus on each page. Too much information cause the users to feel overloaded and bored on every page. It takes around 1~2 minutes to read the page and understand what it is doing. Users’ patience will run out very soon. A good interface design should tell the user what it is at first glance and grab his/her attention in the following second, naturally followed by user interactions.

It’s difficult to tell how the functionality is with the static screenshots. But due to poor styling, I suppose users will get confused first before using the app. A quick glance at the app main page leads me to two sections from which I can’t decide where to start. The ‘call for help!’ and ‘need quick help!’ sections are not so distinct from each other and users can’t foresee what is going to happen after their entry. Yet there’s another ‘New Project’ button at the top which complicates the picture more.

Usability and aesthetics do complement each other. The old mindset to separate them is not going to work. However, to solve the problem from a developer’s view, functionality should come first. The team should rethink what is the main thing they want to show the users to grab their attention on each page. Only after decisions on feature implementation are clearly made can they start styling that makes pages more enjoyable. On the contrary, a page with clear tasks also makes styling an easy job to do.

User freedom when posting a need

Quite a number of options are presented to the user when posting a need, like deadline, estimated time, location, people to whom the message will be directed and channels to get the message across etc. These options are not arranged in a logic manner and may bore the user even before clicking the submit button. For example, deadline, estimated time and location are not the key issues for a need and they largely depend on the agreement between the poster and the helper. It’s good to give uses more freedom to maintain their post by giving out lots of options, but it’s important to start from the core, which is the need. It’s more reasonable to direct the users to document their needs well such that more appropriate aids can be found. Instead of asking the user to fill up the information in one page, the posting can be done step by step (as few as possible, as succinct as possible) using Ajax calls. In personal opinion, the options provided to the user should be much less. Details can be left to users to resolve on their own, which is also another aspect of freedom.

Cycle of interaction and incentives

The app idea is very engaging, to uncover the talent pool on Facebook and source for more appropriate help. However, the execution is not that exciting. A poster only posts a need and waits for reply, while a helper offers help or leaves comments, and gets badges from the system. There is no much difference from the old-style forum entries. Facebook is a social networking platform where most of people have their real identity, hence it’s much better to exploit its social aspect and utilize the power of real networking.

More detailed profiles can be built up for frequent helpers so the posters can search them directly rather than just wait. @ function can be added so that if a viewer of the need happens to know another person who is capable to offer help, he/she can just @ that person in the comment as referral, with notifications sent out. Besides, awards should not come from the system, but from the users, based on their assessment of the help offered, like what people often do to the online shops. The statistics page is quite redundant as ‘number of helps offered’ can just be attached under the profile picture of the helper to impress viewers. More important information like ‘good solutions and tips’ can be loaded onto that page so the whole app becomes more informative with a database of talented answers and solutions.

Other aspects…

The app is not well worded. Most of the page elements have a name then followed with a lengthy description. More work is needed on diction.

CS3216 Recess Week --- A sense of community

The whole recess was about CS3216 assignment 3. We spent 5 days together nearly round the clock everyday. We were like a group coding gangsters lingering around in SOC for the five days.

My FB post:

if(morning) view from SOC.window: "the sky is turning bright."
if(evening) view from SOC.window: "the sky is turning dark."


Colin's reply:

SOC.window.addEventListener('morning', function(event)
{
alert('the sky is turning bright');
}

SOC.window.addEventListener('evening', function (event)
{
alert('the sky is turning dark');
}

Move with the times bro. :D

I was planning to learn some new stuff about database and the Slim Framework, and CSS styling, but eventually I ended up with a lot of .js files dealing with Ajax calls that handles various click events in out mobile cloud app, which I am more familiar with, which I had done a lot for my first assignment.

So regarding technical learning outcome, I didn't really have anything new to share, though I am really glad that my skills to implement Ajax calls were reinforced.

However, another aspect about CS3216 I found during last week is the sense of community. Four of us were strongly bonded together for a single assignment. I guess none of us would invest such a great amount of time and efforts into a 15% assignment for any other module. We did that because we chose it and we promised we would make a difference. We worked together and no one complained about anything, but a few hot discussions that made people sitting around us drop their jaws at COM1.

At the midnight of last Friday, when we finished final submission and went back to our hostels, I just felt a big loss and hoped we could work together more. Fortunately three of us will be staying together for the final project, improving the current assignment 3 app. Although Jin Guan is leaving, he made a tremendous contribution and also left lots of good suggestions behind. I hope he could be my shadow member as he said.

We have plenty of time to improve CrossView during the final, and we'll do it again, together.

Week of dilemma

Week 6 of CS3216, no coding, no meeting up, no messages, but a week of dilemma.

I even wanted to name our group 'silence' on Facebook. Such a big tension between us, some want to extend current project to final, some are leaving for their assignment 1 group members and some are wanted by many others.

But what can I do as a learner for all the web development skills? The only option might be to join a group with strong developers and learn from them, contributing a bit where applicable. It seems impossible and impractical to pitch my own idea and gather people.

But that's what I did to retain my current great teammates. To let them stay, I decided to pitch the idea. The negative feedback was actually good for me. My group was somehow reunited as they would demonstrate to the audience that things might not be different from their critical judgement. The counter-effect.

And it's also very encouraging that I got a new fantastic designer, who joined my group after the pitch, to replace the member who is leaving for his assignment 1 group.


The whole week 6 was used to resolve grouping issues. Either you compromise your idea, or you compromise your dear group members. Neither is what I wanted, but I have to choose one.

I love my assignment 1 group, where three ideas arose up for the final, and all pitched. We were split into three incomplete groups, struggling for new members, and struggling for the team bonding.

You are nicest people I met in various NUS projects.

Coding High and Insomnia---Reflection on Assignment 1

Assignment 1 has ended. And I was totally overwhelmed by the coding high which spanned for the whole last week. Had just 3-4 hours' sleep each day. And the result is I got insomnia.

My friday night was spent on coding again, till 7am today. Then I took a nap and a shower, headed for my concert practice afterwards. The assignment was handed in, hence there isn't much point in modifying it here and there. But I just couldn't stop doing that. I modified the CSS a little bit, arranged the layout a bit to maintain a really good view and chased my friends to come and play with our App.

Nonetheless, it's time to end this coding high and starting brainstorming for the next assignment. But before that, it's very important and necessary to reflect on the first assignment, to generalize the lessons learnt and some coding tricks used.

Lessons to be learnt

1. UML diagrams

We didn't draw h UML diagrams properly, except for a database scheme to remind of us the classes and functions and we have. Instead we just started coding after brainstorm and layout design. Class diagram to show the relations between the real objects, use case diagram to show how to use the App and state diagram to deal with state-dependent behavior...all these steps were skipped probably due to the tight schedule. However it turned out later on that we messed up  a bit. Sometimes certain functions we introduced were even not logical and sometimes we ourselves didn't know how to proceed with the next step. We reverted to a previous version a few times to comb our thoughts and clear contradictory parts.
I found the UML diagrams quite useless when I first learnt them. However, Assginment 1 really warned me how important they are, especially when working within a group and communiction comes in the first place.

2. Scheduling

We had only two coding people within our team and one of them is me. Hence we thought it's going to be easy since communication between two people is very effective and things can be done easily and we don't need to worry about the documentation. However, we still struggled a lot during the last days because I am new to PHP, JavaScript and HTML, and the abovementioned reasons. It's important to set milestones and schedule the iterations well, if we want to build up a project well programmed and tested.

Learning outcome

1. Coding languages for web development

Not to be arrogant, I couldn't believe myself that I started learning PHP, JavaScript and HTML and then completed a web application project within 3 weeks. Yet it's true, though the understanding of the languages is quite shallow and scrap as the learning is largely done via Google.

1) PHP and HTML

HTML provides elements (div, span, h, p, etc.) to work as a display board on a webpage and PHP , a server side scripting language, manipulates variables and objects to fill up those elements. Those variables and objects are used to represent the stuff (story, post, user profile picture, etc.)  we want to put on the webpage. It's quite fun to learn both of them. The coding procedures are quite standard, not many ricks to be presented.

• Pass value: PHP doesn't work like C/C++ or java, where a value can be passed around. To facilitate this, we used a session call in PHP. The code is like session_start();$_SESSION['universal_user_id"]=$user_id; Then this 'universal_user_id' can be accessed by all php files with a similar session call, enless the session was ended.

2) JavaScript

We landed on JQuery library eventually for its very useful funtions. The most interesting thing about it is the AJAS function call, which can also be implemented by JavaScript solely. We used it a lot to minimize page reloading, so as to generate a kind of "real application" feel. Eventually we managed to get rid of page reloadin entirely from our App, as long as the user logged in and reached the main page.

• Pass value from JavaScript to PHP for data sending, processing and receiving without page reloading---use AJAX function to achieve this asynchronously.
• JQuery has a lot of functions to manipulate and animate HTML elements, like show(), hide() fadeIn() etc.  

2. Project management and team building

We had a wonderful team, with Kian Zhong being the chief coder, Peggy and uncle Jim working on documentation and other general matters. KZ and I concentrated on coding for the last few days and received McDonald's and PizzaHut delivery during deep night from Peggy and Jim. I enjoyed working within this team, where all passion and hardwork can be facilitated.

Yet we encountered a few problems with project management, like uneven scheduling and waste of time on not-so-important stuff.

New plans

Learn MySQL and CSS.

Application critique-DrawSomething

DrawSomething

I suppose anyone who has a touch screen tablet device with iOS or Android system would have installed this simple but hilarious mobile game, which attracted 1million users in 9 days after its release. Facebook achieved that in 9 months. For the benefit of people who are immune to mobile app attractions, let me give a short introduction on this app before starting the review.

This little amazingly addictive guess-my-sketch game app by a developer called OMGPop has a very clean and neat interface, which is considered as a model of minimalist efficiency. The procedure is also simple: you choose one of three words ranked by difficulty levels, draw a picture of it and send it to a known friend or a random player to let them guess the word using a subset of the alphabetic letters as a hint. The cool part doesn’t stop there. The other partner can see the animation of you drawing the picture with pauses omitted of course. You two can switch the roles and continue the game indefinitely. Correct guesses are awarded with coins which can be used to but styluses or bombs. It also supports multiple-user interaction and cross-platform (iOS & Android) communication can be done seamlessly. 

 

As lots of online reviews say, DrawSomething is simple but perfect as it is. It is stable on the platforms and appeals to users’ interest. No matter how mobile games are destined to be short-lived, for now it’s no doubt a big success, from the perspective of user experience and feedback. Hence I would like to concentrate more on the commercial potential and future development part, in line with a summary of the most significant 3 points I learnt from Group 7’s talk.

The following improvements proposed by Group 7 really attracted my attention.

·         Add in themes

The current canvas of DrawSomething is just a plain page. Their talk cited DoodleJump as an example to illustrate how themes can be implanted to improve user experience. Apart from that, great embedded marketing potential be found on that plain canvas. Product placements can be put on the background, with a maximum level of not distracting the users.  Some people may criticize that a good application should never put revenue in the first place. But ironically, good apps need lots of money to develop.

 

·         Vocabulary for sponsors

As mentioned above, a user needs to select a word to draw before starting the game. That’s another portal where revenue potential comes in. The words can be set to keywords related to the sponsors like their brand name or product name. For example, I can draw a Big Mac for my friends to guess MacDonald’s. (Not embedded ads, just examples for academic purpose^^) In such a way, the developer of DrawSomething can retain its revenue and make money for future great ideas.

 

·         Multiple language support

Currently DrawSomething found its high in the English-speaking world as the app itself is in English and the words selected for drawing are also in English. It leaps a big step forward by implementing pictures as a method for people to communicate and have fun, which surpasses the old Words with Friends , which completely blocked non-English speakers. However, DrawSomething can still expand its global market by supporting other languages, which may trigger another upsurge.

 

My original thoughts focus more on how this app idea was generated and how it might change people’s life.

·         Origin of the app idea

This app idea is simple but powerful. It dates back to thousands of years ago when human beings drew pictures on rocks and turtle shells for simple communications. As the idea of symbology grew in people’s mind, they invented languages for the ease of communication. But nowadays people are tired of thousands of characters they encounter everyday as words consume more brain energy to digest than pictures. So it’s time to return back to pictures which are able to refresh people’s mind and inspire their creativity, and generate fun in the meantime to ease the bustling life. Since nearly everyone stays longer with a smartphone than with his/her wife/husband, the best platform to implement this idea is a mobile app that allows people to draw and share. A thousand thanks to the advanced graphics technology and social networks.

 

·         Influences on people

As a small mobile game, it might face the same destiny as other gaming phenomena have shown. A quick decline after a tremendous upsurge. It might not be able to change people’s life like what Microsoft Office has done, but it inspires people to explore a new perspective of their life. A lot of great but short-lived apps are also like this. But there is nothing to regret. Great news is that new ideas are blooming all the time. That is why we are all intrigued by CS3216!

So, why are you still waiting? Grab your phone, draw a picture and send it to your friend for a guess, perhaps a decent drawing of our big boss. But make sure CS3216 assignments are done for him!

                                                                                                     04/09/2012   CS3216 App Seminar

Bustling CS3216 life

It's been more than two weeks since we started working on the Facebook application. We got a bit stuck on the layout design and couldn't proceed with implementing other functions and prototype testing. I feel a bit afraid that we'll be screwed up for the last days before submission. But I have faith in it. As engineers' philosophy, our productivity shoots up exponentially right before the deadline.

I still remember last Sunday, I spent a whole night reading on and testing Ajax tutorial examples. Ajax, abbreviation for Asynchronous JavaScript and XML, is not a new programming language, but a technique to create fast and dynamic web pages. In short, it's based on client-side and allows users to update certain parts of the webpage with reloading it, which is typically done for webpages written purely with PHP and HTML. It allows web pages to be updated asynchronously with the server behind the scenes. And this is based on a so-called XMLHttpRequest Object that is used to exchange data with a server. The object is supported by most of the modern internet browsers and there are also ways to solve the problem with old browsers like IE5/6 which do not support the object.

Though I still don't fully understand the GET/POST request type and open()/send() functions of the object, and I have no idea what is going on inside the object, by following the examples, I successfully transferred the invitation data of our app into the MySQL database dynamically from the app interface. And this is widely applicable in situations where users interact with the webpages by loading and submitting data, with minimum number of times to reload the page.

Later within this week, I began learning JQuery library to add some animation effects to our app. The learning is yet over and probably we need one more Sunday to push our app a big step forward, which is half an hour away, tomorrow.

Night.

Week 2 of CS3216

It’s been just 3 days since I touched my hands on the first FB assignment. Loads of new terms and vocabulary have flooded into my brain. PHP, MySQL, web server, EC2, AWS, JavaScript and AjAx…Finally I came to understand my senior’s warning how a layman who doesn’t know anything about web development will die during the first few weeks, or even days.

However, things are actually very promising. Just during the past two nights spent on PHP eBooks and the FB assignment notes, I already felt that I’ve learnt quite a lot. With my past experience in C++ and Java, as well software development, not abundant but rather well practiced, I believe it won’t be an impossible task to grasp PHP and JavaScript for the first assignment.

Anyway time to stop here. A good programmer never writes anything else rather than technical stuff in his blog. From next blog onwards, I’ll try to note down all the technical breakthroughs we’ll have accomplished, as a record for ourselves and for the benefit of others. 

What I hope to learn in CS3216

What I hope to learn in CS3216

Firstly I would like to send in my deep apology for my absence from the very first lecture. I tried to negotiate with the travel agency for a few times but didn’t get the ticket changed. Anyway, back to the topic. I really don’t have an exact idea about what I will learn in CS3216. However, based what I heard from my friends, there will be a big leap in my programming skills as a CS minor student. I dearly love programming and this is a good chance for me to meet up with some other languages apart from the basic C++ and Java. To pick up some very practical languages like HTML or CSS is a big reason that drove me to take this module. Teamwork is another big aspect of this module and I hope I can keep up the good spirit I had had with my teammates when taking the module CS2103. Besides, I also hope to learn the entrepreneurial process which transforms a bunch of code and files to real products. That’s something I’ve never touched before.

My absence from the first lecture won’t leave me alone in the class without a group. I have a few friends taking this module as well and I’ve agreed to form the first group with them. Definitely I also hope to meet other new faces later on when new groups are to be formed.

Perhaps I can foresee that a great journey awaits but I couldn’t really tell what I will exactly learn in this module. Maybe things will become clear till the last day, on which I exactly know what I have learnt. To make sure I won’t get confused like a blind fly along the way, the best way is to communicate effectively, stay close with the class and the tutors, and also work hard, making each day count.