Chap Research Outreach Management Application

The Chap Research Outreach Management Application (CROMA) is a web-based organization and management system for outreach events and data. Designed specifically for FIRST robotics teams, CROMA is divided into four main categories of: users, teams, outreach, and media. This organized structure and documentation allows teams to better participate in outreach, reach out to their communities, and share their work with other teams.

Project Lead: Philip Liu

Date Completed: In Progress!
Link to Code: GitHub Repository

    • Software
      • Web Programming
        • HTML
        • PHP
        • CSS
        • Javascript


Inspiration and Planning

We began CROMA by organizing information into a project charter. The team began by creating use cases that emphasized and elaborated on specific functions of CROMA. This kept us focused, not allowing us to deviate from the main purposes of CROMA. There were three main use cases in the project charter. The first was allowing a user to track information for outreach events. This functionality fell hand in hand with our other major use cases: real time data collection and outreach planning.

Alpha One

This was an extremely early phase containing minimum features from our use cases which provided a basic idea of how CROMA would operate. We also used this phase to learn the majority of the skills necessary to complete CROMA, including mySQL database design, PHP code and Drupal integration.

  • Initial User Interface Design – The UI team sketched the user interface on paper to give us a rough idea of how the different pages and functions would connect. They proceeded to compose simple HTML pages to get an idea for how the website would come together, helping the rest of the team visualize the website electronically.
  • Initial Database Coding – The database team began learning both PHP and mySQL from scratch (which was a huge learning process). They developed the framework of data storage for CROMA, including tables for outreach, profiles, teams, media, hour counting, and notifications. After the creation of the major tables, the database team went on to create functions to call information from the tables.
  • Initial Drupal Integration – After both sub-teams completed their designated tasks, we got back together as a group to begin the integration of the database with the website. We used a web platform called Drupal to actually create the website with tabs, pages, and a functioning layout. We quickly had a working web application! This stage gave us a good idea of how everything would look and work, as well a huge list of features we wanted to add.

Alpha Two/Internal Beta Release

We completed the alpha two phase in February. Although we continued to debug from alpha one, we began to implement more features and improve functionality.

  • Alpha Two – New features were added such as creating notifications, displaying statistics, signing-up for events, managing team members, and creating a basic home page. The incoming media feature, directly from our use cases, was added. We modernized the user interface in order to make the user and team dashboards more user-friendly.
  • Internal Beta Release – As we prepared for the FIRST Robotics Challenge Alamo Regional in March, we continued debugging and improving. We needed to have most of our original use cases completed in order to market for the Alamo Regional. We created flyers and practiced an elevator pitch to gauge interest from teams at the event. We collected interested teams’ contact information at the Utah Regional and West Arizona Regional as well.

Internal Beta Two

Throughout the 2016 FRC competition season, we continued gauging interest about CROMA and gathering contact information. With the feedback we received from our internal beta test, we began improving functionalities, adding features, and changing aesthetics.

  • Functionality Improvements – We divided CROMA into four main categories: users, teams, outreach, and media. These categories (and the logo) became the new tabs for the header. Users with multiple teams now switched teams on individual blocks on the team dashboard and outreach tab. These pages were then dynamically updated based on the active team. We added a new footer containing information about our Terms of Service, EULA, Privacy Policy, and FAQs.
  • Feature Additions – The new outreach tab consisted of a table that displayed all outreach associated with the user. A basic search form (with the ability to search by name, status, and event date) was created. The new media tab displayed all the previously assigned media (to an outreach) by the user. The incoming media feature was also on this page. A new “settings” page for teams to create outreach tags and widgets was added. We added a “moderator page” that displayed all ideas and hours that awaited approval. A new help icon toggled bubbles describing the functionalities on most CROMA pages.
  • Aesthetic Changes – All tables, headers, and buttons became a uniform color. The dashboards were completely redesigned to create symmetry and a better user interface. Both view user/team were redesigned to minimize white space. Uploading pictures was now on a separate form. Icons were created to replace words on buttons, symbolize statuses, etc. The home-page was beautified with a new header, the total stats entered into CROMA, and an overview of functionalities.

Beta Release

For beta release, we had to balance our time between making improvements and preparing for beta testing. Throughout this time, we checked for consistency, testing permissions, and finding bugs.

  • Functionality Improvements – The outreach tab now defaulted to show all team outreach with a new search form able to search by type, people, location, and time. Multiple times could now be added to outreaches which displayed on the sign-up form. A new write-up form was created to allow users to document post-event information. The ability to manually add users to a team and the outreach directory widget added new team features. Users received new functionalities such as being able to change their password.
  • Aesthetic Changes – View outreach was re-designed to be cleaner and easier to read. This more modern approach was similar to view user/team. More icons were implemented throughout CROMA. The home- page was redesigned to include an “about” section. Messages in CROMA emails were updated.