HeaderSIS.jpg

Maxco Final Wiki

From IS480
Jump to navigation Jump to search

Project Progress Summary

Since the day of our mid-term presentation, the team has had a strong healthy dose of high expectations and pressure to perform from both the faculty and ourselves. The mid-term review served to highlight the team's various strengths and weaknesses, and allowed us to receive opinions of our project from people who had not seen it before. All the valuable feedback was of great importance to our team in coming up with a new game plan for the second half of the IS480 term. The content in this page will document the improvements made, our project highlights and acheivements, and difficulties faced since the mid-term review.

Project Highlights:

In this section our team will highlight the interesting parts of the project that have changed or that have been added since the time of the mid-term review.

B1G1 World Application

After the Midterm, we improved the usability of the application, and at the same time added two additional functions.

Enhanced view of how entities are displayed. As compared to the midterm, it is now more visually appealing and users are now able to view entities by type.


















Another existing function, showing the leverage network of users is also updated. Now, the colored shapes are replaced by icons which better represent different user types and project category. Also, users can go to the location of the Business That Give or Worthy Cause Project on the map. Another feature is that double clicking on a node will focus the graph on it.

More features enabled. Looks better visually as well.
















Search
This is one of the newly added function of the application. The search function enables user to look for their company by typing their company name, or any keyword, which will generate any related Businesses That Give, Worthy Cause Projects or Worthy Cause Partners in a force directed graph. Users can also choose to search for one entity only too.

Search Function



























I Recommend!
The I Recommend! idea arise one day when we were having lunch at a food court, Kopitiam opposite the school. We felt that it would be great if the Kopitiam that we patronize almost everyday is part of B1G1. Then whenever we make a spending there, we would be also be helping the needy.

Users are able to browse through the recommendations that were made by others, and the top 3 recommendation is displayed. If an user finds a recommendation made by others that he also want to recommend, he can click on it to recommend. Otherwise, he also can add a business that he thinks that would do B1G1 good.

I Recommend!




















B1G1 World Facebook Application


Since the midterm review, the layout and user interface of the Facebook Application has improved to become a lot more user friendly and intuitive. Other functions that we added include:

  • Deriving the number of Facebook "Like" and "Share" of each Worthy Cause Project to gauge their popularity
  • Search and filter function for the various B1G1 Worthy Cause Projects has been improved to retain the search values for more user-friendly searches.
The B1G1 World Facebook Application Main Page
We bet you didn't know!: Shows interesting fun facts about giving.







































B1G1 World Widget


The concept of the widget used to be long and rectangular, displaying the giving information of a user on top of the map that is showing the user's location.

Widget Before
Widget is customized depending on the Business That Gives member. It will display the direct giving impact information
The Generic Widget displays random facts about giving impacts. Similarly, ysers can also retrieved the embed codes like the Customized Widget‎












After the midterm, the entire concept and physical appearance of the widget is changed, and it does not show the locational representation of the Business That Gives on the map. And what's more, is that now we have TWO instead on one widget!

  • Generic Widget for non-BTG's and the general public to embed on their sites to spread the word about giving
















  • Customized Widget for BTG's to embed on their company's site to make known their giving efforts

















B1G1 World Administration Application

This is a new initiative after the midterm review. As we were creating the different products under the B1G1 suite, we felt that we should also add another that would give our clients control to change the content, without having to go through the codes. The administrative module gives administrators control over our B1G1 World Application, Facebook page and Widget. We aim to provide B1G1 administrators convenience with this module. It has mainly 3 functions:

Manage Geocodes

Sometimes the addresses of the Businesses That Give, Worthy Cause Projects or Worthy Cause Partners might be incomplete or cannot be geocoded. Hence, this administrative module would give B1G1 administrator the ability to correct the address by re-entering or pointing it out on the map.





























Manage Recommendations

Recommendations made by users are useful data such that B1G1 Administrator are able to keep track of the highly recommended businesses and send invitations based on the recommendations to invite the business to join B1G1.




























Manage Did You Know

