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
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.
