Developing and Publishing Shopify App(Part -1)

In this series, you will get to know how you can develop and deploy a Shopify app from scratch and publish to the App Store.

Source code of sample application can be found here :

rabiulislam-dsi/shopify-sales-chart

App Idea

Ideas can be generated based on different use cases of shopify stores and customers interactions. To give an idea I am going to share our sample application idea so that you can understand the context. Our intention to build an app that generates different statistical data by analyzing recent sales and orders and offer easy visualizations through admin UI to the owner of a store. The app will help a shop owner to make decisions about inventories and marketing strategies.

Getting Started

First of all you need a Shopify Partners Account to create and integrate your app on Shopify platform.

App Creation

Let’s get your hands dirty by creating a Shopify app. Shopify offers to build different types of app on their platform. We are going to build a public embedded app with Node and React. Actually there are two ways to build an app with Node and React.

Shopify CLI

We can use a tool provided by shopify called “Shopify-cli”. It will generate an app and save you some time(whereas you have to create an app manually in the partners dashboard and configure you app accordingly). Besides getting the project structure, you’ll be able to populate test datas like products,orders and billing stuffs very easily by using simple commands. To know more,you can go to this link below-

Getting started with Shopify App CLI

Manual App Creation

Or we can choose to start from scratch and set up the app manually. Shopify provides a very useful tutorial. Here’s the link-

Build a Shopify App with Node.js and React

Following these steps, you’ll be able to make an app just like shopify-cli generates. And don’t worry about “test products”. Here’s a link to get some “sample products”.

Using CSV files

You can download those csv files and import those in your store. Just go to the products tab and you’ll see an option named “Import Products”.

Create App Settings on Shopify

Though shopify has a great documentation about all these, I would like to highlight some things and share some links so that you can find these easily. I won’t go thorough the coding sections here(You can find those in the link I shared). I would rather talk about the Graphical Setup Interface of shopify partners Dashboard. Cause, the other section besides initiating the app might vary due to different purposes and needs(E.g. we have use Apollo client, Ngrok tunneller etc you might want to use Relay Client,any alternative to Ngrok or any private tunneller etc).

1. We used ngrok to create a secure tunnel from the public internet to your local machine. You can use any other alternative and expose your servers address.
2. Go to your partner’s dashboard and click on “Apps” tab.
3. Click “create app” button. You’ll see a page like this —

Create App(Source: Shopify Docs)

4. Select public app. In general settings, Provide a name for your app and the app url (Your tunnelled url for local environment) and also provide an redirect url for handling authentication callback. In the image, <APP_URL>/auth/callback has been used. Then click on the ‘create app’ button on the top-right corner of the page.

5. You’ll be redirected to a welcome screen that displays your Shopify API key and Shopify API secret key which will be needed for authentication purposes. Store those in your project according to your convenicence. We stored those in our .env file .The page will look like this —

API KEY AND API SECRET GENERATION (Source: Shopify Docs)

After adding authentication (following their docs), you can embed your appto your store by clicking on the “Test your app” button . You’ll see list of your stores. You’ll have to select the store in which you want to install your app. You’’ll see a page like this —

APP TEST INSTALLATION(Source: Shopify Docs)

If you click “Install unlisted app” it will redirect you to the authentication callback you provided in STEP-3, and after authentication it’ll redirect you to your store’s app section.

APP’s homepage after installation (Source: Shopify Docs)

After these steps, you can add new features to your basic app according to your need.

Here is the link of the app we published to app store-

Sales Chart - Ecommerce Plugins for Online Stores - Shopify App Store

In the next part, we’ll discuss about the deployment and submission of the app.

Contributors:

• https://github.com/rabiulislamanik
• https://github.com/rubelhassan

References:

• Shopify Developers Documentation