The information shown via the "Did you know?" function on the B1G1 World Facebook and the Generic Widget could be controlled by B1G1 Administrators. They can choose to enable or disable specific facts with the help of the administrative module.




























Project Challenges

B1G1 World

B1G1 World Application - Cluttering of markers
Before and after effect of cluttering solution
What happens when a user clicks a merged marker


The first challenge our team met was the cluttering issue. Many of our markers on the map was overlapping each other in a specific area as shown (Left of screenshot above). Luckily for us, with help from our client and supervisor, we managed to be able to solve this challenge by implementing the Haversine formula to calculate the distance between each markers in pixels. If they were too close to each other in terms of pixels, they would be grouped together. And as you can see on the right of the screenshot above (Left screenshot above), we have grouped everything to one single marker. And by clicking on this marker, the system will display all the different information in that marker as shown on the screenshot above(Right screenshot above). With this solution in place, the challenge was resolved. It was a big milestone for us because it was through this challenge that brought the whole team together after a lot of struggles looking for an appropriate solution.

B1G1 World Application - Use of Flare, a 3rd party library
Evolution of the Force Directed Leverage Graph















The use of Flare, a 3rd party library presented various kind of challenges to us. The purpose of using Flare was to create a Force Directed Leverage Graph to display the network of invites and leverage giving impact that a particular Business That Gives has. The screenshot above shows the evolution of the graph. From a plain looking graph for demonstration, to a working leverage graph (middle), to a final glorified version with meaningful icons. This was all possible only through editing the API of that Flare provides. This was a major challenge to us because we weren't very familiar with Actionscript. With a lot of time spent on reading and modifying the API, determination that this is possible and help from our supervisor, we were able to edit the API successfully and made the impossible possible.

B1G1 World Facebook Application

B1G1 World Facebook Application - Facebook API & Meta-tags
Ever-changing Facebook API





A major challenge for Facebook was that the API for Facebook was ever changing. Even though after understand the Facebook API after spending a lot of time digesting it, the fact that the API kept changing every now and then was a problem for us. Other than that, the way how Facebook reads the meta-tags of a particular PHP file is also another challenge that we faced. We weren't able to dynamically display the names of the projects when displaying it on Facebook. After much research on the internet, we found a way to overcome this and it was to do a mod-rewrite on the page so that the meta-tags could be display dynamically.

B1G1 World Administration Application

B1G1 World Administration Application - AJAX & Reverse Geocoding
Multiple AJAX on a single PHP page
Reverse geocoding done with Google Maps

Multiple AJAX was used on a single PHP page for the Administration Application we had done as shown on the screenshot on the left. This proved to be a huge challenge for us because none of our team members had prior experience with AJAX. We had to spend time studying and understand how AJAX works before we were able to leverage what AJAX offers onto the Administration Application that we had. However when we included Google Map into the page to give the Administrator a better tool to edit the geocodes of the different entities in B1G1, another problem surfaced. As Google Map was also using AJAX, there was now more AJAX script than before. More importantly, the AJAX scripts were conflicting with each other. With sheer determination, our team was finally able to resolve all the conflicts.




Others

Others - Managing Our Schedule

It was hard for us to find a common time slot to meet because of the various time-tables that each member of the team had. In the end, we had to meet up on Sunday every week to have our weekly discussion and meeting session. A lot of commitment was required from each member of the team to manage our own individual schedule well.

Project Achievements:

  • Nominated for Best IS480 Project
  • Represented SMU for Youth Infocomm Day 2010 showcase
  • Eligible for Lien Awards

Project Management

Project Schedule (Plan Vs Actual):

