Forem: Kintone Developer Program

MCP Integration Tutorial: Create a News Monitoring App with Claude

Jiae — Thu, 29 May 2025 04:55:39 +0000

Introduction
Prerequisites
Prepare the Kintone Environment
Prepare the Claude Desktop Mode
Prepare the Firecrawl MCP Server
Prepare the Kintone MCP Server
Send the Prompts
Make an Announcement
Conclusion

Introduction

In the rapidly changing world of technology, it’s crucial to stay informed about the latest relevant news. Sharing this information with your team and learning from one another will enhance teamwork across the company.

Using automation for news monitoring and documentation can significantly reduce manual work, particularly with tools like Model Context Protocol (MCP) and Kintone. This article will walk you through how to utilize a content scraping MCP server to extract a recent related article from a news site, summarize it, and automatically create a record in Kintone.

Prerequisites

VSCode　as the file editor
Node.js (LTS)

Prepare the Kintone Environment

What is Kintone?

Kintone is a no-code platform for business applications that improves data management and collaboration.

There is another great blog about the basics of Kintone if you are interested:
👉 Quick Start on Using Kintone Web Database in a Hackathon Project

Get your Kintone Environment

Developers are entitled to use the Kintone Developer License - an environment that can be used for free🤘

Get your Kintone Developer License by filling out the form.
https://kintone.dev/en/developer-license-registration-form/

Create a News Summary App

Refer to the page Creating an App from Scratch and follow the table below to create a simple News summary App.

Field Type	Field Name	Type
Text	Title
Date	Date
Link	Link	URL
Rich text	Summary

Once the App is ready, it will look like this👇

To generate the App’s API token, aka API key, follow the steps on the Generating API Tokens page.

⚠️ Make sure to select the checkboxes under Permissions for View records, Add records, and Edit records.

Also, remember your App ID. The number following https://<your domain>.kintone.com/k/ is the App ID.

Prepare the Claude Desktop Mode

To access developer mode, you need the Claude desktop app. Visit here to download the appropriate OS version　and install it.

Next, open your Claude desktop and log in to your claude.ai account. If you don't have an account, sign up with your email.

On your Claude desktop, first go to settings.

In the settings, click the Developer button, and then click the Edit Config button.

This will display the claude_desktop_config.json file.

When you open the file, it is currently empty, but this will serve as our main stage for the development.

Prepare the Firecrawl MCP Server

Your Firecrawl API key is required for content scraping. If you don't have one, create an account at the Firecrawl Site. Once logged in, you will see an API key on your page.

We utilize firecrawl-mcp-server as the server.
Copy the provided Usage with Claude Desktop code into your claude_desktop_config.json file.

⚠️ Ensure that you add your Firecrawl API key.

Now your claude_desktop_config.json file should look like this👇

{
  "mcpServers": {
    "mcp-server-firecrawl": {
      "command": "npx",
      "args": ["-y", "firecrawl-mcp"],
      "env": {
        "FIRECRAWL_API_KEY": "YOUR_API_KEY_HERE",

        "FIRECRAWL_RETRY_MAX_ATTEMPTS": "5",
        "FIRECRAWL_RETRY_INITIAL_DELAY": "2000",
        "FIRECRAWL_RETRY_MAX_DELAY": "30000",
        "FIRECRAWL_RETRY_BACKOFF_FACTOR": "3",

        "FIRECRAWL_CREDIT_WARNING_THRESHOLD": "2000",
        "FIRECRAWL_CREDIT_CRITICAL_THRESHOLD": "500"
      }
    }
  }
}

⚠️ After saving the file, it is important to fully exit Claude Desktop mode and restart it to apply the changes.

Reopen your Claude Desktop app.
The Search and tools section of the Claude prompt chat window should indicate that several mcp-server-firecrawl mcp tools have been downloaded and are now ready for use.

Prepare the Kintone MCP Server

Now we perform the same procedure for the Kintone MCP server.

We will use mcp-server-kintone as the server.
Follow the steps in the README and install the latest release.

Next, copy the code from 2. Configure MCP client like Claude Desktop and place it in your claude_desktop_config.json file.

⚠️ Make sure to change all the environment variables to your own values.

Now your claude_desktop_config.json file should look like this👇

{
  "mcpServers": {
    "mcp-server-firecrawl": {
      "command": "npx",
      "args": ["-y", "firecrawl-mcp"],
      "env": {
        "FIRECRAWL_API_KEY": "YOUR_API_KEY_HERE",

        "FIRECRAWL_RETRY_MAX_ATTEMPTS": "5",
        "FIRECRAWL_RETRY_INITIAL_DELAY": "2000",
        "FIRECRAWL_RETRY_MAX_DELAY": "30000",
        "FIRECRAWL_RETRY_BACKOFF_FACTOR": "3",

        "FIRECRAWL_CREDIT_WARNING_THRESHOLD": "2000",
        "FIRECRAWL_CREDIT_CRITICAL_THRESHOLD": "500"
      }
    },
    "kintone": {
      "command": "<your/path/to/mcp-server-kintone.exe>",
      "env": {
        "KINTONE_BASE_URL": "https://<your domain>.kintone.com",
        "KINTONE_USERNAME": "<your username>",
        "KINTONE_PASSWORD": "<your password>",
        "KINTONE_API_TOKEN": "<your api token>",
        "KINTONE_ALLOW_APPS": "<your App number>",
        "KINTONE_DENY_APPS": ""
      }
    }
  }
}

⚠️ Again, completely exit Claude Desktop mode and restart it to apply the changes.

When you reopen, your Search and tools section will look like this and will be ready for use👇

Send the Prompts

This is the main part. Ask Claude to handle the process.
Go back to your Claude desktop and start sending the prompts.

Send the first prompt like this.

Use firecrawl to find a recent major news article about “Kintone” on techcrunch.com and provide a summary in an easy-to-read format. Be sure to include the link to the article summary.

After sending the prompt, a pop-up window will appear👇

Claude determines which of the installed MCP servers should be used and requests permissions for that server. You can then simply grant those permissions by pressing the allow button. The process will begin using the MCP server.

🤫 MCP typically employs various methods for web searching, which can quickly reach your daily free account limit. As a result, a paid account is necessary for improved performance, although it is still possible to perform some searches with a free account.
If you’re feeling budget-conscious, you can forcibly stop the searching process by pressing the stop button after attempting a few searches.

Next, instruct Claude to register the search result in Kintone using the following prompt.

So the second prompt is like this.

Add the summary report in a format that can be viewed within the "News summary" App on "https://your-domain.kintone.com".

After this prompt, Claude will ask you again if it can access the Kintone MCP server in the same way it did when inquiring about Firecrawl's server. Grant the permissions once more to proceed.

Once the permissions are approved, Claude will locate the Kintone App and check the fields where the data needs to be entered.

Claude will create a record based on the prompt. If it succeeds, Claude will return the following.

The record has been successfully created with ID #1 in the News Summary App.

If you check your Kintone App, you will see a new record of a news summary like this🎉

Make an Announcement

Here’s a further implementation of a simple trick for announcing the news summary and updating everyone on your Kintone Portal.
Attaching Apps to the Announcement Section or Threads of a Space

Not gonna lie. This is really easy, too!

Conclusion

This applies in many ways to sharing your essential information within your CRM, ensuring everyone stays up-to-date.
Sharing is caring🤝

If you have questions or want to share your thoughts, we’re here for you!
Visit Kintone Developer Forum
Your input is always welcome.

Tips for using Kintone in Hackathons

William Sayama — Sun, 06 Oct 2024 03:13:51 +0000

Introduction

When you're participating in a hackathon, efficiency and quick iteration are key to success. One tool that can help you manage data efficiently is Kintone, a powerful no-code/low-code platform that allows you to create web-based databases with ease.

In this guide, we'll walk you through how to create a simple Kintone App to store scores for games, and demonstrate how to interact with the Kintone API using some local Python code.

Get your Kintone Environment

First we need to get our hands on a Kintone Environment!
Developers are entitled to use the Kintone Developer License - an environment that can be used for free for 1 year ❤

Get your Kintone Developer License by filling out the form.
https://kintone.dev/en/developer-license-registration-form/

