Onboard Users Like a Wizard 🧙 with Shepherd.JS -- React Basics Tutorials

Say goodbye to lost users!
Onboarding is a valuable feature for your App's first-time users. 💪

Our free, live workshop will walk you through creating a Web Database App, setting up a React project, and developing a tutorial that guides users through the App.

Outline

• Get Started
  • frontend & backend folders
• Get Your Free Kintone Database
• Create a Kintone Web Database App
• Kintone API Token
• Create a .env File
• Appendix
  • What is Shepherd.JS?
  • What is Kintone?
• Debugging - Let's Fix Those Problems 💪
  • npm install command is not working

---

Get Started

First, clone the sean-kintone/shepherd-react-tutorial repo! 🚀
Then go inside the folder.

Once you are inside the folder, let's install the dependencies!

cd Downloads

git clone https://github.com/sean-kintone/shepherd-react-tutorial

cd shepherd-react-tutorial

Open the shepherd-react-tutorial folder in VS Code

code .

frontend & backend folders

Inside there should be two folders: frontend & backend

1. Open a terminal per folder ~
2. From inside the folders, download the required packages with npm install.

	Terminal 1 - Frontend 🌞	Terminal 2 - Backend 🌚
Go inside the folder	cd ~/Downloads/shepherd-react-tutorial/frontend	cd ~/Downloads/shepherd-react-tutorial/backend
What is inside?	Code for the React App	Code for the Express server
Install packages	npm install	npm install
To run the scripts	npm start	npm start

Get Your Free Kintone Database

bit.ly/KDP_NEW

• ⚡ Only use lowercase, numbers, & hyphens in your subdomain
• ⚠ Do not use uppercase or special characters

---

Create a Kintone Web Database App

Let's create a ShepherdJS Onboarding Kintone App!
This will keep track of two metrics for visitors to our site:

1. Did users complete the task?
2. Did users finish our onboarding?

Here are the required fields & their configurations for our workshop:

Field Type	Field Name	Field Code	Note
Radio Button	Task Completed?	completed	Options: Yes and No
Number	Percent Completed	percent	This will show the onboarding tour completion rate

Be sure to click the Save and Activate App buttons! 💪

Your Kintone App should look like this, with one Radio Button field & one Number field:

Your Radio Button settings should look like this (⚠️notice the field code is lowercase, completed, and your button options are title case Yes and No ⚠️):

And your Number field settings should like as so:

Confused? 🤔 → Check out the gif below:

Create a Kintone ShepherdJS Onboarding App Gif 📺

---

Kintone API Token

To generate an API Token for a Kintone App:

1. Go to the Kintone App
2. Go to the Gear icon ⚙️ (top right corner) > Open the App Settings page
3. Click on the App Settings Tab > Click on API Token settings
4. Click the Generate button to generate a token
5. Enable the Add records and Edit records checkboxes
6. Click the Save button (top left corner) to save the token setting
7. Finally, click the Update App button (top right corner) to implement the token setting change.

Confused? 🤔 → Check out the gif below:

Generate a Kintone API Token Gif 📺

---

Create a .env File

1. Using the .env.example file as a template, create a .env file.
2. Then input your Kintone credentials like the following:

SUBDOMAIN = "example"
APPID = "1"
APITOKEN = "abcdefghijklmnopqrstuvwxyz"

⚠️ DO NOT DELETE THE .env.example FILE!

.env.example is used by env-cmd to verify that .env file is correctly configured.

---

Appendix

What is Shepherd.JS?

Shepherd is a free, open-source JavaScript library for guiding users through your App.

Shepherd.JS is similar to other popular onboarding JS libraries such as Intro.JS and React Joyride but:

• Unlike Intro.JS, Shepherd.JS is free for personal and commercial uses.
• Unlike React Joyride, Shepherd.JS is not limited to React projects.

What is Kintone?

Kintone is a no-code/low-code cloud platform for teams to quickly & easily share and collaborate on their data.

You can add JavaScript, CSS, &/or HTML to enhance the frontend UI/UX of a Kintone App. This can include features such as maps, buttons, and color-coding.

Read up on how to customize and develop on the Kintone platform at kintone.dev

---

Debugging - Let's Fix Those Problems 💪

Here is a rundown of common problems that may occur & their solutions!

npm install command is not working

1. Verify the Node.js & npm versions inside the shepherd-react-tutorial folder
2. Just installed Node.js? Verify you configured Node.js versions inside the shepherd-react-tutorial folder

• Mac: nodenv local 14.5.0
• Windows: nvm use 14.5.0