Software Architecture of BisaGo
In this term, I am taking Software Project course. During this course, I have a chance to learn mobile development by contributing in the development of BisaGo. BisaGo is a mobile application that aims to help people to find facilities and activities for disabled people easily. Since this application is continuously developing by participants of this course every term and has an established architecture, my team improve the architecture while at the same time analyzing the existing architecture. In this article, I want to share the architecture of BisaGo. I will divide the article into two main parts, back-end and front-end development.
Back-end Development
In the back-end development, we use Django framework. As stated in the official website of Django, Django is a high-level Python Web framework that encourages rapid development and clean, pragmatic design. Although the development has been using Django framework before my team joined, there are three advantages of Django that keep my team using it:
- Using python
For years, most students in computer science major have learnt Python as a starter. For those who haven’t, there are many websites that provide fast and free tutorial. The assignment of variables and the structure of functions and classes are natural and intuitive to people that are new to programming. - Built-in database
Django has built-in database that can be operated without having to set using another tools and programming languages - Proper documentation
Since Django is a growing and widely-used framework, the documentation is relevant and consistently updated. The community is also active in case developers want to seek for the solution of an error.
In this project, there are three main parts of the back-end development:
- urls.py
This file exists in the app or package directories. In short, this file guide a url request to the desired function. For example, look at the image below:
When such request arrives in the back-end, first urls.py in the main package will look at the first path of the url and ‘guide’ the next paths of the url to the next urls.py file until the url gets to the desired function in views.py file in a package. When the operation in views.py finishes and the urls get the desired response, the urls.py file will send the response back to the function in the front-end file that send the url.
2. views.py
This file usually exists along with the urls.py file. This file contains all of the logical operations of the backend. For example, when the url path above arrives in the desired function, add_komentar_kegiatan in views_komentar_kegiatan.py, the function will read the parameters that are given and the body of the request. After reading all of the necessary informations, it modifies the database (in this case, creating a new instance). When it successfully modifies the database, it will send back the response to the urls.py to be forwarded to the function in the front-end file.
3. models.py
This file defines all fields in a model in the database. For example, this is the model that is accessed by the views.py function above:
Front-end Development
In the front-end development, we use Flutter. In the official website of Flutter, it is explained that Flutter is Google’s UI toolkit for building beautiful, natively compiled applications for mobile, web, desktop, and embedded devices from a single codebase.
In this project, there are five main parts of the front-end development:
- page
This directory contains all files and widgets that represent a page in a mobile application. Files in this directory may be divided into subdirectories to cluster files and widgets. Some files or widgets in the page can import a widget to decorate from component directory. For example, this is a widget in the page directory whose the url request is discussed in the back-end development section above.
The widget above constructs comment sections of an activity in BisaGo application. It contains widgets to display comments and clickable profile picture.
2. component
This directory contains all files and widgets that represent a part of a page that can be reused in many pages. For example, this is a code from a component that construct the header of all pages:
3. bloc
This directory contains all classes that handle the request from a widget in page directory and forward it to a class in repository directory. For example, this is the function that handle the request to add comment to an activity detail:
4. repository
This directory contains all functions that request by a url to the backend and wait for the response. For example, this is the function that is called by the function in example above:
5. model
This directory contains all classes that define models in the frontend. The classes also have a function that convert json from url response into a frontend model that can be easily accessed in the widgets in page and component directories. After developing each file in this directory, developers need to run this command:
flutter pub run build_runner build
to make a file that can map json response into fields in the model. For example, this is the class that defines the fields of activity comment:
The code in the second picture is automatically constructed by the command that is run previously.
Conclusion
BisaGo is an application that continuously developed. The current frameworks that are used in the frontend and backend provides advantages over other frameworks, therefore the developers choose to maintain it. I hope my article can help you understand more on the software architecture of BisaGo.
