Build a Search Bar in React for Kintone Web Database

Thank you for attending our Kintone x React workshop!
Check out meetup.com/Kintone-Developers to check out all of our upcoming events!

Outline

Demo of Build
Get Started
- ⚡ Notes ⚡
Overview of the Repo
Kintone Web Database & Credentials
- 🚀 Getting your FREE Kintone Database
Create a Kintone Web Database App
Create a .env file
Input the App ID
Build the customization
Debugging - Let's Fix Those Problems 💪
Appendix
- Files
- Branches

Demo of Build

Get Started

First, let's download the kintone-workshops/kintone-react-search-bar Repo and go inside the folder.

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

cd Downloads

git clone https://github.com/kintone-workshops/kintone-react-search-bar

cd Kintone_React_Search_Bar

npm install

npm install -g @kintone/customize-uploader

⚡ 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 {macOS & Windows}.

⚡ Note: Please ignore the package deprecation warnings ⚡

🔎 The npm install command installs the required dependencies defined in the package.json files and generates a node_modules folder with the installed modules.

Overview of the Repo

File	Purpose	Modify?
package.json	Project's metadata & scripts for building and uploading the customization
webpack.config.js	Holds the Webpack's configuration for the react project

.env.example	The template for the .env file
.env	Holds the Kintone login credential and View ID	Create it!

scripts/npm-start.js	Script that uses `npm-run-all` to run `build` & `upload` scripts in parallel
customize-manifest.json	Kintone Customize Uploader's configuration file	Add your App ID
dist/KintoneCustomization.js	The bundled JS build that will be uploaded to Kintone

src/index.js	Heart of the React Project handling `<App />` and Kintone Events
src/index.html	HTML that reflects the Kintone Custom View Only `<div id="root"></div>`
src/index.css	Styling for the React Project
src/getRecords.js	Fetches Kintone records, transforms response, & returns array of objects

src/components/ResultList.js	Creates a list from the list items array
src/components/SearchBar.js	Creates the search bar input

Kintone Web Database & Credentials

Built for teamwork, designed by you

🚀 Getting your FREE Kintone Database

① Sign-Up for Developer Program Account (Website) 🌐

bit.ly/KDP_signup
- ⚠ Do NOT use Safari
- ⚡ Accept Cookies First
- ✅ Use Chrome & Firefox

② THEN Create a Kintone Subdomain (Database) 📂

bit.ly/K_DevLic
- ⚡ Only use lowercase, numbers, & hyphens in your subdomain
- ⚠ Do not use uppercase or special characters

📺 Sign up for Kintone Developer Program & Developer License | Video

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

Then create a Custom View

From App Settings, click on the Views tab
Click on the Plus Button ⊕ to create a View
Select Custom view under Visible Fields and Column Order section
Get the View ID! (Required in .env file)
Under HTML Code, input <div id="root"></div>
Save!

Be sure to click Save and Activate App buttons! 💪

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

Create a `.env` file

Using the .env.example file as a temple, create a .env file that will contain your login credentials and the Kintone App's View ID.

This is what the .env.example looks like:

KINTONE_BASE_URL=
KINTONE_USERNAME=
KINTONE_PASSWORD=
VIEW_ID=

Here is what your .env might look like:

KINTONE_BASE_URL="https://example.kintone.com"
KINTONE_USERNAME="example@gmail.com"
KINTONE_PASSWORD="ILoveKintone!"
VIEW_ID="1234567"

⚠️ DO NOT EDIT NOR DELETE THE .env.example FILE!
.env.example is used by env-cmd to verify that .env file is correctly configured.

Input the App ID

The Kintone Customize Uploader uses customize-manifest.json to determine where to upload the JavaScript file (which Kintone App).

