May 30, 2022

Low Code Shopify App Development using SmoothCode

We’ve all been there, knees deep into Shopify app development documentation with a million browser tabs open and struggling to make sense of what we’ve just read. Wondering if there’s an easy way to do this.

Prakhar Srivastava

Low Code Shopify App Development using SmoothCode

Well, Shopify App developers, there is an easy way to do this.

Why build the authentication for your app from scratch spending hours or sometimes weeks when you can do that in less than a minute?
Why devour the Shopify Billing documentation when you can set that up in minutes?
Why go through webhooks and access scopes documentation to see what access scopes you need for the webhooks you require when you can do this automatically?
Why keep looking at emails and partner dashboard to see who installed / unininstalled your app or upgraded / downgraded your plan when you can set that up in minutes?

Let’s dive deeper in the world of SmoothCoding where you can do all of this without writing a single piece of code.

Let’s create a Shopify app that would listen to a store’s order-create webhook and shows the list of all the orders for that stores

Here’s a list of things that will be handled by SmoothCode, our low code platform

Authentication: App installation from Shopify
Pricing: We will make it a paid app worth $10
Webhook Registration: We’ll register the order-create webhook
Access Scopes: In order to register order-create webhook, we need read_order permission
Slack Alerts: We’ll be notified about the installs and uninstalls on Slack

Here’s a list of things for which we will be writing the code

Show Order List from DB
Add Order to DB when an order is created

We will start with writing our application logic and then move on to setting up the app on SmoothCode

We’ll create this application using the following techstack:

NodeJS + Express
MongoDB
Ngrok

Let’s start with out application:

Create a new directory with the name of the app


mkdir low-code-order-dashboard

Start an npm Project and install few libraries


npm init # Fill the details
npm install dotenv # For loading environments
npm install express # For running Server
npm install mongoos # For interacting with Mongo DB
npm install smoothcode-client # For using SmoothCode helper methods

We’ll create an .env file


MONGODB_URL=mongodb://127.0.0.1:27017/low_code_order

# SmoothCode Info - We'll fill it later
SMOOTHCODE_PROJECT_ID=
SMOOTHCODE_CLIENT_ID=
SMOOTHCODE_CLIENT_SECRET=

To insert Orders in our DB, We’ll create Order Table Schema
Create a new directory "app" and inside it create schema and create a new file order.js


mkdir app
mkdir app/schema
touch app/schema/order.js

Add the following code in order.js


const mongoose = require('mongoose')
const Schema = mongoose.Schema

const OrderSchema = new Schema({
    shopifyId: String,
    name: String,
    email: String,
    currency: String,
    amount: {type: Schema.Types.Decimal128},
    amountUSD: {type: Schema.Types.Decimal128},
    store: String,
    createdAt: Date
})

const Order = mongoose.model('Order', OrderSchema)

module.exports = Order

To show the list of orders, We’ll create our Order Listing Page now
Create a new directory views in app directory and create a new file getOrderList.js


mkdir app/views
touch app/views/getOrderList.js

We are using bootstrap to make the table look presentable, add the following code in getOrderList.js


const getTable = (orders) => {
    return orders.map((order) => {
        return (`
            <tr>
                <td>
                    ${order.store}
                </td>
                <td>
                   ${order.shopifyId}
                </td>
                <td>
                    ${order.name}
                </td>
                <td>
                    ${order.amount}
                </td>
                <td>
                    ${order.currency}
                </td>
                <td>
                    ${order.createdAt.toUTCString()}
                </td>
            </tr>
        `)
    }).join('')
}

const getOrderList = (orders) => {
    return (`
        <head>
            <title>Order List</title>
        </head>

        <table class="table table-dark">
            <thead>
            <tr>
                <th scope="col">
                    Store
                </th>
                <th scope="col">
                    Order ID
                </th>
                <th scope="col">
                    Order Title
                </th>
                <th scope="col">
                    Order Amount
                </th>
                <th scope="col">
                    Currency
                </th>
                <th scope="col">
                    Created At
                </th>
            </tr>
            </thead>
            ${getTable(orders)}
        </table>
    `)
}

module.exports = getOrderList

Let’s create our helper methods to Insert Order to DB and Get Orders from DB
Create a directory services in app and create files getAllOrders.js and insertOrder.js


mkdir app/services
touch app/services/getAllOrders.js
touch app/services/insertOrder.js

Let’s add the following code in insertOrder.js


const Order = require("../schema/order");

const insertOrder = async (webhookData, shop) => {
    Order.create({
        shopifyId: webhookData.id,
        name: webhookData.name,
        email: webhookData.email,
        currency: webhookData.currency,
        amount: parseFloat(webhookData.current_total_price),
        amountUSD: parseFloat(webhookData.total_price_usd),
        store: shop,
        createdAt: new Date(webhookData.created_at)
    }, (err, order) => {
        console.log(`Successfully created order with id: ${order.shopifyId}`)
    });
}

module.exports = insertOrder

Let’s add the following code in getAllOrders.js


const getOrderList = require("../views/getOrderList")
const Order = require("../schema/order");

const getAllOrders = async (shop) => {
    const orders = await Order.find({store: shop})
    return getOrderList(orders)
}

