# Deliverable 2 part 1 ###### tags: `CSC301` ## Iteration 1.0 * Start date: 11/4/2019 * End date: 11/10/2019 ## Process This markdown is created using HackMD, in order to read the complete version, please head to this [link](https://hackmd.io/@oL21t-1oQeOuBjnwadhgpw/HJl3G5Nir). It is also in markdown format, and it will display a better formatting and presentation. #### Roles & responsibilities ##### Front-end Developer (technical) * Design and implement User Interface (UI) through which the user interacts with the web-based app using frameworks, Javascript, HTML and CSS. * Ensure user-responsive experience and user-friendly display of content. ##### Back-end Developer (technical) * Design and implement RESTful APIs to handle search requests. * Implement methods to search SQL databases and wrap up the search results as JSON object using server-side language (Python). * Design SQL query to search single or multiple SQL Tables efficiently. * Ensure robust backend processing by handling and logging various errors. ##### Full-stack Developer (technical) * Work across front-end and back-end. * Ensure smooth link between search request and response. ##### Q&A Developer (technical) * Test page, methods and APIs for front and back end. * Give feedbacks to developers and help debug. * Ensure desired functionality and bug-free code. ##### Project Manager (non-technical) * Communicate with the user regularly to intake user feedback and requests as well as inform the user of project progress and technical implementation. * Notify the developers about the user requests and help to solve user concerns. * Ensure the project stays within the scope and satisfies the user’s needs. ##### Scrum Master (non-technical) * Organize regular team meetings. * Document the development process. * Build and maintain User Manual. * Ensure the team members stay focused and follow the agreed-upon rules. ##### Product Designer (across technical and non-technical) * Search the open-source resources and determine appropriate open source tools used by the project. * Supervise the front and back end development and give timely technical advice to the developers. * Help the project manager to use proper technical resources to implement the user’s requests. * Ensure to resolve issues between user’s demands and technical implementation. ##### Graphic Designer (non-technical) * Understanding the envision for our project. Use references from other [products](https://www1.specialolympicsontario.com/) of our partner to establish the overall look of the website. * Combine art and technology to communicate ideas through images and the layout of websites * Design the color scheme, user interactions, and styles for our project. --- ### Backend Team: >[name=Li Zhu] >**Role:** Back-end developer (technical) & Product Designer > >**Strength:** Experience with full-stack web development. > >**Weakness:** Not very good at Github workflow and have no experience with ReactJS that's used in the project. > >**Software Task:** Set up a virtual environment for the app development. Build up the back-end structure to make it robust and modualized (e.g., write error handler and modularize services of API, data and database). Design and implement some APIs to test back-end workflow and connection with the database. > >**Non-Software Task**: Document the process of setting up virtual environment and running the app. Review teammate's code and give them advice. >[name=Weitong Luo] >**Role:** Back-end Developer (technical) & Project Manager > >**Strengths:** I am familiar with multiple MVC methodology to develop back-end and CRUD queries' of SQL manipulation. > >**Weakness:** I am not strong in reactjs or designning stuff. > >**Software Task:** Generate dummy data for database because of late delivery from partner. Build helper functions to generate APIs. Building APIs. Improve the performance by not using JOINing table but normalizing tables to objects. > >**Non-Software Task:** Setup meetings and calls within the group and also with our partner. Manage and approve some of the PRs. > >[name=Caiquan Shi] >**Role:** Back-end Developer (technical) & Facilitator > >**Strengths:** I'm familiar with SQL language and using SQL in Python. > >**Weakness:** My weakness is that I am not that familiar with GitHub workflow and backend environment set > >**Software Task:** setup database for testing(partner was late to update database), implement the API and update the API structure(break large function into multiple helper functions). > >**Non-Software Task:** keep track of the material changes of the partner and communicate with teammates about those changes. ### Frontend Team: >[name=Ming Jin Lu] >**Role:** Front-end Developer (technical) & Graphic Designer > >**Strengths:** I am comfortable with using react, bootstrap, react-bootstrap and other react libraries. I can use this knowledge to develop a concise and easy to use UI for our Deliverable 2. > >**Weakness:** My weakness is on adapting to our Github workflow, I am not that familiar with multiple branches on a project. > >**Software Task:** Creating a dynamic react component for displaying game results, these game results can be from individual games or team based games. > >**Non-Software Task:** Using HackMD to take notes and document our meetings and decisions. Giving suggestions for component designs. >[name=Linyue Wu] >**Role:** Front-end Developer (technical) & Scrum Master > >**Strengths:** I am familiar with using react-bootstrap to develop front-end. I am used to take notes during meetings and documentation management. > >**Weakness:** I have little experience with SQL and have no knowledge of back-end structure. > >**Software Task:** Display all search results dynamically in a table and handle user's further search specification. > >**Non-Software Task:** Document group meetings and partner meetings to keep track of the project process. Share meeting notes and distribute tasks via github issues. >[name=Yangfan Li] >**Role:** Front-end Developer (technical) & Scrum Master > >**Strengths:** I have experience with react, nodeJS and HTTP request libraries. I am also familiar with github workflow. > >**Weakness:** My weakness is documentation management, UI design as well as communication with our partner. > >**Software Task:** Implement util functions for front-end to send out http request and process responses. > >**Non-Software Task:** Manage github repo including issues, PRs, branches to make sure team members are on the right development flow. Hold our scrum. >[name=Qi Zeng] >**Role:** Front-end Developer (technical) & Product Designer > >**Strengths:** I am comfortable with using JS, CSS and bootstrap to develop a fluent and user-friendly UI for our search page. > >**Weakness:** I do not have any experience with react. I am not familiar with github workflow or documentation management. > >**Soft Task:** Implement a dynamic react component for search UI, including the ability to filter game and team result, and pass the result to event page. > ## Team Rules **Communications:** Our expected communication frequency is at least three times a week. WeChat group is our main communication channel. Video calls will be made when we are in major project transition phases. When a member has made a significant change, or has found a significant problem on our project, it is his/her responsibility to update his/her process in our WeChat group. Each member is expected to read the group chat at least once a day to keep track of any updates or the project and meeting notifications. Members are expected to read our repository github issues for any updates. We will email our partner when it is needed to. If the problem cannot be addressed via email, we will arrange a video call that will fit into the partner’s schedule. If it is an emergent situation, we will have to call our partner. The partner has provided access to internal tools used by the partner for project management including Google Suites (A shared google drive), Office 365 and the partners project tracking should we require it. The partner has indicated that they are available to engage in standup meetings, and check-ins as required. **Meetings:** We will have weekly online meetings with our partner every Monday night at 8 pm. Weitong Luo is in charge of setting up our meetings with our Partner. During the meeting, we will use Zoom as the communication channel with our partner. For each meeting, Linyue Wu will start a new HackMD file to document meeting minutes. An absent member will have to explain to the Team in our WeChat group. Our group will meet at Bahen Center at 7:30pm and prepare for the meeting. Once the online partner meeting is over, we will have a 30-minute discussion about the meeting. Meeting Minutes will then be posted as a new Github Issue. Besides partner meetings, we will have coding sessions regularly on every Sunday afternoon. The specific time will be posted in WeChat group. The purpose of these coding sessions is to allow each member to on the track of our milestones. --- **Conflict Resolution:** **Conflict:** ==The team is split into two parts where they each insist on their own ideas== **Solution:** We will take a step back and list all the pros and cons of each method. The decision will be made in the interest of the project and our partner's requirement. **Conflict:** ==One of the team members is non-responsive which severely affects the process of our project.== **Solution:** We will talk to that team member in person. If that person continues to avoid responsibilities, we will split that person's task to ensure the project goes smoothly. Then we will have to talk to our TA about the situation. **Conflict:** ==One of the team members is unable to complete his tasks prior to the due date== **Solution:** We will reassign some of that person's tasks to other team members to ensure our progress is not behind. We will then talk to that team member and assign different types of tasks to that person according to his preference and abilities. --- #### Events :::info **Initial Planning Meeting** - **Location:** BA2145 - **Date:** Oct 28, 2019 8:30 PM - **Agenda** 0. Deployment options `10min` 1. Prioritized features: search function `20min` > [name=Weitong Luo] 2. Terms clarifications: `45min` 3. Admin `20min` 4. UI 5. Workload Distribution - **Participants:** - Weitong Luo - Ming Jin Lu - Li Zhu - Caiquan shi - Linyue Wu - Yangfan Li - Qi Zeng - **Contact:** Weitong Luo (weitong.luo@mail.utoronto.ca) - **Host:** Weitong Luo - **Reference:** - [github divliverbale 1 md] ::: **Code Session 1 + Partner Meeting** :::info - **Location:** BA - **Date:** Nov 4, 2019 8:00 PM - **Agenda** 0. Future Meeting & NoteTaking Discussion `10min` > [name=Ming Jin Lu] 1. Deliverable 1 Feedback Discussion `20min` > [name=Weitong Luo] 2. MeetUp with Partner `45min` 3. Deliverable 2 progress update`20min` 4. Setup milestone for next step (https://) - **Participants:** - Weitong Luo - Ming Jin Lu - Li Zhu - Caiquan shi - Linyue Wu - Yangfan Li - Qi Zeng - **Contact:** Weitong Luo (weitong.luo@mail.utoronto.ca) - **Host:** Ming Jin Lu - **Reference:** - [Initial Planning Meeting] ::: **Discussion Meeting:** :::info - **Location:** BA - **Date:** Nov 6, 2019 8:00 PM - **Agenda** 0. Deliverable 1 discussion with Adam `20min` > [name=Ming Jin Lu] 2. Deliverable 2 discussion `5min` - **Participants:** - Ming Jin Lu - Caiquan shi - Linyue Wu - **Host:** Adam - **Reference:** - [CSC301 Meeting Minutes 11/4/2019, github divliverbale 1 md] ::: **Code Session 2** :::info - **Location:** BA - **Date:** Nov 9, 2019 2:00 PM - **Agenda** 0. Deliverable 2 progress update `20min` 1. Backend and Frontend Communication Discussion `30min` 2. MeetUp with Partner `45min` 3. Deliverable 2 progress sprint Decisions - **Participants:** - Weitong Luo - Ming Jin Lu - Li Zhu - Caiquan shi - Linyue Wu - Yangfan Li - Qi Zeng - **Reference:** - [Discussion Meeting] ::: ## Partner Meetings 2019/11/04 (virtual with partner, team members will meet at BA) We are planning to mainly discuss the database structure with our partner as this is the core part we need to figure out to start our project. The second thing is to discuss details about partner's server as we need to deploy on it. Finally, we will propose our UI design, discuss with our partner for improvements and describe the main feature we are going to implement in this iteration. Review meeting: 2019/11//11 (virtual with partner, team members will meet at BA) Give the partner a quick demo of what we have done, explain to the partner what does not work and discuss, if any, questions and concerns with partner. --- ## Artifacts We use github issues to document meetings and sprints, manage our task distributions, and list TODOs. During our weekly group meetings, each member will share his/her progress to make sure everyone is on the right track. We prioritize the tasks according to the main function of user stories and the main features of our project (both aspects have been discussed with our partner). Milestone will be set according to the user story that we are implementing. Tasks are assigned according to the preference, experience and strength of a member. ### Issue list: https://github.com/csc301-fall-2019/team-project-uoft-special-olympics/issues #### To sum up: All of our group member are assigned to the workflow issue, which is https://github.com/csc301-fall-2019/team-project-uoft-special-olympics/issues/11. Besides: ##### Weitong Luo is assigned to https://github.com/csc301-fall-2019/team-project-uoft-special-olympics/issues/6 ##### Ming Jin Lu is assigned to https://github.com/csc301-fall-2019/team-project-uoft-special-olympics/issues/8 ##### Li Zhu is assigned to https://github.com/csc301-fall-2019/team-project-uoft-special-olympics/issues/6 ##### Caiquan Shi is assigned to https://github.com/csc301-fall-2019/team-project-uoft-special-olympics/issues/6 ##### Linyue Wu is assigned to https://github.com/csc301-fall-2019/team-project-uoft-special-olympics/issues/7 ##### Yangfan Li is assigned to https://github.com/csc301-fall-2019/team-project-uoft-special-olympics/issues/9 ##### Qi Zeng is assigned to https://github.com/csc301-fall-2019/team-project-uoft-special-olympics/issues/5 --- ## Deployment and Github Workflow **Deployment:** Deployment: For database connection, we will use Microsoft SQL Server Management Studio 18. The Server Type is Database Engine, and Server Name is recorded in our Google Drive. Our partner is supposed to have data in the server so we can access them using the Admin access provided by the Partner. The admin login and password are stored in our Google Drive. The database that we are using for this project is called SO_Results. If there is any connection problem, Weitong will contact our Partner for details. Deployment: We will deploy our web page on the partner’s Server in the location of http://results.soonic.ca. The deploy process is as follows, we currently have the IP, FTP, username and password of this server. To deploy our project, we will ssh into the Partner’s server and use scp to transfer our web onto the server. Then, we set up Apache and run our project on the server. We will test the connection by accessing our website (66.212.174.180:81) using another computer. Git / GitHub workflow: First, we use github issues to keep track of each team member's work. We have decided to use a team-dev branch for development and for each task that a team member is assigned, this member will create a new branch for this issues and work on it. After the issue is resolved, they will make a pull request to the team-dev branch. Another member will view this pull-request and resolve any merge conflicts if there is any. In this way, combined with github issues, we have constructed a workflow that everyone can follow and analyze what is done, what needs to be done. ## Product #### **Goals and tasks** The User story we chose to do on this deliverable: >As a basketball athlete who plays in the Special Olympics, I want to check my stats in certain games in order to know where my strength and/or weakness is. Acceptance Criteria: 1. Ability to specify completed game(s) by player’s name and date. 2. Ability to list the detailed stats of individual players in the game. 3. Ability to track down the stats for specific player(s) in the game. **Goals for this user story:** Create a basic search website. The user will input their SOid and he/she is expected to see the output of all the games that he/she has participated in. User can click into any of the games and see the full stats of that game, which includes other participants and placements. Main Feature: Retrieve data from backend and display them nicely on our website. **Backend:** 1. Understand our [database structure](https://drive.google.com/file/d/1JkAggvaxRlVv_IMJOGsrajY5cmfrqJzx/view?usp=sharing) 2. Use Python Flask to connect with our database 3. Retrieve Data, and create API for the search function 4. Parse and normalize raw data to readble JSON or dict() format for front-end use. **Frontend:** 1. Create a search bar component that has all the filter options necessary for our goal. Send search request to the backend 2. Create a search result page that can display a list of games retrieved from the search page. 3. Create a display games component to display detailed info of a particlar game clicked by the user. **Together:** 1. Connect the backend API with http requests. ```sequence SearchPage->API: Search by "soid" API->SearchResultPage: list of games SearchResultPage-->DisplayEvent: Display this game ``` #### Artifacts List/describe the artifacts you will produce in order to present your project idea. 1. Build a search page to support search by game, team and athlete. *Purpose: This is a home page where for each search, users either provide a unique id or fill in the required information to get the result.* ![](https://i.imgur.com/WR22Uef.png) ![](https://i.imgur.com/DUp7lDZ.png) 2. Build a search result page to display all the results that satisfy the criteria defined by users in table form. *Purpose: There will be multiple results if id is not provided. This page acts as a transfer site which direct users to a detailed result page when they click a table row.*![](https://i.imgur.com/0Wj2EpJ.png) 3. Build a detailed event display page to show every detail of a specific event result. *Purpose: Present the desired final search result to users.*![](https://i.imgur.com/9jjcboZ.jpg) A video demo will be made after we have full functionality of the project.