Connect the frontend to the backend and test the app
In this section, you'll connect the frontend of the app with the backend functions and APIs. In some cases you'll replace placeholder code and mock data with functional code.
At the end of this section of the tutorial, you'll have a working QR code app to try out.
Step 1: Update the edit page to get the QR code dataAnchor link to section titled "Step 1: Update the edit page to get the QR code data"
Now that you have a backend to serve the QR code form, you'll update the Edit QR code page with the logic to fetch data.
useAppQuery is responsible for making REST API calls to the app backend and provides the following functionality:
- Uses App Bridge to ensure that a request is authenticated with a session token. It checks the response to determine if a session is valid and redirects invalid sessions to an authentication flow.
useQuerywith that authenticated fetch method and any fetch options you pass.
reactQueryoptions you pass.
Import the following hooks and components:
Delete the temporary code and replace it with code that queries the QR code with the ID in the URL:
Step 2: Connect the frontend to the backend codeAnchor link to section titled "Step 2: Connect the frontend to the backend code"
In this step, you'll update the QR code form to connect with the backend APIs to save, delete, and add discounts to QR codes.
Save QR codesAnchor link to section titled "Save QR codes"
onSubmit callback fires when the merchant clicks Save. The
onSubmit callback accepts the body, or form data, and manipulates it to send it to the backend API.
- Open the
Delete the temporary code and replace it with the
Delete QR codesAnchor link to section titled "Delete QR codes"
deleteQRCode callback that fires when a merchant clicks Delete QR code.
Still in the
/web/frontend/components/QRCodeForm.jsxfile, delete the temporary code and replace it with the
Step 3: Connect and add code to handle discountsAnchor link to section titled "Step 3: Connect and add code to handle discounts"
In this step you'll add code to handle discounts, which are queried from the online store using the GraphQL Admin API.
Add a new access scopeAnchor link to section titled "Add a new access scope"
The QR code app requires access to the discounts in the store so that users can select discounts to include in QR codes. To get access to discounts, the app needs to request the
read_discounts access scope so that it can retrieve discount information from the GraphQL Admin API.
- From your app root, open
In a terminal, shut down your development server using
C. Then restart it to request the new access scope:
Connect the frontend and backend code to show and select discountsAnchor link to section titled "Connect the frontend and backend code to show and select discounts"
In this step, you'll add the code to enable selecting discounts inside the QR code form. The discount codes are fetched from the
/api/discounts endpoint in the backend.
Still in the
/web/frontend/components/QRCodeForm.jsxfile, delete the temporary discounts code and replace it with the code that queries discounts:
Step 4: Connect the list view to display saved QR codesAnchor link to section titled "Step 4: Connect the list view to display saved QR codes"
In this step, you'll add
useAppQuery to query data from the backend to display the QR code list on the app's home page.
The app uses a "stale while revalidate" caching strategy. If the merchant has already visited the page, then the app can show data immediately, while performing a new request to get the latest version. The Loading qr codes... state displays to the merchant.
- Open the
Delete the temporary code and replace it with code that queries the QR code data for the list view:
Step 5: Add code for QR code imagesAnchor link to section titled "Step 5: Add code for QR code images"
In this step, you'll add the code to preview, download and scan QR codes. You'll also add some backend APIs that will be publicly available.
Add dependenciesAnchor link to section titled "Add dependencies"
qrcode to your dependencies. The
qrcode package is used to manage and generate QR codes.
In a terminal, navigate to your app's
Run your package manager's install command to install the dependencies:
Create the file for the public endpointsAnchor link to section titled "Create the file for the public endpoints"
- In the
/web/middleware/directory, create a new file called
Copy and paste the following code into the new file:
Connect the public endpoints to the serverAnchor link to section titled "Connect the public endpoints to the server"
- Open the
Import the middleware public endpoints function you created in the previous step:
Add the following code directly after the
Add the proxy rules for image and scan URLsAnchor link to section titled "Add the proxy rules for image and scan URLs"
Any routes that don't start with
/api are handled by the client by default, so you'll add some proxy rules to handle the
- Open the
/qrcodes/proxy rules in the server object within the
Step 6: Test the appAnchor link to section titled "Step 6: Test the app"
You can test the app by creating a QR code and downloading it. You can also check that the QR code works by scanning it with your mobile device.
- Create and save a QR code using the app.
- Test the download functionality:
- Click Download.
- Check that your browser downloaded the QR code image file.
- Test the scan functionality:
- Log in to your test store from your mobile device browser. You can find the password for your test store from the Preferences page of the Online Store channel in the Shopify admin.
- Point the mobile device camera at the QR code and go to the URL.
The URL takes you to the product page or to the checkout according to how you configured the QR code. If you get a 404 error in your browser, then make sure that you published the product to your online store.
You created a working app using some patterns, components, and features that are common in Shopify apps.
- Use webhooks to stay in sync with Shopify or execute code after a specific event occurs in a shop.
- Identify your app business model and learn how to use the Billing API to bill customers with recurring monthly charges or one-time purchases.
- Learn how to use app extensions to add features to Shopify admin or Shopify Point of Sale (POS).
- Explore the GraphQL Admin API and REST Admin API references.
- Learn how to deploy your app.