An interesting idea from Quick Draw!

This is the first journal on my final year project.

The idea of the whole project was originate from Google Quick Draw. The game is to ask users to quickly sketch an object within 20 seconds and the computer will “somehow” guess out what you are trying to draw. Based on this, we are actually thinking: if it is able to guess the object that people are drawing, would it also be possible that when people draw something incomplete, the model could help people finish the drawing? Or even further more, could it handle 3D objects drawings? If so, then this model would be really useful in various fields in the industry such as game development, animation productions and films making (with respect to CG). More importantly, it may also help artists with inspirations.

To begin with, we divided our goal into several milestones; we would like to work on 2D things first and then move into 3D objects. As for 2D drawings, we started with reconstructing bitmaps from bitmaps. The expected next step would be reconstructing vector drawings (sequence of points) from bitmaps. Finally, reconstructing vector drawings from vector drawings. After that, we should be able to predict the incomplete drawings and finish them. As for 3D objects reconstructions, currently we do not have plans yet and we want to focus on 2D drawings first.

The idea itself is absolutely interesting. However, we do not expect it to be a problem that could be easily solved. The journey have started and let us see how far we could reach in such limited time period.

Week Twelve Reflection

At first I need to apologize for the missing blogs for week 8, 9, 10 and 11. During those weeks we were busy with the development of the website and I forgot about the routine. Finally this week, we finished all the development and the website is launched. Then I continue with my previous blogs and reflect what I have been done for the whole month of October.

Firstly, I realized the importance of front end framework. As I mentioned before, I have never be exposed to a front end framework before and for assignment one and two, I just followed my seniors and experienced teammate, trying to make use of AngularJS and VueJS. However, it was not until I was asked to work on the old front end code, which was written without a framework did I realize how important the frame work is. When I was reading the old code, it was all messed up and just like a piece of sh*t. CSS was written in Html, Html was written in Javascript for rendering new elements, Javascript was written in Html for logic control. I totally had no idea about where to start. In addition, without double-binding, I was not able to update data lively. I needed to use JavaScript to hard code the “live data updating”, which was painful and hard to maintain. Despite of this, I cannot setup a new environment and write the front end code from scratch because of the time constrain. The pain lasted for a whole week. I was almost dying after I finished all the redesign of the front end. But thanks for the painful experience, I am now possibly able to read code more efficiently. More importantly, I become more careful about my coding style in development.

Secondly, “sometimes coding is the easiest thing, because you always know what to do”. I was told by a alumnus from CS3216 about this, which was really true. Coding is much easier. For instance, you need this feature, then you add database tables for it, you create routes for it, you generate APIs for it and you design user interfaces for it. However, when doing marketing, the world does not work like a machine. You tell everyone that your product is good and therefore they should use it. It does not work. You need to know what are the things your customers what. Sometimes a product for charity does not have the magic to attract users as a simple yet cute game. When I tell my idea to my friends, they may think: hmmm, that’s interesting, I will help you to register an account. However, they will never really use it or even recommend it to their friends. We spent a lot of time thinking about our marketing strategy and found it really hard. I think I really need to go out to ask people and tell them about our stories in order to gain more users. Hope that I would be more experienced about finding the customers’ interests after it.

To be honest, I have never been such painful as these days before. At the beginning of October, after a whole week of developing website day and night, I thought I would be able to have a rest. How silly was I at that time! Endless user feedback and minor bug overwhelmed me in the following weeks. At the same time, I needed to design posters, write promotions, recommend out website to friends… But the truth was, I was enjoying the whole process. I overcame the problems and I am still alive at the end of the semester. I could feel my growth and I really think the pain is good. The last week we need to more promotion and I hope that our registered user will hit our expectation! Good luck!

Week Seven Reflection

Finally we finished assignment 3 and the mid terms are coming. I formed a group with Patrick, Ken and Ten and came up with an idea of developing NUS NextBus 2.0 for our final project. Because this week we did not have many coding staff, I had a rest and switched my focus on my exams. As for this week, I did some evaluation on the apps that are similar to ours.

 

1. SG NextBus

This application lists nearby available buses according to user’s current location. The information displayed for each bus includes bus number, arrival time for subsequent buses, load condition and the station name to take that bus. In addition, users are able to bookmark bus stops and particular buses for shortcuts.

Nice things about this app:

• It is neat in terms of design. The bus information is displayed in a very clear way. The user interaction design is good. For instance, users can slide the screen to fold/unfold a map beside the information board.

