Boilerplate to start your API-based project from almost-zero
At Worldsensing, we do innovation. Not only as hardware for IoT but also as innovation through software development. And this is where I come in.
Sometimes, when you have to start a new project or you have a new feature to be developed, your first step is to search on the Internet for information about what you want to achieve. Check if the information that you have found is valid for you, which are the steps to follow and from where you have to start.
At this point, you realize that what you want to do is, again, just an API (Application Programming Interface) to wrap around the core idea of your newest feature. And again, you search for information about starting the development of your desired API, from zero.
Almost every time, your search will succeed with the same result. Same language, same framework, same whatever. Perhaps because your thinking is influenced by accepting a known system. Or simply because that system, again, adapts back to your needs.
The first time you implement the API from scratch, you start to see how it runs. The second time you reimplement it from scratch and see that you will use it more times, you start to value creating a boilerplate, a starting point. And the third time, you create the boilerplate before launching the whole project from scratch. From there, you already know the system you’re creating, and starting the project will get easier and easier.
But, what is boilerplate?
Boilerplate is the term used to describe sections of code that have to be included in many places with little or no alteration. Code which can be used over and over again or we can say it, a piece of reusable code. The term derives from steel manufacturing, where boilerplate is steel rolled into large plates to use in steam boilers.
A boilerplate can be compared to a certain kind of template, which can be thought of as a fill-in-the-blanks boilerplate. Some typical boilerplates include mission statements, safety warnings, commonly used installation procedures, copyright statements, and responsibility disclaimers.
Most professional web developers have created a collection of assets and snippets of code that they reuse on projects to accelerate development. There are some near universal patterns that all websites share in common and rather than continuously rebuild these, most developers with start by copying the code they used for a similar project and then start modifying it. (https://www.quora.com/What-exactly-is-a-boilerplate-in-web-development)
API Out of the Box — Boilerplate
Run your API out of the box, and consume it, simple, fast and easy.
Have you ever wanted to perform a proof of concept in which you needed backend software and frontend software? Or, have you ever seen the needing of starting a project but did not know where neither how?
So, after the introduction, here is the boilerplate that I have created to help other developers. In that case, this boilerplate is not meant to be just for a single language or tech stack. It is meant to be a starting point of a full technological stack consisting of a frontend, a backend, and an Android Application.
Architecture
The architecture or ‘what it is included’ consists of:
- Backend: which is the part of a computer system or application that is not directly accessed by the user, typically responsible for storing and manipulating data.
- Frontend: relating to or denoting the part of a computer system or application with which the user interacts directly.
- Android application: similar to the frontend, but with the capability to be run in an Android Device as a native application.
In order to have better control of the system, and also to permit easily have multiple instances of this project running at the same time, this project is based on containerization technology, using Docker.
Container technology, also known as just a container, is a method to package an application so it can be run, with its dependencies, isolated from other processes.
Frameworks, Tools, and Languages
Backend
- Docker: performs operating-system-level virtualization, also known as containerization. Used to run software packages called containers.
- Alpine: is a Linux distribution. Designed for security, simplicity, and resource efficiency.
- Flask: is an open source web framework written in Python. It provides you with tools, libraries, and technologies that allow you to build a web application.
- Python: is an interpreted, high-level, general-purpose programming language.
- PostgreSQL: is an open source object-relational database management system (ORDBMS) with an emphasis on extensibility and standards compliance.
- pgAdmin: is the most popular and feature rich Open Source administration and development platform for PostgreSQL.
Frontend
- Docker.
- Alpine.
- React: is a JavaScript library for building user interfaces.
- Node.JS: is an open-source, cross-platform JavaScript run-time environment that executes JavaScript code outside of a browser.
Android
An Android project, ready to be used is inside the boilerplate.
Based on API 28 (and with a minimum of API 19) it will let you consume the backend directly.
It has Google Volley linked as a library, and with the provisioned java class with almost one line, you will be able to do an API call to the Internet.
Requirements
As said before, the software is meant to be run with Docker. And the project has been created and tested in a Linux environment.
And, for the Android App, you need an IDE (e.g. Android Studio) and an Android Device (can be physical or an emulated one).
Setup
The setup is very easy. Once you have Docker and Docker Compose installed you just need to add your frontend URL in backend/source/resources_loader.py and your backend URL in frontend/src/config.js. There is a placeholder for the URL. Note that these URLs should be accessible to the client. The backend needs to connect to the frontend and vice versa.
Also, if you plan to use the Android App, you should add your backend URL into android/app/src/main/java/com/laquay/apioutofthebox/utils/APIUtils.java.
Run the project!
Once you arrive at this point, you are ready to deploy the project!
Just run the following commands in a separate terminal and you will be ready to use it 😃
make setup- To set up the required containersmake run-backend- This will run the Flask backendmake run-frontend- This will run the React frontend
Results
Below you can see different screenshots showing how the project works. The result is a fully functional backend, and also accessible via browser and via the Android application.
Executing make run-backend we will see how Flask loads and throws an output that is the URL in which it will be accessible.
Executing make run-frontend we will see how NodeJS loads the ReactJS framework and throws an output that is the URL in which it will be accessible.
At this point, both backend and frontend are running. So, here is the frontend accessed through a common Internet web browser. Showing the data that is inside the backend’s database.
As the backend is running, its API can be also accessed through Postman.
Beyond is the Android Application on its main screen, showing the database data coming from the backend.
Conclusions
In this blog post, we have seen what is a boilerplate, for what are they used, the boilerplate that I have created on GitHub and how to use it.
All right! The source code of the project can be found here:
More boilerplates
- React: https://github.com/react-boilerplate/react-boilerplate
- HTML5: https://github.com/h5bp/html5-boilerplate
- Node.js: https://github.com/sahat/hackathon-starter
- Android: https://github.com/hitherejoe/Android-Boilerplate
Hope you liked this blog post. You can follow me on GitHub!
Also, if you found this post interesting, we are always hiring and interested in meeting all types of engineers here at Worldsensing, regardless of your skills or what tools you use day-to-day. Your intelligence, creativity, energy and enthusiasm are much more important to us than your experience with our stack.
Check out our careers page in here — https://worldsensing.wpengine.com/engineering/