Iterations Planned (2010) Actual (2010) Comments
4
Construction Phase 1
Filter: By Regions 4 Sept Filter: By Regions 5 Sept Debugging and Testing
Filter: Projects that the worthy cause member has 7 Sept Filter: Projects that the worthy cause member has 11 Sept Debugging and Testing
Filter: Members and Worthy Cause Member by Projects 9 Sept Filter: Members and Worthy Cause Member by Projects 10 Sept Debugging and Testing
Filter: Leverage of an individual member 9 Sept Filter: Leverage of an individual member 13 Sept Customizing Flare API for Custom Icons
Facebook Invite function 13 Sept Facebook Invite function 16 Sept Updating to new Facebook API
Facebook Share function 13 Sept Facebook Share function 16 Sept Updating to new Facebook API
Facebook Like function 4 Sept Facebook Like function 6 Sept Updating to new Facebook API
Causes Listing Page 15 Sept Causes Listing Page 16 Sept Revamping to new Facebook Layout after Mid term Review
Individual Cause Page 20 Sept Individual Cause Page 20 Sept On time
Wall post function 9 Sept Wall post function 9 Sept On time
Facebook Analytics - Retriving Number of Likes Cron Job 11 Sept Facebook Analytics - Retriving Number of Likes Cron Job 11 Sept On time
5
Construction Phase 2
Filter: Favorite Giving 1 Oct 2010 Module Dropped as functionality is incorporated into another Filter
B1G1 World Widget 8 Oct B1G1 World Customized Widget 11 Oct Renamed into Customized Widget
B1G1 World Generic Widget 11 Oct New module proposed by the team
Filter: Keyword Search 8 Oct Filter: Keyword Search 12 Oct Debugging and Testing
Recommendation Module 17 Oct Recommendation Module 17 Oct On time
Admin Module Login/Logout 11 Oct Admin Module Login/Logout 13 Oct Debugging and Testing
Admin Module Geocoding control panel 11 Oct Admin Module Geocoding control panel 13 Oct Debugging and Testing
Facebook Did You Know function 8 Oct Facebook Did You Know function 8 Oct On time
6
Transition Phase
Debugging 16 Nov Debugging 16 Nov On Time
Final Deployment (Live Server) 18 Nov Final Deployment(Live Server) 20 Nov Migration to Live Server from Development Server
Final Testing of Complete System 21 Nov Final Testing of Complete System 21 Nov On time
Prepare Presentation Slides 21 Nov Prepare Presentation Slides 22 Nov Adjustment to Slides after Comments
User Manual + Documentation 28 Nov User Manual + Documentation In Progress

Planned Vs Actual Schedule since Mid-Term Presentation

For a detailed break down of the project schedule comparison throughout the project cycle please download this excel file here. Concurrently, you can view the team and project weekly progress summary here recorded.

Schedule Comparison for Iteration 5



We decided to drop Filter : By Favorite Giving since it is incorporated into part of the function Filter: Business That Give. The widgets are broken into two part, with the Generic widget an additional deliverable that we thought could be value adding extra value to the company.







Schedule Comparison for Iteration 6





There were no significant changes on our Iteration 6.





Timeline Comparison after Mid-Term





Our schedule for Iteration 5 have to be adjusted to two days later as we encountered a number of bugs and issues during our deployment to the live server. Despite the 2 days delays, we still intend to finished our last iteration by 03 December, a day after our Poster day. We will use the last day of the iteration to pull everything together and put them in place before handling our project to our client.


Project Metrics

To have a better overview and measurement,through quantitative methods, we adopted Bug metric and Schedule metric to help us evaluate our project process. It is a good way for aligning measurements with business requirements and goals.

For a detailed explanation and how we go about calculating the Metrics, please visit the Metric section on our Team's main Wiki Page.

Bug Metric

Bugs Severity Points Recorded


Iteration 4 and 5 recorded the highest level of bugs because that was where the bulk of our functions got developed. Another reason could also be that we are constantly deploying the project files up to our client's server, thus explaining the issues that was recorded after our regress testing just before the end of the iteration. Throughout the project, our team had consistently managed to bring down the BSP to the acceptable level ( < 29 BSP) before proceeding to the next iteration.

Another point to note is Iteration 6 where we recorded 2 Bugs after the UAT Test. We will ensure that the 2 bugs escalated after the UAT Test 2 are solved before handling over the project to our clients.





Bugs Severity Points Recorded





















Schedule Metric

Schedule Performance Index Recorded


Our Schedule Performance Index have been fairly consistent throughout our Project cycle except for both Iteration 4 and Iteration 5. That could be explained by our initiative to deployed the working files up to our client's server and it was also where the bulk of our project's functions are being developed.