• This app uses push notifications to tell bus arrival information to users, which might be helpful in some cases.

Expected improvement:

• This application can only be used with geolocation. This is because the app shows all buses that are near your location. If geolocation is not on, users cannot retrieve any bus information. We suggest implementing a search bar so that users can search for particular bus stops or buses without geolocation.
• This application is not friendly to people who are not familiar with bus routes. This is because users cannot find out what stations a certain bus will arrive at on this app. Perhaps a better design would show all bus stations first, before showing the buses available at each bus station. Then, when users click on a bus, the app can show the bus route for that bus. We believe that this flow is more logical and will help people who are unfamiliar with bus routes. In addition, it would be good if users can filter out buses by destination. For example, if a user is at Kent Ridge Station and wants to go to UTown, he can simply filter out buses which do not pass by UTown, leaving behind the buses that he can take.
• The pins on the maps are too close to each other and are not clickable. We suggest having the map more zoomed in initially to show only relevant bus stops. Also, the pins can be made into smaller icons. Lastly, we can make the icons clickable, directing users to the particular bus stop’s information page.

 

2. MyTransport

MyTransport provides users with bus routes, bus arrival times, load conditions and distances between current location to each bus station.

Nice things about this app:

• Very functional. The information board is station-based; app lists all the nearby stations according to user’s current location. The bus information is hidden in an accordion which is really user friendly.
• Bus routes and bus search is provided. This feature is friendly to people who are not familiar with the bus system.
• Interactive map. Users are able to click the bus stations on the map to retrieve more information (including bus arrival time and bus routes).

Expected improvement:

• Also add station-based search so that users are able to use the application without location service.
• For each bus stop, it would be good if users are able to filter out buses according to their destination.
• Users are unable to reproduce the page for station details from main page. Users are only able to enter that page through stations on map. This will be a problem once the filtering out of buses by destinations is implemented since this filtering should be implemented on a separate page. Perhaps an additional “more info” button for each bus stop on main page would be useful.

Week Six Reflection

To be honest, comparing with the assignment one, the experience of developing application is much more enjoyable for assignment three. During the recess week our group gathered together to code and really worked as a team. In addition, I tried to learn from my teammates and ask for more work. Yijiang, my front-end teammate has really helped me a lot with my coding style and documentation. During the process I also got some new ideas on how to “upgrade” user experience.

We were using Vue.js for front end framework. This is a very light-weight framework and is actually powerful. One of the most important concept in Vue is the “components”. A single page can be divided into components of components and this requires a lot of abstraction. To do this, I learnt to do a bit planning before I really start to code. After finish coding, I would go back and see whether I had an overkill or I need to abstract more (following Single Responsibility Principle).

Then is the CSS styling. From my previous development of NUSPartime, I developed a bad coding style for CSS, which is defining classes wrongly. At the beginning I abstracted all the padding, margin into classes; instead of adding “margin-top: 15px;”, I would create a class named “m-t-md”. As a result, the class attribute for an element usually was really long and was quite difficult to make changes or debug. I also had problems naming SASS variables until I learnt the general standard should be “object-attribute” and should not define variables before it is used. Yijiang had corrected all these styling problems when he was doing the code review and he spent time teaching me the correct way of doing it. He also told me that Bootstrap is useful but we do not have to import the whole file into the project. In addition, Bootstrap can be heavily customized, things like color themes can be changed easily. I think I really got started with front end development after I met Yijiang.

Next would be the user experience. I learnt that user experience does not only include UI part, processing speed should also be included. This is the first time for me to be exposed to Webpack. During the whole process of development, we do not only consider how nice the front end looks like, but also how large the webpage would be when it is transmitted to users. We modified jpg files, converted png to svg and included all relevant files into webpack configuration. All things are done only to optimize the loading speed of webpages and in fact it does worth the effort.

We successfully finished assignment 3 and I really had a good time with my teammates. I hope that my final project would be successful.

Week Five Reflection

Comparing with the previous project, this time the workload seems to be much smaller. Perhaps this was because we chose to develop an app that was not heavy in terms of both backend and front end and the most difficult thing was to solve a technical problem. However, because my teammate are so strong that I could not do something really meaningful. Not contributing enough makes me feel quite guilty. Therefore, I am now trying to learn what my teammates are doing and help them with what I can do.

