Software Design

This page includes a short description of the overall architecture style of the system, its high-level system components, and their logical (what data they exchange) and control (how they invoke each other) dependencies.

Architecture Diagram

The program we designed has 4 layers. The presentation layer, which contains the user interface and the administration interface. The user interface is implemented in flutter and runs on a mobile platform. The administration interface is implemented using fastapi-admin and runs on a web browser. The business layer contains the game logic implemented in Flutter, which also runs on the mobile platform. The persistence layer contains a data exchange module for transferring data. We used fastapi to implement the entire data exchange module. For the database layer we are using PostgreSQL. both the persistence and database layers run on the cybera RAC.

UML Class Diagram

Our UML diagram describes the overall architechture of our project. It consists of five major components which include the UI, which contain all the major screens of the application and how they interact with other components. Profile and achievemenents which describe the profile and achievements objects. Game Logic, describes the overall logic of how games will work. Core functionality, describes how we will handle camera input and match an image to an animal. Learn, describes how we will display and store animal information and jokes. Blue rectangles represent User UI, Red rectangles represent Admin UI.

Sequence Diagrams

Our sequence diagram describes how the two main proccesses in this app will work. The first is our Game sequence diagram which shows our gameplay loop will work. The second is our information sequence diagram, which describes what will happen when a user scans an image to learn about. Both include how achievements will be calculated.

Low-Fidelity User interface

This Low Fidelity User Interface shows all the potential use cases for the app. The main use case scenario is using the camera feature to capture an image of an entity. The User is then given a response. There are several potential resulting responses; The user is sent to a game themed around the entity captured; The user is shown an information page of the entity captured. Another main use case is the game flows. The user can access a set of games on the app, play them and receive results. Some smaller use cases are viewing your profile as a use and treating yourself to some high-quality biosphere-themed jokes and puns.

API-documentation

Our API documentation is primarily for the client to update information via json for the app such as information and jokes.

http://[2605:fd00:4:1001:f816:3eff:fe22:79e1]:8080/docs#/

Detailed List of Technologies

Fast API:
Product Page: https://fastapi.tiangolo.com/
Description: We plan to use this as our backend framework and building our API.

Flutter:
Product Page: https://flutter.dev/
Description: Framework for building mobile applications, which we are using to build this on both IOS and Android Platforms.

PostgreSQL:
Product Page: https://www.postgresql.org/
Description: We plan to use this as our database, to store our data

Open CV:
Product Page: https://opencv.org/
Description: We plan to use OpenCV to process the images the users takes

Cybera:
Product Page: https://www.cybera.ca/
Description: Web server where we intend to host our backend

Poetry:
Product Page: https://python-poetry.org/
Description: Package manager to manage what versions we will be using