Furthermore,We encountered difficulties integrating our Facebook Application in different browsers due to its API updates. We also developed a new Generic Widget that create extra value for our client, thus explaining why our schedule encountered delays. Thankfully , the delays have not escalated to the stage where we have to make major revision to our planned schedule.

Schedule Performance Index Recorded


























Technical Complexity:

How best to leverage the best out of the different technologies used

It wasn't easy for us to achieve what we wanted. It was to obtain the "WOW!" and "SHARE" motivations that was decremental to our project. Even though we successfully combine Flash and Google Map into a single application, our team didn't just stop there. We went on to push ourselves to think of ways we could make our motivations possible with the technologies that we had. With much deliberation, we came up with a lot of the different modules and it just added on the technical complexity that our product had.

APIs

Our team studied and got ourselves familiar to all kinds of APIs out in the current market. From Google Map API, Facebook API, Actionscript, Flex Scripting Language to 3rd Party Library Flare, it was amazing how did our team manage to be able to understand and adapt to these new programming languages in just a short time of three months. We feel that we have push ourselves to a whole new frontier and we are now more comfortable whenever we need to use a new technology.

Understanding our client's database structure

Our Client, B1G1, is currently using Drupal as it's CMS. When we first had access to the database, we were lost. The amount of tables was astounding. On top of that, the relationships between each table wasn't made clear in any way to us. We had to really study and dissect the database structure to be able to retrieve the relevant information that we need.

Quality of product

Project Deliverables:

List the artifacts produced for this project. The entire deliverable can be submitted in a separate thumb drive, web repository or place in the IS480 team wiki.

Stage Specification Modules
Project Management Minutes Maxco Minutes
Bug Metric Bugs Tracking List | Bugs Metric
Schedule Metric Maxco Schedule Metric
Requirements Story cards Maxco Story Cards
Analysis Use case Use case Diagram
System Sequence Diagram client, server
Business Process Diagram Here
Screen Shots Maxco Screenshots
Design ER Diagram 1, 2, 3
Class Diagram 1, 2, 3
Handover Testing UAT 1 Test Plan UAT1 For B1G1 World | UAT1 For Facebook App
UAT 2 Test Plan UAT2 Admin Module | UAT2 B1G1 World Module | UAT2 Facebook App
Handover and Miscellaneous Manuals User tutorial, Developer manual, Setup manual
Presentation Slide Final Presentation Slides
Code client server
Deployment Diagram instructions

Not all parts of the deliverables are necessary but the evidence should be convincing of the scope.

Quality

We believe that the quality of our products are up to standard because of the modularized structure that we have approached developing solutions for the suite of B1G1 applications.

Technical Diagram - Overview

Overview Diagram

The diagram on the left shows a overview of the design of the whole suite of B1G1 World Applications. On the one hand, the B1G1 World Application and Widget are made possible using Flash and get access to the database through XML files created by custom-coded PHP files we have done to extract the relevant data from our client, B1G1's database. On the other hand, the B1G1 World Facebook Application and Administration Application is made possible using PHP. Both of these have direct access to the B1G1 database.


Technical Diagram - B1G1 World App & Widget

How it works? - B1G1 World Application & Widget

The diagram on the right shows the technical overview diagram of the B1G1 World Application and Widget. With a modular design planned right from the start, the B1G1 World Widget reuses a lot of the modules that was created for the B1G1 World Application. Some of these modules are the Event Actionscript Classes which supports custom events, Datacontroller.as which acts as the interface which interacts with the database, and also the ItemDisplayModule.mxml Flex class which handles all the flashy animations and tweening found in both the B1G1 World Application and Widget. This helps us as we can focus more on refining the codes rather than building things from scratch again.


Technical Diagram - B1G1 World Facebook & Admin

How it works? - B1G1 World Facebook & Administration Application