{
    "app": "10",
    "scope": "ALL",
    ...

So to ensure the file gets uploaded to the correct App, replace the 10 with your App ID.

What is my App ID? 🤔

Go to your Kintone App & grab the URL
Kintone App's URL follows this template: https://<SUBDOMAIN>.kintone.com/k/<App ID>/show#record=<RECORD ID>
Grab the number between the /k/
Example: https://example.kintone.com/k/1/ -> The App's ID is 1

Build the customization

Build the customization in the following files inside ./src/
- index.html, index.js, index.css, etc.
Run npm run dev to generate testing builds continuously
Run npm run production to create a production version
- To directly upload the Kintone customization, use ./dist/KintoneCustomization.js.
- For more details, refer to Customizing an App with JavaScript and CSS
Run npm run start
- This will trigger webpack & kintone-customize-uploader to run while watching ./src/index.js for changes
- Input Kintone credentials when asked
Refresh the Kintone App to see the changes!

Good luck coding! ᕙ(⇀‸↼‶)ᕗ

Debugging - Let's Fix Those Problems 💪

Here is a rundown of common problems & their solutions!

Errors related to .env

Are you getting one of the following error messages? If you get one of the following error messages, then please verify , and you have not modified the .env.example

Failed to find .env file at default paths: [./.env,./.env.js,./.env.json]
[webpack-cli] Error: Missing environment variable: KINTONE_BASE_URL
[webpack-cli] Error: Missing environment variable: KINTONE_USERNAME
[webpack-cli] Error: Missing environment variable: KINTONE_PASSWORD
[webpack-cli] Error: Missing environment variable: VIEW_ID

Then please do the following:

Verify your .env file has been correctly configured! Details
Make sure you did NOT change the .env.example file!
- It should still be in your project folder
- It should NOT contain your login information

`npm install` command is not working

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

Mac: nodenv local 14.5.0
Windows: nvm use 14.5.0

"npm run upload" failed?

@kintone/customize-uploader not working? Lets try the following:

(1) Verify that customize uploader was installed globally

npm install -g @kintone/customize-uploader

(2) Verify that the .env login info is correct (including the password)

⚠️ Make sure your login info is inside .env file & NOT .env.example file!
⚠️ Verify that KINTONE_BASE_URL input is correctly formatted:
- ✅ Correct Format: https://example.kintone.com
- ❌ Incorrect Format: https://example.kintone.com/ or example.kintone.com
⚠️ Re-run the npm commands after saving the .env file
⚙️ Details: Create a .env file

(3) Verify your customize-manifest.json was updated with the correct App ID

⚙️ Details: Input the App ID

Uncaught Error: Target container is not a DOM element

Verify that the Custom View (Search Bar View) has the following HTML Code:

<div id="root"></div>

Errors related to Kintone Subdomain

How do I get my Kintone Subdomain?

This may be a bit confusing since the order matters.
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:

How do I log into my Kintone account?

You need three things to log into your Kintone account:

Subdomain - Unique alphanumeric & underscore text that you filled out when creating your Kintone Subdomain (Database) 📂.
Username (Login Name) - By default, it is your email address
Password - The password you set after activating your Kintone Developer License

Your Kintone Subdomain determines the URL used to access your Kintone account

Kintone's URL follows this template: https://<SUBDOMAIN>.kintone.com/
Example: The example subdomain leads to https://example.kintone.com/

Having Trouble Logging In?

⚠️ Make sure your password is correct (surprisingly a common problem)
You can always reset the the password by clicking on the Having Trouble Logging In? link on the login page
- Input your email & reset the password

Appendix

Files

Files	Purpose
Workshop.md	Workshop Overview & Notes
References.md	List of all the articles referred to when building this project
Manga_Data.csv	Manga title and author data that can be uploaded to your Kintone Manga DB App
CustomizeUploader.md	Guide on configuring the @kintone/customize-uploader

Branches

Branches	Purpose	Status
`main`	Starting point for the workshop	`src/index.js`, `src/components/SearchBar.js`, & `src/components/ResultList.js` needs to be completed
`workshop`	same as the main branch	same as the main branch
`dev`	Development branch for the KDP team	Pending Improvements
`production`	Stores code ready to be used	Latest version of the working build

Name		Name	Last commit message	Last commit date
Latest commit History 149 Commits
.vscode		.vscode
dist		dist
docs		docs
scripts		scripts
src		src
.env.example		.env.example
.gitignore		.gitignore
LICENSE		LICENSE
README.md		README.md
Slides.pdf		Slides.pdf
customize-manifest.json		customize-manifest.json
package-lock.json		package-lock.json
package.json		package.json
webpack.config.js		webpack.config.js

License

kintone-workshops/kintone-react-search-bar

Folders and files

Latest commit

History

Repository files navigation