⚠️ THIS REPO IS ARCHIVED ⚠️

⚠️ DO NOT USE THIS WORKSHOP ANYMORE ⚠️

UPDATED WORKSHOP: kintone-workshops/React-x-REST-API-Workshop

React Workshop by Kintone - Version 3

Overview of the Repo

File	Path	Purpose	Need to Modify?
📗 [README.md]	`README.md`	Notes on how to configure this Kintone x React App setup	Nope
📕 Slides.pdf	`Slides.pdf`	Slides for the workshop	Nope
📕 Install_NodeJS.md	`docs/Install_NodeJS.md`	Step-by-step guide on how to install NodeJS & npm	Nope
📕 Steps.md	`docs/Steps.md`	Step-by-step guide on how to setup the Kintone x React App	Nope
📕 Debugging_Log.md	`docs/Debugging_Log.md`	Common bugs & its solutions for this workshop	Nope
📕 Change_FieldCodes.md	`docs/Change_FieldCodes.md`	Guide on how to modify this codebase to use your own field codes.	Nope
index.js	`frontend/src/index.js`	Renders React code & passes it to index.html; `ReactDOM.render(...);`	Nope
index.html	`frontend/public/index.html`	Homepage of the React App; `<div id="root"></div>`	Nope
App.js	`frontend/src/App.js`	Parent component - Combines the list & form components	Yes! - Append POST
getRecords.js	`frontend/src/requests/getRecords.js`	Fetches Kintone records, transforms response, & returns array of list items	Nope
ListRecords.js	`frontend/src/components/ListRecords.js`	List component - Creates a list from the list items array	Nope
.env.example	`backend/.env.example`	Template for `.env` file that holds your Kintone credentials	Yes! - Rename
server.js	`backend/server.js`	Sets up the Express server that routes API requests from the frontend to Kintone	Yes! - Append POST
postRecord.js	`frontend/src/requests/postRecord.js`	Passes the POST API request from React to Express server	Yes! - Code it
InputForm.js	`frontend/src/components/InputForm.js`	Form component - Create a form that submits a POST request	Yes! - Code it

Let's POST Data to a Web Database From a React Component

Thank you for attending our Kintone x React workshop!

Get Started

First, let's download the ahandsel/React_Workshop_by_Kintone Repo and go inside the folder.

cd Downloads

git clone https://github.com/ahandsel/React_Workshop_by_Kintone

cd React_Workshop_by_Kintone

ls

README.md   Slides.pdf   backend   frontend

Inside there should be two folders (frontend & backend) and a README file & Slides PDF.

Open the React_Workshop_by_Kintone folder in VS Code

code .

Let's open a terminal per folder.
Then inside the folders, download the required packages with npm install.

	Terminal 1 - Frontend	Terminal 2 - Backend
Go inside the folder	`cd ~/Downloads/React_Workshop_by_Kintone/frontend`	`cd ~/Downloads/React_Workshop_by_Kintone/backend`
What is inside?	Code for the React App	Code for the Express server
Install packages	`npm install`	`npm install`
Prep Tasks		Rename `.env.example` file to `.env` beforehand
To run the scripts	`npm start`	`npm start`

⚡ Notes ⚡

⚡ React requires Node ≥ 10.16 & npm ≥ 5.6 ⚡

Check the versions inside the React_Workshop_by_Kintone folder:
- node -v
- npm -v
Not the correct versions or Confused? 🤔 → Check out the Guide on Installing Node.js & npm Section

⚡ Note: Please ignore the package deprecation warnings ⚡

🔎 The npm install command installs the required dependencies defined in the package.json files (in both the frontend & backend folders) and generates a node_modules folder with the installed modules.

Kintone Web Database & Credentials

Built for teamwork, designed by you!

🚀 Getting your FREE Kintone Database

bit.ly/KDP_NEW

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

Create a Kintone Web Database App

Let's create a Kintone App to list off your favorite mangas!

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

Field Type	Field Name	Field Code	Note
Text	Title	`title`	The manga's title
Text	Author	`author`	The manga's author

Confused? 🤔 → Check out the How to Create a Kintone Database App video 📺

Kintone API Token

To generate an API Token for a Kintone App:

Go to the Kintone App
Go to the Gear icon ⚙️ (top right corner) > Open the App Settings page
Click on the App Settings Tab > Click on API Token settings
Click the Generate button to generate a token
Click the Save button (top left corner) to save the token setting
Finally, click the Update App button (top right corner) to implement the token setting change.

Confused? 🤔 → Check out the Get the API Token video clip 📺

📺 How to Create a Kintone Database App | Video