The diagram on the left shows the technical overview diagram of the B1G1 World Facebook and Administration Application. A Database.php file is commonly shared across both applications. This is the file that provides the access to the B1G1 database. The difference between the set of files in the Facebook and Administration Applications is that one of them communicates with the Facebook API and the other with Google Map API. Other than this, another PHP file, Geocode.php is also modularized because it is used by the B1G1 giving engine and also the admin module which reduces our time spent on creating duplicate versions of codes that does the same thing and this in turn gives us more time to refine our codes to maximize the efficiency of codes that we have developed.






Deployment:

In an iterative approach, ready to use system should be available (deployed) for client and instructions to access the system described here (user name). If necessary, provide a deployment diagram link.

Testing:

Describe the testing done on your system. For example, the number of UAT, tester profile, test cases, survey results, issue tracker, bug reports, etc.

  • User Acceptance Test 1 & 2

The 2 User Acceptence Tests carried out over the course of this project served the main purpose of ensuring that all functionalities and requirements of our product were met with. They served the purpose of having our project get tested in a fixed and standardized way, with an impartiality that would not skew the results in any direction. Testers consisted of our client, as well as friends and schoolmates who had no prior knowledge of what our project was about. They were made to follow specific steps, and there were only pass or fail results that made it very clear to us whether all functionalities were working as they should. Testers were provided with the expected results of each functionality test, and in the event of a test failure, they were made to fill in the actual results to assist us in the problem identifying process. There were a total of 2 UAT's carried out - UAT 1 before the mid-term review and UAT 2 before the final review. Please note that there were changes made to UAT 2 to accommodate all the changes and improvements made to our project since the mid-term review. Our UAT test documents can be found above for an idea of how our testing was carried out.

  • Heuristic Evaluation

From the time of our mid-term review, our team has been making an active effort to conduct vigorous heuristic tests to ascertain that our product would be of the finest standards when finally launched. As our own testers, we consciously put ourselves in the shoes of detached users to try to spot bugs and errors, as well as identify usability issues that potentially needed attention. In addition to that, we also invited our supportive clients to assist us in taking part in the heuristic evaluations, and from their results and valuable feedback, the team was able to consistently improve on all aspects of the project progressively in a steady and well planned out fashion. These heuristic evaluations, carried out by both us and our clients, took place once every fortnight, and played an important role in giving our entire project the final look and feel it now possesses.

Reflection

Compile common lessons and reflection for the team and for each team member. Be brief.

Team Reflection:

As a team, we have definitely come a long way in this IS480 journey. With the consistent betterment of this project being the driving force, opportunities abounded for all of us to grow both as better IS professionals, as well as smarter team players. As our project requirements and scope changed as the time went past, and as our schedules became more and more packed as the semester flew by, we were forced to plan far ahead for our many meetings and self-imposed deadlines,many times forfeiting weekends and the time that could have been spent on other modules or pursuits for this project. Also, taking no less than 4CU's in addition to this FYP proved to be a major concern for all of us, but with the benefit of hindsight, we must say that this has definitely played a big part in us becoming better managers of our time. As a team, we have come to understand each of our strengths and weaknesses better and became more competent at work delegation and also with dealing with one another. The importance of the work-friendship balance also became very apparent as we all tried to maintain good relations within the team, all while not compromising on the quality of our work. Team MaxCo, as a team, and as a group of six very different individuals, have all gained invaluable experience from this very trying, albeit rewarding IS480 endeavour, and hope to bring what we have learnt wherever we go in the future.

Key lessons learned – indicating where the team improved, or would do things differently next time. You may refer to the learning outcome summary in your proposal. A very short checklist style will suffice. It would be very convincing if the knowledge is share at the wiki knowledge base and linked here.

KhangWei Reflection:

Khang Wei

Describe in a paragraph, the key areas of learning or improvement. These should be personal areas of growth or learning. Each individual should list his/her effort, responsibility, actual contributions and personal reflection. Do not repeat team project contributions or member roles. Link if necessary.








Robin Reflection:

Robin Cher

