Solar Decathlon Group Design (Wicket)

Introduction

          This is the final assignment and group project for the semester. Our task is to create an actual web application of our Balsamiq Mockup that we did earlier in the semester (Mockup post can be found here). The idea of the project is to create a new version of the mockup using HTML, Blueprint CSS and Wicket. The task asked for a more real look and feel of the Home Management System for Team Hawaii's house entry in the 2011 Solar Decathlon.

The Project

          The project itself was like a roller coaster ride. Since we decided to choose my original design, I volunteered myself to take the challenge of creating the Base Page for the whole application and follow the original design. This gave an opportunity to hone my skills in designing and creating graphics and icons using Photoshop and I had fun doing it. Even though we have been learning Wicket for the past couple of weeks, it is still the most frustrating part of creating the web application in my own opinion. But I also found one advantage of using framework such as Wicket beside from learning JAVA. It allows us to create web applications without the need of an actual web server. It is also much easier to share the whole project trough a jar file or creating distributions. 

          The design of our web application changes as we slowly finding out some holes in the original design. One example is the navigation icons, which is originally placed vertically in the left side of the page. First, the placement is not very user friendly. The user have to browse all the way down the page to click the other icons and get to the other page. Second, this created a very restricted space for the content of the pages. If we have a small content in a page, there will be a big empty space below it. We decided to change this and moved the navigation icon on top of the page. This allows the user to see all the icons and made the pages re-size dynamically according to the amount/size of the content (See pictures below).  Our home page design also changed from being very very simple as our professor pointed out some design flaws and also after getting the feedback from Team Hawaii. We decided to create widgets of each element in the system. This allows user to quickly check the status of each entry without going through all the pages (See pictures below).

          We also ran into cross-platform and cross-browser problem. I'm doing the project on my Mac using Firefox and for some reason it did not display properly when my other group mates viewed it in their PC with Firefox. The fix to this is to put a note in the User Guide of our project saying that the web application is best viewed in PC using Firefox and in Mac using Safari.

Original Design

New Design

The Three Prime Directives of Open Source Software Engineering

          In creating the design of our project, we also need to consider whether we met the three prime directives of Open Source Software Engineering. Below are the three directives.

1. The system successfully accomplishes a useful task. - The system does not have to include every bell and whistle to accomplish a useful task. Indeed, the art of incremental development is to determine the smallest useful increment of functionality and implement that first.

          I believed that our project accomplished this directives as we created a web application that looks and feel like a fully functioning application. But what the user would say will matter the most.

2. An external user can successfully install and use the system. - The system must include sufficient user-level documentation to support download, installation, and use of the system without significant interaction with a system developer.

          We provided a documentation in out project site for user to be able to test and try out our project. I believed that it is sufficient enough to be able to say that we accomplished this directives, but then again users feedback will only verify this.

3. An external developer can successfully understand and enhance the system. - The system must include developer-level documentation providing insights into the design and development of the system that enable an external developer to understand and enhance it.

          Like the above directives, we provided documentation for the developers who wished to collaborate or check out our project. The code specially the Java files are well documented. While I believe that the HTML files could use some more cleaning up due to the fact that none of us in the group knows how to do HTML the right way.

Conclusion

           All in all, the whole project gave me more understanding of what Software Engineering is about. It all starts from the user/customer, in our case the Team Hawaii. Then we moved on to designing and creating mockup for the user to see and get feedback from. Finally the implementation which is the hardest yet the most exiting phase of Software Engineering. The whole project itself made me learned different applications, languages and technologies such as Photoshop, SVN, Project hosting, Wicket, CSS and HTML. I believe that there are a lot more room for improvement specifically on our design. We may need a lot more research and of course feedback from the user.
          The things that I wish I could have done differently is creating buttons instead of just hyperlink text in some of the pages (Security, Hvac). Also use Javascripts in some of the pages to add functionality specially in the buttons.

Download

Here's the site of our project where you can download our web application. Don't forget to read the User Guide if you want to test it out and Developers Guide to contribute, correct or even critique our project.

