Skip to content

ahandsel/Kintone-React-Search-Bar-Workshop

BranchesTags

Repository files navigation

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

Demo gif of the search bar build on Kintone

Get Started

First, let's download the ahandsel/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/ahandsel/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 Doc

⚡ 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 Kintone Database App - React Workshop Prep YouTube Thumbnail

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

  1. Build the customization in the following files inside ./src/
    • index.html, index.js, index.css, etc.
  2. Run npm run dev to generate testing builds continuously
  3. Run npm run production to create a production version
  4. 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
  5. 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:

  1. Verify your .env file has been correctly configured! Details
  2. 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

  1. Verify the Node.js & npm versions inside the Kintone_React_Search_Bar folder
  2. 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

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:

  • https://youtu.be/Gzz8SbTuoFg

How do I log into my Kintone account?

You need three things to log into your Kintone account:

  1. Subdomain - Unique alphanumeric & underscore text that you filled out when creating your Kintone Subdomain (Database) 📂.
  2. Username (Login Name) - By default, it is your email address
  3. 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
Install_NodeJS_npm.md Guide on Installing Node.js & npm
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

About

Build a search bar in React for Kintone

youtu.be/TkQUM8TGl88

Topics

react webpack kintone kintone-customize kintone-api

Resources

Readme

License

MIT license
Activity

Stars

8 stars

Watchers

2 watching

Forks

11 forks
Report repository

Languages