Start building your app

Previously, you created a new app with Shopify CLI. You're now ready to start building your app.

In this tutorial, you'll accomplish a series of tasks to add some specific functionality to your app. Your final app will be simple, but you’ll learn where to find resources to build more complex features on your own.

Scenario

You want to create an app that helps merchants manage their product inventory. Merchants will use your app to document important details about their products, including product names and prices.

Inventory management is the process of organizing and managing stock throughout the supply chain. Effective inventory management is critical for ensuring that a business has enough stock to meet customer demand.

By providing inventory management capabilities, your app will help merchants have a better chance of making a profit and being successful.

What you'll learn

After you've finished this tutorial, you'll have accomplished the following:

  • populated products in your development store to test your app against
  • built the beginnings of your user interface with Polaris
  • set up a GraphQL query to retrieve products
  • set up a GraphQL mutation to update the prices of products

Screenshot showing a simple, functional app

Requirements

Step 1: Populate products

Shopify CLI helps with the process of adding example data to test your app's behavior. You can use Shopify CLI to create records for products, customers, and draft orders.

Because your app needs to interact with product data, start by populating products in your development store:

  1. Open a new terminal window.
  2. Navigate to your project directory.
  3. Run shopify populate products.

GIF showing how to populate data in a development store

Step 2: Add an empty state

Now that you can run your app in Shopify, you can view and test your frontend components as you build them. You can use Polaris, Shopify’s React component library and design system, to build your user interface.

Use Polaris to add an empty state to your app. The Polaris Empty state component helps to communicate the value of your app and its primary action when merchants first add it to their Shopify admin.

  1. In your code editor, navigate to your pages/index.js file.
  2. Replace the contents of the file with an EmptyState component:

    When you preview your embedded app, it displays the empty state.

    Screenshot showing your app's empty state

Step 3: Add a resource picker

Next, add a resource picker so that you can select products from your app. You can use App Bridge, Shopify's standalone vanilla JavaScript library, to add a resource picker to your app.

The App Bridge ResourcePicker action set provides a search-based interface to help you find and select one or more products and then returns the selected resources to your app.

  1. In your pages/index.js file, add a class that sets a state for the resource picker. Then, add the ResourcePicker component to the primary action button on the EmptyState component:

    In your embedded app, when you click Select products, the Add products modal opens.

    GIF showing the Add products modal

Step 4: Add a resource list

Now that you've set up your resource picker, you need a way to retrieve products. You can retrieve products using the GraphQL Admin API. Ultimately, you want to display these products in a resource list.

To allow your app to query data with GraphQL, create a new ResourceList.js file and include the graphql-tag and react-apollo imports in the file.

Then, set up a GraphQL query called getProducts to retrieve a list of products and their prices.

  1. Run npm install store-js.

    store-js is a cross-browser JavaScript library for managing local storage. You'll use store-js to persist data for testing purposes in your app.

  2. Create a new components folder in the pages folder in your project, and create a new ResourceList.js file in the folder.

  3. Add imports to your ResourceList.js file and set up your GraphQL query to retrieve products and their prices:

  4. In your ResourceList.js file, after your GraphQL query, set up a class called ResourceListWithProducts that extends the ResourceList component and returns products and prices. Then, define your ResourceList component:

  5. In pages/index.js file, add your imports and define a constant for your app's empty state. Then, update the code that controls the layout of your empty state, and specify using your new resource list with products:

    Now, when you click Select products, and add products from the Add products modal, a list of products displays.

    GIF showing how to add products from the modal

Step 5: Update product prices

You've implemented a GraphQL query to read product data, and added the functionality to display the retrieved products in a resource list. Next, you'll use GraphQL to modify product data.

Set up a GraphQL mutation called ProductVariantUpdate to update the prices of products in your app.

  1. Create a new ApplyRandomPrices.js file in your components folder.
  2. Add imports to your ApplyRandomPrices.js file and set up a GraphQL mutation that allows your app to update the prices of products:

  3. After your mutation in ApplyRandomPrices.js, set up a class called ApplyRandomPrices which takes your mutation's input and applies a random price to the selected product:

  4. Update your pages/index.js file to include the following imports:

  5. In ResourceList.js, add the ApplyRandomPrices import. Implement a constructor on your ResourceListWithProducts class and update your GraphQL query to enable refetching products by ID. Finally, update your ResourceList component:

    In your app, you can now update the prices of products.

    GIF showing how to populate data in a development store

Next steps