Build an example app
In this tutorial, you'll build on a Node app that you created using Shopify CLI. You'll end up with a working example app that enables merchants to create QR codes for specific products and track the number of scans for each QR code. QR codes can include specific discounts, and can link to either the online store product page or directly to checkout with the product added to the cart.
About the QR code example app
Anchor link to section titled "About the QR code example app"We've designed the QR code example app to demonstrate some of the patterns, components, and features that are common in Shopify apps. The QR code app addresses a real-world merchant need and integrates seamlessly with the Shopify admin user interface. Merchants can create, view, edit, and delete QR codes using the app.
The app uses the Shopify App Bridge and Polaris component libraries. App Bridge enables apps to communicate with the Shopify admin. App Bridge also renders important UI elements for your app, outside of the app iframe. Polaris components are a collection of interface elements that can be reused across the Shopify system.
As you work through the tutorial, you'll create some files and add the code step-by-step. You'll create the frontend and UI first, followed by the backend functions. The last step is to connect the frontend to the backend to make it all work.
The QR code example app is documented and available for download in the Shopify/shopify-app-examples GitHub repo.
What you'll learn
Anchor link to section titled "What you'll learn"In this tutorial, you'll learn how to do the following tasks:
- Create a UI using App Bridge and Polaris.
- Build the API layer of your app.
- Integrate an SQLite database.
Requirements
Anchor link to section titled "Requirements"- Follow the Create an app tutorial to initialize a new app that uses the Node app template.
- Install a code editor on your computer, such as VSCode or Atom.
Build the frontend of the QR code example app.