Kale with Friends

This week’s post is unlike any others.  Instead of an individual work, I started working with four other people as a group.  For next 6 weeks or so, we will be working together to create a quality web service using the technologies and software development techniques we learned over the past two months.

Our application, codenamed ‘Kale with Friends‘, provides online community space for local farmers and consumers.  It is a social networking space filled with local events, recipes, showcases, meal planner, and so on.

Division of Labor

We decided to create 8 mockup pages that would essentially be our core of the website.  Each of us created two mockup pages totaling to eight pages.  I was responsible for the Local and Meal Planner pages.  On the Local page, I utilized Google Places API to show events/places nearby.  On the Meal Planner page, I inserted a screenshot of Google Calendar as a placeholder as mockup.  Google CalDAV/Calendar API implementation wasn’t so straight forward which will require me a bit of tinkering to get it to work in the future.

Development Coordination

Our team met up physically to discuss our plans and for brainstorming session.  We agreed on core features and UI to base our work off of.  After the meet, we created a GitHub repository to collaborate our work.  Our main method of communication is through exchanging emails.

Group Experience Thus Far

So far, this is the best group I’ve had for a project.  Everyone did their part in timely manner.  We were able to create a functional (albeit partial) mockup in the course of four days.  If we could keep up with this, I believe that we will create an excellent web service before mid-May.

Possible Improvements

With the current spring break, we are unable to meet up physically to discuss more about the project.  This could lead to inconsistencies within the website.  We need to refine our design and apply it throughout the entire website for consistency.  And maybe we could design the website so that it is more visually modern (ie. metro UI, Spotify-like UI, etc etc).

 

Model-View-Controller Design Pattern in Play

This week’s module was rather an interesting one.  It was the hardest module to tackle on so far because of Scala integration within the Play.  However, the dynamic nature of MVC amazed me in so many ways.

WOD #1: Digits Mockup

We were to create a mock up version of Digits application using the Play framework.  I’ve done similar WOD before so the activity itself wasn’t too hard.  It just required me to reference to Bootstrap documentations for certain things like table and such.  This WOD took me about 24 minutes to complete.

WOD #2: Digits Form

We were to take an input from New Contact page and display it on the Play console.  I was not able to complete this exercise on my own since I am still a beginner in the web development field.  I referred to Dr. Philip Johnson’s YouTube video for guided help.  It was confusing to be honest because I had no idea what to do and how different programming languages interact with each other in the project.  This required me to watch the video over and over.  When I finally understood why things are done in certain ways, I was able to finish the WOD in about 26 minutes.

WOD #3: Digits Form Validation

We were to validate the input given on the New Contact page for this WOD.  I had to watch Dr. Johnson’s video first again as I had no idea what to do.  At this point, I felt like this module was a matter of getting familiar with the syntax and the interaction between the languages, or at least that’s how I felt.  It still confused me as to why we need to use a combination of Scala and Bootstrap together to display error messages.  I was able to finish the WOD in about 28 minutes.

WOD #4: Digits Model

We were to create a model so that contact information submitted by users can be displayed on the Index page.  This was my first time creating a model and a database (more like a data structure).  Just like the previous WODs in this module, I referred to the video and was able to quickly learn from it.  This WOD was relatively easy compared to others because of the use of Java.  I was able to finish the WOD in about 23 minutes.

WOD #5: Digits CRUD

We were to create CRUD (Create, Read, Update, Delete) application without the deletion feature.  I learned about how user ID is used in (pseudo) databases and I didn’t find it that difficult to complete this WOD.  I completed this WOD in about 22 minutes.

Conclusion

This week’s WODs were very difficult because I have never worked with multiple programming languages at once for a project (LabVIEW and C++ combination doesn’t count!).  What made it really hard was that I am still new to the web development.  Sometimes, Play framework would violate some of my conventional thoughts on programming.  But after doing the WODs multiple times, I feel more comfortable creating my own MVC based websites.

The Beauty of Bootstrap

I’ve heard a lot about Bootstrap from my IT/CS major friends and the ‘beauty’ of it.  I never knew what it actually was about until this week.  All this time, I thought modern web UI designs were written from scratch using CSS and HTML combination.  Well, Bootstrap is still a CSS but rather a  framework created for others to adopt.

Using the Bootstrap would have made my life easier for previous week’s WODs, but it is more beneficial to learn the basics before moving onto systems like the Bootstrap.

WOD 1: Bootstrap BrowserHistory

We were to modify previous week’s A History of Browsers to use Twitter Bootstrap 3.0.  Since we already had the base code, it was relatively easy to convert to a new page using the Bootstrap.  It took a few tries to understand the basic concepts behind the Bootstrap.  This WOD took me about 15 minutes on the first try.

WOD 2: Responsive Kamanu

For the second WOD of the week, we were to reimplement a portion of Kamanu Composites website using the Twitter Bootstrap.  Reimplementing a portion of the website wasn’t much of a struggle.  I was able inspect page elements using Internet Explorer 11 instead of Chrome.  It did take me quite some time to find the info I needed for CSS but I was able to finish the WOD in about 41 minutes.

WOD 3: Responsive Castle High School

Last but not least, we were to give Castle High School website a makeover by taking the old design and modifying it to conform with responsive design.  I have to say, this WOD required a lot of copy and paste for links.  On my first try, I did not finish the WOD on time as I was not able to properly display the website for mobile.  I went through the screencasts again to see what I missed and eventually found a documentation about it through one of the bookmarks we created.  On the second try, it roughly took me 42 minutes.

Conclusion

Using Bootstrap definitely helped the process of creating a webpage.  Additionally, it allows us to have responsive web design without the need of additional coding on our part (relatively).  I may consider making my own website utilizing Bootstrap in the near future out of the classroom environment.