🔐 Securely input your credentials in a `.env` file

In the backend folder, rename the .env.example to .env!

Then following the template, input your Kintone credentials.

.env template:

SUBDOMAIN = ""
APPID = ""
APITOKEN = ""

Here is an example .env file.

SUBDOMAIN = "example"
APPID = "1"
APITOKEN = "dXNlckBleGFLtcGxlmNvbTpzZWNyZXQe9q3IhtcG"

Expected Results

Here are the expected results after running the npm start in both the terminals.

Right After `npm install`

	Terminal 1 - Frontend	Terminal 2 - Backend
View Results	localhost:3000	On the Terminal
Expected Results

After Creating a `.env`

	Terminal 1 - Frontend	Terminal 2 - Backend
View Results	localhost:3000	localhost:5000/getData
Expected Results

After Completing the POST Section

	Terminal 1 - Frontend	Terminal 2 - Backend
View Results	localhost:3000	n/a
Expected Results		n/a

Want the Slide Deck?

Check it out at Slides.pdf

Guide on Installing Node.js & npm

macOS with nodenv
Windows with nvm-windows
📺 Installing Node.js Video

Check if you already have Node.js or npm

React requires Node ≥ 10.16 & npm ≥ 5.6
Go inside the React_Workshop_by_Kintone folder.

$ node -v
$ npm -v

If Node & npm are missing, let's install them!

Options:

macOS with nodenv
Windows with nvm-windows

macOS with nodenv

We recommend installing Node.js using nodenv to manage node versions. This allows your computer to have a specific Node.js version per project.

⚠️ Remove any existing installations of Node.js before installing nodenv! ⚠️
Having different Node.js installations can lead to conflict issues.

Step 1: Install nodenv with Homebrew


Update Homebrew	`brew update && brew upgrade`
Install nodenv	`brew install nodenv`

Step 2: Set up nodenv shell integration


Run the initialization command	`nodenv init`
Append the following line into the shell's rc/profile	`eval "$(nodenv init -)"`

For Zsh users	For Bash users
`echo 'eval "$(nodenv init -)"' >> ~/.zshrc`	`echo 'eval "$(nodenv init -)"' >> ~/.bash_profile`
`cat < ~/.zshrc`	`cat < ~/.bash_profile`

Step 3: Implement the changes

Close & open a new Terminal window for the changes to take place.

Optional: Verify that nodenv is properly set up using nodenv-doctor script.

For those using Z shell (Zsh) shell:

curl -fsSL https://github.com/nodenv/nodenv-installer/raw/master/bin/nodenv-doctor | bash

Expected result:

Checking for `nodenv' in PATH: /usr/local/bin/nodenv
Checking for nodenv shims in PATH: OK
Checking `nodenv install' support: /usr/local/bin/nodenv-install (node-build 3.0.22-4-g49c4cb9)
Counting installed Node versions: none
  There aren't any Node versions installed under `~/.nodenv/versions'.
  You can install Node versions like so: nodenv install 2.2.4
Auditing installed plugins: OK

Step 4: Install Node.js inside the React Workshop folder (React_Workshop_by_Kintone)

Now you're ready to install specific Node.js versions!

Inside React_Workshop_by_Kintone folder, install Node.js version 14.5.0:

cd React_Workshop_by_Kintone/

nodenv install 14.5.0

nodenv local 14.5.0

Alright! Your Mac is now armed with Node.js!

Download the required packages by going opening a terminal inside the frontend folder & backend folder & running the npm install command!

Windows with nvm-windows

The following steps are straight from the Microsoft Docs on Set up NodeJS on native Windows. We recommend installing and managing Node.js with nvm-windows

⚠️ Remove any existing installations of Node.js before installing nvm-windows! ⚠️
Having different Node.js installations can lead to conflict issues.

Step 1: Go to the windows-nvm's latest release.

Step 2: Download the nvm-setup.zip file for the most recent release.

Step 3: Once downloaded, open the zip file, then open the nvm-setup.exe file.

Step 4: The Setup-NVM-for-Windows installation wizard will walk you through the setup steps, including choosing the directory where both nvm-windows and Node.js will be installed.

Step 5: After the installation is complete, open PowerShell & enter nvm ls

nvm ls lists out installed Node versions (should be none at this point)

Step 6: Install Node.js inside the React Workshop folder (React_Workshop_by_Kintone)

Now you're ready to install specific Node.js versions!

Inside React_Workshop_by_Kintone folder, install Node.js version 14.5.0:

cd .\Documents\React_Workshop_by_Kintone

nvm install 14.5.0

nvm use 14.5.0