http://code.google.com/p/solar-decathlon-teamhawaii-4/

Wicket Katas

Introduction

This week's class' work is modifying Katas. Katas or specifically Code Katas are programming exercises that aims to refine ones programming skill through practice and repitition (Wikipedia).  Our class will be working on the previous exercises hoping to hone our skills in Wicket. There are 5 different Wicket Katas exercises that we need to work on and each exercise has about 1 to 3 needed modifications with the total of 11 modifications for the whole assignment. We needed to record the time that it took us to do each of these modification so let's go ahead and see how I did.

Example 01

TO DO: Kata 1A:  Add a new line to the page that says, "In one week, the time will be <time>", where <time> is replaced by a timestamp one week later than the timestamp that now appears on the page.  

RESULT: This took longer that I thought it would. There were some confusions on which method to use to get the timestamp for the next week.The original code uses Date() to retrieve the current date but the method getDate() is now deprecated so I had to do some reserching t able to do this Kata. I found the Calendar() and getCal() to do the job. This exercise took 20 mins.

TO DO: Kata 1B: Add a button to the page labelled "Refresh".  After pushing the button, the times update themselves. 

RESULT: This exercise is really easy. Just add a new button and set the onSubmit() to go the same page. This exercise took 15 mins.

TO DO: Kata 1C:  Wicket, by default, runs in "Development" mode, but production systems should run in "Deployment" mode.  Override the getConfigurationType() method so that Example01 now runs in Deployment mode.  See this page for details. 

RESULT: I was surprised with this one as I thought that this will be the hardest one. Luckily we were provided a link on the example of how to do this. This is accomplished by adding the getConfigurationType() method and setting the Application to Deployment mode. This exercise took 15 mins.

Example 02

TO DO: Kata 2A:  Add an additional link on the home page that says, "Go to image page".   Create this page, which should display an embedded image.  This image should be G-rated.  It should be in a .jpg file stored with the system, not retrieved from the web.

RESULT: All that is needed to do this is to copy the previous code and replace the label to create another link. Creating the page wasn't that bad either and for the image, It didn't took that long as I had to do this in the previous week's exercise. This exercise took 20 mins.

TO DO: Kata 2B:  Add a button on the home page with the label, "Make font bold".  After the user pushes it, all the text on the page should become bold, and the button label should change to "Make font italic".  When the user pushes that button, all of the text should change to italic and the button label should change to "Make font normal".  Pushing that button changes the text back to its original state and the button label should now say "Make font bold".

RESULT: This is the HARDEST of all the exercises. I worked on this for about 30 mins and decided to skip on this exercise. I had a couple of ideas on how to this. One of them is to create two additional pages. One page has all fonts in italic and another with all fonts in bold and links each buttons to the corresponding page. I'm not sure if this is even allowed or if this is a proper solution for this so I decided to do the very hard way. I created function that uses a switch statement to select the button's name. For the font type, I created if statements in the onSubmit() method. This will change the opening and closing font tag depending on what button was press. I had to ask for a lot of help on this one. The result is the initial button name is empty but when press, the button appropriate names will show up.This exercise took 4 hrs in span of three days. 

Example 03

TO DO: Kata 3A: Add a new tab called "Image" that takes the user to a page containing an embedded image (your choice, G-rated).  It should be in a .jpg file stored with the system, not retrieved from the web.

RESULT: This is pretty simillar to KATA 2A so this is one of the easiest. The only difference in here is that the page extends the BasePage, which has all the tabs. This exercise took 10 mins.

Example 04

Record how long it took you to accomplish each of these katas.
TO DO: Kata 4A:  Add a new cheese called "Velveeta", which costs $0.25/lb. 

RESULT: We chose this exercise to work on in class so I had help in finishing this. We base the code for this on the already existing entries. This exercise took 10 mins.

TO DO: Kata 4B:  Add a "country" field to the billing address that appears when checking out.   The country field should provide a drop-down menu with a selection of 5 countries.

