Starter Events: The Ride of a Lifetime

This week we, the class, were entrusted with an extension to finish implementing the events of the starting events for the Devcathlon.  There are ten different starter events; I was chose to create the “Everyone Builds” event.  

Event Specifications:

Summary: Give points for everyone building.

PAR: Wakeup once per day. Determine if everyone built at least once during that day, and award 10 points if everyone built. Award 0 points if at least one person built, and deduct -10 points if no one built.

 

Decay/Incentives: Award 10 bonus points for 7 straight days with everyone building every day.

 

This event seemed easy to do when I first read about it, to be honest I took this assignment very lightly.  I procrastinated at first; thinking, from the previous assignment, since I read most of the documentation and understood it.  So when I started to implement the event, I was shocked.  It covered things I never read about.  I was at a loss, but I couldn’t give up.  Unfortunately, on the due date, I could not complete the production of the event; then a miracle happened.  Our professor, seeing that a majority of the class did not complete the other events, extended the dead line. 

With an extended dead line, it was time to redeem myself.  After taking care of some personal obligations; I charged at the assignment, as if it was a 10 ft. wave without hesitation.  Even though with some helpful notes, provided by our professor, this wave was still pounding the life out of me.  With some support from my other peers, Daniel and John Ly, the wave didn’t seem so big. 

Wipe out

One part of the wave that kept pulling me under, was finding data for every member in the team.  It took sometime, reading of the documentation, and helping from others; but I eventually over came that problem.  Then when I though I was in the clear, and BOOM! A huge error occurred, and it seemed a lot of people in the class were getting the same problem.  I isolated the problem, and it was when I tried to pull data from a day ago.  Later our professor addressed the problem and created away to grab data from a day ago, without getting the error.  (All the events that occurred during the development)

 

Getting a Lifesaver

Once that whole error issue was out of the way, all I had to do was ride that wave back to shore. Following the resolution, on my testing of my functions to decide whether to give bonus points, just regular points, or no points at all failed.  After long hours of thinking, it finally came to me at 4 AM; talk about a wake up call.  I noticed when a user or users produces data in day it is recorded; and being able to get access to the recorded data, I was able to find the amount of user or users.  Implementing a way to get that data, all my test cases started worked without any failures or errors.

 Conclusion

One thing I’m really upset about, is that I took this event lightly.  I know I could have finished this implementation days before the extended date, instead of hours; but like a friend of mine told me, “Learning a complex new thing takes time, so approach it prepared”.  Remembering that, like my wave analogy, I shouldn’t have procrastinated and rush into the assignment untrained.   Also I’m not to sure of the consistency of my way of getting the number of users for the day idea, but I’ll be sure to look further into it over the upcoming weekend.

Devcathlon: Creating the events

This week we continue the development of the Devcathlon game, we were assigned with implementing the starter events for the game. The event i chose to program was the "Build Everyday" event. This event will check if each team thats participating in a match and look at each team member within those teams, to see if everyone has done a build for the day. If no one has built, the team is deducted points; if everyone has built at least once that day, the team receives points; if only one person of the team built for that day, there will be no distribution of points; and lastly, if the team has a consecutive 7 day build streak, then the team is awarded bonus points.

I had a lot of trouble implementing this new event, one of the biggest was checking for the seven day streak. I never got to fully test my bonus method; during the last minutes of the assignment, things just didn't want to work anymore. Also another problem was, I lost track of finding more than one team members build data. I haven't completely solved this problem yet; I have written steps to find each member, but i just need to find the right methods within the Devcathlon.

Conclusion
This was a very challenging and complex assignment. Complex, not in the file i implemented, but complex in the size of the entire program. Also i should have uploaded my code more often, but I was always afraid of breaking the build on the Hudson server, which checks our file for errors. This has been an overall good experience and I will continue on the completion of my event, just need to work out the fixes for the bonus and finding each members build data.

Screen cast
The screen cast the professor has provided for the Hackystat and the Devcathlon are great. I can download them and always refer to it when I forget how to retrieve different types of sensor data. The only problem I see is when a line of code runs off the screen, I would have to try to guess what it is; but the good thing is, I can always rewind it to hear him explain what he's typing out. I wish to see many more tutorial screen casts.

