Create a Table in the Data Store

Let’s create a table in the Data Store of the Catly project. As mentioned earlier, this table is used to store the original URLs entered by the user along with their short IDs generated by the application. Data from this table is accessed only if it is unavailable in the cache segment.

To create a table:

  1. Navigate to Data Store under Develop. react_app_create_datastore

  2. Click Create a new Table.

  3. Enter the table’s name as “UrlShorten” and click Create. react_app_table_name

Note: Ensure that you enter the name exactly as instructed, because the application's code that you will download from the GitHub repository contains the same name.

The table is created and displayed in the Data Store page.

Create Columns

Let’s now create two columns in the table for the original URL and its short ID.

  1. Click New Column in the Schema View section for the table. react_app_table_column

  1. Enter the column’s name as “originalUrl”. Select the data type as Var Char and enter the max length as “100”. Enable the Is Unique and Is Mandatory toggle switches. react_app_table_column_create

You can learn about the various data types supported by Catalyst and the other properties of a column from the Data Store help page.

Note: Ensure that you enter the name exactly as instructed.
  1. Click Create.

The column is created.


Let’s create the second column in the same way.

  1. Click New Column in the Schema View section for the table.

  2. Enter the column’s name as “urlCode”. Select the data type as Var Char and enter the max length as “100”. Enable the Is Unique and Is Mandatory toggle switches.react_app_urlcode_column


Note: Ensure that you enter the name exactly as instructed.
  1. Click Create.

The column is created. The short ID or the URL code is generated uniquely by the function for each URL. It is appended after /server/catly, e.g., /server/catly/bXBO2sf8, where bXBO2sf8 is the short ID. As a whole, it is the shortened version of the URL. We will discuss this in detail later.

Both columns are now listed in the Schema View section.

react_app_updated_datastore

The data is automatically populated in this table each time the user shortens a URL. You can view the records from the Data View section after you shorten a URL.

Last Updated 2023-12-15 18:54:08 +0530 +0530

RELATED LINKS

Data Store