RESULT: The same with the previous exercise, I had help to do this. The coding part was the easy part, but looking for the place on where to put it was the harder part. We had to configure 4 different files to accomplish this. This exercise took 15 mins.

Example 06

TO DO: Kata 6A:  Get rid of the blue columns that appear when displaying the website. These are for development, not deployment purposes.

RESULT: This is probably the easiest exercise. I had to first figure out where the blue columns are being created then where it's being called and then remove it from there. This exercise took 5 mins.

TO DO: Kata 6B:  Place the image underneath the form, not to the right.

RESULT: This is also an easy exercise. At first I tried to add a line break right after the form, but that didn't do anything. I played with some more and found out the span tag and replaced 16 to 20. This exercise took 5 mins.

TO DO: Kata 6C:  It is often convenient for web applications to consult a properties file when starting up in order to get configuration values.  An easy way to do this is with the standard Java Properties mechanism. For this Kata, modify your Example06 system to read in a file (if present) located in ~/.example06/configuration.properties.   (Note that ~ means "the user's home directory", and that there is a System property in Java that provides this value.)  This property file should contain a line like the following: deployment = true
In other words, it contains a property called "deployment" whose value is true if the Wicket application should run in deployment mode, otherwise the application should run in development mode (see Kata 1C). 
Your application should read in the properties file and set the System property wicket.configuration before starting up Wicket. The Jetty class is a convenient place to do this processing.
Finally, your application should write out a message on startup indicating whether or not it found the file, and what the resulting configuration mode will be.  If the file is not found, or the property is not present in the file, then the application should run in development mode.

RESULT: This is one of the hardest exercise in the whole assignment. This similar to Kata 1C, but this needed a lot more work to accomplish. This includes looking and reading from a file, catching exceptions and setting the Application properties. I was lost on how to accomplish this so I had to ask for some help. This exercise took 1 hr and lots of questions.

All in all, most of these exercises are pretty fun and easy to do and some are very frustrating that makes me wonder if it's worth a couple of hours to do. Luckily there are plenty of help so that made it ok. These exercises got me a little more comfortable on working on Wicket.

Downloads

Below are the finished distribution for all the exercises.

Kata Exercise 01

Kata Exercise 02

Kata Exercise 03

Kata Exercise 04

Kata Exercise 06

Wicket Chart (Google-O-meter)

Introduction

In addition to our group solar decathlon design mockups, this week, we also have to create a web page application individually. We are to implement a one page web application that provides two components: a form that accepts a variety of parameters along with a submit button that when pressed, generates a GoogleOMeter visualization.  Click here for an example of GoogleOMeter.

Web Application

The form should allow the user to set the start and end of the Y axis, the title, the width and height of the chart, and  the data value for the pointer. Our web application should use Wicket, Blueprint CSS for layout, the class' build system. We also need provide at least one useful test case and employ sessions so that multiple users can generate charts independently.

Wicket Experience

I was excited about learning Wicket. I just started  creating web pages and web application from my internship and I thought that Wicket will be very helpful in the future. I had to relearn HTML and then learn PHP, CSS and Javascript on my own to be able to do our previous project.  It turned out though that Wicket was harder than I thought. Setting the pages alone took me more than an hour. Since I never seen any Wicket code in action before,  I had to reuse the example Wicket project that were given to us by our professor and then work from there.
I have to say that creating web application/pages using Wicket is a very long and complicated process. The only thing I like about Wicket is we were able to work and enhanced our skill in Java. The only advantage that I can see about using Wicket is a high quality web application due to the fact that we are using build system to create it.
My over all experience in Wicket is not bad, because I get to learn a new framework and also enhance my skill in writing Java.

Wicket Chart Web Application

Below is the finished product for the implementation of the web application for creating Google O Meter chart. Beside from spending most of the time getting use to Wicket, I also spend most of my time making my page attractive by creating images for the header and the footer. I had fun creating this page and there are a lot more room for improvements.

 
Lesson Learned

Creating web application is very hard and  frustrating at first, especially when using a framework for the first time such as Wicket. It is very rewarding though once you see the result and it makes you want to learn some more.