A taste of Java from Hackystat

 This week we finally got to get a taste of Hackystat, and it taste a lot like Java.  The class was given the task to create two simple functions to retrieve data from the hackystat server.

 

For our first task, the java function was to retrieve sensor data for everyday of November 2008.  At first, I presumed the task to be a fairly simple, with the help of our professor’s web cast video tutorials. Later when coding the function, I hit a brick wall; having trouble getting to the month of November, for data retrieval.  I later then broke down that wall by just basically inputting the XMLGregorianCalendar date statically for a start date. 

  

Just when I thought when I was in the clear, I fell in a ditch; I couldn’t get the correct data I wanted from the server.  I then proceeded to read the Javadocs for the Hackystat program.  Spending hours and hours of reading through the documentations, I finally burned out my eyes.  After taking a break from reading and staring at code, the answer just occurred to me.  Having input the start date statically, I just simply ran a loop with the number of days in November and statically inputting those days in the start date.  Finally all the data showed for each day of November, and also for the second part of that task; the total for the month of February 2009.

  

The second task was to retrieve sensor data from the server, just like the first task; but the catch was to have a user input the desired month and year.  I wasn’t able to accomplish this task, due to having been stuck for so long on the first one. 

Wow, the hackystat program is bigger than I thought.  Unfortunately I wasn’t able to finish the second task, as I mentioned earlier.  I spent much of my time on reading the program documentations to resolve the first task.  I was looking in all the right places, but not thinking out of the box.  I guess that can happen when you stare and think of the same problem for to long.  A professor once told me “even Einstein needed a break”.  The good thing from looking over so much of the documents was learning more of the internal functionality for the program.  This teaches me a lesson though, not to slack off or take a simple task so lightly, and to take a break when needed. 

My code for task one:


import java.math.BigInteger;
import javax.xml.datatype.XMLGregorianCalendar;
import org.hackystat.sensorbase.client.SensorBaseClient;
import org.hackystat.sensorbase.resource.projects.jaxb.ProjectSummary;
import org.hackystat.sensorbase.resource.sensordata.jaxb.SensorDataIndex;
import org.hackystat.sensorshell.SensorShellProperties;
import org.hackystat.utilities.tstamp.Tstamp;

/**
* This class will retrieve data instances from the hackystat server for everyday in the month of
* November 2008. Also will retrieve the total of data instances for Feburary 2009.
*
* @author robin
*/
public class DailySDI {

public static void main (String[] args) throws Exception{

String host = "http://dasha.ics.hawaii.edu:9876/sensorbase";

// get user info
SensorShellProperties properties = new SensorShellProperties();
String user = properties.getSensorBaseUser();
String password = properties.getSensorBasePassword();

SensorBaseClient client = new SensorBaseClient(host, user, password);
String project = "Default";

System.out.println("===Data for November 2008===");

for (int i = 1; i < 31; i++) {

// Set start and end time stamp for november
String startTime = "2008-11-0" + i +"T00:00:00.000-10:00";
String endTime = "2008-11-0" + i +"T24:00:00.000-10:00";
XMLGregorianCalendar start = Tstamp.makeTimestamp(startTime);
XMLGregorianCalendar end = Tstamp.makeTimestamp(endTime);

// Retrieve data instances from hacky stat for specific days
ProjectSummary summaryNov = client.getProjectSummary(user, project, start, end);
BigInteger totalNov = summaryNov.getSensorDataSummaries().getNumInstances();
String dateAndTotal = String.format("%s/%s: %s", summaryNov.getStartTime().getMonth(),
summaryNov.getStartTime().getDay(), totalNov);
System.out.println(dateAndTotal);
}

// set start and end for feburary
XMLGregorianCalendar febStart = Tstamp.makeTimestamp("2009-02-01T00:00:00.000-10:00");
XMLGregorianCalendar febEnd = Tstamp.makeTimestamp();

// get sensor data for feburary
SensorDataIndex febData = client.getProjectSensorData(user, project, febStart, febEnd);
int febDataSize = febData.getSensorDataRef().size();
System.out.println("Feburary 2009 Data Sensors: " + febDataSize);
}
}



ICS 499: Learning the Yahoo User Interface