From being on the brink of getting our project dropped before the project acceptance to developing an application that exceed what we expected, it got to be a dramatic yet fulfilling and exciting experience for me. I was exposed to many new technologies(Facebook API, Flex, Actionscript etc)that are not taught in School , which was a challenge to me as i have to juggle my time in learning new things while maintaining my focus on other modules. As i have no prior experience in working with these technologies, i experience much difficulties during the development of the B1G1 Widget. Thankfully, my team mates have been supportive and guided me along by offering me the relevant technical advice. One of the other takeaways is also learning how to manage expectations from everyone, promising what i am able to deliver but also not over-promising what i could do. The feeling of satisfaction and accomplishment after completing the entire application will always fondly be remembered for the rest of my learning journey in life. Lastly, from this project, i firmly believe that only through challenges and stretching to each's limits for this project, then i can truly be more competent technically and also improving my soft skills.










Stephanie's Reflection:

Stephanie Yeo

The entire journey of doing this IS480 project is indeed amazing. From nothing at all other than the objectives given from our client, we were able to come out with the entire suite of B1G1 Applications, I have learnt a lot, in terms of programming, project management. My main role while working on this project is to develop the force directed graph to show the leverage giving impact, and search. It was challenging, first from trying to adapt the force directed graph on Visuwords, then to looking for other alternatives when the graph on Visuwords could not be adapted. And when I finally found the open source flash library: Flare, quite alot of time was spent on understanding the API. Besides, I was not well versed in Flash Actionscript, and that gave me a steep learning curve. Creating the XML file using php was a feat too. I am proud to say that after this, I have grasped quite a great deal on Flash Actionscipt and I am confident with putting this to use in future projects. Lastly, I will not forget the friendship that I have forged with my wonderful team mates.



Shawn Reflection:

Shawn Fong










Jinchuan Reflection:

Guo Jinchuan


My entire experience of IS480 has been a wonderful journey. In this few months, I learnt new technical skills such as working with Facebook API, JavaScript, PHP, CSS, and HTML. As I was in charge of developing test cases and facilitating the conduct of both our UAT with our clients and friends, I see the important of developing user-friendly user interface. With assistance from our client and professor, I redesigned our Facebook app to its current design. On top of these technical and design skills, I have improved my project manage skills and learnt to better manage my time and workload. With commitments from other modules and CCA, I had to plan my schedule wisely, prioritise, and push back tasks that were less significant. On the whole, I have thoroughly enjoyed every moments of IS480 because of my team mates. We are all very focus and our strongest motivation factor is that we strongly believe in the project that we are doing and the value that it would create while making a difference to our society.


Benjamin Reflection:

Benjamin Woon

This entire IS480 journey has been a long one, and it has proved to be both a challenging and enjoyable experience for me. There was a lot of work was involved in the learning of new technologies (Facebook API, Flex, Actionscript etc) and many sleepless nights accompanied the positive progression of this project, but in hindsight, everything served the higher purpose of increasing my expertise in a particular area and in expanding my skillset. I learnt to treat my time with much more importance than i had in the past, and this has served to change my perspective in the way i spend my time and how i plan out my activities. I now set better and more realistic goals instead of over-promising, and this has also served to allow me to better set expectations for myself when attempting something new. Last but not least, the feeling of satisfaction after completing the the entire project will not be soon forgotten, and it will definitely motivate me to attempt more challenging projects in the future.


"Maxco team has dramatically transformed our thinking of what's possible. Their focus, passion, talent, determination, diligence, flexibility and great team work inspired us and encouraged us to think even bigger. Now, this wonderful addition to our system makes what we do so much more engaging and dynamic. We are thrilled to be able to share this amazing interactive tool with many others so that we can make a greater difference together."

Masami Sato











Masami Sato
Founder
Buy1GIVE1 - B1G1®

B1G1 logo medium.png



Changing our world one transaction at a time

Ending Credits

“Creating the B1G1 World Suite has come to mean so much more to us than just a project.
We see it as an instrument that can be used to change the lives of millions of people around the world,
And to leave an everlasting impact on the neglected underprivileged society.
Thank you to everyone who has been there for us in a way or another."

~ Team Maxco (AY2010, Term 1)

Team Maxo - Final Presentation (AY2010, Term 1)