Download

My Wicket chart can be downloaded here.

Solar Decathlon Group Design Mockup

     Our class' first group project is about creating a mockup web application design for the home management system for the Team Hawaii's entry for Solar Decathlon 2011. The project itself is really interesting because it forces members of this projects especially students to be as innovative and creative as they can. This is the second mockup that I did for the same system. The first one was individual which I thought was I bit harder than the group project. This mockup is a lot easier as three students are working together. I can give and get ideas, opinions and help to/from other members of the group. We used Balsamiq Mockups to create our design, Google chart wizard to represent data and myself personally used MS Visio and Photoshop to add some kick on some of the graphics. We are to design user interfaces to monitor and/or control lightning, HVAC, energy generation and consumption, aquaponics, security and entertainment. While we worked together on some of the pages, we also assigned to create designs individually for different pages. Below is my design for the security page.

This page utilizes the current floor plan to show which part of the house needed attention for security and intruders' position if there's any. It also have security cameras which are triggered by the already existing motion and infrared sensors.
     I also designed the homepage but I spend most of the time designing the Aquaponics page. It's the most interesting one for me, not only designing the page but the system itself. It utilizes the use and reuse cycle. I'm so interested on Aquaponics that I might create one at home. Anyway, my page monitors different levels for the whole system. PH level, Oxygen level and water temperature are all essential for the fishes' health, while the fish tank and plant bed's water levels are to ensure that the whole system is running properly. The idea is to monitor all this in real time so I decided to use gauges and a digital counter to represent data.  When something goes out of the normal levels then an alert and some recommended instructions to fix it will show up on the status field. Below is my design for the Aquaponics page.

Team Work and Project Management

Introduction

To work on the solar decathlon design mockups, the class was divided into groups of three to four students. I was paired up with Kylan Hughes and Chuan Hung. We started to talk about our design and we decided to use my previous mockup as a template for our group project. We used Google Project Hosting and SVN for our version control. 

Team Work

Since we needed to create about 8 to 12 page design mockups, we decided to divide pages that we are going to work on. We chose the pages that we really knew about. Like for example, my "Security" page design was pretty much the ideal design that we are aiming for, so I was the one who worked on it. We met multiple time just to talk about what we needed to finish, asked for others input and for help too and the rest are through email. We really didn't need to meet for a long period of time as we keep each other updated just like what I mentioned through email and through the job updates and commits on the project hosting site.


Google Project Hosting 

I have to say that Google project hosting was a huge help in finishing this project. We didn't really need to be at the same room to fully work on our project because we could just upload/commit our own page into the server and the whole group could check on it. I also have to say that we have to be careful in using this and the subversion control as it could mess up any changes made by other group member if I commit the whole project. We just have to remember to "Update" first before committing anything else. Below is our Google Project Hosting page.


http://code.google.com/p/solar-decathlon-teamhawaii-4/

All in all, the project when smoothly and we were able to really improve our designs  because we were able to focus more on small number of pages through divide and conquer.

User Stories

Introduction

     This week's work includes creating user stories for the Solar Decathlon for Team Hawaii. User Stories are one or more sentences that captures what the user wants to achieve. It is an informal and quick way of handling customers' requirements, features and functionality of a project that can be implemented. The user stories are written by the customers for a software project and are their main instrument to influence the development of the software.
     Solar Decathlon is a competition that was created by U.S. Department of Energy that challenges 20 collegiate teams around the world. The teams were challenge to design, build, and operate solar-powered houses that are cost-effective, energy-efficient, and attractive. The winner of the competition is the team that best blends affordability, consumer appeal, and design excellence with optimal energy production and maximum efficiency. For more information about the Department of Energy Solar Decathlon click here and for Team Hawaii click here.


User Stories

      Based on the Team Hawaii's presentation and question and answer portion of it, below are the user stories that I thought occupants of the house may require on the management system:

1. As a home occupant, I want to be able to monitor both the energy that my house produces and the energy that the house consumes. 