In my efforts to improve the web user interface for the Devcathlon, I have spent an extra amount of time on researching the use of Java Script.  There are a number of things I want to implement onto the user interface; but as a novice in web scripting, I will have to take small steps.  As I mentioned in my last blog, I have been researching on inserting a progress bar and a pop up box (Yahoo UI tooltip).

Have you seen my Tooltip

After downloading the YUI package from Yahoo, I realized I was in for a long ride.  The package was filled with a lot of useful and complicated things.  So as I searched for an example of the tooltip, that’s located in the container folder and apart of the container class.  It was fairly simple to understand what was going on; basically when the mouse is hovered over a specific item on a page, a pop up box will appear with text inside.  There is a simple HTML attribute that will do this as well, the “alt” attribute.  Unlike the “alt” attribute, what the YUI tooltip with the Java Script does is; the programmer can not only set the inside text, but also set how long the pop up box will appear and disappear. 

Also the inside text messages can be set by a Java Script function, where it becomes more dynamic.  One way I saw the dynamic text messages was at my work place, Star Degree’s website.  Setting the pop up box with dynamic text messages gets more complicated.  The programmer would have the Java Script function access a database with all the information; this is where AJAX and Java Script inter twines with each other.  Another cool thing with the YUI tooltip was setting some CSS to make the pop up box to your liking. 

 

 

This tooltip has round corners, this was possible by manipulating the CSS and adding in the corners into the CSS folder. 

Finding a progress bar

Another improvement to the Devcathlon user interface I researched on was a progress bar.  When I Googled some examples of a progress bar, the results given was not what I wanted.  Many of the examples showed a download progress bar, but what I wanted was actually a page loading image.  An image that would appear when an action was made, like after pressing a link, then disappear when the page for that link was done loading. 

 

After hours of researching, I found that YUI also has this feature; but was called a loading panel, also apart of the container class. The loading panel not only shows the animated loading image, but also grays out the web page.  When I was done looking at the YUI loading panel example and narrowing down what was needed, I proceeded to implement my own version.  After many attempts to have a web page load just like the example did, nothing worked.  I then assumed that the web page that uses the loading panel must be on an online server.  My assumptions were correct, I test this by loading a web page onto my works server and everything worked. 

 

Conclusion

I realized after researching these two web page improvements was not easy at all.  A good thing I found was the Yahoo UI has many great features to use for a website, and a good API to make researching easy.  Also a lot of the hard Java Script is pre-written; a programmer can also add in new Java Script functions to work with the YUI.  In an effort to possibly write and understand, Java Script and YUI; I have obtained a copy of these two books “Learning the Yahoo User Interface” and “Head First JavaScript”.  Both books were highly recommended by one of the web programmers from my work.  

ICS 499: Taking my first step into Java Script

In my ICS 414 class, I will be participating in developing a game called Devcathlon.  The Devcathlon is a game that will help programmers gain good programming habits, by the help of the hackystat system.  The hackystat system uses sensors, which are installed into the programmers system, to follow what the programmer does.  So, also for this semester, I am taking ICS 499, which is an independent study course.  I will be using the Devcathlon game as a guide for my 499 course. 

 Learning to Walk

During the first and second development stage of the Devcathlon game, the class has been working on creating a web user interface.  So far the interface was fairly simply, the class mainly worked on creating possible event and concepts for the game and not really focusing on the look of the interface.  As a part of my 499 class, I chose to help “beef up” the interface. 

 

At first I looked at what everyone contributed to creating pages, so far the only thing that made it look really good was the tab drop down menus.  So as I observed, I thought of adding in a collapse and expand feature.  Initially having only a little knowledge in web programming, I only knew a few html tags, this task seemed difficult.  I researched on the internet on how to implement this new feature, and the results I got was to learn Java Script.  After reading through the w3scools tutorial website, I had a better understanding on what the code meant and did. 

 

I continued on my search for this new feature, this time with some java script knowledge. In which I found a good example in a forum, called webmasterworld.  In here I found what I needed to implement the collapse and expand feature.  After tracing the coded the forum provided and a few foul ups, with inserting the code into the Devcathlon pages, the feature finally worked. 

Web page when not expanded

When expanded.

Conclusion

