Build the app backend

In this step, you'll learn how to do the following tasks:

• Configure the database to store QR codes.
• Add the API layer for the app.

The app needs a database to store the QR code details so that merchants can view and edit the saved QR codes, and so that customers can use them.

You can also track how many times customers scan QR codes by creating a public API endpoint, and redirecting the customer to the product page or checkout in the the online store.

The database table includes the product and discount information, as well as the basic details such as the QR code name, ID, shop, and destination type. All of that information is required to redirect the customer when they interact with the QR code images.

1. In the /web/ directory, create a new file called qr-codes-db.js.

2. Add the following code to the file:

Now that you have a place to store your app's data, and code to query it, you'll add an API layer so that the frontend can access the data.

1. Create a new folder called /web/helpers/.

2. In the new folder, create a new file called qr-codes.js.

3. Add the following code to the file:

The app uses authenticated endpoints to create, update, delete, and view a store's QR codes.

1. Create a new folder called /web/middleware/.

2. In the new folder, create a new file called qr-code-api.js.

3. Add the following code to the file:

Update your server configuration to use the new database configuration and API endpoints.

Import the database file you created in your Shopify app configuration.

1. Open /web/shopify.js.

2. Import the database configuration that you created in the previous steps, and the SQLite package:

3. Delete the default database configuration included in the Node template, and replace it with your QRCodesDB configuration:

After you update your server configuration, you can replace the template's product creator with the new API endpoints.

1. Delete the /web/product-creator.js file. Because you replaced the app's frontend, the file is no longer needed.

2. Open /web/index.js.

3. Replace the productCreator import statement with the API endpoints that you created in the previous steps:

4. Replace the template's product endpoints with the applyQrCodeApiEndpoints function defined in your middleware:

Your file should look like the following example:

Connect the frontend to the backend and test the app.