Building a Shopify App: Learn the Basics of App Development

Building a Shopify App: Learn the Basics of App Development

Table of Contents:

1. Introduction
2. The Purpose of the App
3. The Example App Guide on Shopify.dev
4. Important Topics Covered in the Series
5. The Structure of the App
6. Understanding the Server File
7. The Front-end Structure and Navigation
8. Using Polaris for UI Design
9. Using the GraphQL and REST APIs
10. Overview of Other Files and Folders

Article: Building a Simple Shopify App for Product Updating

Introduction

Welcome to this series where we will build a small Shopify app together and explore the concepts involved in Shopify app development. In this series, we will focus on building a product updater app that allows us to quickly update product details such as title, description, and variants in our Shopify store. This app is designed to be small and simple, making it easy for beginners to grasp the basics of Shopify app development. While there is a more complex example app available on Shopify.dev, we have chosen a simpler approach to ensure that beginners are not overwhelmed.

The Purpose of the App

The purpose of this app is to provide a hands-on learning experience for Shopify app development. By building a product updater app, we will cover important topics such as server routing, REST and GraphQL API fetching, navigation through the admin, and using Polaris to build the user interface. While we won't spend much time on the actual code and logic parts, we will focus on the specific Shopify features and components used in the app.

The Example App Guide on Shopify.dev

Before diving into our app, it's worth mentioning that Shopify.dev offers a comprehensive example app guide that you may find helpful. This guide walks you through building a real-world example app with more complexity and functionality. However, some beginners have found it challenging to grasp all the concepts covered in that guide. Therefore, we have chosen to create a simpler app in this series to ensure a smoother learning curve for beginners.

Important Topics Covered in the Series

Throughout this series, we will cover various important topics related to Shopify app development. These topics include server routing, REST and GraphQL API fetching, navigation through the admin, and using the Polaris component library to build the user interface. We will also explore the usage of app Bridge components, as they play a significant role in the front-end development of Shopify apps.

The Structure of the App

To better understand how the app is structured, let's take a closer look at its folder hierarchy. At the top level, we have several files that are not crucial for our understanding. However, some files, such as package.json, Dockerfile, and .env, are worth examining as they play a role in setting up and configuring the app.

Understanding the Server File

The server file, index.js, is the main entry point for our app's server-side logic. It sets up the server, initializes the necessary API settings and authentication, and handles various middleware tasks. We will dive deeper into this file in later videos when setting up server endpoints, authentication, and billing functionality.

The Front-end Structure and Navigation

The front-end code of our app resides in the "web" folder. It includes important components such as the App Bridge, Polaris provider, and React Router. These components allow our app to interact with the Shopify admin and create a seamless user experience. We will explore these components and their usage in more detail in upcoming videos.

Using Polaris for UI Design

Polaris is a powerful component library provided by Shopify for building cohesive and visually appealing user interfaces. Our app extensively uses Polaris components to create a familiar and user-friendly design. We will discuss how to leverage Polaris components effectively to enhance the UI of our app. Additionally, we will demonstrate best practices for creating a visually appealing user experience.

Using the GraphQL and REST APIs

Our app interacts with Shopify's APIs to fetch and update product information. We utilize both the REST and GraphQL APIs throughout the development process. While REST is used to fetch the product count, GraphQL is employed to create products. We will explain the differences between these APIs and their respective use cases.

Overview of Other Files and Folders

In addition to the aforementioned components, there are several other files and folders that play a crucial role in our app. These include the asset folder for storing images, the Veet configuration file for building the front end, and the routes.js file for handling file-based routing. We will examine these files and folders in more detail during the development process.

Conclusion

In this article, we provided an overview of the upcoming series where we will build a small Shopify app for product updating. We discussed the purpose of the app, introduced the example app guide on Shopify.dev, and highlighted the important topics we will cover throughout the series. We also explored the structure of the app, focusing on the server file and the front-end components. In the next part of the series, we will dive into the app's structure and explore the folders and files in more detail. Stay tuned for the next video, where we will start building our app from scratch.

Highlights:

• This series focuses on building a small Shopify app for product updating.

• The app is designed to introduce beginners to the basics of Shopify app development.

• While a more complex example app is available, this series uses a simpler approach.

• Important topics covered include server routing, REST and GraphQL API fetching, and using Polaris for UI design.

• The app structure consists of a server file, front-end components, and various files and folders.

• Polaris is a powerful component library provided by Shopify for building cohesive user interfaces.

• The app interacts with both the REST and GraphQL APIs to fetch and update product information.

• Other files and folders, such as assets and configuration files, play supporting roles in the app's structure.

• The upcoming videos in this series will provide detailed explanations and demonstrations for each app component and feature.

• Subscribe and hit the bell icon for notifications on upcoming videos.