During my research for this feature I found a very useful tool, called firebug.  Firebug is an add-on to the Firefox web browser, and helps web developers trace the code in a section of any website.  This tool will be very useful to find the next feature I will be looking to implement into the Devcathlon pages.  My next feature will be either one or both; an on load progress window or bar, and using Yahoo’s user interface widget tooltip feature.

Recommending a Mockup

After reviewing the three devcathlon user interface mockups from team 4, team 5 and team 6, I would recommend using all three mockups.  Actually a combination of all three mockups all had a key feature that would complement each other.  An example of a combination can be; using the expand and the collapse feature from team 6, with the match details used in team 5.  Also the level system from team 6 can be used as the games level system. 

Out with the old

Once these three teams can combine the key features from each, they can work on removing things.  One part that they can remove is the home page section; after logging into the game, the user should just proceed to his profile.  Also having the capability of receiving mail through devcathlon, just have a section where you can write mail.  Then the mail would be received at the user’s registered email address.  It would lighten the programming burden and lessen the user’s trouble of having another mail box to check. 

In with the new

When all the unnecessary parts have been removed, the team might want to add in some new features.  Possibly taking advantage of the Yahoo’s user interface widget’s tooltip, with this feature added in pop up containers can hold dynamic information for images, links, or even text.  Also another thing that the developers may want to incorporate into the interface is the use of some Ajax.  With more white spaces becoming available; Ajax can be used by having a new page load within a current page, making it more dynamic.  An example the dynamic page and tooltip feature can be seen at Dynamic Drive DHTML Scripts. 

     

Example of dynamic pages.

 A small additional feature that could be included is the ability to open a new window when a certain link is clicked.  For instance a user browses a team’s project list and sees a project that’s appealing.  When the link for that project is clicked, it shouldn’t take the user away from the devcathlon site; but simply open a new window to the project page, possibly a Google project page.  This can be done by easily using this hyper link line, “target="_blank">Link text here”.

 

Having the new features of a dynamic page and a tooltip with dynamic context, will making traveling around the site less annoying; having the user not have to keep clicking back to previous pages.  Also with a new window or tab opening for outside links, the user can explore outside of the devcathlon site, but still be inside.  The new additions will highly reduce back tracking, also make the site more professional and presentable. 

Recommendation

My recommendation, though all the teams did an awesome job in their mockups, but I would have to go with Team 4.  Not on any bias feelings, but because it would be less code to import into this mockup.  The expand and collapse feature requires a lot of coding, rather than tracing and pasting hug chunks of code into another mockup.  I really can’t wait to see how the site will look after its combined and cleaned up, hopefully with the new features I mentioned.  

Mockup 4 Review

I will be continuing with reviewing the different mockups built for the devcathlon game.  For my final devcathlon mockup review, I will be looking at the team of Anthony Du, John Ly, and Robin Raqueno. 

  

After signing into the mockup site, I was first taken to the user’s home page.  Not much difference in this page in contrast to the other two teams I previously reviewed.  So I then proceeded to the next option on the top tab menu, the user’s profile page.  Even though this page has a different lay out, it contained similar links like the home page did.  I’m presuming that in the next mockup version, they will eliminate the home page and just have the profile page be the page displayed once the user logs onto the site. 

  

The further I went into the site; I realize that it had the some similarities to the other two team mockups, team 5 and team 6.  The logical structure remained the same, along with the lay out of the pages.  The lay out of the pages took advantage of using as much of the empty white spaces to add more items into the page. 

  

One new feature I saw from this mockup was the collapse and expanding of parts of the page.  With the ability to expand and collapse the pages, you can fit more items onto the page with out having it increase in size initially.  Although I it was a good idea to implement this new feature, I did see some draw back.  In the “my team page”, there was no reference to having the ability to expand the page; unlike the other two pages, my profile and my matches pages, with this ability.  The developer should have included possibly an arrow or a “show/hide” option.  Other than that small draw back, this new feature was very good. 

  

The ranking system was somewhat amusing, yet socially offensive.  The ranking page was just an image, unlike the other two groups; it was not organized like a list.  The achievement badges page was structurally like the other two groups, but with less content to look at.  Also none of the input fields work, but that’s understandable; since this is just a user interface mockup. 

 

 Conclusion

