This presentation is focused on the project management process of building our platform, a Javascript integration of game via API. “Clever Birds”, a game in which 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.
📍 Goals to be achieved:
- A light-weight demonstration of a working model of the web application Clever Birds and the description of testing.
- 1. Overview
- 2. Requirements
- 3. How to use our platform
- 4. Clever Birds Game
- 5. Project Architecture
- 6. Project Structure
- 7. Project Files
- 8. Python Dependencies
- 9. Tools
- 10. Installation
- 11. Demo
- 12. Testing
- 13. Project Roadmap
- 14. Confluence Documentation
- 15. Useful Links
This API, called SFA (Space Fan Art), is an API created with Flask REST-Plus with two Prototypes: a monolithic architecture and a microservice architecture. Astronomy Picture Of The Day (APOD), which is a NASA open API that returns the picture of the day, has been used as a model thoughout the development of both Prototypes:
- a1) Fun: Clever Birds is fun and simple. According to Rosewater (2011), the real way to determine if a game is fun is to ask the players if they would play again. We will do this through our chatbot Tweety in a customer satisfaction survey.
- a2) User Profile: Users can create a user 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.
🔸 Design based on a microservice architecture, using MVC (Model-View-Controller) pattern.
- 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.
xxxxx
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"
README.mdREADME.md- Contains the description and documentation of the project.app.pyapp.py - Creates the database and defines all the routes.DockerfileDockerfile - Docker config file to build a Docker image.application_structure.pyapplication_structure.py - Directory tree structure in Python.requirements.txtrequirements.txt - The list of Python (PyPi) requirements. Script: 1) pip install pipreqs; 2) pipreqs --encoding=utf8 C:\Users\Alice\PycharmProjects\SFA_DB
- Werkzeug - for password hashing RESTful API documentation.
- Pyodbc - for accessing the database and carry out user registration.
- Requests - for making HTTP requests in Python.
- Validator Collection - to validade users' inputs.
- Dependency Check - scans application dependencies and checks whether they contain any published vulnerabilities.
- 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 document the project.
- Insomnia - used to consume APOD and retrieve the 365 images for our dataset (monolithic architecture).
- JIRA - used for project management.
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
Check our web application with the following link:
The OWASP Application Security Verification Standard (ASVS) contains categories such as authentication, access control, error handling / logging, and web services. Each category contains a collection of requirements that represent the best practices for that category drafted as verifiable statements.
✅ Security requirements:
- Protect against injection: We use parameterised queries to avoid SQL injection attacks in all the operations with the database.
- Protect Data: protected password with hashing.
- Broken Access Control: Restrictions on what users are allowed to do.
- Protect against Cross-Site Scripting (XSS): We protect against XSS in our web page, using javascript.
Secure frameworks and libraries can help to prevent a wide range of web application vulnerabilities.
✅ In Clever Birds we do a dependency check to detect publicly disclosed vulnerabilities contained within a project's dependencies. Click here to see the result.
According to OWASP, secure access to databases consider: secure queries, secure configuration, secure communication and secure authentication.
✅ Clever Birds handles secure database access with the following measures:
- Secure queries: In order to mitigate SQL injection we used ‘Query Parameterization’. However, certain locations in a database query are not parameterisable. Because of the large variation in the pattern of SQL injection attacks they are often unable to protect databases. OWASP recommends testing queries for performance, but this is not done here because the queries are all very small and therefore it is not necessary.
- Secure configuration: we run the database in a docker container, which has connectivity restrictions (can only be accessed by the administrator and only has one door open - 1433). The server which runs the database does not allow external access. All access to the database should be properly authenticated. Thus, it is not possible to directly access the database from outside the instance.
- Secure communication: we use Pyodbc, an open source Python module to communicate with the database. We apply secure (authenticated, encrypted) communications methods.
✅ In Clever Birds, we monitor the user experience through our chatbot Tweety, who asks questions to users about their experience.
✅ In Clever Birds, we protect data with parametrised queries to protect against SQL injection. OWASP recommends stored procedures but this is not done here because the queries are small, so this measure is unecessary. OWASP also recommends escaping, which we didn't need to do in our project because it wasn't necessary.
Here is how we will implement secure user authentication system using the Python library Werkzeug:
✅We won’t store passwords in plaintext in the database, but instead encrypt passwords using hashes. ✅Passwords stored as hash are irreversible to plaintext (one way hash). ✅With a given hash, attackers cannot guess the plaintext.
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 the Confluence Documentation file: XXXXXXXXXXxx
To take this project further:
- WEB INTERFACE: Improve....
- AWS: Host the project in AWS, which offers reliable, scalable, and inexpensive cloud computing services.
Flask Testing