Create your Kintone Database

Web Databases in Kintone are called "Apps".
Creating these Apps are easy in Kintone - you can drag-and-drop the fields that you need, without needing to code.

Follow the instructions on the following link to create a new App.
https://get.kintone.help/k/en/id/040133.html

These are the fields we will include in the Kintone App for this article:

Field Type	Field Name	Field Code
Text	Player Name	playername
Number	Score	score
Text	Difficulty	difficulty

The field layout should look like the following:

After that, proceed to the Settings tab, and generate an API Token that will be used for the authentication. Set the permissions for View records and Add records.

https://get.kintone.help/k/en/id/040471.html

Once this is done, save the settings, and click on the blue "Activate App" button.

Manually Input Some Data

Since there is no data yet inside the App, manually add in some data so that we have something to work with.
https://get.kintone.help/k/en/id/040715.html

Now we're ready to interact with the Web Database with some Python code!

Sample Python Code to Interact with Kintone

Now that your app is set up, let's look at how you can interact with the Kintone API using Python. We'll cover how to add a record, retrieve all records, and query records based on difficulty.

Get a Python environment ready on your local machine. Since we will be using the requests library to make our API calls, install the library with the following command:

pip install requests

1. Adding a Record to the Kintone App

Below is a sample Python script that adds a new record to the Kintone App.

import requests
import json

def add_record():
    API_endpoint = "https://{YOUR_SUBDOMAIN}.cybozu.com/k/v1/record.json"
    app_id = "{APP_ID}"

    kintone_headers = {
        "X-Cybozu-API-Token": "{API_TOKEN}",
        "Content-Type": "application/json"
    }

    bodydata = {
        "app": app_id,
        "record": {
            "player": {
                "value": "John Doe"
            },
            "score": {
                "value": "1500"
            },
            "diff": {
                "value": "Medium"
            }
        }
    }

    try:
        response = requests.post(API_endpoint, headers=kintone_headers, data=json.dumps(bodydata))
        jsondata = response.json()
        print(jsondata)

    except requests.exceptions.RequestException as error:
        print(error)

add_record()

The App ID is a number that can be found in the URL of the Kintone App.
If the request is successful, a JSON is responded that includes the ID of the newly added record.

{'id': '7', 'revision': '1'}

If the request is successful, but the record data is empty, it may be because the keys inside the body data were incorrect. Make sure that the keys for the fields are stated as their field codes, and not their field names.

2. Retrieving All Records from the Kintone App

The following Python script will retrieve all records stored in your Kintone App.

import requests

def get_all_records():
    API_endpoint = "https://{YOUR_SUBDOMAIN}.cybozu.com/k/v1/records.json"
    app_id = "{APP_ID}"
    API_endpoint = API_endpoint + "?app=" + app_id

    kintone_headers = {
        "X-Cybozu-API-Token": "{API_TOKEN}",
    }

    try:
        response = requests.get(API_endpoint, headers=kintone_headers)
        jsondata = response.json()
        print(jsondata)

    except requests.exceptions.RequestException as error:
        print(error)

get_all_records()

If the request is successful, the response will include a JSON of all the records in the App.