Everything for this mockup looked good; some parts were different from the other two groups.  In a match page, they added in a section called the Most Valuable Programmer.  With this section, users and viewers can see who the MVP of the entire match was; which again would bring out some spirit of competition, other users wanting that kind of recognition.  Also because of the collapse and expand feature, the pages seemed compress; creating more empty places to add more things.  Over all this mockup is looks really nice, with the good use of css and adding in new graphics.  

Mockup 6 Review

Continuing the review of the mockups for the Devcathlon, just like my previous blog, this time I will be reviewing the mockup from team 6.  The members of team 6 are Philip Lau, Dan Arakaki, and John Ancheta.  This team created two different versions of the mockups; one being taking the original mockups route and the other was incorporating the devcathlon game within the hackystat website.  For this review, I will be critiquing both versions of the mockup.

In their original mockup path, there was also not much difference with the layout of the pages compared to the previous mockup; although they did a good job of integrating the css, cascading style sheet, with the pages.  They did not waste any of the white spaces, aligning things horizontally.  Navigating through the site was not difficult also; it did not take to many clicks of the mouse to travel around the site. 

The sites logical structure seems to be well laid out.  All links leading to pages that they integrated into the site worked fine; but a link, in the profile page, directing to the achievement badges page bugged me.  There was a link for going to the list of badges, but just to keep in uniformity, comparing it to the link leading to the level page.  The team should have incorporated on the badge images; just like the image of the level displayed. 

 

There was one tab option that caught my eye, the game master tab.  As I proceeded to enter that page; my first that was, “Is this option only available to website administrator or can any user be a game master?”  As I thought to myself of a user becoming a game master, another thought entered.  What if the user that’s a game master decides to cheat and award people in his team badges, having them level up faster?  I guess these are questions the developers of the game must discuss.  Though, I would presume that there would be a set system for the distribution of levels and achievement badges.  That way no favoritism would affect the game. 

Proceeding to their next version, the one embedded into the hackystat site.  I can see they spent more of their development time with this version.  They took a whole different path to the advancement of the devcathlon game.  Instead of having a second top menu tab for devcathlon, they built-in a side panel, with some of the same options from the original.  Even though the pages did not look the same as their other mockup version, it did show a new lay out for the pages.  With this new lay out, it gave the whole class a preview of “What if we built the devcathlon game as an add-on to hackystat”. 

 

 Conclusion

I like the idea that this team brought to the class, giving us another version of the mockup.  Also the idea they used for the leveling system, basically they used the military ranking system.  Another part that I liked was the use of a slide bar, but they should have implemented an input box next to it.  That way the user can not only see the value the side bar distributing, but also for the user to enter a numeric input for precision.  In all, to me, this team did very well in creating two versions of a mockup, also in utilizing Yahoo’s user interface widget.  

Mockup 5 Review

This week the class was given the difficult task of critiquing the mockups of the Devcathlon game the other teams created, along with my team’s mockup as well.  I will be looking at mockup 5; the team consists of Aric West, John Zhou, and Scheller Sanchez. 

 

When I first entered their mockup site, opening into the homepage, there was not so much different from the previous mockup done earlier in the semester.  It was the same page layout when a user first enters; having all the functions in the opening page, after signing in.  The logical structure of the site was also the same as before, all pages leading to where they were linked to previously. 

 

Proceeding to the profile page, I initially noticed that the team did not utilize the use of css, cascading style sheet, in organizing the layout of the page.  The tables of the page lead downward, which increase the size of the page.  Having the page gain in size, would force the user to scroll up and down to view the information in the page.  They left a lot of unused white spaces to the right of the profile page.  With the using css they could have brought table that were at the bottom, up to occupy the unused white spaces. 

 

 

Looking at the page consistency, it looks like the layout is constant.  All items implemented into the page, aligns to the left of the page; but again it increases or may increase the size of the page.  Another consistency problem I saw was linking the list of achievement badges page.  Nothing was wrong with the linking, but they only had one link.  This link was located at the top of the page, on the drop down menu bar of the page.  They could also link the achievement badges page to the profile page, having a hyper link when a user clicks on a badge image.  Also when I went to another page, at the top drop down menu, the link for the achievement badge page was gone. 

 