module.exports = getAllOrders

Finally we’ll create our routes and index file
Create a new file index.js at the root of the project
Require all the packages


require('dotenv').config() // to configure our env variables

const express = require('express') // load express
const mongoose = require('mongoose') // load mongoose (MongoDB ODM)
const smoothcode = require('smoothcode-client') // load smoothcode-client

Require all the required methods


const getAllOrders = require("./app/services/getAllOrders")
const insertOrder = require("./app/services/insertOrder");

Intialize app using express and use express.json() to parse JSON POST data


const app = express()

app.use(express.json())

Let’s start server and connect to mongo


// Starting Server
const server = app.listen(8081, () => {
    const host = server.address().address
    const port = server.address().port

    console.log(`Example app listening at http://${host}:${port}`)
})

// Connecting to MongoDB
mongoose.connect(
    process.env.MONGODB_URL,
    {useNewUrlParser: true, useUnifiedTopology: true},
    (err) => {
        if (err) throw err
        console.log('Successfully connected!')
    }
)
mongoose.connection.on(
    'error',
    console.log.bind(console, 'Mongo Connection Error!')
)

Let’s add our routes in the same index.js


// Home Route
app.get('/', (req, resp) => {
    resp.send(
        '<h1>Welcome to Low Code Order Dashboard</h1>'
    )
})

// Page to Show Order listing
app.get('/order-listing', async (req, res) => {
    // This method validates that
    // the request is coming from SmoothCode for Dashboard
    const hmac = req.query.hmac
    const clientSecret = process.env.SMOOTHCODE_CLIENT_SECRET
    const shop = req.query.shop
    if(!smoothcode.isDashboardRequest(hmac, clientSecret, shop)){
        res.status(400).send('Bad Request')
    } else {
        // If the request is valid
        // Show the list of orders for the given Shop!
        const orderList = await getAllOrders(req.query.shop)
        res.send(orderList)
    }
})

// POST request for newly created orders
app.post('/order-create-webhook', (req, res) => {
    // This method validates
    // that the webhook is coming from SmoothCode
    const auth = req.headerss.authorization
    const clientSecret = process.env.SMOOTHCODE_CLIENT_SECRET
    const data = req.body
    if(!smoothcode.isWebhookRequest(auth, clientSecret, data)){
        res.status(400).send('Bad Request')
    } else {
        // If the request is valid
        // Insert the order to our DB
        insertOrder(req.body, req.query.shop)
        res.send('Order Webhook Received!')
    }
})

And that is it! We’re done with the app!

Now we'll:

Start Mongo Server


docker run -p 27017:27017 mongo

Start Node Server


node index.js

Open ngrok tunnel to port 8081
For this article we'll assume the domain to be https://low-code-order-dashboard.ngrok.io

Let's move onto setting up our App on SmoothCode

Let’s sign up on SmoothCode using Github/Google

Once we are signed up. Let’s create a new App by clicking the + button

Enter the name for your app and press “Continue”. We’ll name it “Low Code Order Dashboard”
Create an app on the Partner Dashboard and copy the Shopify Credentials into SmoothCode

Click on “Start Building” and That is it. Your application is setup now. Let’s add a Pricing for our App now.
Add your order-listing URL with domain in the “App Dashboard”

Navigate to “App Pricing” and click on “Add Pricing Plan”

Add in your Pricing Details as per your requirements like this and click on “Save”

Navigate to “Webhooks” and click on “Add Webhooks”
Select order/create and add order-create-webhook URL with Domain

Navigate to “Access Scopes” and Read Order scope should automatically be selected since it is needed to register Order Create Webhook

Navigate to “Slack Alerts” and click on “Add Slack Alert”.
Add alerts for Installs and Uninstalls by adding Slack Webhook URLs

Now our app on SmoothCode is also setup. Let’s link our application with SmoothCode

Navigate to “App Settings” at the Top Right

Copy “Project ID”, “SmoothCode client ID” and “SmoothCode client secret”

Paste them in our .env file and restart the server


SMOOTHCODE_PROJECT_ID={"Project ID"}
SMOOTHCODE_CLIENT_ID={"SmoothCode client ID"}
SMOOTHCODE_CLIENT_SECRET={"SmoothCode client secret"}

Navigate to “Test Stores” and add your Test Stores so that you’re not charged for the payment

And our app is completed!

Let’s Test this app

Install it on a dev store.

Select a Dev store from the List. You will be redirected to the Permissions Page.

Scroll to the bottom of the page to see that the app is asking for “Read Orders” permission. Install the app by clicking “Install unlisted app”

You’ll be redirected to the “Payments” Page. The plan details should match the plan created on SmoothCode. Click on “Approve”

You’ll receive a Notification on Slack about the Install

Place an Order on the Store and You will be able to see the order on Ap

That is it! No need to write code for authentication, pricing, slack alerts, webhooks into your application. Leave all of that to SmoothCode. Focus on your application.

It is that easy to build an app using SmoothCode

Signup on SmoothCode today and start building Shopify app at lightening pace and without needing to keep up with Shopify changes.

You can reach out to us on LinkedIn, Twitter or hello@smoothcode.io

‍

Looking to build a Shopify App? Sign Up and start building now