Moustafa Meaily
Moustafa Meaily @CmpSamurai's Blog

Moustafa Meaily @CmpSamurai's Blog

Software Architecture Concepts: [ Part 2] Main Application Components

Moustafa Meaily's photo
Moustafa Meaily

Published on Oct 17, 2021

5 min read

So you decided that you are going to use the service model of the software for your killer app, It makes sense because your app cannot work in isolation. your app needs to store, retrieve and update bits of application for it to work. also users can interact with each other on your application. In order not to talk only about abstract concepts, let's imagine that you are building your own version of twitter, you found the name "Super Awesome App" free and you decided to use it for your application. Congratulations you have accomplished one of the most difficult tasks of software engineering which is choosing an app name.

Hint always give your apps code name and never tie it with the display name of your application in case you need to change in the future due to marketing or legal reasons or if you discover your app name is already taken.😂 For example "katana" is the code name for the Facebook app, "orca" is the code name of Messenger application.

Step One: building the application Frontend

Because your "Super Awesome App" app is an enhanced version of twitter, you already have a design ready in Mind. You will build a mobile application app (ios & android) with very fancy screens for mobile users as well as a super cool web interface for those users who still believe the internet is best enjoyed using a browser. The mobile apps as well as the web interface can be considered your Frontend for the application. you are a very super dedicated developer and you are will use the following technologies to build your applications

  • Kotlin : android development
  • Swift : ios development
  • React / Angular / Vue.js / Other : single page web application development

image.png

Using these technologies you will be able to create the super fancy frontend for your application, Users will use these applications as the interface to your application. mobile apps will be downloaded by the user and launched on his mobile phone while the web application will be run on the user's web browser (chrome , firefox , safari etc..).

All these applications will contain the following main screens

  • Login screen (let's keep it email + password for simplicity now)
  • Profile screen (users will see their information + the messages that they post)
  • Followers screen (users will see their followers)
  • Search screen (users can search for people to follow)
  • Home screen (users will see the messages by his followers there)

Now the front end by itself has no value. if the user open your application he will see a logic screen with and username text box and password text box but without a backend to power these screens they will not be able to do anything.

I will not go into much details on the front end as honestly, it is a field on its own and because you normally don't have to worry about it as your application grows unless you are adding new features for your users to enjoy.

Step Two: Building the backend

You start thinking about the backend is seems easy. I need a place to store all of the program information [users , messages, relations between users] in a structured way. I also need some program that receives the user input and figure out how to use the stored data to perform operation. Front end needs to access this program to send user input and it is expecting this program to return the correct output. here comes the concept of APIs (Application Programmable Interfaces).

APIs (Application Programmable Interfaces)

API is the acronym for Application Programming Interface, which is a software intermediary that allows two applications to talk to each other. Each time you use an app like Facebook, send an instant message, or check the weather on your phone, you’re using an API. In the "Super Awesome App" we need the the following functionalities that will be implemented as apis.

  • Authenticate the user : Given username + password from interface check if user is already registered in the application
  • Retrieve user own messages
  • Retrieve user followers
  • Search all users by username (for user to find his real life friends)
  • Follow / Unfollow (allows user to follow / unfollow other users)

The diagram of your service will be something like this :

image.png

If you look at this diagram it seems simple at first, you can distribute you app to the users easily by putting it on Google Play / App Store. but what about the database and the API code that need to run ?!

When you were developing your application you used your personal machine to test. you ran a database engine -let's assume you started simply and are using a relational database engine like MySQL. You also used a local web server to serve the requests (function calls) of your front end using a backend program that you have written in (php or Python).

Now to deploy your backend you need to run these two parts on a machine that can be connected to by your frontend application so that your users can start making use of your application. You now need a Server.

What is a Server?

image.png

A server in the most basic sense is a machine connected on the internet where your processing can happen. This means that this machine must be running and connect 24/7. you need this machine to be the host of your program. This is where term hosting come into place. It also means this machine need to have an address so that anyone is able to find it. the machine needs an IP

What is a IP?

image.png

IP address is a unique address that identifies a device on the internet or a local network. IP stands for "Internet Protocol,".

So you go online, search for for hosting providers and you find tons and tons of them out there. there are providing range of services. Some of the services are very cheap (couple of dollars a month). but there are others that are more and more expensive.

In the next post I will talk about the hosting model for services.

 
Share this
Proudly part of