Software Architecture and Examples in PPL Fasilkom UI

Mohamad Rifqy Zulkarnaen
5 min readMay 24, 2021

Did you know that a software is also have an architecture, just like a building? Yep, every digital product that have been published usually has their own architecture or blueprints. So what are this software architecture? And why are they so important? Lets talk about it!

source image: https://sites.google.com/site/architecturaldesign332/home/what-is-software-architecture

What is Software Architecture?

“Software architecture encompasses the set of significant decisions about the organization of a software system including the selection of the structural elements and their interfaces by which the system is composed; behavior as specified in collaboration among those elements; composition of these structural and behavioral elements into larger subsystems; and an architectural style that guides this organization. Software architecture also involves functionality, usability, resilience, performance, reuse, comprehensibility, economic and technology constraints, tradeoffs and aesthetic concerns.”

— Philippe Kruchten, Grady Booch, Kurt Bittner, and Rich Reitman

Software architecture is a structure or blueprints of the system that explain communication flow between software components and also with external components. We can say that software architecture is also a structured solution for technical and business requirements that follows flexibility, reusability, scalability, feasibility and security concepts.

Why is it important?

Based on definition above, now we know that software architecture is needed to help the dev team fulfill the technical and business requirements. Here are other several reason why we must design a software architecture, that is:

  1. Software Architecture can be interpreted as representations for communications between all parties (stakeholders) that interested in development of the application.
  2. Software Architecture tells how the system is structured and how the components inside the system communicate each others.
  3. If the software architecture is badly designed, it will also give bad impact to the dev team where it will slows us down. There are also chances that badly designed architecture will make the app does not having good scalability so that it will be hard for other developer to continue the development.

Examples of Software Architecture

In our current project, SIMPK BPKH — a information system for BPKH RI that based on mobile app, we implement this structure on our software:

SIMPK BPKH Software Architecture

Backend (Django)

One of Backend Endpoint

Our application uses Django as it’s backend. This Django app configured as REST API so that it will only process a request via calling specific endpoint that we defined using certain HTTP Method and returns a JSON. The reason we chose Django as our Backend is because Django is easy to develop and scalable. It allows us to create a many apps and functionality without being need to configure things from scratch. We also already learned how to utilize Django from course Web Design and Programming last year. But, this time we modify it a bit by using Django REST Framework where the Django will return responses in XML and JSON instead of passing it into HTML.

Frontend (Flutter)

One of Flutter Frontend

The frontend of our application are made using Flutter framework. The frontend itself is a mobile app (iOS and Android). It serves as the user interface for BPKH RI and other users to interact. The frontend app also will fetch the data from the backend by calling specific endpoint that we defined. After the data is fetched, it will be shown to the users. How about the reason we chose Flutter? Simple. We want to explore new tech stack that we never been before. The other reason is we found that Flutter really easy to learn, especially for us newbies in Mobile Programming because it is using Dart, a client optimized language for developing fast performance and multiplatform app. Flutter also comes up with many helpful tools too!

Database (PostgreSQL)

For our software database, we chose PostgreSQL as our choice. The reason is because we already familiar with PostgreSQL because we learn it at out fourth semester in Database course. PostgreSQL offers many features aimed to help developers build applications, administrators to protect data integrity and build fault-tolerant environments, and help us manage our data no matter how big or small the dataset. The other reason is PostgreSQL is also one of default plugin that available in Heroku. It really saves us time because we don’t need to configure much.

External: Google Apps

There’s external software that we’re going to implement soon, that is integration with Google Apps, especially Google Maps and Google Calendar. The integration is needed because it is one of the requirements that client asked where they want to be able to share the location of their current field monitoring. They also wanted to be able to know people that already booked to do field monitoring on Google Calendar so that it saves up their time. Basically, the frontend of our app will communicate with this 2 Google Apps. For Google Maps, the frontend will try to use the GPS function, while for Google Calendar, the frontend will create event and publish it to subscriber. Hope we can implement it soon before fifth Sprint!

Usage of Docker in SIMPK BPKH

In SIMPK BPKH Backend, our current docker orchestration can be defined like this:

We push our work to GitLab → The GitLab CI doing some docker magic →Open Heroku to do migrations →Manual data seeding in Django Admin→ Use the API.

In our local development, we are not using docker to help us setting the environment. The reason is because we’re not quite understand about the docker itself and how to use it. I feel that, even if we’re not using docker, we still can develop the SIMPK BPKH. But in case we’re going to do some integration and functional test, there will be a problem. We must turn on each backend and frontend first before we do the test, and that’s a lot of work. Maybe in near future, we’ll try to use docker to fasten setting up the environment in our local.

Conclusion

Personally, i think that by defining our software architecture, it will smooth our development process. And also for Docker, it really helps people to setting up the environment, especially if the software has many components (such as microservices). So, keep in mind, define your software architecture first, then start developing!

--

--

Mohamad Rifqy Zulkarnaen

just your typical curious and storytelling loving software engineer.