2. As a home occupant, I want the system to do calculation and some kind of notification if my house's produced energy will be not enough for the current house's consumption for the rest of day.

3. I want the system to give me the summary of the energy consumption of each electrical appliances/equipment, specifically which one consumes the most. The system will also suggest which of these appliances should I turn off or unplug to be able to save energy.

4. As a home occupant, I want to be able to see my house's current temperature. In this way I would be able to tell whether the cold and warm air valve is working properly, if not, then I would be able to do necessary adjustments. This would keep my house very comfortable during hot summer or cold winter.

5. As a home occupant, I want to use LED lights all over the house and be able to control everything wherever I am in the house. This would make it very easy and convenient for me. This would also help save energy by immediately turning the lights off when not used.

6. To conserve even more energy, I would also like that the LED lights would turn whenever I'm around. By using IR and motion sensor, an array of LEDs would turn on and follow me wherever I go in the house. This also has to work with multiple occupants in the house.

7. To fully make my house self sustained, I want to utilize the new technology in growing food called Aquaponics. I want to be able to control and monitor the acidity and chemical level the Aquaponics system. This would make it very convenient to oversee and maintain the food growing system.

8. For entertainment, I want the existing LED lights installed in the whole house to be able to function as a visual effects on the playing music. The lights would need to dance base on the music that is currently playing. This would not only add cool points but would also keep my guests busy and entertained.

9. I want all functions and requirements above integrated if not in one system then in one device like a tablet, PC or smart cellphone or both. I want the interface to be easy to understand and easy to use, portable and convenient.

10. Because of the systems functionality, I want the whole system to be  secure especially from outside interference that may pose threat to the safety of the system and the house. I want to utilize the existing hardware that comes with the system to function as security device/alarm not only inside the house but also on its perimeter. My house would not only be very convenient and comfortable to live in but would also be safe and secure.

Website Usability

Introduction

     Website usability is this week's topic for our class. It is defined as the ability of a website to provide a well-designed user interfaces that targets the ease-of-use for its users. Usability itself is defined as the study of ease of use, of how quickly a user learns to use a particular human interface. It is defined in five different components:

• Learnability: The ability of a product to enable users to quickly learn how to use it.
• Efficiency: The ability of a product to enable users to how quickly can they perform tasks.
• Memorability: The ability of a product to enable users the ease reestablishing proficiency.
• Errors: How many errors do users make, how severe are these errors, and how easily can they recover from the errors?
• Satisfaction: How pleasant is it to use the design? 

   Usability is very important not only to website but also in designing different products. If a website is giving a user a hard time to use, it is pretty much useless. The same thing with different products, if the users can't figure out how to use it, he or she will trash or returned it, therefore results into lost of clients/customers.

Examples of websites that have satisfactory usability:

 

Concerto-Signage

     The homepage of this website pretty much tells you everything about this product and it all fits in your screen without scrolling up and down. It tells you what the product is, why use it and how to download it, and this is only on the first page. All in all, this is a very straight forward page. You don't have to visit other parts/links of the website to find out what the product is all about unless you actually interested in it.

SpeedTest

     SpeedTest.net is a website that tests both the download and upload speed of your internet connection. As soon as you go to the site (1st pic), it automatically finds your location.  The only step that you need to take is click on the "Begin Test" and off you go. After testing, it'll show you the results (2nd pic) nicely and easily. The use of this product is very straight forward and effortless.

Examples of websites that have unsatisfactory usability: 

TheBus HEA

     Although the site and product is really straight forward (just type the location or bus stop and go), it doesn't handle typos very well. A missing single letter on a location will immediately return an error or no result. This will be very frustrating for users who are not familiar or having problem remembering street names here in Hawaii. Not very tourist and elderly friendly.

Citymill

      This whole website is pretty simple, too simple that is. The homepage is just one big advertisement, which I'm guessing a PDF file from the company's weekly newspaper ad. All the pages here are static. It doesn't give you ability to search for products. It gives you some categories, but it only list different types of product and that's it, nothing specific about the products available.