Alright! Your Windows is now armed with Node.js!

Download the required packages by going opening a terminal inside the frontend folder & backend folder & running the npm install command!

📺 Installing Node.js | Video

Debugging - Let's Fix Those Problems 💪

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

`npm install` command is not working

Verify the Node.js & npm versions inside the React_Workshop_by_Kintone folder
Just installed Node.js? Verify you configured Node.js versions inside the React_Workshop_by_Kintone folder

Mac: nodenv local 14.5.0
Windows: nvm use 14.5.0

How do I get my Kintone Subdomain?

It might be a bit confusing since you need to sign-up for Developer Program Account (Website) 🌐 BEFORE creating your Kintone Subdomain (Database) 📂.

Check out our Sign up for Kintone Developer Program & Developer License YouTube video:

React not updating after updating `server.js`?

After making changes to server.js, be sure to restart the Express server On the Terminal 2 - backend!

Stop the server: ctrl + c
Start the server: npm start

Then reload the browser showing the React App: localhost:3000

Error from `Terminal 2 - backend`?

Do you see an error on .../React_Workshop_by_Kintone/backend/node_modules/node-fetch/lib/index.js:272 like the following?

return Body.Promise.reject(new FetchError(`invalid json response body at ${_this2.url} reason: ${err.message}`, 'invalid-json'));
                           ^
FetchError: invalid json response body at https://r.kintone.com/notfound/subdomain.html reason: Unexpected token < in JSON at position 0
    at /Users/g001494/Downloads/React_Workshop_by_Kintone/backend/node_modules/node-fetch/lib/index.js:272:32
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at async /Users/g001494/Downloads/React_Workshop_by_Kintone/backend/server.js:43:24 {
  type: 'invalid-json'
}

This error is related to your Kintone credentials.

Verify that you have created a .env file with your Kintone credentials inside the backend folder
Verify the Kintone credentials are correct: Subdomain, App ID, and API Token
Verify that the Kintone App is configured as done in the Create a Kintone Web Database App section
Verify that the Kintone Web Database App is updated after generating the Kintone API Token

No response when starting the Express server?

Make sure you are inside the backend folder when starting the Express server.
- cd ~/Downloads/React_Workshop_by_Kintone/backend
- npm start
Verify that you have renamed .env.example to .env
- Be sure to enter your Subdomain, App ID, and API Token in the .env file

Got a `UnhandledPromiseRejectionWarning` error?

(node:5379) UnhandledPromiseRejectionWarning: FetchError: request to https://.kintone.com/k/v1/records.json?app= failed, reason: getaddrinfo ENOTFOUND .kintone.com

It looks like Kintone API credentials are missing
Be sure to enter your Subdomain, App ID, and API Token in the .env file
Confused? 🤔 → Check out the 🔐 Securely input your credentials in a .env file section

Got a `GAIA_IA02` error?

Enter the App's API Token in .env file as APITOKEN = ""
Be sure to hit the save button & the Update App button to implement the API Token change.

Name		Name	Last commit message	Last commit date
Latest commit History 130 Commits
.vscode		.vscode
backend		backend
docs		docs
frontend		frontend
.gitignore		.gitignore
LICENSE		LICENSE
README.md		README.md
Slides.pdf		Slides.pdf

License

kintone-workshops/React-and-REST-API

Folders and files

Latest commit

History

Repository files navigation

⚠️ THIS REPO IS ARCHIVED ⚠️

⚠️ DO NOT USE THIS WORKSHOP ANYMORE ⚠️

UPDATED WORKSHOP: kintone-workshops/React-x-REST-API-Workshop

React Workshop by Kintone - Version 3

Overview of the Repo

Let's POST Data to a Web Database From a React Component

Outline

Get Started

⚡ Notes ⚡

Kintone Web Database & Credentials

🚀 Getting your FREE Kintone Database

Create a Kintone Web Database App

Kintone API Token

📺 How to Create a Kintone Database App | Video

🔐 Securely input your credentials in a .env file

Expected Results

Right After npm install

After Creating a .env

After Completing the POST Section

Want the Slide Deck?

Guide on Installing Node.js & npm

Check if you already have Node.js or npm

macOS with nodenv

Windows with nvm-windows

📺 Installing Node.js | Video

Debugging - Let's Fix Those Problems 💪

npm install command is not working

How do I get my Kintone Subdomain?

React not updating after updating server.js?

Error from Terminal 2 - backend?

No response when starting the Express server?

Got a UnhandledPromiseRejectionWarning error?

Got a GAIA_IA02 error?

About

Topics

Resources

License

Stars

Watchers

Forks

Languages