Our idea of the app is to make an AR based map. We thought that though people have Google maps or other real maps, they sometimes find it difficult to read maps. Further more, even though they have maps, people sometimes may also not be able to find each other when hanging out. Being inspired by FPS games, we think that it might be possible to have markers as AR on phone cameras and guide people to specific places. This idea is quite cool because these markers would clearly show where to go so that people can find a specific person or place. And with a mini map below, it would be much easier and more interesting than reading a plain map. Initially we just what this app to be able to help people find each other. But later I think it would be a nice idea to add features such as helping people find nice restaurants or hotels or shopping malls.

Because of the idea we have, for backend there’s just a few tables to store user data while for front end the main thing is just a place to show the camera and markers. The main problem is how to display markers in the correct place. During the process we did some research and made use of a very large library named three.js. At the same time I designed the logo and home page for our application. However, as I stated above, I thought the workload for me was much smaller than those who were trying to solve the technical problems (they read a lot of documentations). After that, we moved on to setting up develop environment. Since I did not have much experience setting up environment, I did not contribute a lot neither. I really wanted to do something meaningful. Therefore, I helped doing some research on what font framework to use. During the process I compared AngularJS with VueJS and had learnt some highly abstracted ideas. Also, I found a very useful and light framework which was VueJS.

Now we reached an agreement on the front end framework, which is VueJS 2.0. The develop environment is set up and I am ready to move my previous code to the new system. Though I am not a very experienced developer, I would try my best to learn from my teammates and enjoy the development process.

Week Four Reflection

This week was horrible.

I realized that for projects, it would be so stupid to test and integrate everything in the last minute and if you do not start to work really hard at the beginning, later you will suck a lot. In addition, I think our application have a very serious security issue.

Because our project is a part time job platform, people might register as students or employers. Therefore we divided our work into two parts and work separately. We worked happily until we decide to integrate the two systems 2 days before the submission. Tons of problems occurred: what if a person register as both a student and a employer? How can we control the view when people are trying access job details page if they are both “students” and “employers”? How can a person change his role within the website? How to make the UI consistent? Why students cannot see the jobs posted by employers 😂? In order to solve these problems we spent hours and hours working in midnight. The moral of the story is that during MVP stage, we should integrate the two systems together already. After making sure the whole system works well and then move on to the next stage instead of simply dividing work and try to merge them at the last minute. And this also reflected that we did not have a correct time management for our project. We should have left more time for buffering: testing, finding bugs and try to fix them. We should have work even harder during the first two weeks.

The next is the security concern about our application. We did not implement https for our web page. More importantly, we were not using the API provided by IVLE to verify students’ identity. Though we did not store people’s data in our database, I think it would be every bad practice to require people to key in their data in a separate page (without https!). I think we need to improve this if we want to put this website in use.

As one of my senior told me “CS3216 is far from anti-human, it can even kill demons.” I realized that he was not kidding me. However, I think I am really learning things and doing something that I love. I will carry on working hard and hope that our other projects would be successful.

Application Critique on Prisma

I am really interested in this application since I have ever encountered problems trying to convert pictures into a more artistic style using photoshop and Adobe Illustrator. Instead of drawing lines and covering colors, with one click Prisma is able to generate a very nice photo, which is quite amazing.

For the application, I think the following points are important from the presentation:

1. Privacy issue
   1. Because this application makes use of A.I. and machine learning, for certain filters they are not able to handle it locally. When users upload the photo to the server and modify it, personal information is leaked. Therefore, here comes a privacy concern about how should Prisma protect users’ personal information and should Prisma use users privacy for commercial purpose.
2. Community
   1. I could remember when group 9 was presenting 53, they introduced that 53 has a community that allow users to great artworks together. Group 5 also think that if they are going to implement this app, they are definitely to implement sharing features. In my opinion, sharing and having a community are the most important features that would keep users using this kind of applications. When people share creative artworks on social media or community, they would receive appreciation, which will encourage them keep using the app.
3. Virtual Reality
   1. Virtual reality is getting popular and the market for it is growing. As for a photo editing application, Prisma actually have very strong power and should not just limit it in the current market. Possibly Prisma can improve its technology so that it is able to modify videos for virtual reality. Then people would be able to experience different stylistic sceneries and perhaps this would bring Prisma a lot of profits.

About my personal thoughts, I would like to criticize some thing first:

1. I am not really sure whether it is reliable for the picture on slide 5, but currently in Singapore’s app store Prisma is not really the first in the “photo&video” category. It might not be very suitable to say “Prisma” is the first in industry.
2. For its potential in movie industry, as far as I am concerned, it might not be really successful because for movies they have their own team of special effects and they are using more advanced tools to make sure the stylistic effects works well (as group 5 have mentioned that sometimes the picture is not generated well).