"records": [
    {
      "difficulty": {
        "type": "DROP_DOWN",
        "value": null
      },
      "score": {
        "type": "NUMBER",
        "value": "1500"
      },
      "Record Number": {
        "type": "RECORD_NUMBER",
        "value": "7"
      },
      "Updated By": {
        "type": "MODIFIER",
        "value": {
          "code": "Administrator",
          "name": "Administrator"
        }
      },
      "Created By": {
        "type": "CREATOR",
        "value": {
          "code": "Administrator",
          "name": "Administrator"
        }
      },
      "playername": {
        "type": "SINGLE_LINE_TEXT",
        "value": ""
      },
      "$revision": {
        "type": "__REVISION__",
        "value": "1"
      },
      "Updated Datetime": {
        "type": "UPDATED_TIME",
        "value": "2024-10-06T02:33:00Z"
      },
      "Created Datetime": {
        "type": "CREATED_TIME",
        "value": "2024-10-06T02:33:00Z"
      },
      "$id": {
        "type": "__ID__",
        "value": "7"
      }
    },
    {
      "difficulty": {
        "type": "DROP_DOWN",
        "value": "Hard"
      },
      "score": {
        "type": "NUMBER",
        "value": "34000"
      },
      "Record Number": {
        "type": "RECORD_NUMBER",
        "value": "6"
      },
      "Updated By": {
        "type": "MODIFIER",
        "value": {
          "code": "will",
          "name": "will-yama"
        }
      },
      "Created By": {
        "type": "CREATOR",
        "value": {
          "code": "will",
          "name": "will-yama"
        }
      },
      "playername": {
        "type": "SINGLE_LINE_TEXT",
        "value": "Kelly Smiles"
      },
      "$revision": {
        "type": "__REVISION__",
        "value": "1"
      },
      "Updated Datetime": {
        "type": "UPDATED_TIME",
        "value": "2024-10-06T01:41:00Z"
      },
      "Created Datetime": {
        "type": "CREATED_TIME",
        "value": "2024-10-06T01:41:00Z"
      },
      "$id": {
        "type": "__ID__",
        "value": "6"
      }
    },...

We have cut off the above JSON response half way through for this article, as it is quite long.

3. Retrieving Records with Query Filtering

In some cases, you may want to retrieve records based on specific conditions, such as fetching records where the difficulty is set to "Hard". Add a query to the GET request to achieve this.

import requests

def get_all_records():
    API_endpoint = "https://{YOUR_SUBDOMAIN}.cybozu.com/k/v1/records.json"
    app_id = "{APP_ID}"
    query = "difficulty in (\"Hard\")"
    API_endpoint = API_endpoint + "?app=" + app_id + "&query=" + query

    kintone_headers = {
        "X-Cybozu-API-Token": "{API_TOKEN}",
    }

    try:
        response = requests.get(API_endpoint, headers=kintone_headers)
        jsondata = response.json()
        print(jsondata)

    except requests.exceptions.RequestException as error:
        print(error)

get_all_records()

If the request is successful, the response will include a JSON of the filtered records.

"records": [
    {
    "difficulty": {
        "type": "DROP_DOWN",
        "value": "Hard"
    },
    "score": {
        "type": "NUMBER",
        "value": "34000"
    },
    "Record Number": {
        "type": "RECORD_NUMBER",
        "value": "6"
    },
    "Updated By": {
        "type": "MODIFIER",
        "value": {
        "code": "will",
        "name": "William Sayama"
        }
    },
    "Created By": {
        "type": "CREATOR",
        "value": {
        "code": "will",
        "name": "William Sayama"
        }
    },
    "playername": {
        "type": "SINGLE_LINE_TEXT",
        "value": "Kelly Smiles"
    },
    "$revision": {
        "type": "__REVISION__",
        "value": "1"
    },
    "Updated Datetime": {
        "type": "UPDATED_TIME",
        "value": "2024-10-06T01:41:00Z"
    },
    "Created Datetime": {
        "type": "CREATED_TIME",
        "value": "2024-10-06T01:41:00Z"
    },
    "$id": {
        "type": "__ID__",
        "value": "6"
    }
    },
    {
    "difficulty": {
        "type": "DROP_DOWN",
        "value": "Hard"
    },
    "score": {
        "type": "NUMBER",
        "value": "45000"
    },
    "Record Number": {
        "type": "RECORD_NUMBER",
        "value": "5"
    },
    "Updated By": {
        "type": "MODIFIER",
        "value": {
        "code": "will",
        "name": "William Sayama"
        }
    },
    "Created By": {
        "type": "CREATOR",
        "value": {
        "code": "will",
        "name": "William Sayama"
        }
    },
    "playername": {
        "type": "SINGLE_LINE_TEXT",
        "value": "Jay Pudding"
    },
    "$revision": {
        "type": "__REVISION__",
        "value": "1"
    },
    "Updated Datetime": {
        "type": "UPDATED_TIME",
        "value": "2024-10-06T01:38:00Z"
    },
    "Created Datetime": {
        "type": "CREATED_TIME",
        "value": "2024-10-06T01:38:00Z"
    },
    "$id": {
        "type": "__ID__",
        "value": "5"
    }
    },
    {
    "difficulty": {
        "type": "DROP_DOWN",
        "value": "Hard"
    },
    "score": {
        "type": "NUMBER",
        "value": "34000"
    },
    "Record Number": {
        "type": "RECORD_NUMBER",
        "value": "2"
    },
    "Updated By": {
        "type": "MODIFIER",
        "value": {
        "code": "will",
        "name": "William Sayama"
        }
    },
    "Created By": {
        "type": "CREATOR",
        "value": {
        "code": "will",
        "name": "William Sayama"
        }
    },
    "playername": {
        "type": "SINGLE_LINE_TEXT",
        "value": "Jam Flipping"
    },
    "$revision": {
        "type": "__REVISION__",
        "value": "2"
    },
    "Updated Datetime": {
        "type": "UPDATED_TIME",
        "value": "2024-10-06T01:38:00Z"
    },
    "Created Datetime": {
        "type": "CREATED_TIME",
        "value": "2024-10-05T01:26:00Z"
    },
    "$id": {
        "type": "__ID__",
        "value": "2"
    }
    }
],
"totalCount": null

Conclusion

By setting up a Kintone App and interacting with it via API, you can easily manage data for your projects. Whether you're keeping track of player performances or storing other types of data, Kintone’s flexible API makes it easy to integrate into any hackathon project.

This guide has provided examples for adding records, retrieving all records, and querying records with specific conditions, allowing you to customize your data management according to your needs.

Good luck at your hackathon, and happy coding with Kintone!

🎉 Announcing the Winners of the Kintone Customization Contest 2023! 🎉

ahandsel — Fri, 08 Sep 2023 09:42:43 +0000

Congratulations to our winners!

A huge congratulations to our outstanding winners of the Kintone Customization Contest 2023:

@garrettomi for the engaging Building the "Travel Tracker": My Homage to Instagram's Lost Map Feature article.
@ramsurajcoding for his innovative Flutter and Kintone project.
@emilythecat for her valuable Display Kintone Records on Google Maps integration.

We truly appreciate the time, effort, and creativity you've poured into your submissions.
We will contact you directly on the Kintone Developer Forum to award you your prizes!

As we celebrate the winners today, we're eager to see what future projects they'll bring to the table!

Hey Kintone Developers, we want to hear from you!

What did you think of the contest?
Did you enjoy it? Did you miss out? Want to see different prizes?

We'd love to hear your thoughts, and if you'd like to see more contests like this, let us know in the comments below or on the Kintone Developer Forum.

Your feedback is important to us, and we want to ensure we provide you with the best resources and opportunities to grow as a developer.

We're always looking for ways to improve, and we'd love to hear from you!

Upcoming Events

Did you miss out on the contest? Don't worry; we have more events coming up!

Next Workshop

We have a Hosting Your React App with Web Database workshop

🌐 Workshop will be live on Zoom or YouTube Live
🗓️ Tue, Oct 24, 6:00 PM → 8:00 PM (Pacific)

Next Hackathon

We also will be sponsoring the NASA International Space Apps Challenge 2023 - Boston - By Binnovative.org!

🌐 The hackathon will be held online; anyone is welcome to participate!
🗓️ Sat, Oct 7, 6:00 AM → Sun, Oct 8, 1:00 PM (Pacific)
🏆 The hackathon will have a Best Use of Kintone prize!

Cheers to innovation and to all who participated! 🥳

Save Data to Kintone with an ESP8266

sean-kintone — Thu, 31 Aug 2023 06:43:09 +0000

Overview

This article introduces how to save data to a Kintone App using a NodeMCU ESP8266 device.

While the device used in this tutorial is an ESP8266, the concepts apply to most if not all Arduino devices with Wi-Fi capabilities. And similarly, while the Web Database used in this tutorial is Kintone, changing the contents of the HTTP Request allows for any REST API based web database to be used.

Video available as well:

General Flow

The general flow of this tutorial is as follows:

Connect and Test the ESP8266
Create a Kintone App to store data
Write and upload a program or "sketch" to the device that will access Kintone's REST API

Initial Setup

First connect the ESP8266 to your computer via USB cable. Note that the quality of cable matters, and a high quality USB cable should be used, or else the cable will only provide power and will fail to transfer data.

Download and install the Arduino IDE. After installation, open the IDE to the first sketch.

Open the settings menu, and in the Additional Boards Manager URLs option, add the following open source ESP8266 repository URL: https://arduino.esp8266.com/stable/package_esp8266com_index.json

This will allow support for various Arduino and other micro-controller devices based on the ESP8266 chip to be downloaded.

Next, open the library tab on the left side of the IDE, and search for ESP8266. Install the latest version.

Next, ensure that the ESP8266 is connected via USB cable, and in the top menu, select the ESP8266 model to use. If it is not displayed automatically, click on the Select Other Board and Port menu item.

Search for ESP8266, and select the model that is being used. In this example, a LoLin board based on NodeMCU is used. This will vary depending on the development board used. Select the port the ESP8266 is connected to.

Common port names are usbserial, usbmodem, COM3, or other names that end with (USB), but will depend on the operating system, drivers, and firmware of the development environment.

Connecting via a faulty or weak USB cable is the most common reason for failure to connect. Refer to the official Arduino Help Article for more troubleshooting.

After confirming the board is connected, the ESP8266 is ready for development.

Create a Kintone App

Set up the Fields

For this example, a simple App with a single Radio button field will be used.
Create a new App with the following field settings.

Field Type	Field Name	Field Code	Remarks
Radio button	Favorite Color	color	Options: Red, Blue, Green, Yellow

Additional fields will not significantly increase the complexity of this tutorial, and only require the JSON object sent via the ESP8266 be modified accordingly (with some exceptions, such as Attachment fields and Tables.)

Create an API Token

Create an API Token with View records and Add records permissions.
Refer to the Generating API Tokens article on the Kintone Help site for more information on API Tokens.

Information For Later

The following information will be used to test the POST request from the ESP8266.

API Token
Subdomain (for example.kintone.com, the subdomain is example)
App ID

The App ID can be found in the URL of the App.
For example, if the URL of the App is https://example.kintone.com/k/23/, the App ID is 23.

Program a POST request in the ESP8266

The ESP8266 is a popular choice for low-cost IOT, as it has Wi-Fi capabilities, and is able to connect to and broadcast Wi-Fi networks. The code in this example has three main goals:

Connect to a Wi-Fi network, and start a server on the local network.
Create HTML routes and a form
Pass the information from the form to a REST API request to Kintone.

This tutorial can be downloaded from the Kintone Workshop repository.
In this example the user needs only to edit the code regarding Wi-Fi credentials on lines 8 and 9, before compiling and uploading the code to the ESP8266.

Complete Code Example

#include <ESP8266WiFi.h>
#include <ESP8266WebServer.h>
#include <ESP8266HTTPClient.h>
#include <WiFiClientSecure.h>
#include <ArduinoJson.h>

// Your WIFI information. You must be connected to the same WIFI network to connect via localhost.
const char* ssid = "MY_WIFI_SSID";
const char* password = "MY_WIFI_PASSWORD";
// A JSON Class to handle JSON data.
DynamicJsonDocument doc(1024);
// The ESP8266 server class.
ESP8266WebServer server(80);
// A variable for tracking a valid HTTP response or not.
bool result = false;

// The setup function is special, and runs only once.
void setup() {
  // The BAUD rate for the serial monitor.
  Serial.begin(9600);
  delay(100);
  Serial.println("Connecting to ");
  Serial.println(ssid);

  //connect to your local wi-fi network
  WiFi.begin(ssid, password);

  //check wi-fi is connected to wi-fi network
  while (WiFi.status() != WL_CONNECTED) {
    delay(1000);
    Serial.print(".");
  }
  Serial.println("");
  Serial.println("WiFi connected..!");
  Serial.print("Got IP: ");
  Serial.println(WiFi.localIP());

  // The HTTP server class let's developers create routes, that run specific functions on access.
  // Here, we designate the root route, the /post route, and a 404 route.
  server.on("/", handle_OnConnect);
  server.on("/post", handlePost);
  server.onNotFound(handle_NotFound);
  server.begin();
  Serial.println("HTTP server started");
}

// The loop function. This will run continuously, and let our server class handle incoming requests.
void loop() {
  server.handleClient();
}

// This function runs when users access the root route.
void handle_OnConnect() {
  Serial.println("Welcome. Enter your App ID, API Key, and Subdomain to post some data.");
  // This function sends a 200 on successful connection, and then runs the SendHTML() function.
  server.send(200, "text/html", SendHTML());
}

// This function runs after clicking the Post to Kintone button, and the users accesses the /post route.
void handlePost() {
  // A new HTTP Client.
  WiFiClientSecure client;
  HTTPClient http;
  client.setInsecure();
  Serial.println("Attempting to Save to Kintone...");
  // The variables passed to this route via Form Action. The user's subdomain, appID, API Token, and favorite color.
  String subdomain = server.arg("subdomain");
  String appID = server.arg("appID");
  String token = server.arg("API");
  String color = server.arg("color");
  // The URL for our HTTP Request.
  String URL = "https://" + subdomain + ".kintone.com/k/v1/record.json?app=" + appID;
  Serial.print("info:");
  Serial.println(URL);
  http.begin(client, URL);
  // Formatting the POST Request JSON Object.
  doc["app"] = appID;
  JsonObject recordObject = doc.createNestedObject("record");
  recordObject["color"]["value"] = color;
  String json;
  serializeJson(doc, json);
  // End of JSON formatting. The JSON string is saved to the json variable.

  // Response Code variable for our HTTP request.
  int responseCode = 0;
  // Adding request headers via the http class.
  http.addHeader("X-Cybozu-API-Token", token);
  http.addHeader("Content-type", "application/json");
  // Making the POST request, and saving the result to responseCode
  responseCode = http.POST(json);
  Serial.printf("http Response Code = %d \n", responseCode);
  String payload = http.getString();
  Serial.println(payload);

  // Using an IF statement we can choose which HTML to send for each response code. Details are logged to the serial monitor.
  if (responseCode > 0) {
    Serial.print("HTTP Response code: ");
    Serial.println(responseCode);
    String payload = http.getString();
    Serial.println(payload);
    result = true;
  } else if (responseCode == 400) {
    Serial.print("Error code: ");
    Serial.println(responseCode);
    result = false;
  }
  else {
    Serial.print("Error code: ");
    Serial.println(responseCode);
    result = false;
  }
  // Ending the HTTP request, and passing the result variable to the PostResult function.
  http.end();
  server.send(200, "text/html", PostResult(result));
}

// A function to handle all 404 routes.
void handle_NotFound() {
  server.send(404, "text/plain", "Not found");
}

// A Function which returns an html string. This is the HTML which gets displayed on each route. SendHTML for the root route.
// Note that quotation marks (" ") within HTML must be escaped with a forward slash ( \ ).
String SendHTML() {
  String ptr = "<!DOCTYPE html> <html>\n";
  ptr += "<head><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, user-scalable=no\">\n";
  ptr += "<title>Kintone and IOT!</title>\n";
  ptr += "<style>html { font-family: Helvetica; display: inline-block; margin: 0px auto; text-align: center;}\n";
  ptr += "body{margin-top: 50px;} h1 {color: #444444;margin: 50px auto 30px;} h3 {color: #444444;margin-bottom: 50px;}\n";
  ptr += ".button {display: block;width: 80px;background-color: #1abc9c;border: none;color: white;padding: 13px 30px;text-decoration: none;font-size: 25px;margin: 0px auto 35px;cursor: pointer;border-radius: 4px;}\n";
  ptr += "p {font-size: 14px;color: #888;margin-bottom: 10px;}\n";
  ptr += "</style>\n";
  ptr += "</head>\n";
  ptr += "<body>\n";
  ptr += "<h1>ESP8266 Web Server</h1>\n";
  ptr += "<p>Enter your subdomain, appID, and API Token!</p>";
  ptr += "<form action=\"/post\">";
  ptr += "<label for=\"subdomain\">Subdomain:</label><input type=\"text\" id=\"subdomain\" name=\"subdomain\" value=\"example\">";
  ptr += "<label for=\"appID\">App ID:</label><input type=\"text\" id=\"appID\" name=\"appID\" value=\"1\"/>";
  ptr += "<label for=\"API\">API Token:</label><input type=\"text\" id=\"API\" name=\"API\" value=\"1J22qNAR54I4eiMcd0JmfDAavJNfNJDVaqt34X9A\"/><br>";
  ptr += "<label for=\"color\">Pick your favorite Color:</label><br>";
  ptr += "<label for=\"red\">Red</label>";
  ptr += "<input type=\"radio\" id=\"red\" name=\"color\" value=\"Red\" checked /><br>";
  ptr += "<label for=\"blue\">Blue</label>";
  ptr += "<input type=\"radio\" id=\"blue\" name=\"color\" value=\"Blue\" /><br>";
  ptr += "<label for=\"green\">Green</label>";
  ptr += "<input type=\"radio\" id=\"green\" name=\"color\" value=\"Green\" /><br>";
  ptr += "<label for=\"yellow\">Yellow</label>";
  ptr += "<input type=\"radio\" id=\"yellow\" name=\"color\" value=\"Yellow\" /><br>";
  ptr += "<input type=\"submit\" value=\"Post to Kintone!\">";
  ptr += "</body>\n";
  ptr += "</html>\n";
  return ptr;
}

// This function displays the HTML for the /post route. It takes a boolean variable, which can be used to alter the HTML displayed.
String PostResult(uint8_t result) {
  String ptr = "<!DOCTYPE html> <html>\n";
  ptr += "<head><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, user-scalable=no\">\n";
  ptr += "<title>Kintone and IOT!</title>\n";
  ptr += "<style>html { font-family: Helvetica; display: inline-block; margin: 0px auto; text-align: center;}\n";
  ptr += "body{margin-top: 50px;} h1 {color: #444444;margin: 50px auto 30px;} h3 {color: #444444;margin-bottom: 50px;}\n";
  ptr += ".button {display: block;width: 80px;background-color: #1abc9c;border: none;color: white;padding: 13px 30px;text-decoration: none;font-size: 25px;margin: 0px auto 35px;cursor: pointer;border-radius: 4px;}\n";
  ptr += "p {font-size: 14px;color: #888;margin-bottom: 10px;}\n";
  ptr += "</style>\n";
  ptr += "</head>\n";
  ptr += "<body>\n";
  ptr += "<h1>ESP8266 Web Server</h1>\n";
  ptr += "<p>Post page</p>";
  if (result) {
    ptr += "<p>Success!</p>";
  } else {
    ptr += "<p>Error Posting Check your JSON, API Token, and field codes!</p>";
  }
  ptr += "<a href='/'> Go Back </a>";
  ptr += "</body>\n";
  ptr += "</html>\n";
  return ptr;
}

Compile and Upload the code

After copying and pasting the code example into the Arduino IDE, the validity of the code can be checked via the Verify button.

Any errors will be output in the output console in the bottom of the editor.

If the code is technically sound, it can then be uploaded to the ESP8266.
Ensure that the ESP8266 is still connected via USB, and click on the Upload button in the top menu.

Upload progress and any errors can be confirmed in the output console in the bottom tab of the Arduino IDE.

Test the Sample Code

Once the code is uploaded, information on how to connect to the ESP8266 will be displayed in the serial monitor.

Displaying the Serial Monitor

The serial monitor is a fundamental concept of micro-controller development. For more information, refer to the Using the Serial Monitor tool article in the Arduino documentation.

In this example, the serial monitor is used in the code via Serial.println() statements. Those familiar with web development will find it similar to the JavaScript console.log() function. The Serial Monitor can be displayed in the bottom on the Arduino IDE.

Developers may noticed erroneous characters appearing in the Serial Monitor. When starting transmissions, a display of a few garbled characters is common and not a cause for concern. If no characters are displayed in the serial monitor, ensure that the baud rate matches the baud rate specified in the code.

The IP address on the local network is displayed in the serial monitor.

Ensure that the ESP8266, and the computer that will display the ESP8266 web page are connected to the same Wi-Fi network.

Accessing the IP Address of the ESP8266 will lead to the root route being executed in code, and displaying the following HTML:

Enter the data specified in this article's Information For Later section, choose a color, and click on the Post to Kintone! button.
Check the Kintone App to see if a new record has been successfully posted.

🏆 Contest - Kintone Customization Contest 2023

ahandsel — Mon, 03 Jul 2023 03:00:00 +0000

Hey Kintone Developers 👋

We are excited to announce our latest contest, where you can enter to win awesome prizes 💰 by building and showing your dev skills 💪!

TL;DR

Deadline: Thu, August 31, 23:59 (Pacific)
Prizes: $100 gift cards to 15 winners & Kintone swag to all submitters
How to Enter:
1. Build a cool Kintone customization or project that uses Kintone APIs
2. Write up how you built it & post your article on DEV
3. Comment on the Contest Submission topic with a link to your post.
Criteria: Creativity, Look & Feel, Article Quality, & Kintone Usage
Winners Announcement: Thu, September 7 (Pacific)

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 front-end UI/UX of a Kintone App. This can include features such as maps, buttons, and color-coding.

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

Prizes 💰

To the 15 best submissions, we will be giving away $100 gift cards & special Kintone swag!

To all submitters, we will be giving away Kintone swag!

⚡ We will be direct messaging the winners and submitters on the Kintone Developer Forum to get shipping information.

How to Enter 🗳️

If you do not have one yet, Create a Kintone Developer Forum account
Build a Kintone customization or project that uses Kintone APIs

Write up how you built it & post your article on DEV

Use #kintone & #kintone_contest tags to your article
Add the following footer to your article:

   This post is part of the Kintone Customization Contest 2023.  
   Submitter: https://forum.kintone.dev/u/INSERT_YOUR_USERNAME_HERE

Comment on the Contest Submission topic with the Title and link to your article

For more information, refer to the example submission included in the Contest Submission Instructions.

Criteria 📝

We will be judging your submissions based on the following criteria:

Criterion	Points	Description
Kintone Usage	50	How well does your project use Kintone and Kintone APIs?
Article Quality	25	How well is your article written?
Look & Feel	15	How well does your project look and actually work?
Creativity	10	How original and interesting is your project?

Winners Announcement 📢

We will be announcing the winners on the Kintone Developer Forum and DEV on Thu, September 7 (Pacific).

We will also be direct messaging the winners and submitters on the Kintone Developer Forum to get shipping information.

Deadline ⏱️ & Rules 📜

The contest starts on Mon, July 3, 00:00 (Pacific) and ends on Thu, August 31, 23:59 (Pacific) (the "Entry Period").

You must submit your write up and comment on the Contest Submission topic by Thu, August 31, 23:59 (Pacific) to be eligible for the contest.

The project must use Kintone itself or Kintone APIs in some way.
Multiple submissions are allowed; however, each entrant may only win once.
Collaboration is allowed.
- Just note that Kintone will not handle prize-splitting. The prize will be sent to the Kintone Developer Forum account listed as the author in the DEV article. You will need to split the prize amongst yourselves.
All submissions must be new projects created during the contest period.

⚠️ IMPORTANT: PLEASE READ THE KINTONE CONTEST OFFICIAL RULES BEFORE ENTERING THE CONTEST. BY PARTICIPATING IN THE CONTEST, YOU AGREE TO BE BOUND BY THESE OFFICIAL RULES AND REPRESENT THAT YOU SATISFY ALL OF THE ELIGIBILITY REQUIREMENTS BELOW.

NO PURCHASE NECESSARY. Open only to 18+. The Contest is void where prohibited or restricted by law or regulation. For Official Rules, see Kintone Contest Official Rules.

Inspiration 💡

Here are some ideas to get you started:

Take data stored in a Kintone app and visualize it in a cool way with a charting library like QuickChart or amCharts
Build a PDF generator using Kintone's REST API and a PDF library like PDFKit or PDFMake
Integrate Kintone with a third-party service like Twilio or Slack to send notifications or messages
Inject a game into Kintone using Kintone's JS API and a game library like Phaser or PixiJS
Create a Google Maps mashup using Kintone's JS API and the Google Maps API

Resources 📚

Quick Start Guides:

Documentation for Kintone's JS & REST APIs

Tutorials & Sample Code:

Kintone Customization Tutorials - Tutorials for building Kintone customizations and integrations
Kintone-Workshops GitHub Repo - Sample code from past Kintone Workshops
Kintone Developer Program's YouTube channel - Past workshop recordings and tutorials
ahandsel/No-Server-Data-Visualization: Compilation repo of No Server Data Visualization x Kintone Web Database workshop content

Community Support 👥

Post your Kintone-related questions on the Kintone Developer Forum!

Our Kintone Developer Program team will do our best to answer your questions.

Got Questions? 🤔

Post your contest-related questions on the Contest 🏆 category on the Kintone Developer Forum.

For sensitive questions, please email us at developer@kintone.com with the subject line Kintone Customization Contest 2023.

We are all looking forward to seeing what you build! 🚀

Happy coding & best of luck 🍀

Quick Start: VS Code Setup for Kintone Customization Development

ahandsel — Fri, 30 Jun 2023 06:18:58 +0000

Want to develop Kintone customizations quickly?

If so, let's set up your Visual Studio Code (VS Code) so your code is seamlessly synced with your Kintone App.

No more manually uploading customization files to the Kintone App each time! 🙌

Outline

Setup Overview
Prep
5 Steps to Setup the Development Environment
Step 1. Generate a Certificate and Private Key Using the mkcert Tool
Step 2. Enable HTTPS on the Live Server Extension
Step 3. Launch a Local Development Server Using the Live Server Extension
Step 4. Set the localhost URLs with HTTPS in the Kintone App's Settings
Step 5. Refresh the Kintone App to Reflect the Changes
Conclusion

Setup Overview

Open the Kintone customization project in VS Code
Live Server extension will host the files locally
mkcert command-line tool enables HTTPS on the local development server
Set the localhost URLs with HTTPS in the Kintone App's settings
Kintone actively fetches the JavaScript and CSS files from the localhost

Prep

Tools we will use:

Visual Studio Code (VS Code)
Live Server extension
mkcert command-line tool that generates locally-trusted development certificates

Install VS Code and the Live Server extension on your laptop.

5 Steps to Setup the Development Environment

Generate a certificate and private key using the mkcert tool
Enable HTTPS on the Live Server extension
Launch a local development server using the Live Server extension
Set the localhost URLs with HTTPS in the Kintone App's settings
Refresh the Kintone App to reflect the changes

Step 1. Generate a Certificate and Private Key Using the mkcert Tool

To install mkcert:

For macOS, use Homebrew → brew install mkcert
For Windows, use Chocolatey → choco install mkcert

Initialize mkcert to install a local certificate authority (CA).

mkcert -install
When prompted for a password, input the device password.
Click Yes when a security warning appears.

Generate a certificate and private key for localhost.

mkcert localhost 127.0.0.1 ::1

When you see The certificate is at "./localhost+2.pem" and the key at "./localhost+2-key.pem" ✅, everything went well!

localhost+2-key.pem is the private key
localhost+2.pem is the certificate

For more information, refer to the mkcert's Installation documentation.

⚠️ Do not share the certificate and private key with others.

Step 2. Enable HTTPS on the Live Server Extension

Open your Kintone customization project in VS Code as a VS Code Workspace.

To create a VS Code Workspace: Open the folder in VS Code, then go to File and click the Save Workspace As option.

Add a VS Code Workspace Setting file named .vscode/settings.json to the project folder.

Finally, add the following code to the .vscode/settings.json file.

{
  "liveServer.settings.https": {
    "enable": true,
    "cert": "/INSERT_PATH_TO_CERT/localhost+2.pem",
    "key": "/INSERT_PATH_TO_CERT/localhost+2-key.pem",
    "passphrase": ""
  }
}

⚡ Be sure to swap INSERT_PATH_TO_CERT with the paths to the certificate and private key generated in the previous step.

⚡ You can also configure the Live Server extension settings via the VS Code Settings UI.

Open the VS Code Command Palette
Type and select Preferences: Open Settings (UI)
In the settings search bar, type liveServer.settings.https
Set the enable, cert, key, and passphrase values as shown below

Step 3. Launch a Local Development Server Using the Live Server Extension

Open the VS Code Command Palette
Type and select Live Server: Open With Live Server
Navigate to https://localhost:5500 on the web browser to access the server

Navigate to the JavaScript and CSS files.

Step 4. Set the localhost URLs with HTTPS in the Kintone App's Settings

To get the localhost URL with HTTPS for a file:

Navigate to the file hosted on the local development server via the browser
Copy the URL from the browser's address bar
Navigate to the Kintone App's JavaScript and CSS Customization settings
Set the localhost URL with HTTPS to the desired option
Click on Save and then the Update App buttons

The JavaScript and CSS files will be accessed and used by the Kintone App.

The setup for the optimized Kintone customization development environment is now complete.

Step 5. Refresh the Kintone App to Reflect the Changes

Modify a Kintone customization file and refresh the Kintone App.

The changes should be reflected in the Kintone App immediately. 👏

⚠️ This is only a development environment setup.

⚠️ The changes are only implemented on other devices once the code is uploaded to the Kintone App.

Conclusion

With this setup, you can verify the changes without manually uploading customization files to the Kintone App each time! 💪

Got Questions? 🤔

Post them on the Kintone Developer Forum.

Guide on Installing Node.js & npm {macOS & Windows}

ahandsel — Fri, 12 May 2023 08:11:14 +0000

Guide on Installing Node.js for a React Project

This is a step-by-step guide that will go over everything you need to do before our React workshop!

Outline

Check if you already have Node.js or npm
macOS with nodenv
Windows with nvm-windows
Installing Node.js - Video

Check if you already have Node.js or npm

Since we will be using the create-react-app tool, Node ≥ 14.0.0 is required!

Create a my_project folder - Somewhere inside your Document folder will be good.
From the terminal, go inside the my_project folder and then run the following commands:

node -v
npm -v

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

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.

Step 4. Verify that nodenv is properly set up using the 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 5. Install Node.js inside the Workshop folder (my_project)

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

Inside my_project folder, install Node.js version 14.5.0:

  cd my_project/

  nodenv install 14.5.0

  nodenv local 14.5.0

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

Download the required packages by opening a terminal for both the frontend & backend folders and then 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 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 execute 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 Workshop folder (my_project)

Now you're ready to install specific Node.js versions!
Inside the my_project folder, install Node.js version 14.5.0:

  cd .\Documents\my_project

  nvm install 14.5.0

  nvm use 14.5.0

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

Download the required packages by opening a terminal for both the frontend & backend folders and then running the npm install command!

Installing Node.js - Video

KintoneRestAPIError: [403] [CB_NO02] No privilege to proceed. Error when using the kintone-customize-uploader CLI tool

ahandsel — Thu, 27 Apr 2023 05:49:49 +0000

This is an error related to account permissions and kintone-customize-uploader

If you encounter the KintoneRestAPIError: [403] [CB_NO02] No privilege to proceed., it most likely concerns the account used to execute the kintone-customize-uploader cli tool.

Full Error Message

An error occurred, retry
Failed to update customize setting
KintoneRestAPIError: [403] [CB_NO02] No privilege to proceed. (SoyMA67jQV6mU3NHzTyH)
    at KintoneResponseHandler.handleErrorResponse (/Users/username/.nodenv/versions/18.14.2/lib/node_modules/@kintone/customize-uploader/node_modules/@kintone/rest-api-client/lib/KintoneResponseHandler.js:57:15)
    at /Users/username/.nodenv/versions/18.14.2/lib/node_modules/@kintone/customize-uploader/node_modules/@kintone/rest-api-client/lib/KintoneResponseHandler.js:35:123
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
Child process exited with code: 1 and signal:. Terminating parent process...

Cause

The cause is that the account used to upload the customization files to the Kintone App is not a Kintone Administrator.

As specified in the Customizing an App Using JavaScript and CSS help document, only Kintone Administrators are allowed to upload JS & CSS customization files to any Kintone Apps.

Note that JavaScript and CSS files can be uploaded on Kintone only by Kintone Administrators.

Solution

Use an account with Kintone Administrator privilege when executing the kintone-customize-uploader.

To upgrade a Kintone account to have Kintone Administrator privilege:

Log into your Kintone Subdomain with the Kintone Admin account
Click the ⚙️ in the header.
Click the Users & System Administration option.
- ⚠️ If the link does not appear, you do not have administrative privilege, so you cannot modify a Kintone account.
Click the Administrators from the left-side menu.
Enter the user's display name or login name in the search box to search for the target user. Moreover, you can expand the department tree and find the target user.
Select the users you want to add as administrators.
Click the Add button.
Confirm that the target users are added to the "Administrators" section.
Click the Save button.

Resources

GitHub Repo: js-sdk/packages/customize-uploader/
Tutorial: Upload JavaScript and CSS files with Customize-uploader - Kintone Developer Program
Kintone Help Documents:
- Configuring Kintone Users & System Administrators
- Accessing Kintone Users & System Administration
npm: @kintone/customize-uploader - npm

JS Customization to Generate QR Codes from Kintone Record Values

ahandsel — Thu, 23 Mar 2023 05:13:21 +0000

JS Customization to Generate QR Code from Kintone Record Values

Overview

This is a quick guide on setting up a Kintone JavaScript customization that generates a QR code from a record value.

The QR code can be generated based on a URL or a text value.

The customization works on both the Kintone desktop and mobile views. (To do this, upload the script under both the JavaScript/CSS Files for PC and JavaScript/CSS Files for Mobile Devices sections of the Kintone App's Customize page.)

Customization

QR code API by Foundata GmbH is used to generate the QR code with GET requests.

The following Kintone fields are required for the customization:

Space field to display the QR code:
A field for string input for the QR code content:
Number field to specify the QR code size:
- Set the maximum value to 1000.
- The value is the number of pixels for the QR code width and height

QR Code Script

⚠️ Note: The following variables must be specified to match the field codes of your Kintone App:

inputFieldCode
sizeFieldCode
outputFieldCode

(function () {
  'use strict';
  // Field codes
  const inputFieldCode = 'input';
  const sizeFieldCode = 'size';
  const outputFieldCode = 'output';
  // Kintone Events when the customization will be triggered
  const QRCodeEvents = ['app.record.detail.show', 'mobile.app.record.detail.show'];

  kintone.events.on(QRCodeEvents, function (event) {
    try {
      const inputValue = event.record[inputFieldCode].value;
      const sizeValue = event.record[sizeFieldCode].value;
      const outputSpace = kintone.app.record.getSpaceElement(outputFieldCode) || kintone.mobile.app.record.getSpaceElement(outputFieldCode);

      // Generate an img element for the QR Code
      const outputImg = document.createElement('img');

      // Set the image source as the GET query for the QR Code API
      outputImg.src = `https://api.qrserver.com/v1/create-qr-code/?size=${sizeValue}x${sizeValue}&data=${inputValue}`;
      console.log(outputImg.src);

      // Attach the image to the space element
      outputSpace.appendChild(outputImg);
      return event;
    } catch (error) {
      console.warn("Exception KintoneEventsOn Queue", error);
    }
  });
})();

Reference

⚙️ 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 front-end UI/UX of a Kintone App. This can include features such as maps, buttons, and color-coding.

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

⚡ Example Submission ⚡

This post is part of the Kintone Customization Contest 2023.

Submitter: https://forum.kintone.dev/u/genji

Quick Start on Using Kintone Web Database in a Hackathon Project

ahandsel — Sat, 01 Oct 2022 17:51:17 +0000

3 Reasons to Use Kintone for your hack
🚀 Getting your FREE Kintone Database
- 1. Fill out the Kintone Developer License Registration form
- 2. Check your email & click Activate Now
💪 Using your Kintone Database
- 3. Let's Log into Kintone
- 4. Create a Kintone Database App
📺 How to Create a Kintone Database App? - Video
How to generate a Kintone API Token?
Where Can I Get Help?
What can I build with Kintone?
- Running an easily configurable Space Invaders game on Kintone
- Connect IoT Obniz Board to Kintone Web Database all in 10 minutes
- Deploy a REST API calling node.js App to Heroku
- React, REST API, & Kintone: GET & POST to a Web Database
More Resources

3 Reasons to Use Kintone for your hack

No servers are needed! - Ridiculously fast to build databases!
Effortlessly manage database data and schema with GUI!
Super simple to build JS customizations!

🚀 Getting your FREE Kintone Database

1. Fill out the Kintone Developer License Registration form

Head over to the Developer License Registration Form

✅ Accept the Cookies first
✅ Use Chrome & Firefox

When creating your Kintone Subdomain:

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

2. Check your email & click `Activate Now`

After submitting the form, you will get a confirmation email with an Activate Now button.

Email title: "Welcome to Kintone! One More Step to Developer License"

Then you will be redirected to your Kintone Subdomain to set the initial password.

💪 Using your Kintone Database

3. Let's Log into Kintone

Once you create your Kintone Subdomain, it is super simple to access it.

Simply go to YOUR_SUBDOMAIN.kintone.com with YOUR_SUBDOMAIN swapped with your unique Kintone Subdomain.

4. Create a Kintone Database App

To create a Database App, from the Portal screen, click the [+] button on the right side next to the Apps section.

📺 How to Create a Kintone Database App? - Video

Check out this guide that goes over creating an example Manga Database App.

How to generate a 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 📺

Where Can I Get Help?

If you are stuck, post your question & code on the Kintone Developer forum!

If a Kintone mentor is available, post on the Slack workspace!

We are more than happy to answer any questions or help fix any problems regarding Kintone.

What can I build with Kintone?

Here are a few projects that use Kintone as the web database!

Running an easily configurable Space Invaders game on Kintone

This is a phaser.io game running on Kintone. It is super easy to get started! No need to set up a node.js environment or AWS serverless environment! You just need a code editor & Kintone account.

Check out the tutorial on Having Fun with Browser Games & Web databases - DEV Community 👩‍💻👨‍💻

Connect IoT Obniz Board to Kintone Web Database all in 10 minutes

Obniz Board is an IoT Microprocessor that is easily programable with JavaScript! Since Kintone supports JavaScript customizations, it is the best web database to integrate with Obniz Board!

Here is a step-by-step tutorial explaining everything you need to get an Obniz Board exporting data to the Kintone web database!

Setup Obniz Board as a counter & store data in Kintone Web Database all in 10 minutes! - DEV Community 👩‍💻👨‍💻

Deploy a REST API calling node.js App to Heroku

In this particular example, the node.js app retrieves record data from a Kintone web database via REST API and displays it on the page of the node.js app.

Check out the tutorial on Deploy a REST API calling node.js App to Heroku - DEV Community 👩‍💻👨‍💻

React, REST API, & Kintone: GET & POST to a Web Database

This is a recording from Kintone's React workshop series! We go over how to set up a React project and Express server to access data stored in Kintone!

Code & Slides are available at this GitHub Repo:

ahandsel/React_Workshop_by_Kintone

Clone the codebase & follow along with the video to build out the POST functionality!
If you are stuck, check the docs with the completed version!

More Resources

Resource	Link
Get Started Guide	kintone.dev/en/quickstart
YouTube Channel	youtube.com/c/KintoneDeveloperProgram
Kintone Dev Forum	forum.kintone.dev
Intro to Kintone Slides	ahandsel.github.io/kintone-for-hackathon/
Kintone API Docs	kintone.dev/en/docs/
Kintone Tutorials	kintone.dev/en/tutorials/

Add a button to show & hide the Kintone App's header

ahandsel — Fri, 30 Sep 2022 14:30:01 +0000

Here is a script to add a Hide Header button in the space element below the header. The button is a toggle to show and hide the Kintone App's header.

Demo

Code

// Add a button to show & hide the Kintone header
// If this code breaks, verify if `gaia-argoui-app-index-toolbar` is still the correct class name for the header
(function () {
  'use strict';
  // Run a function when the record list page appears
  kintone.events.on('app.record.index.show', function (event) {
    // Prevent duplication of the button
    if (document.getElementById('toggle_button') != null) {
      return;
    }
    // Set a button
    const toggleButton = document.createElement('button');
    toggleButton.id = 'toggle_button';
    toggleButton.innerHTML = 'Hide Header';
    toggleButton.style.margin = '10px';
    toggleButton.style.padding = '10px 10px';
    toggleButton.style.ariaLabel = 'Header Display Toggle';
    toggleButton.style.height = '48px';
    toggleButton.style.border = '1px solid #e3e7e8';
    toggleButton.style.backgroundColor = '#f7f9fa';

    // Button onclick function
    toggleButton.onclick = function () {
      headerToggle();
    };

    // Retrieve the header menu space element and set the button there
    kintone.app.getHeaderSpaceElement().appendChild(toggleButton);
    // const record = event.record;
    function headerToggle() {
      let header = document.getElementsByClassName('gaia-argoui-app-index-toolbar')[0];
      if (header.style.display === "none") {
        header.style.display = "block";
        console.log('Showing the header');
        toggleButton.innerHTML = 'Hide Header';
      } else {
        header.style.display = "none";
        console.log('Hiding the header');
        toggleButton.innerHTML = 'Show Header';
      }
    }
  });

})();

Debugging

If this code breaks, verify if gaia-argoui-app-index-toolbar is still the correct class name for the Kintone App's header.

How to Duplicate Kintone Apps?

ahandsel — Tue, 14 Dec 2021 23:39:41 +0000

This article will explore the different ways to duplicate Kintone Apps (copying an App) with and without the data stored inside.

Outline

Prerequisite
Method 1: Creating a New App by Duplicating an Existing App
- Steps to Duplicate an Existing App
Method 2: App Template
- What Is an App Template?
- Multiple Apps in one App Template?
- Steps to Create an App Template
- Creating an App from an App Template
- Which Settings Cannot Be Included in an App Template?
Migrating Records from the Original App to the New App
- Exporting App Data (Records) as a CSV file
- Importing App Data (Records) from a CSV file
- How to bulk download all the Attachments from a Kintone App?
Guest Space
What Is Kintone?

Prerequisite

Management permission is required to duplicate the App.

For details, refer to Setting App Permissions help doc.

Method 1: Creating a New App by Duplicating an Existing App

This is the easiest way to get the job as it only uses Kintone's standard functions (no customization).

Only the App's Fields settings and Process Management settings will be copied over.

The following are not copied to the new App:

App Code
API Token
Plug-ins and corresponding App settings
App's Records (i.e., App's data)

Steps to Duplicate an Existing App

(1) Click on the ➕ Button to the right of Apps Create App.

Direct URL: https://_YourSubdomain_.kintone.com/k/#/market

(2) From the Kintone Marketplace screen, click on the Create from Existing App option.

If the Create from Existing App option does not appear, the user does not have management permissions for any App or has not been created on Kintone.

(3) From the Create from an Existing App screen, click on the Duplicate This App Button next to the desired App to duplicate.

(4) The App is duplicated & the settings screen of the new App will open

(5) Click on the Activate App Button to complete the process.

The new App will contain no Records.
Only the App's fields and Process Management settings will be duplicated.

For more information, refer to Creating a New App by Duplicating an Existing App (Copying an App) help doc.

Method 2: App Template

What Is an App Template?

An App Template is a model that users can use to create Apps with the defined settings preemptively applied to the new App.
App templates can be created from existing Apps.
Creating or deleting App templates requires Kintone Administrative permission.
For more information, refer to What Is an App Template? help doc.

⚠️ Caution

Templates can be created only from activated Apps.
The App Template will not include some settings. For more information, refer to the Settings That Are Not Included in App Templates help doc.

Multiple Apps in one App Template?

Multiple Apps can be included in one App Template.

Also, when an App references other Apps (e.g., Lookup field), the referenced Apps are automatically included in the App Template.

Following Settings are able to be included in the App Template:

Steps to Create an App Template

(1) From the Kintone Portal Top screen, click on the Kintone Menu Bar's Gear Icon ⚙ > Kintone Administration.

(2) From the Kintone Administration screen, click on the App Templates link.

Apps > App Templates
App Template Setting's URL: https://_YourSubdomain_.kintone.com/k/admin/system/template/

(3) Click the New Button from the top-left corner

(4) Select the Apps to be included in the App Template.

If an App includes a field referencing another App, both Apps will be included.
Multiple Apps can be included together in one App Template pack.
Click Next once the Apps are selected.

(5) Fill in the details for the App Template, including Name, Icon, and Description.

The included Apps' description can be configured as well.
Click Save once completed.

Completion: The App Template that generates the selected App(s) is created!

An App Template can be exported as a ZIP file to transfer the App outside a Kintone Subdomain.

For more information, refer to Creating a Template from an App help doc.

Creating an App from an App Template

(1) Click on the ➕ Plus Button right of Apps.

(2) Click the Create from Template option under the Create New App section.

(3) Click Use This Template for the desired App Template.

Pack label is placed on App Templates that creates multiple Apps.

Completion: The App(s) are created from the selected App Template!

For more information, refer to Creating an App from a Template help doc.

Which Settings Cannot Be Included in an App Template?

Following settings are not included in App Template:

App Code
Access permissions
Periodic Reports
Options of the Department Selection field
API Token
Settings applied to plug-ins
Available To setting of an Action

Following settings are not included in App Template unless configured as specified:

Notification settings

Unless the notifications are set to the following recipients:
- Administrator user
- Administrators group
- Everyone group
- "Created by" field
- "Updated by" field
- Assignee (when the process management function is enabled)

Options of the User Selection field

Unless configured to Administrator user, Everyone group, and/or Administrators group

Default value of the User Selection field

Unless configured to Administrator user, Everyone group, and/or Administrators group

Default value of the Department Selection field

Unless configured to Priority Department

Options of the Group Selection field

Unless configured to Everyone group and/or Administrators group

Default value of the Group Selection field

Unless configured to Everyone group and/or Administrators group

Conditions set in the Initial filter setting of the Lookup field

Unless configured to Administrator user and/or login user

Filter conditions of views or reports that use the User Selection, Created by, or Updated by field

Unless the condition uses the User Selection field and an Administrator user and/or login user is set

Process management

Unless the Branch Criteria uses a User Selection field that is set to the Administrator user

Assignee

Unless the assignee is set to the following:
- Administrator user
- Administrators group
- "Created by" field
- "Updated by" field

Migrating Records from the Original App to the New App

The is no one function to copy a Kintone App that includes the original Records. Ultimately, the App must be duplicated, and the Records from the Original App be exported as a CSV file and imported into the New App.

⚠️ Caution

The App's Export to file and Import from file permissions are required.
- By default, the Import from file permission is granted only to App Creators.
- It is set using the Permissions for App in the App settings page.
Some fields cannot be exported or imported.
- For the full list, refer to the Data Types That Can Be Imported or Exported help doc.

Exporting App Data (Records) as a CSV file

(1) Configure the View to list the desired records to be exported.

(2) Click the Options Button ... on the upper right of the screen, and then click Export to File.

If the Export to File Button is not shown, the user does not have permission to export data to a file.

(3) Leave the Include header row option enabled.

(4) Select a character encoding and a delimiter to use, if necessary.

(5) Drag and drop items to be exported.

Click on Add All Button to include all fields in the data export.

(6) Click Export on the upper left of the screen.

When a data exporting process begins, you are moved to the Exported Files screen.
It may take a few seconds to a few minutes to export a file.

(7) Click Refresh on the upper left side of the Exported Files screen.

(8) Click the name of the CSV file you want to download.

Completion: The CSV file has all the App's data (Records)!

For more information, refer to Exporting Data to a File help doc.

Importing App Data (Records) from a CSV file

(1) Click the Options Button ... on the upper right of the screen, and then click the Import from File button.

(2) Click Browse and specify an Excel file or CSV file to import.

(3) When prompted with Select Data Scope, select the First row is header option.

(4) For each field in the App, associate it with the column in the file to import.

Make sure to specify Column in File for each of the following fields:
- Fields where values are to be added
- Fields where entry is required (marked with an asterisk *)
If a field is not associated with any column under the Column in File, it is created as an empty field or with a default value.

(5) Click Import on the upper left side of the screen.

Completion: The App now has the imported data!

For more information, refer to the Create/Update Records in Bulk: Importing a File help doc.

How to bulk download all the Attachments from a Kintone App?

There is no standard function to bulk download all the Attachments (files uploaded to a Kintone Record via Attachment field) at once.

Here is an overview of building a JavaScript customization to bulk download attachments.

Required files:

JSZipUtils(v0.0.2) --- used when downloading the files.
js(v1.0.0) --- used when saving the files.
ZipAllFiles.js --- JS Customization by Kintone Developer Program
- Change the fieldCode value to the Attachment field's field code

Upload or state the URL of the files in the JavaScript and CSS Customization settings of the App as below, and be sure to list them in the same order.

FileSaver.min.js
jszip-utils.mini.js
https://js.kintone.com/jszip/v3.1.4/jszip.min.js
ZipAllFiles.js

A button should appear on the Record List.

Click the Button to start running the process to download Attachment files as a Zip file.

For more information, refer to the Bulk download attachments using JSZip tutorial.

Guest Space

In a Guest Space, only Apps within the same Guest Space can be duplicated with Method 1.
To duplicate Apps not inside a Guest Space, refer to Method 2.

What Is Kintone?

Kintone is a no-code/low-code cloud platform for teams to easily & effectively 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 developer.kintone.io.

Forem: Kintone Developer Program

MCP Integration Tutorial: Create a News Monitoring App with Claude

Table of Contents

Introduction

Prerequisites

Prepare the Kintone Environment

What is Kintone?

Get your Kintone Environment

Create a News Summary App

Prepare the Claude Desktop Mode

Prepare the Firecrawl MCP Server

Prepare the Kintone MCP Server

Send the Prompts

Make an Announcement

Conclusion

Tips for using Kintone in Hackathons

Introduction

Get your Kintone Environment

Create your Kintone Database

Manually Input Some Data

Sample Python Code to Interact with Kintone

1. Adding a Record to the Kintone App

2. Retrieving All Records from the Kintone App

3. Retrieving Records with Query Filtering

Conclusion

🎉 Announcing the Winners of the Kintone Customization Contest 2023! 🎉

Congratulations to our winners!

Hey Kintone Developers, we want to hear from you!

Upcoming Events

Next Workshop

Next Hackathon

Cheers to innovation and to all who participated! 🥳

Save Data to Kintone with an ESP8266

Overview

General Flow

Initial Setup

Create a Kintone App

Set up the Fields

Create an API Token

Information For Later

Program a POST request in the ESP8266

Complete Code Example

Compile and Upload the code

Test the Sample Code

Displaying the Serial Monitor

🏆 Contest - Kintone Customization Contest 2023

TL;DR

What is Kintone? ⚙️

Prizes 💰

How to Enter 🗳️

Criteria 📝

Winners Announcement 📢

Deadline ⏱️ & Rules 📜

Inspiration 💡

Resources 📚

Community Support 👥

Got Questions? 🤔

Quick Start: VS Code Setup for Kintone Customization Development

Outline

Setup Overview

Prep

5 Steps to Setup the Development Environment

Step 1. Generate a Certificate and Private Key Using the mkcert Tool

Step 2. Enable HTTPS on the Live Server Extension

Step 3. Launch a Local Development Server Using the Live Server Extension

Step 4. Set the localhost URLs with HTTPS in the Kintone App's Settings

Step 5. Refresh the Kintone App to Reflect the Changes

Conclusion

Guide on Installing Node.js & npm {macOS & Windows}

Guide on Installing Node.js for a React Project

Outline

Check if you already have Node.js or npm

macOS with nodenv

Windows with nvm-windows

Installing Node.js - Video

KintoneRestAPIError: [403] [CB_NO02] No privilege to proceed. Error when using the kintone-customize-uploader CLI tool

Full Error Message

Cause

Solution

Resources

2. Check your email & click `Activate Now`