/3d-shape-gallery

workshop

Primary LanguageJavaScriptMIT LicenseMIT

Create a 3D Gallery with React and Three.js for Kintone Web Database

Banner Image

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

Outline

Get Started

First, let's download the sean-kintone/3D-Kintone-Gallery Repo and go inside the folder.

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

cd Downloads

git clone https://github.com/sean-kintone/3D-Kintone-Gallery

cd 3D-Kintone-Gallery

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 Need to Modify?
package.json Project's metadata & scripts for building and uploading the customization Nope
webpack.config.js Holds the Webpack's configuration for the react project Nope
.env.example The template for the .env file Nope
.env Holds the Kintone login credential and View ID Yes! - Code it
scripts/npm-start.js Script that uses npm-run-all to run build & upload scripts in parallel Nope
customize-manifest.json Kintone Customize Uploader's configuration file Yes! - Add your App ID
dist/KintoneCustomization.js The bundled JS build that will be uploaded to Kintone Nope
src/index.js Heart of the React Project handling <App /> and Kintone Events Nope
src/index.html HTML that reflects the Kintone Custom View; Only <div id="root"></div> Nope
src/index.css Styling for the React Project Nope
src/getRecords.js Fetches Kintone records, transforms response, & returns array of objects Nope
Slides.pdf Workshop presentation's slide deck

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 nor 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 with some Shapes and Sizes to display!

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

Field Type Field Name Field Code Note
Dropdown Shape Type shapeType Options must include Cube and Torus
Number Length length Length of shape
Number Width width Width of shape
Number Depth depth Depth of shape

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 📺

📺 How to Create a Kintone Database App | Video

How to Create a Kintone Database App YouTube Thumbnail

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.

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 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": "23",
    "scope": "ALL",
    ...

So to ensure the file gets uploaded to the correct App, replace the 23 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 continuously generate testing build
  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 that may occur & its solutions!

Errors related to .env

If you get one of the following error messages, then please verify your .env file has been correctly configured 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

npm install command is not working

  1. Verify the Node.js & npm versions inside the 3D-Kintone-Gallery folder
  2. Just installed Node.js? Verify you configured Node.js versions inside the 3D-Kintone-Gallery folder
  • Mac: nodenv local 14.5.0
  • Windows: nvm use 14.5.0

@kintone/customize-uploader not working?

Verify that you are inputting the exact base URL for Kintone credentials questions

  • Correct: https://example.cybozu.com ✅
  • Incorrect: https://example.cybozu.com/ or example.cybozu.com ❌

Uncaught Error: Target container is not a DOM element

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

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

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'value')

  • There may be incorrect variables set for the THREE.BoxGeometry()'s and THREE.TorusGeometry()'s parameters if you are getting this error.
  • Verify that the parameters are only using width, length, and depth variables.

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:

https://youtu.be/Gzz8SbTuoFg