Building a Mobile Web App with a hint of Web3

August 26, 2022
Jose Reinaldo
Reading Time
At the beginning of professional life in technology, it is very difficult to reflect on how best to position ourselves to have a good future in the area. We usually have the feeling of a guaranteed future when, in reality, things usually don't happen quite the way we visualize.
Building a Mobile Web App with a hint of Web3

At the beginning of a professional life in technology, it is very difficult to think about how best to position ourselves to have a good future in the field. We usually have the feeling of a guaranteed future when, in reality, things usually don't turn out quite the way we visualize them. We keep moving forward until the moment this rhythm takes its toll. Especially when it comes to our health.

After also being part of this incessant journey, I ended up having to step away for some time in order to "replenish my energy". After this time away, it was natural for me to be out of date with what is currently going on in the development scene.

Entry point

Now I am looking to get back into the field. But... how to get back in shape in a scenario where changes happen constantly and extremely fast? First of all, I decided to seek an update. But, you see, it is not a mere update: I will have to do a "major upgrade" as well.

So I thought of creating a project to develop an application that would help me with this upgrade. A project that would allow me to have contact with a good part of the new technologies and the new ways to use them in software development.

I also thought about doing this as an open source project. This way everyone could also actively participate in the construction of this software. With this, I imagine that this process will become even more stimulating because of the dynamism that exists.

#1. Streamlining!

The project consists of building a Web and Mobile App (Android) for visualizing existing NFTs on a blockchain (Ethereum).

The construction of this application will make use of various technologies and programming languages, taking us between various segments of the IT area.

Many changes have occurred in the way we develop software nowadays and this change begins in the software planning phase, where we define which components are to be developed, capable of meeting the requirements raised.

In the past we used a sequential model concept or cycle models when planning the software project. Today we use the various Agile methodologies available in the market.

Why?

Well, the previous model could bring us a series of problems. For example, the need for constant modifications in the project, a characteristic that technological advances amplify more and more. The Agile methodology serves to solve (or correctly punctuate) these events.

#2. Project definition

So let's take a look at how this project will be done to get an idea of what we will use in this series of articles where we will develop all the components of our software.

For the development of the project we will address the following topics:

Building a Web Application

We will create a web application in order to see how our code that we previously built using HTML, CSS, Javascript and some APIs and frameworks, has moved on to use powerful tools such as React, Node.js and Cloud Computing resources such as Firebase for databases.

Blockchains, NFTs, DAOs, etc.

Blockchains, through products such as cryptocurrencies, DAOs, and NTFs, have formed a growing technological ecosystem that is increasingly dominant in social media trends worldwide. Therefore, it seems sensible to take a peek at its mechanism. So we will develop a backend interface that allows us to access and read the data from an NFT on a blockchain.

Data and Python

The use of data has become huge and essential for each and every company. So we will also take a look at this area of technology. We will build software in Python language to handle the data from an NFT and generate a graph to be visualized in our previously created web application.

Android Application

To finish in style, we will create an Android app to display all our generated content on Android phones. Here we can see the differences in building a mobile app developed using Android Studio or Flutter.

In the middle of all this development, I believe we will have several situations where we will have to make changes right at the beginning of the project, showing the agility and flexibility of an Agile development methodology.

#3. Kicking Off

Cassette tape prepared, vinyl separated... oops! I forgot, Alexa! lol

Until recently, our work ecosystem had an IT structure quite different from what we see today, with hardware use and software production being entirely localized in the company itself, whether or not it was in the technology area.

Until the late 90's it was common, even for small companies, to have a Data Processing Center (CPD) on their premises. At the CPD were the hardware and software used by the company, such as the application servers, databases, print servers, etc. in addition to the equipment used by the operators and programmers - we didn't even have the term developers yet! The standard was that we stayed isolated at the CPD writing a bunch of code.

Assembly, C and Cobol were the most used until we started using C++, Visual Basic and other high-level, visual languages that came along. Looking back, it seems like we live in a completely different world today, and it really is a very different world, but it happened in the blink of an eye.

In our project we will use much more current technologies and concepts, such as Cloud Computing, Data Management, Blockchains, Low-code, Cross-Platform Development, etc.

#4. Version control, repositories, etc...

To start development as we plan it, we need to have the project content accessible to everyone. It is also necessary that this content can be managed and shared in a fast, flexible and reliable way. For this we will use Microsoft's GitHub platform.

GitHub has become the leading service provider platform for software development, allowing the hosting and management of source code and other files.

To access the content on GitHub, we use a software tool called "version control". A version control software helps the software team with all the management of the shared code. Git is the most commonly used version control software, especially by free software communities, and is also the tool used by GitHub.

To use Github, you need to create an account. We can use an account with the free plan. It is very simple and fast. So let's look at the repository that I created on Github. Here is the link to access it.

In our newly created repository we have two automatically generated startup files.

The LICENSE file contains the license terms for using the project files and code contained in this repository. I have used the GNU General Public License v3.0 which gives full freedom to use the contents of this repository.

The README.md file is a document where the project overview is usually described, as well as the procedures for those who intend to use the repository on their machines.

We now need to install the Git software on our machines to access the repository. On the official Git page, you will find how to install it on Linux, Windows and macOS systems. It is also free.

Since I use Linux (Ubuntu 22.04 LTS distribution), I ran the command line below to install Git on my machine:

$ sudo apt install Git

After installing Git, we have to do a little initial configuration that will tell Git which user is going to use it. We do this by using the username from the account we each created on Github with our email address:

$ git config --global user.name "user name

$ git config --global user.email "emaildousuario@email.com"

Well done! All set, now let's download the repository to our machine using Git's clone command:

$ git clone https://github.com/Revelo-Community/rcn-appdemo.git

We get the link to be cloned from the repository page (click on the word "Code" located at the top right of the screen). This command generates a copy of the repository on our machine and creates the files with the necessary settings so that we can work with all the files managed by Git.

#5. Conclusion

This is the first article in this series where we will have a wide variety of technologies being used.

In the next article, we will actually get down to business! We will build a web app with both frontend and backend technologies, always striving to use the most used tools in the software market today.

Everyone's participation in the development is important and cool, because even for those who already have good experience in the development area, you can always find something new or even contribute by adding a better way to build some part of the project (you will be given credit for your participation, of course).

For those just starting out in a development career, this can be a great opportunity to learn how various steps are taken during the entire process of developing such an application.

In this project we will go from zero to publishing it on the web, the Play Store, and possibly the App Store! With all of this, I imagine that this project may even gain wings beyond its initial purpose!

Shall we go for it?

Need to source and hire remote software developers? Get matched with vetted candidates within 3 days.

Jose Reinaldo

Mobile Developer

São Paulo, BR

Basic, Assembler, C, CPP, Pascal, Objective-c, Clipper, Delphi, Visual Basic, SQL, MySQL, Java, Javascript, Kotlin, HTML, CSS and PHP. Frameworks and APIs for Web and Mobile development.

Table of Contents

Subscribe to the Revelo Newsletter

Get the best insights on remote work, hiring, and engineering management in your inbox.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Related blog posts

Hire Developers