Building a simple Chat application from SpringBoot and React Native – Part 1: Building a Database with Heroku Postgres

Tram Ho

Currently, chat applications are becoming a growing trend to increase interactivity and convenient connection for users anytime, anywhere. Have you ever wondered what technology to code to build messenger, zalo or whatsapp, how to code?

On the internet, there have been many articles on building Chat application with React Native , with the help of Firebase . The advantage of solving most problems from back-end, database creation, as well as having push notification support and in my opinion is the very fast API calling speed. However, with this article, I want to help you understand and do everything, so that you can grasp the flow of an application.

Let’s start!

Because the steps to create the application are quite “potato”, this content will be divided into 4 parts as follows:

  • Build Database with Heroku Postgres
  • Building API for Chat application with Spring Boot
  • Deploy API to Heroku
  • Build a simple Chat interface on your phone with React Native

Knowledge base in this section:

  • Understand the basics of simple SQL statements (which is PostgreSQL here).
  • How to use the Navicat tool or database management tool that you are familiar with.

Step 1: Create a Heroku account

Imgur

Step 2: Create a new project in Heroku

Imgur

Imgur

Note: App name only consists of lowercase letters and hyphens (specified by heroku). To avoid the domain conflict, at this point you should give a different name to your liking.

Step 3: Build Database with Heroku Postgres

After the Create App in step 2, you switch to the Resources tab, in the Add-ons section find and select Heroku Postgres .

Imgur

Imgur

After clicking Provision, we will be as shown below. Please follow the numbers below:

Imgur

Imgur

Imgur

This is the information needed to connect to the database, helping you extract data easily through the support tools. Please save this information again.

Step 4: Connect the database (database)

Here I will use the Navicat tool used to connect the database. You can see the installation instructions here . After successful installation, follow the steps below.

Imgur

Imgur

This dialog box will save the database connection information in step 3. You can select Test Connection first to see if there are any errors before selecting OK. After connecting successfully, double-click on “ChitChatDB-heroku” to open the connection, then click the left mouse button to New Query

Imgur

Step 5: Create the MESSAGES table

Enter the following code line to create the MESSAGES table

After running this query successfully, you can INSERT 1.2 data lines and perform SELECT test.

If successful, the following will result:

Imgur

Check the Heroku page in step 3 and switch to the Overview tab, we will see the following results:

Imgur

As you can see, here we have 1 table and 1 row, reflecting exactly what we saw in Navicat. At this point, you have successfully built a Database with Heroku Postgres.

If you find this article helpful and would like to continue reading the next sections on this topic, do not hesitate to like your post or comment.

Share the news now

Source : Viblo