Clever Birds a project developed as an integration for a game via API along with Flask webserver. This project is focused on the project management process of building our application. Throughout the development of this project, we used Confluence and Jira together for planning and coordinating our work.
📍 Goals:
- A light-weight demonstration of a working model of the web application Clever Birds and the description of testing.
- Apply Scrum project management methodology for organizing and managing our project.
🎬 Click here to watch our video presentation
- 1. Overview
- 2. Requirements
- 3. How to use our platform
- 4. Clever Birds Game
- 5. Project Architecture
- 8. Python Dependencies
- 9. Tools
- 10. Installation
- 11. Confluence Documentation
- 12. Bug Report
- 13. Useful Links
Clever Birds a project developed as an integration for a game via API along with Flask webserver. The player navigates the avatar bird through obstacles without hitting them, earning points as he or she passes each pipe. The application has a chatbot named “Tweety”, who guides parents about how to use their children's game time as an educational experience.
- [Project Charter)(https://github.com/SEPM-2022/CleverBirds/blob/develop/assets/NewProjectCharter.JPG)
- a1) Fun: Clever Birds is fun and simple. By clicking the button "play now" on the top right or every screen, the user can start playing the game.
- a2) User Profile: After registration, all users have their personal profile.
- a3) Suitable for kids 5-8 years old: Clever Birds is very simple. After signing in, the user can see a green button on the top right ("PLAY NOW!") on all screens. By pressing the button, the user starts playing.
- a4) Unique selling point: A chatbot to talk to parents about the skills their children can gain.
- a5) Player persona: The application allows users to choose between three avatars.
- a6) Cancelation of subscription: On the page "Manage Account", users can delete their account, which will erase their data from our database.
- a7) Safety: The chatbot "Tweety" teaches parents how to protect their children by discussing video games' health problems and how to solve them.
- b1) The UI should be usable with 1 hand: In the Clever Birds game, the player pilots the bird into the pipes, by clicking with the mouse.
- b2) Data must be stored in the most efficient way: Our application stores data efficiently, as explained in Appendix X: “Database Design”.
- b3) Data must be able to be searched and managed as efficiently as possible: In our application data can be managed efficiently, as explained in Appendix X: “Database Design.
From the agreed ten requirements received, we have chosen five as high priority due to their importance to the overall product functionality and design:
- a2) User profiles play a vital role in user experience as it provides a collection of information associated with users.
- a3) The game should be easy to understand and the user’s path to playing the game very simple.
- a5) One of the key features of what sets Clever Birds aside from Flappy Birds, is the ability for a user to choose an avatar.
- a6) In order to comply with the GDPR, we allow users to delete their account at any time and their data will be deleted from our database.
- a7) Another key feature setting the application apart from Flappy Birds is a safety feature informing parents about health problems related to video games.
Here is a summary showing how to use our platform step-by-step:
- STEP 1 - USER NAVIGATION: Users can navigate the platform and use the chatbot "Tweety", even if they are not registered.
- STEP 2 - REGISTRATION: For user registration there are four parameters: first name, username, email and password.
- STEP 3 - LOGIN: For user login there are two parameters: username and password.
- STEP 4 - GDPR: Registered users are able to see his or her stored personal details and delete it from our database (for GDPR compliance)
- STEP 5 - TWEETY: Registered and Unregistered users are able to talk to our chatbot "Tweety".
- STEP 5 - GAME: Registered users are able to play Clever Birds.
- We followed the javascript tutorial at: THE ASSEMBLY and made the following modifications: decreased the speed of the bird, changed the whole background and customized the avatar so that the player can choose to be Birdy, Alfredo or Daisy. We then rewrote it to typescript so that it could work with the angular framework and be easier testable. It now has the ability to be running stand-alone or by inclusion like we did with the python app.
- Framework: https://angular.io/
This project uses the Model-View-Controller (MVC) architecture framework, which can be described as an architectural pattern that separates an application into three main logical components: model (data), view (user interface), and controller (processes that handle input). Here is our architeture:
- Model => The type of data we are using in the application: user's data
- View => Our interfaces (Html/CSS/Javascript)
- Controller => In the file with x controllers:
🔘 We have eight routes, with the following features:
▶️ 1 - user registration (users can registrate by providing name, username, email and password)▶️ 2 - user login (users can registrate by providing username and password)▶️ 3 - game (users can play Clever Birds)▶️ 4 - change avatar (will allow users to change the avatar)▶️ 5 - manage account (will allow users to see in their profile their information and allow them to delete their account and data from our database)▶️ 6 - talk to tweety (will allow users to speak to our chatbot "Tweety")▶️ 7 - about (will inform how to use the platform)▶️ 8 - privacy policy (will inform users of the personal data we collect when they access/use the Website and how we protect their personal data)
Click the links below to see the activity diagram:
The following directory diagram was generated with the following command in the terminal: "tree /F"
C:.
│ .gitignore
│ app.py
│ app.sqlite
│ Dockerfile
│ privacy-policy-page.html
│ README.md
│ requirements.txt
│ start.sh
│ test-e2e.sh
│ test.sh
│ tests.py
├───assets
│ CleverBirdsDB.sql
│ March-14-ActivityDiagram-CleverBirds-Website.drawio.pdf
│ March-16ActivityDiagram-CleverBirds-Website.jpg
│ simpledb-april.JPG
├───controllers
│ │ chatbot.py
│ │ game_controller.py
│ │ users_controller.py
│ │ user_documentation.py
│ └───__pycache__
│ chatbot.cpython-38.pyc
│ game_controller.cpython-38.pyc
│ users_controller.cpython-38.pyc
│ user_documentation.cpython-38.pyc
├───e2e
│ │ cypress.json
│ │ package-lock.json
│ │ package.json
│ └───cypress
│ └───integration
│ dynamic-pages.spec.js
│ static-pages.spec.js
├───models
│ │ clever_users.py
│ │ game_instance.py
│ │ music.py
│ └───__pycache__
│ clever_users.cpython-38.pyc
│ game_instance.cpython-38.pyc
│ music.cpython-38.pyc
├───static
│ │ dashboard.css
│ │ index.css
│ ├───img
│ └───js
│ └───game
│ │ .browserslistrc
│ │ .eslintrc.json
│ │ .gitignore
│ │ angular.json
│ │ jest-global-mocks.ts
│ │ jest.config.js
│ │ package-lock.json
│ │ package.json
│ │ README.md
│ │ setup-jest.ts
│ │ tsconfig.app.json
│ │ tsconfig.json
│ │ tsconfig.spec.json
│ │ tslint.json
│ │
│ ├───dockerfiles
│ │ build.Dockerfile
│ │ test.Dockerfile
│ ├───e2e
│ │ │ protractor.conf.js
│ │ │ tsconfig.json
│ │ │
│ │ └───src
│ │ app.e2e-spec.ts
│ │ app.po.ts
│ └───src
│ │ favicon.ico
│ │ index.html
│ │ main.ts
│ │ polyfills.ts
│ │ styles.scss
│ ├───app
│ │ │ app-routing.module.ts
│ │ │ app.component.html
│ │ │ app.component.scss
│ │ │ app.component.spec.ts
│ │ │ app.component.ts
│ │ │ app.module.ts
│ │ │ window.token.ts
│ │ └───components
│ │ └───game-over
│ │ game-over.component.html
│ │ game-over.component.ts
│ ├───assets
│ │ │ .gitkeep
│ │ └───img
│ └───environments
│ environment.prod.ts
│ environment.ts
├───templates
│ about.html
│ au.html
│ change-avatar.html
│ choose-avatar.html
│ create-account.html
│ footer.html
│ head.html
│ header.html
│ index.html
│ manage-account.html
│ playgame.html
│ privacy-policy.html
│ signup-success.html
│ tweety.html
│ user-dashboard.html
└───__pycache__
app.cpython-38.pyc
- flask
- Werkzeug - for password hashing RESTful API documentation.
- Pyodbc - for accessing the database and carry out user registration.
- Requests - for making HTTP requests in Python.
- Docker - for storing the database and the API in a container.
- Ngrok - enabled the exposure of the a local development server to the Internet with minimal effort.
- Github - to store the code and document the project.
- Insomnia - used to consume APOD and retrieve the 365 images for our dataset (monolithic architecture).
- JIRA - used for project management.
- CONFLUENCE - for documentation.
- Dbeaver - we used as an interface for our database (SQLite). Allowed us to document our tests in our database.
- SourceTree) - to better vizualize our work as a team using gitflow.
We suggest to setup a virtual environment first.
$ pip install -r requirements.txt
$ flask run
$ docker build -t clever-bird .
$ docker run -d -p 5000:5000 clever-bird
Throughout the development of this project, we used Confluence to develop our product documentation, track meeting minutes, draw process flow diagrams, and create technical architecture documents. Please click here to access our Confluence Documentation - PDF
A bug report is a specific report that outlines information about what is wrong and needs fixing with software or on a website. The report lists reasons, or seen errors, to point out exactly what is viewed as wrong, and also includes a request and/or details for how to address each issue. Please find our Bug Report in the link below: