Build the app backend
This section is part of a larger tutorial to build a QR code example app. You need to build the frontend before starting these tasks.
Now that the frontend code to create, save, edit, and delete QR codes is ready, you'll need a database to store the QR code data and an API layer to connect the frontend to the backend.
What you'll learn
Anchor link to section titled "What you'll learn"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.
Step 1: Configure the database
Anchor link to section titled "Step 1: Configure the database"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.
Add the code to interact with the database
Anchor link to section titled "Add the code to interact with the database"In the
/web/
directory, create a new file calledqr-codes-db.js
.Add the following code to the file:
Step 2: Add the API layer
Anchor link to section titled "Step 2: Add the API layer"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.
Add a file that contains common functions used by the backend to format QR code data
Anchor link to section titled "Add a file that contains common functions used by the backend to format QR code data"Create a new folder called
/web/helpers/
.In the new folder, create a new file called
qr-codes.js
.Add the following code to the file:
Create the middleware to serve the API requests from the frontend
Anchor link to section titled "Create the middleware to serve the API requests from the frontend"The app uses authenticated endpoints to create, update, delete, and view a store's QR codes.
Create a new folder called
/web/middleware/
.In the new folder, create a new file called
qr-code-api.js
.Add the following code to the file:
Step 3: Connect the database and API endpoints to the server
Anchor link to section titled "Step 3: Connect the database and API endpoints to the server"Update your server configuration to use the new database configuration and API endpoints.
Connect the database
Anchor link to section titled "Connect the database"Import the database file you created in your Shopify app configuration.
Open
/web/shopify.js
.Import the database configuration that you created in the previous steps, and the SQLite package:
Delete the default database configuration included in the Node template, and replace it with your
QRCodesDB
configuration:
Add API endpoints
Anchor link to section titled "Add API endpoints"After you update your server configuration, you can replace the template's product creator with the new API endpoints.
Delete the
/web/product-creator.js
file. Because you replaced the app's frontend, the file is no longer needed.Open
/web/index.js
.Replace the
productCreator
import statement with the API endpoints that you created in the previous steps:Replace the template's product endpoints with the
applyQrCodeApiEndpoints
function defined in your middleware:
Your file should look like the following example: