Guided Tutorial: Build an App

11 min read
·
Last updated on Mar 16, 2023
Thinking about building an app for the Wix App Market, but not sure where to start or what's possible?

At Wix DevCon 2022 we hosted an end-to-end guided tutorial on how to build an app in under an hour. The aim is to show how simple it can be to create and sell apps on the Wix App Market, along with a tour of the Wix app developer platform.

What you'll build in this tutorial

The app you'll create in this demo lets Wix site owners offer a discount on one of their products through the Wix Chat widget.

Before you get started

There's a couple of things you need to do before you start:
  • Sign up to Wix (or log in if you've already got an account).
  • We need to install an NPM (Node Package Manager) on your computer – we recommend Node.js version 16.4 as this is what we used for the demo.
  • Install an IDE/text editor – e.g., Visual Studio Code.

Follow the video tutorial

Don't want to go it alone? Here's the original presentation delivered by our in-house experts to guide you through the steps.
  1. Introduction: 00:00
  2. Clone the repository: 04:11
  3. Create an app in the Wix Developers Center: 06:24
  4. Find the right APIs: 13:06
  5. Add permissions: 16:21
  6. Create a dashboard component: 19:13
  7. Configure OAuth: 22:17
  8. Add webhooks: 28:16
  9. See the app in action: 32:28
  10. Adjusting the code: 39:55

1. Clone the repository

Right, let's do this. In your terminal emulator (Node.js or similar), run the following command from the folder that holds your projects and its assets:
1
git clone https://github.com/wix/wix-developers-example-apps.git
What assets?
For the purposes of this demo we've already gathered together a few things you need – e.g., images – and saved them in a folder for you.
The repository should now be cloned to your computer. Change the directory to the 'product of the day' app.
1
cd wix-developers-example-apps/product-of-the-day
If you don't use Git, you can download a zip file:
  1. Open up the the Wix repository.
  2. Click Code in the top right corner.
  3. Select Download ZIP.

2. Create an app in the Wix Developers Center

a.) Create a new app

  • Go to the Wix Developers Center.
  • Click Get Started.
  • If this is your first app, click Start Building. If you already have an app, click Create New App in the top right corner instead.
  • You should arrive here:

b.) Set up a development site to test your app on

Wix provides a free Premium test site environment to make it easy to see how your app's working. Here's how to set one up:
  1. In the top right of your app dashboard click Test Your App > Create Development Site.
  2. Make sure Wix Stores is selected, then click Create Site.
  1. Go to Wix.com.
  2. Find the development site you just created – it begins with 'Dev Site'.
  3. Hover over it and click Select Site – this takes you to the site's business manager.
  4. Click Edit Site.
  5. Click Publish in the top right of the site's Editor.
  6. Your test site should now be live – nice work.

3. Find the right APIs

Wix has a big collection REST APIs that let developers access the Wix site and user data they need for their app to work. For this app you need three APIs:
  1. Query Products – this lets the app locate and select the 'Product of the Day'.
  2. Create a Coupon – this lets the app generate a discount coupon for the site owner's chosen product and discount percentage.
  3. Send Message – this lets us communicate the coupon to the site visitor in the Wix Chat widget.
Keep them handy
You don't need to use these right now – that comes later – but familiarise yourself with them, and keep the tabs open.

4. Add permissions

Now that you've found the APIs, you need to add some permissions. Permissions are how a user grants your app consent to access their data. To add permissions:
  1. Go back to your app in the Wix Developers Center.
  2. Click Permissions in the side menu (under Build Your App).
  3. Click + Add Permissions.
  1. Choose the relevant Permissions Category, and then select the Permission Scope.
  2. Add Wix Stores > Read Products
  3. Click Save.
  4. Repeat the process for the next two permissions.
  5. Add Coupons > Manage Coupons, click Save.
  6. Add Wix Chat > Manage Inbox Messages, click Save.
Tip:
You can see which permissions you need for each API in the documentation.

5. Create a dashboard component

A dashboard component is where a site owner / app user manages the app – this exists on the backend and won't be visible on the live site.

a.) Start the client React.js project

  1. Go to the client folder in the terminal.
1
cd client
  1. Run one of the following to install js packages:
1
yarn
Or:
1
npm install
3. Once the installation is complete, start the client on port 3000.
1
yarn start:secure
Or:
1
npm run start:secure
4. The command run start:secure will open https://localhost:3000 in your browser and you'll encounter a security warning – this is because you don't have a certificate for your localhost machine.
5. Click Advanced
6. Click Proceed to localhost (unsafe)
7. You should now see the dashboard UI:

b.) Add a dashboard component to your app in the Wix Developers Center

  1. Go back to your app in the Wix Developers Center.
  2. Click Components on the side menu.
  3. Click Add Component in the top right corner.
  4. Select Dashboard component.
  1. Paste https://localhost:3000/ into the Page URL field.
  2. For a seamless experience, we recommend integrating your app's dashboard into the user's Wix Dashboard.
  1. Click Save.

6. Configure OAuth

Wix uses OAuth 2.0 to authorize apps to access our APIs and apply webhooks. OAuth is an authentication protocol that lets users approve one application interacting with another without needing to give away their password.

a.) Start the Node.js server

Now we need to start the server side of the code:
  1. Go to the server folder in a new terminal:
1
cd server
  1. Run one of the following to install js packages:
1
yarn
Or:
1
npm install
3. Under the server folder run the following command to create a .env file from the example.env.text:
1
cp  example.env.txt .env
4. Replace the APP_ID and APP_SECRET parameters in the .env file by taking them from the OAuth page of your app in the Wix Developers Center. It should look like this:

5. Skip the WEBHOOK_PUBLIC_KEY parameter for now (you'll replace it on the next step).
6. After the installation ends successfully and you have the .env file ready with your APP_ID and APP_SECRET parameters it's time to start the server. Run the following command:
1
yarn run start
Or:
1
npm run start
7. In the terminal you'll get something similar to this:
8. You need the AppUrl and RedirectUrl you received in the terminal for the next step, so keep them handy.
Useful server commands
  • Stop the server: yarn run stop / npm run stop
  • See the server logs: yarn run logs / npm run stop
  • Delete the server from pm2: yarn run delete / npm run delete
  • Run tests: yarn run tests / npm run tests 

b.) Configure OAuth in the Wix Developers Center

  1. Go to your app in Wix Developers Center.
  2. Go the OAuth page in the side menu. In the URLs section insert the Redirect URL and App URL you copied from the terminal output you got in the previous step. It should look like this:

7. Add webhooks

Webhooks are designed to deliver notifications about events in your app, other apps, or the Wix site as and when they happen.

a.) Find the webhook you need

For this app we need the Message Sent To Business Webhook. Take some time to read the documentation, including the permissions this webhook requires (these are added automatically when you add the webhook in the next step).

b.) Add a webhook to your app

This app needs to receive a webhook for every new message a site visitor sends in the Wix Chat widget. Here's how to configure it:
  1. Go to your app in Wix Developers Center
  2. Go to the Webhooks page in the side menu.
  3. Click Add Webhook.
  4. In the API Category dropdown select Wix Chat > Message Sent to Business
  5. Once you've started the node server you should see a printed output in the terminal. Copy the result of the Message received webhook: output and paste it into the Callback URL field. It should look like this:
  1. Click Save.

c.) Replace the webhook public key in the .env file

  1. Go to the Webhooks page of your app in the Wix Developers Center
  2. Click to open the Public key field and click Copy Key. It should look like this:
  1. Open the .env under the server folder.
  2. Replace the WEBHOOK_PUBLIC_KEY parameter.
  3. Restart the server by running under the server folder in the terminal: yarn run stop and yarn run start / npm run stop and npm run start

8. See the app in action

a.) Install the app on the development test site you created earlier

  1. Go to your app in the Wix Developers Center.
  2. Click Test Your App and select App Market.
  3. Click Add to Site.
  4. Select the Wix Stores development site you created earlier and you'll be redirected to the app installer.
  5. You'll be shown the app's required permissions (this is where users consent to the permissions you created earlier).
  6. Click Agree and Add.

b.) Add a product page in the Editor

  1. Click Pages & Menu in the Editor side menu.
  2. Choose Store Pages > Product Page.
  3. Click + Add Shop Page.

c.) Configure the app in the dashboard

  1. Go to My Sites and click Select & Edit Site on your development site.
  2. Go to Apps in the side menu and select your app to open its dashboard.
  3. Type 'I'm' into the product search bar.
  4. Select a product and insert a Discount Percentage.
  5. Click Save. This is what it looks like:

d.) Write a message in the Wix Chat widget and return a coupon

  1. In the site business manager find the live site URL:
  1. Click View Live Site.
Site not loading?
As you've just created a brand new domain, it can take a while to kick in. If the site isn't loading at this stage, try again later on.
3. In your live site, open the chat widget and type 'Hey' or similar:
4. If your app works you'll get response with a coupon to the product of the day you chose in the app dashboard:

e.) Use the coupon to get a discount on the product of the day

  1. Copy the coupon code from the response.
  2. Click the link to Product of the Day.
  3. Add the Product of the Day to the cart and go to the checkout.
  4. Add the coupon code and check that you got the Discount Percentage you added earlier on.

9. Adjusting the code

To round things off, we will briefly dive into the code and add some missing information. This will help you understand how the code works when you're building your own app.

We intentionally left out the coupon sent date (which is how our app generates a product of the day coupon for each message). Let's fix that.

a.) Save the coupon data by conversion Id and date

  1. In our code find the file ProduceOfTheDayService.js.
  2. Create the date format by adding dayJs at the top of the file:
1
const dayjs = require('dayjs')
  1. In the sendCouponOfTheDay function add:
1
const today =  dayjs().format('DD/MM/YYYY')
  1. Use this today variable, the conversationId and coupon data to save it in the coupon database:
1
this.couponsDao.save(instanceId, conversationId, today, couponData)

b.) Check if the visitor got a valid coupon for the current date

In the same file and function sendCouponOfTheDay we need to add a condition not to send the coupon and avoid generating a new one.
  1. Check if coupon for this conversion Id and date exist on our database.
1
const coupon = await this.couponsDao.getBy(conversationId, today)
  1. Add an 'if statement' to check if this coupon is empty using lodash. Place this code the top of our js file ProductOfTheDayService.js:
1
const _ = require('lodash')
  1. Use lodash isEmpty in our 'if statement' like this:
1
if(_.isEmpty(coupon)){
  1. If everything's working correctly, we're now sending a coupon only once every day for conversion id.

You're all done – what next?

Congratulations for making it through the tutorial. Feeling confident after everything you've learned? It's time to take the next step – there's a few ways to get started:
  • Browse the App Market: Look for gaps and take inspiration from other available apps
  • Plan your app: Starting outlining and preparing to build your own app
  • Get to know our API documentation: Find the right APIs and webhooks for your app
  • Check out our support site: We've got loads of handy guides and tutorials
  • Read the App Market Guidelines: There's a few important things to know about how things work
IN THIS ARTICLE
Previous article
Next article

Related Content

OAuth, Permissions and Webhooks

Get Started with APIs

You can use our various APIs to access Wix users' site data (e.g., contacts, orders, etc.). To do so, site owners must grant you explicit permission to collect this data when installing your app. To ensure tha
2 min read

OAuth, Permissions and Webhooks

Set Up OAuth, Permissions and Webhooks

Protecting user privacy is really important. If your app requires access to a site's private data (e.g., contacts, orders, etc.), site owners must give you permission to collect this data when they first instal
3 min read

Marketing

Create Your App Market Listing

Your app's market listing is one of your biggest marketing tools and tells users what your app is for, how it can help them, and how much it costs. This is your chance to make a great first impression and stand
9 min read

Legal and Policy

App Market Guidelines

Our guidelines are written with Wix users and their site visitors/customers in mind. Following our guidelines won't just improve the chances of your app being accepted into the App Market - it will also improve
17 min read