One idea I find difficult to comprehend was in the profile page.  In the section next to the user’s picture, there are two labels, rank and level.  What does rank or level reflect?  Does rank indicate the progress of the user in the game?  Or does it reflect on the user’s progress compared to his team, possibly making him the highest rank; thus, making him the leader of the team.  This could lead to some level of confusion to users when wanting to know their advancement in the game. 

 

 

The one thing I found very well thought out about this mockup was the idea of comparing badges to another user.  When the current user browses to another user’s page, the current user has the ability to compare his or her badges to that other user.  To me, this would bring more competition spirit to the game.  After all what’s a game with out a challenge.  Another part I found good about this mockup, was having a progress bar in the list of achievements.  This would help a user keep track on how much more points needed to achieve a certain badge. 

 

Conclusion

The mockup from team 5 didn’t have too many differences from an earlier mockup developed by team 2; though, team 5 did add new ideas to the mockup.  To me this team didn’t take to much time to readjust the layout, but to mainly think of new ideas for the game; the level system, badges, and events.  I did not expect any “wow” type of new interface, since none of the programmers from the team are web developers; but I did expect new ideas for the game.  I feel that this team brought some good new ideas to the game and especially a new way of encouraging the spirit of competition for the game.

The Evolution of the Devcathlon

This week we continue with the further development of the Devcathlon. The class was again split into groups, but this time each person will be working with someone new; other than a person from their previous group, during the initial development stage. The new members of my group, Mockup 4, are John Ly and Anthony Du. For this part of the development, all groups were charged with creating three new badges, three new events, and at least three new levels.

Finding a Level System

Creating a level system was fairly hard; we wanted to do something original and not to copy other games. For one moment I thought of using an anime called Naruto and its ninja ranking system, but like I said earlier we wanted something original.

So after putting the idea off for a few days, jokingly I blurted out, “How about the evolution of man”. Apparently the guys liked the idea and decided to go with it, John who was in charge of developing that page, found an awesome image that depicted what we all thought, with some humor….

Knitting a Badge

Next we brainstormed with the badges, this part was even tougher. At first there was some mixed communications with using the term badges and achievements among us three; but we cleared it out by declaring that a badge is an achievement, like how a trophy/badge will show that achievement. Also another thing that was puzzling us was how to increase levels. Sure enough after Anthony and I, explained to John that a person can gain leveling points by receiving badges.

Once the confusion was out of the way, we then thought if a person and a team receive a badge or just a person. After a long discussion we decided that just a person may receive a badge. So now we had to think of ways for a person to get one. We all threw out option for a person win a badge, like for winning the match for his team or for a person to have builds that never failed. We then took some of our earlier ideas and developed them further. Such as, the idea of a person with builds that never failed, but the user must have 25 consecutive commits without breaking the builds in order to receive a badge. Later the ideas for the other two badges easily came. One of the badges is for winning your first match and the other is for gaining the most points in a match, in which you receive the Most Valuable Player badge.

Finding the Main Event

Lastly, the 3 new events, was really hard; because, our professor had already made a list of events that will be in the Devcathlon. We contemplated really long and hard for this one topic. We came up with some ideas, but nothing was sticking down. So why not come up with an event that may lose points for the team instead. So we generated an event called “Falling Coverage”; which is, if the team does not meet a decided minimum coverage then the team will lose points from winning. Also vice versa for the “Falling Coverage”, an “Increase in Coverage”; but the team must maintain that increase with out falling for a certain period of time.

Apart from creating new events and such, we further developed the web user interface of the Devcathlon. We redesigned some of the existing pages, such as the user’s profile page. Also we added a really cool feature into all our respected pages, the ability for sections of the page to expand and collapse. With adding in the new page functionality, we maybe able to combine web pages; to reduce the user from having to navigate from one page to another.

Conclusion

This part of the advancement to the Devcathlon game was fairly rough on my team. Coming up with new ideas for events, levels, and badges was really hard, plus we spent more of our time redesigning the web user interface to the game. We also tried to meet as often, but with members of the team taking other class, also having the Super Bowl and the B.J. Penn fight all right smack in the middle of the development period. Lastly I see why a project has different development teams, but all working towards the same goal of making the product work. Well so far so good with the evolution of the Devcathlon, I can’t wait to see what new ideas the other teams came up with.