For my personal plan of implementing this application is:

1. Make it a plug-in. People sometimes feel troublesome to open an application and just for editing photos (since this is not a social media and do not have very large user community). If it is possible, we can make Prisma a plug-in for Facebook, Instagram Twitter or WeChat. When people are having a post, they can directly use the plug-in inside social media to edit the photos. It would be more convenient for users and makes sure that Prisma is always being used.
2. Create another version for those startup application designers or web-developers. The application would allow them to generate beautiful stylistic photos or icons. This would be very useful because sometimes people cannot find a good designers and using photoshop to edit every photo is really tedious. Prisma would help those people to save a lot of time.

 

Week Three Reflection

This week is quite busy because many projects are going together. What I have learnt from this week’s experience is that time management is of vital importance orz. Other than that I also learnt the correct way of “designing” front-end.

About the time management, my problem was this: CS3216’s teammates almost finished the basic backend therefore I need to carry on with improving front-end. At the same time, I need to prepare for the presentations for assignment 2 and CS2101. In addition, CS2103T required us to write proposals for the final project. I was totally lost at first. However, I then managed to finish them all because I realized that I should have a focus; it would not be possible to do every thing perfectly. Other than that, if I have problems, I should tell my teammates in CS2101 and CS2103T and possibly reduce some of the workload. Previously I never did this because asking for less work makes me feel guilty. However, the fact is that it really does not matter as long as I can finish my part with full responsibility.

The second lessen that I have learnt is how to “design” user interface. I have never designed UI in a project before. In CVWO we had templets and we can just render them to get a good looking webpage. For our project, I tried to design buttons, icons and choose theme colors, background pictures by myself. However, I found it really inefficient, especially for us because we just have 3 weeks to finish the whole application. Then I discovered a method: use bootstrap grid system to have a basic layout first and then use bootstrap components to support the basic features of the application. After that, search for specific UI design for components such as buttons and drop downs and redesign them.

There are just a few days left, we are continuing working hard to make sure our core features work well. And I hope that with further development after assignment 1, our application would have its value in terms of helping NUS students to find part time jobs!

Week Two Reflection

Our team divided the work and I was responsible for the front-end design. Though we have encountered some problems regarding teamwork, we managed to solve it and finished mid-submission. I feel that we are on the right track now!

The first thing that I have learnt is ALWAYS PLAN BEFORE TAKE ACTION. I have heard this from my seniors, my parents and profs but never realize the importance of it until I started to do project on my own. We have four people in a group but everyone has his own thoughts and ideas. We did not draw story board and discuss the workflow of our app and as a result our work did not match: the front-end and back-end cannot be connected together. For example, Bohan thinks user should be able to see the list of information without logging in while I think the website should not be designed that way. Our disagreement led to loads of problems such as schema, UI design. However, we soon realized the problem and started to plan and then work. Then things began to move smoothly.

The second thing that I found very useful is that when designing UI, it would be better if we use simple bootstrap to support basic features first and then polish it to make it look nice. It does not make sense to finish every details because it would be very tedious to modify the UI later.

To sum up, I have learnt quite a lot of things during the process. At the same time, our app is becoming more precise and I can nearly see our final product. I will continue working hard on our application and try to make it perfect.

Week One Reflection

The first week with CS3216 was quite amazing; to be honest, this is the coolest module that I have ever taken since I entered the university. It is cool because it reminds me of the book Hackers and Painters, the course is gathering a group of geeks together and try to do awesome things. Such feeling triggered my passion and I decided to develop my ideal application with full heart.

During the first class I met Yanhao, Bohan and Hanming, two of them are seniors but they are extremely friendly. We formed a group to develop our first application together. We spent a whole afternoon discussing about our Facebook app. The whole process was actually quite fun because it was filled with jokes and laughters and funny ideas. In the end we managed to make an agreement and decided to develop a part-time job platform.

Then I spent my spare time learning a new framework: express.js. Because previous I was working on Ruby on Rails, which is a quite heavy framework, I got confused about the light one, which is express.js. This framework does not have a clear MVC structure (at least the folders are not there after initialization) and I could not figure out how things are connected. Then I asked my friends, searched on Google, trying to understand the new ideas and eventually I did it.

Now we are hitting the road and I am really excited about that. Hope all the processes go smoothly and we can develop an awesome Facebook app in the end.