Forem: William Sayama

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!

The Metaverse Vitalizing the Creators Market

William Sayama — Tue, 21 Dec 2021 16:52:53 +0000

Summary

This article is a report for Virtual Market 2021, a virtual event that took place from 4th December 2021 to 19th December 2021. I hope to give creators insight into the event experience, so that they can consider attending or even exhibiting in future Virtual Market events.

What is Virtual Market?

Virtual Market, known as Vket, is the largest creators market festival in the virtual space, hosted by HIKKY Co., Ltd. Visitors can join the event to experience and purchase various 3D Avatars and 3D models.

The event took place on various worlds hosted on the VRChat platform - 2 "Company worlds" and 22 "General worlds". You can think of "worlds" as different areas of a building in a real life conference, except that those areas have such a distinct atmosphere, you really do feel that you are in another world.

The Virtual Worlds

Company Worlds

The 2 company worlds, "Parareal Akihabara" and "Parareal Shibuya", were fascinating replicas of Japan's famous Akihabara and Shibuya cities.

Parareal Akihabara was displayed as a colorful electronic city, with TVs being displayed everywhere, and hot air balloons flying high.

Parareal Shibuya introduced the visitors to the Scramble crossing, together with many buildings with large billboards with company advertisements.

General Worlds

The General Worlds existed for the 201 creator groups to exhibit their virtual creations. These worlds included Japanese school festivals, Fantasy towns, Christmas snowlands, Battlegrounds, Japanese Edo towns and Cyber dimensions.

The amount of details the world creators placed in these worlds were amazing, along with the exquisite background music that accompanied them. Every time I joined a new world, it filled me with excitement and joy, as it felt like I entered a new town in a jRPG.

The Virtual Booths

Company Booths

Although it was expected that a number of pop-culture related companies would be exhibiting in the Company worlds, it was interesting to see companies that don't work in this industry holding exhibits. For example SMBC Nikko Securities Inc., a company that handles stock investment, built out a interactable VR roller coaster that had slopes mimicking the stock market's ups and downs.

Comp, a company selling Complete Diet supplements, was seen hosting a booth with their products in 3D. A large screen was playing interviews of a number of famous Japanese VTubers promoting their product.

General Booths

Unlike the Company booths, most of the General booths presented their fabulous 3D creations that visitors could get their hands on.

Avatars ranged from Humans, Angels, Half-beasts, Animals, Humanoids and Robots - which really sets a beautiful point about VRChat. You can be whatever you want to be.

Booths also introduced 3D models that could be used with Avatars. These could be clothes, bags, hats, weapons, suitcases, tofu ... tofu?

Other booths offered 3D homes, shaders and music, while others advertised various social VR events that they were hosting.

As long as the exhibiting groups had something that benefited the VR community, they were eligible to present these to the visitors.

The Experience

Changing Avatars

Many avatars presented in the booths were intractable, giving options for visitors to test them out. A few seconds after confirming changing the avatar, visitors could use the avatars, and test out the various emotions and optional parts (mainly clothing) it had to offer.

Experimenting Gimmicks

Many objects within the world and booths could be picked up. Objects like hats could be left in the air, where you would try to fit in with your character using mirrors. Others would produce interesting effects to the virtual world.

Communication

Although many booths were hosted in Japanese, I saw many English speaking VR Chat users attending Vket, and having fun. Unfortunately, my PCs mic was dead and there was no way for me to speak. All I could do was gesture, but that seemed to be enough for communication.

When I visited TenguTenshi's booth, there was no verbal communication between us. TenguTenshi smiled, and handed me a lollipop. I took it, and was then gestured into the booth, where TenguTenshi pointed to an avatar I could change into. After I changed into it, TenguTenshi showed some excitement, and I showed mine back. It felt really great to have that communication experience.

Thoughts

Attending Virtual Market 2021 was a great experience. VRChat is a platform with great flexibility, allowing users to create various avatars, worlds and objects. But by itself, it really only is a game platform. It's intriguing to see that HIKKY has interacted deeply with the various creators on this platform, so that some economy would start flowing. HIKKY's love for the VR creators, and the creators' love for VR community is what really gets Vket running.

Why don't you join us?

Looking at the next event

If you're thinking of attending the next event, the good news is that Virtual Market 2022 Summer is planned to be hosted (Dates TBD). You can follow their English Twitter account for more updates.

Join via VRChat

If you have a windows machine, you can join the event via VRChat, which can be installed from Steam. VR headsets aren't needed - you can just access the platform through the desktop. During the event period, the Vket worlds will be made public, allowing you to join in freely. Unfortunately though, VRChat only runs on Windows.

Join via the Browser

If you only own a Mac, or you don't want to sell your soul to VRChat quite yet, you can join through a web browser. During the event periods, HIKKY provides links for a one-step access to the VR World. You may experience more lag than PCs, and you'll find that some interactions are limited via the browser, but it certainly will be enough to motivate you to join future events through a Windows machine. At least I definitely did.

Finally

I hope to see more people in the next event!

If you want to get connected, feel free to friend me on VRChat. You can find my username as _forks

React & REST API: How to add data to a Web Database

William Sayama — Wed, 26 May 2021 08:07:59 +0000

General Overview

In Part 5 of this series, we'll add a form to our React App. Clicking a button will add a new record into our Kintone App, and the latest data will be re-rendered onto our React App.

System Overview

Our React App will use the same Express server used in the previous articles as a proxy. The Express server will take in POST requests from our React App, make a request to our Kintone App (the web database), and add a new record into it.
After that, the React App will make a GET request to the Express server. The Express server will obtain records from our Kintone App, send back the result to the React App, and the result will be re-rendered on the UI.

Update the Server Side Code

We'll update the server.js code we've been working on in the series.

1. Set the Request End-points

We'll be making a REST API call to a new end-point that will add a record into the Kintone App. Since we have 2 end-points now, for better readability let's first update our endpoint from this:

const requestEndpoint = "https://{subdomain}.kintone.com/k/v1/records.json";

to this:

const multipleRecordsEndpoint = "https://{subdomain}.kintone.com/k/v1/records.json";
const singleRecordEndpoint = "https://{subdomain}.kintone.com/k/v1/record.json";

The end-point called in the /getData route should also be updated from requestEndpoint to multipleRecordsEndpoint.

//const response = await fetch(requestEndpoint+parameters, fetchOptions);
const response = await fetch(multipleRecordsEndpoint+parameters, fetchOptions);

2. Add a New Route

We currently have one route, the /getData route, that takes care of getting data from our Kintone App. Let's define another route that will take care of adding data into our Kintone App.

app.post('/postData', cors(corsOptions), async (req, res) => {

});

The same CORS options used in our /getData route will be used in this /postData route. The settings inside this /postData route will be similar to the /getData route in terms of how the REST API is called, except that we'll have to set it to handle a POST request instead of a GET request.

The first thing we'll do in this /postData route is to define the request body needed for Kintone's Add Record API call. The parameters app and record will be needed in this request.

const requestbody = {
    "app":1,
    "record":{
        "title":{
            "value":req.body.title
        },
        "author":{
            "value":req.body.author
        }
    }
};

Make sure to set the App ID that you are using in your own Kintone domain for the app parameter. For the record parameter, we've set the key names as title and author. These are the field code names of the fields we want to populate data with when the record is added. The values for these keys are set as req.body.title and req.body.author, which are the values that will be included in the body of the POST request from the client side (initiated by a button click).

Next, let's declare the fetch options. As stated in Kintone's API documentation, we'll need to set the method as POST and the Content-Type as application/json. The body defined earlier will also be included in the options.

const options = {
    method: 'POST',
    headers:{
        'X-Cybozu-API-Token':process.env.API_TOKEN,
        'Content-Type': 'application/json',
    },
    body: JSON.stringify(requestbody)
}

The option is then set in the 2nd argument of the fetch request.

const response = await fetch(singleRecordEndpoint, options);
const jsonResponse = await response.json();
res.json(jsonResponse);

3. Set a Body Parsing Middleware

A body parsing middleware needs to be set on our Express server, so that the request body from the client side can be read successfully. ~~Let's install body-parser through the terminal.~~ --> Sorry! Looks like body-parser was deprecated.

~~We'll then declare the body parser at the top of our server.js code.~~

We'll use express.json() to parse our incoming requests.

Set the following line after declaring const app = express();

app.use(express.json());

And with that, our server side should be ready to read bodies of incoming requests. Let's restart the server to apply the changes (ctrl+c --> node server.js).

Update the API Token Settings

The current API Token we use does not have permission to add new records into the Kintone App. Access the Kintone App's API Token settings and update this API Token so that the "Add records" permission is included.

Save the API Token settings, and click on the Update App button to have the new settings be applied to the production environment.

At this point, we can test to see if our Express server is working. By navigating to our React App, we can run the following code in the developer console to see if a successful request can be made to the server.

const addRecordEndpoint = "http://localhost:5000/postData";

const options = {
        method: 'POST',
        headers:{
            'Content-Type': 'application/json'
        },
        body: JSON.stringify(
            {
            'title':'Test Title',
            'author':'Test Author'
            }
        )
    }

const response = await fetch(addRecordEndpoint, options);
const jsonResponse = await response.json();
console.log(jsonResponse);

If successful, the REST API call should return a JSON including the Record ID of the newly added record.

Update the Client Side Code

Our next step is to update our client side code, index.js.
We need to:

create a form with 2 input fields (one for the Title name, and one for the Author name) and 1 button
send data to our Express server when a button is clicked
re-render the list with the newest data

1. Set the Request End-points

We'll first need to declare the new end-point /postData defined earlier in our Express server. For better readability of our code, let's also update the constant name given to the /getData end-point.

//const restEndpoint = "http://localhost:5000/getData";
const getRecordsEndpoint = "http://localhost:5000/getData";
const addRecordEndpoint = "http://localhost:5000/postData";

Don't forget to also update the end-point name called in the fetch call of the callRestAPI function from restEndpoint to getRecordsEndpoint.

//const response = await fetch(restEndpoint);
const response = await fetch(getRecordsEndpoint);

2. Use States for the Input Fields

When we click the button in our form, we want to take the values inside our input fields, and send it in our REST API request. These input field values are best stored in states. In our example, we'll be placing two input fields in our form, one for the Title and one for the Author. Inside the RenderResult function, let's define the states that will manage our input values.

const [titleValue, setTitleValue] = useState("");
const [authorValue, setAuthorValue] = useState("");

3. Create a Form

We'll create a form with two input fields and a button that will be used to send data to our Kintone App. This form will be defined in the return statement of the RenderResult function.

return(
    <div>
        <h1>React App</h1>
            <ul>{apiResponse}</ul>
        <form>
            <div>
                <label htmlFor="title-input">Title:</label>
                <input type="text" value={titleValue} id="title-input" onChange={HandleTitleChange} />
            </div>
            <div>
                <label htmlFor="author-input">Author:</label>
                <input type="text" value={authorValue} id="author-input" onChange={HandleAuthorChange} />
            </div>
            <button type="button" onClick={ButtonClick}>Add data</button>

        </form>
    </div>
);

The htmlFor attribute is React's version of the for element, i.e. it associates the label with the input element. The initial input values are set as the data set in the titleValue and authorValue states. The 2 input fields and the button have events which will run functions when they are triggered.

Our React App will currently display some errors in the console, since we haven't defined the titleValue,authorValue and ButtonClick functions yet. Let's quickly set these in the RenderResult function.

function HandleTitleChange(){};
function HandleAuthorChange(){};
function ButtonClick(){};

Our React App should now render a form 😋

As an extra note, we're defining these functions within the RenderResult function, as those functions will be working with some state variables.

3a. Define the onChange functions

OK, so let's go ahead to update the functions called by the onChange event. These functions will set the current input field values in their relative states, titleValue and authorValue.

function HandleTitleChange(event){
    setTitleValue(event.target.value);
}

function HandleAuthorChange(event){
    setAuthorValue(event.target.value);
}

3b. Define the Button Click function

When the button is clicked, we want our React App to:

make a REST API call to the Express server
re-render the UI to show that the data is being added
re-render the UI with the latest data

So first, we'll update our apiResponse state to include a now loading message at the end of its list after the button is clicked. After that, we'll run an AddNewRecord function, passing in the values of the Title and Author input fields as its argument.

Let's update the ButtonClick function.

function ButtonClick(){
    setApiResponse(apiResponse.concat(<li key="0" >*** now loading ***</li>));
    AddNewRecord(titleValue, authorValue);
}

Note that we needed to give the list a key, so we gave it an ID of 0, which is a number that is never assigned to a Record ID of a record in Kintone (more about keys were mentioned in the previous article).

Now let's add the AddNewRecord function outside of the RenderResult function. The AddNewRecord function will be making our REST API call to the /postData end-point.

const AddNewRecord = async (Title, Author) => {

};

Inside this function, we'll first define the body parameters needed for Kintone's Add Record API. Although the documents state that the app parameter is also needed, we've already defined this parameter on the Express server side, so we won't need to include it on the client side.

const recordBodyParameters = {
    'title':Title,
    'author':Author
}

Next, we'll define the options needed for our fetch call to our Express server.

const options = {
    method: 'POST',
    headers: {
        'Content-Type':'application/json'
    },
    body: JSON.stringify(recordBodyParameters)
}

The options will then be set as the 2nd argument of our fetch call to the Express Server.

const response = await fetch(addRecordEndpoint, options);
const jsonResponse = await response.json();
console.log(JSON.stringify(jsonResponse));
return jsonResponse;

So with this, we've defined a function that will send data (of the field values of the two input fields) to the Express server.

The AddNewRecord function should look like this.

const AddNewRecord = async (Title, Author) => {
  const recordBodyParameters = {
    'title': Title,
    'author': Author
  }

  const options = {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify(recordBodyParameters)
  }

  const response = await fetch(addRecordEndpoint, options);
  const jsonResponse = await response.json();
  console.log(JSON.stringify(jsonResponse));
  return jsonResponse;
};

3c. Set the Render Timing

At this stage, we can test out our React App. Go ahead to place some data into the input fields and click the button.

Although the now loading message is rendered and nothing happens after that, the data is successfully adde to our Kintone App.

Now that we've confirmed that a record can be added to our Kintone App, let's fix the rendering issue. After adding a new record, another REST API call needs to be made to Kintone to get the latest data, which will be used to re-render our React App.

To do this, we can utilize our existing useEffect hook that already makes a call to get the latest data from our Kintone App. The second argument of this hook is the dependency array, which determines the timing of when the hook should run. Currently this is set as [] which runs the hook only after the initial render. If we set a state instead for this dependency array, the hook will run when that state changes.

Within the RenderResult function, let's define a new state that will take care of when the useEffect hook will run.

const [successCounter, setSuccessCounter] = useState(0);

We'll call the setSuccessCounter function within the ButtonClick function. The successCounter state value will update after a successful REST API call from the AddNewRecord function.

function ButtonClick(titleValue,authorValue){
    setApiResponse(apiResponse.concat(<li key="0" >*** now loading ***</li>));
    AddNewRecord(titleValue, authorValue)
    .then(response => 
        {
            setSuccessCounter(successCounter+1);
        }
    );
};

We need the useEffect hook to run whenever the successCounter state updates. We can do that by setting the successCounter state as the dependency array of the useEffect hook.

useEffect(() => {
    callRestApi().then(
        result => setApiResponse(result));
},[successCounter]);

With this, the useEffect hook will run after a record is added into our Kintone App. The useEffect hook will get the latest records from the Kintone App and update the apiResponse state. The change in the apiResponse state will cause a re-render, so that all of the obtained records (including the newly added record) will be displayed on the React App.

Yay, we did it!

The complete code

The complete code was pretty long, so I've summed up both index.js and server.js in this GitHub repo.

Next steps

Why not post a new dev.to article with some updated version of this code? For example, the onChange events and related states can be merged, input fields can be cleared after clicking, and Memoizing can be used for better render performance. There are a whole lot of ways to make this code better 🤩

Let me know if you have any questions, issues or advices in the comments!

                   ＿人人人人人人人人人人＿
                   ＞ HAVE FUN CODING ＜
                   ￣Y^Y^Y^Y^Y^Y^Y^Y^Y￣
                   (\__/) 
                   (•ㅅ•) 
                   /つ つ

React & REST API: How to render a list from a JSON response

William Sayama — Fri, 21 May 2021 16:15:46 +0000

In Part 4 of this series, we'll render the JSON data obtained in our last article in a cleaner way, instead of slapping the stringified REST API JSON response on to the browser.

Add queries to the GET request

First we'll fiddle around with the parameters we can use with Kintone's Get Records API request. Parameters help us specify how we want to retrieve the data - things like what query we want to use, and what fields we want in the response.

Update the Field Codes

To help us specify parameters more easily in our code, we'll update our field codes. Field codes are unique identifiers of fields within the Kintone Apps. Notice how our JSON responses included some names like Text_0 and Text_1 - these are the field codes.

Field code names are automatically generated for fields when they are first dragged into the form of the Kintone App settings. The field codes can be update through the App's settings. Follow the guide in the Help documents to update the Field codes.

Through the App's settings, let's set:

The "Title" field to have the field code title
The "Author" field to have the field code author
The "Record number" field to have the field code recordID (you'll need to drag and drop the Record Number field onto the form to update it's field code)

When done, click on "Save Form", and then "Update App" on the top right to apply the changes. If successful you'll notice that the API response in the console of the React App will be updated with the new field codes.

Create the Query Parameters

Let's update our server.js code. Currently we're calling the Get Records end-point with one parameter, which is the app parameter. We'll want to add more parameters, but for readability's sake, let's remove the ?app=1 parameter from our current end-point declaration.

const requestEndpoint = "https://{subdomain}.kintone.com/k/v1/records.json";

Within the /getData route, let's allocate the ?app=1 parameter to a constant, along with some other parameters.

const parameters = "?app=1&query=order by recordID asc";

The app parameter is the same as before, pointing to the App ID of the Kintone App we want to get data from. The query parameter, query=order by recordID asc states to retrieve records from the Kintone App in ascending order of the Record Number value. You can check the Kintone API documents for more details on queries.

Let's attach parameters to the end of the API request endpoint in the fetch request.

const response = await fetch(requestEndpoint+parameters, fetchOptions);

The /getData route should now look like this.

app.get('/getData', cors(corsOptions), async (req, res) => {
    const fetchOptions = {
        method: 'GET',
        headers:{
            'X-Cybozu-API-Token':process.env.API_TOKEN
        }
    }
    const parameters = "?app=1&query=order by recordID asc";
    const response = await fetch(requestEndpoint+parameters, fetchOptions);
    const jsonResponse = await response.json();
    res.json(jsonResponse);
});

Restart the Express server to apply the latest changes.

Clean the Response

Now we'll move on to the client-side code. At the moment, the client-side's index.js is receiving the JSON response from server.js, and rendering the stringified version of it. This doesn't look very pretty 😑.

Due to the updated parameters, the order of the data here has actually changed from the order listed in our previous article. This is hard to tell from our UI though, so let's render this data in a more user friendly way.

Decide what will be rendered

Since we're collecting a list of records from our Kintone App, let's render the response as a list. Note that Kintone's Get Records API responds the list of records as an array of objects. We'll follow the React document's example on how to handle our array to be rendered as a list in our React App.

The first thing we'll do is update the callRestApi function. Let's remove the stringify statement, since in the code the response is easier to handle as JSON format.

//return JSON.stringify(jsonResponse);

We'll then loop through Kintone's responded array using the map function to create an array of lists.

const arrayOfLists = jsonResponse.records.map(
    record => <li><b>{record.title.value}</b> written by {record.author.value}</li>
    )
return arrayOfLists;

Note here that we are referencing our field values in our records by stating record.title.value (the value of the Title field) and record.author.value (the value of the author field).

The resulting array of lists will be returned to the useEffect hook, which will update the apiResponse state using setApiResponse (we don't need to make any changes to the code here).

In the return statement of the RenderResult function, let's place {apiResponse} between <ul> elements, so we can render the array of lists.

  return(
      <div>
          <h1>React App</h1>
          <ul>{apiResponse}</ul>
      </div>
  );

As a result, this will render our list of Kintone records as unordered lists.

Hooray! We've done it!

Wait...have we checked the console...?🤭

Aha...there seems to be a warning about "keys" 🗝️🤔

The react.js documents states the following about keys:

Keys help React identify which items have changed, are added, or are removed. Keys should be given to the elements inside the array to give the elements a stable identity

Basically, we need to assign a unique ID to each list we create. Instead of manually creating these keys though, we'll use the unique IDs stored in our Kintone App. The Record number field in Kintone is an auto-incremented field, unique to each record. In our map function, let's add the key attribute to our li element, and assign the value of the Record number field by stating key={record.recordID.value}.

//return JSON.stringify(jsonResponse);
const arrayOfLists = jsonResponse.records.map(
    record => <li key={record.recordID.value}><b>{record.title.value}</b> written by {record.author.value}</li>
    )
return arrayOfLists;

Run our code again, and the issue should be solved!

Great! Good job! ٩( 'ω' )و

The complete code

The server.js code should end up looking like this.

require('dotenv').config();
const express = require('express');
const cors = require('cors');
const fetch = require('node-fetch');

const PORT = 5000;
const app = express();

app.use(cors());
const corsOptions = {
    origin: "http://localhost:3000"
};

const requestEndpoint = "https://{subdomain}.kintone.com/k/v1/records.json";

app.get('/getData', cors(corsOptions), async (req, res) => {
    const fetchOptions = {
        method: 'GET',
        headers:{
            'X-Cybozu-API-Token':process.env.API_TOKEN
        }
    }
    const parameters = "?app=1&query=order by recordID asc";
    const response = await fetch(requestEndpoint+parameters, fetchOptions);
    const jsonResponse = await response.json();
    res.json(jsonResponse);
});

app.listen(PORT, () => {
    console.log(`Example app listening at http://localhost:${PORT}`);
});

The index.js code should end up looking like this.

import React, { useState, useEffect } from 'react';
import ReactDOM from 'react-dom';

const restEndpoint = "http://localhost:5000/getData";

const callRestApi = async () => {
    const response = await fetch(restEndpoint);
    const jsonResponse = await response.json();
    console.log(jsonResponse);
    //return JSON.stringify(jsonResponse);
    const arrayOfLists = jsonResponse.records.map(
      record => <li key={record.recordID.value}><b>{record.title.value}</b> written by {record.author.value}</li>
    )
    return arrayOfLists;
};

function RenderResult() {
  const [apiResponse, setApiResponse] = useState("*** now loading ***");

  useEffect(() => {
      callRestApi().then(
          result => setApiResponse(result));
  },[]);

  return(
      <div>
          <h1>React App</h1>
          <ul>{apiResponse}</ul>
      </div>
  );
};

ReactDOM.render(
    <RenderResult/>,
    document.querySelector('#root')
);

Let me know in the comments if somethings not working well!

Next steps

In the next part of the series, we'll add in some input fields and buttons onto our React App, which will add new records into our Kintone app.

                   ＿人人人人人人人人人＿
                   ＞ POST REQUESTS! ＜
                   ￣Y^Y^Y^Y^Y^Y^Y^Y￣
                   (\__/) 
                   (•ㅅ•) 
                   /つ つ

React & REST API: How to get data from a Web Database

William Sayama — Mon, 15 Mar 2021 08:02:07 +0000

In Part 3 of this series, we'll be making REST API calls from our React project to a web service that needs authentication. In this particular example, we'll be making calls to web databases that are available on the Kintone platform.

Prepare a Kintone environment

What is Kintone?

Kintone is a no-code/low-code cloud platform for teams to quickly & easily share and collaborate on their data.

For developers - Kintone is a really neat platform to create and manage web databases. Databases can be created with drag-and-drop, and can be quickly deployed to be accessed by the GUI, along with opening up APIs to access their data.

Check out the Kintone Developer Program for more developer related info.

Getting my environment

We could theoretically swish out our credit card to subscribe for a Kintone pricing plan...but hell no, we're developers. Let's go ahead to get our free Developer License by following the instructions here.

That's a free Kintone environment which you can get in 5 minutes, and which you can use for a year, as long as you're using it for developer related projects. Here's a video version of getting the environment if you prefer.

Creating our Kintone App (Database)

Once you have your Kintone environment on-hand, log into it, and navigate to the portal. Follow the article here to create a new Kintone App, and add some records of data into it.

Here's an example of a custom Kintone App I made - it's a simple database of Manga that I really love. The database itself was made in 3 minutes.

Generating an API Token

Follow the tutorial here to generate an API Token for your Kintone App. We'll use this token as an authentication to access data within our Kintone App.

The example in this article will need the "View records" permission for the API Token, but you can adjust these permissions in the App's settings whenever you want. Make sure to click Save, and "Update App" once the API Token has been generated - you won't be able to use the API Token otherwise.

Update the Backend code

We'll reuse the backend server.js code we used in Part 2, but with 2 changes:

Updates to the REST API endpoint
Addition of headers to the fetch option

Updating the REST API endpoint

In our example, we'll make a request to get data of multiple records inside the App. For this, we need to make reference to the API we'll be using - in this case, the Get Records API. The endpoint is https://{subdomain}.kintone.com/k/v1/records.json so let's go ahead to place that instead of the xkcd endpoint.

//const requestEndpoint = "https://xkcd.com/327/info.0.json";
const requestEndpoint = "https://{subdomain}.kintone.com/k/v1/records.json";

Replace {subdomain} with the unique subdomain that your Kintone platform is running on.

There's one more thing we need to do with the endpoint URL here, which is to add parameters to the end of the string. The only required parameter to add here is the App ID, which is an integer you'll find in the URL when you navigate to your Kintone App.

If your App ID is 1, then add that as a parameter to the end of the URL:

const requestEndpoint = "https://{subdomain}.kintone.com/k/v1/records.json?app=1";

Adding headers to the fetch option

If we were to go ahead to make a request to the Kintone endpoint, we'll be returned with an error about not being authorized to access the resource. As we've generated an API Token for authorization, let's go ahead to add this in the header of the request.

const fetchOptions = {
    method: 'GET',
    headers:{
        'X-Cybozu-API-Token':'{API_TOKEN}'
    }
}

Replace {API_TOKEN} with the API Token string generated from your App. Some readers here may be thinking "Wait, is it OK to just paste my API Token in like that...?". Well, the straight answer is "Not really", but we'll go through how to hide our API Token later on, so no worries!

OK, so now our /getData Express route should look something like this:

app.get('/getData', cors(corsOptions), async (req, res) => {
    const fetchOptions = {
        method: 'GET',
        headers:{
            'X-Cybozu-API-Token':'ChymHTbXx45RcUIBS5y55enlHHHQ0FQ4sk4hrCUY'
        }
    }
    const response = await fetch(requestEndpoint, fetchOptions);
    const jsonResponse = await response.json();
    res.json(jsonResponse);
});

Don't worry about my exploited API Token - I'm going to renew it after I create this article.

OK, since we made changes to server.js, let's stop the server (ctrl + c), save the file, and restart the server. After that, reload the browser showing the React App.

If we see something like this, we've succeeded!
The response should be an object of all (or actually the latest 100) records inside our Kintone App, that include information of values in each field.

Hide the API token

We have one more step left, which is to hide the API token for better security. It'll be quite a bummer if you decide to share your code openly somewhere only to find that you also shared your API token.

So here's how. Add dotenv to your Express project.

npm install dotenv

Add this line of code to the beginning of the server.js script

require('dotenv').config();

Create a .env file in the same directory as your express app.

touch .env

Open the .env file in the editor, and place in your API token credentials.

API_TOKEN = "ChymHTbXx45RcUIBS5y55enlHHHQ0FQ4sk4hrCUY"

Make sure to use your own API Token.
Go back to the server.js code, and replace the API token string with process.env.API_TOKEN.

Update the options

    const fetchOptions = {
        method: 'GET',
        headers:{
            'X-Cybozu-API-Token': process.env.API_TOKEN
        }
    }

Restart the express server and refresh the React App browser - you should have no problem getting the Kintone App data with this new method!

If the response is stating that you're not using the correct token, you might be using the one I pasted above, which won't be valid for your domain. Make sure to use the API Token that you generated for your own domain and Kintone App.

The complete code

The server.js code should end up looking like this.

require('dotenv').config();
const express = require('express');
const cors = require('cors');
const fetch = require('node-fetch');

const PORT = 5000;
const app = express();

app.use(cors());
const corsOptions = {
    origin: "http://localhost:3000"
};

const requestEndpoint = "https://{subdomain}.kintone.com/k/v1/records.json?app=1";

// This function runs if the http://localhost:5000/getData endpoint
// is requested with a GET request
app.get('/getData', cors(corsOptions), async (req, res) => {
    const fetchOptions = {
        method: 'GET',
        headers:{
            'X-Cybozu-API-Token':process.env.API_TOKEN
        }
    }
    const response = await fetch(requestEndpoint, fetchOptions);
    const jsonResponse = await response.json();
    res.json(jsonResponse);
});

app.listen(PORT, () => {
    console.log(`Example app listening at http://localhost:${PORT}`);
});

And with that, we've managed to get data from our web database in Kintone, and rendered the contents into our React App's UI. Neat.

Next steps

In the next part of the series, we'll clean this data a bit more so it'll be more reader friendly.

                   ＿人人人人人人人人人＿
                   ＞ CLEAN IT UP  !＜
                   ￣Y^Y^Y^Y^Y^Y^Y^Y￣
                   (\__/) 
                   (•ㅅ•) 
                   /つ つ

React & REST API: How to overcome CORS errors

William Sayama — Mon, 15 Mar 2021 08:01:53 +0000

In Part 2 of this series, we'll be making a REST API call from our React project to a service that has some CORS policies implemented. In this particular example, we'll make REST API calls to xkcd's API.

Make REST API calls to xkcd

What is xkcd?

xkcd is a webcomic series created by American author Randall Munroe. You can find the awesome comics here.

xkcd has an API?

Yes, it does indeed have an API.
You can find the great and concise API docs here.

What are we going to do?

We'll make REST API calls to one of my favorite comic strips that has an ID of 327, i.e. our endpoint will be https://xkcd.com/327/info.0.json. This will return JSON data about that particular comic strip.

Let's try calling it!

OK, so the implementation should be fairly simple. We made our REST API call to the Random User Generator API in our previous article - we just have to switch around the endpoint URL, right?

//const restEndpoint = "https://randomuser.me/api/";
const restEndpoint = "https://xkcd.com/327/info.0.json";

OK that was super easy! Now let's refresh our React page.

...? Access to fetch at blah blah from origin bleh bleh has been blocked by CORS policy .... say what now???

Well, it looks like the response didn't render. And there seems to be a whole lot of red text in the console..._(┐「ε:)_

That error we see in the console is well known as the CORS Error. Basically, resources that lie on xkcd's domain cannot be requested from another domain (i.e. our front-end React App).

There are several ways we can overcome this issue:

Make REST API calls from the same domain as xkcd
Edit the CORS settings of xkcd's server
Make REST API calls from our own backend server

We can quickly experience method 1 if we navigate to any page on xkcd, and run the following code in the console.

fetch('https://xkcd.com/327/info.0.json')
  .then(response => response.json())
  .then(data => console.log(data));

The REST API request is being made on the same domain, so we don't run into any CORS errors. But it's highly unlikely that xkcd will host our React App on their site for us, so this isn't a realistic approach.

Method 2 again is unrealistic, since we don't have permission to access the settings of xkcd's server ¯\(ツ)/¯

Method 3 is achievable by either setting up your own server and making requests from it, or using a services such as Zapier or Power Automate to make the requests for us.

In this article, we'll proceed with Method 3 by setting up a backend server using Express, which will act as a proxy to make REST API calls to xkcd.

Set up Express

What is Express?

Express is a back-end web application framework for Node.

How will we use Express?

In this article, we'll treat Express as a tool for creating custom endpoints that our front-end React App can make calls to. When we make requests to these custom endpoints, the Express server will make REST API calls to our desired 3rd party service endpoint, receive the response, and then route the response back to our React App.

If that was a bit hard to grasp, think of it like ordering food at a nice restaurant. If we (front-end App) go directly to the kitchen and order food directly to the chef (3rd party service), we'll be scolded for bad manners (CORS errors). What we need to do is order food to the server (Express App). The server (Express App) will take our order, walk to the kitchen, and request for the food to the chef (3rd party service). After some time, the chef (3rd party service) will respond by giving the server (Express App) back a plate of food. The server (Express App) then carries the plate back to the table so that we (front-end App) can consume it.

Set up Express

OK, so let's go ahead to set up Express. This is basically a new node project with the Express dependencies installed. We'll want this project to be in a separate location from our React App, so let's navigate back up to our myproject directory, create a new directory called backend, and navigate into it. Since the terminal we were using is running the React app, go ahead to use the commands in a new terminal window.

mkdir backend
cd backend

From here we'll follow the Express installation tutorial to make our Express project.

npm init

You'll be asked a number of questions but you can skip through them by hitting enter until it's finished.

Continue to install some dependencies.

npm install express node-fetch cors

Finally, create a JavaScript file to work on - we'll call ours server.js.

touch server.js

Set up the Express code

We'll use this code for server.js

const express = require('express');
const cors = require('cors');
const fetch = require('node-fetch');

const PORT = 5000;
const app = express();

app.use(cors());
const corsOptions = {
    origin: "http://localhost:3000"
};

const requestEndpoint = "https://xkcd.com/327/info.0.json";

// This function runs if the http://localhost:5000/getData endpoint
// is requested with a GET request
app.get('/getData', cors(corsOptions), async (req, res) => {
    const fetchOptions = {
        method: 'GET'
    }
    const response = await fetch(requestEndpoint, fetchOptions);
    const jsonResponse = await response.json();
    res.json(jsonResponse);
});

app.listen(PORT, () => {
    console.log(`Example app listening at http://localhost:${PORT}`);
});

So, let's go through the code.

We first set our port to 5000, as we need it to be separate from the port we use on our front-end React App, which was defaulted to port 3000.

const PORT = 5000;

Express commonly uses routing that defines how the server's endpoints will respond to our front-end React App's requests. In this case, we've defined how the server will react when the endpoint http://localhost:5000/getData is accessed with a GET request.

app.get('/getData', cors(corsOptions), async (req, res) => {
  //...
});

But by default, our Express server will return CORS errors if accessed from our front-end React App that lies on a different domain (port). By setting up some CORS options, we allow requests from port 3000 to access our resources that lie on http://localhost:5000/getData.

app.use(cors());
const corsOptions = {
    origin: "http://localhost:3000"
};

app.get('/getData', cors(corsOptions), async (req, res) => {
  //...
});

If we were to access http://localhost:5000/getData with a GET request from our React App, Express will run the related function, which in this case would be a fetch request to the xkcd REST API endpoint. As this request is made from the server side, it does not run in to any CORS errors. The response from xkcd is obtained, and returned back to our React App through the res.json() method.

const fetchOptions = {
    method: 'GET'
}
const response = await fetch(requestEndpoint, fetchOptions);
const jsonResponse = await response.json();
res.json(jsonResponse);

OK, now that's ready, let's start running the express server!

node server.js

We can quickly see if it's running successfully by accessing http://localhost:5000/getData through the browser. We should see the JSON response being displayed.

OK, so it looks like the Express App is making successful REST API calls to https://xkcd.com/327/info.0.json. Note that if we want to make any changes to server.js, we should restart the App to see the changes take place.

Let's leave the Express server running, and return back to our React code so that it points to the Express App rather than directly to the xkcd server.

Update the React code

There isn't much to do here, except for updating our REST endpoint to our Express server instead of the xkcd endpoint.

// const restEndpoint = "https://xkcd.com/327/info.0.json";
const restEndpoint = "http://localhost:5000/getData";

Refresh the browser, and let's see if we've managed to bypass the CORS error.

Great! The REST API response has successfully rendered onto our HTML, and there are no CORS errors in our console.

And with that, we've managed to successfully avoid CORS errors to make REST API calls to xkcd by using our Express server as a proxy!

Next steps

In the next part of the series, we'll make a REST API call to a Web Database service, Kintone, which will challenge us to our next issue.

                   ＿人人人人人人人人人＿
                   ＞ AUTHENTICATION ＜
                   ￣Y^Y^Y^Y^Y^Y^Y^Y￣
                   (\__/) 
                   (•ㅅ•) 
                   /つ つ

React & REST API: How to render responses

William Sayama — Mon, 15 Mar 2021 08:01:38 +0000

Overview

This series will walk through how to make REST API calls from a React component to a 3rd party service, and render the result into the UI.

Our core focus will be on making the call, so we'll keep the rendering process very simple in this series (i.e. no tables, no colors, just displaying the plain JSON response).

The final image

Our React project will use an Express server as a proxy, so that it will make REST API calls to our desired service. The response from the service will be routed through our Express server back to our React project, where it will be rendered into the UI.

The directory structure

The final directory tree looks roughly like this.

.
└── myproject/
    ├── frontend/
    │   ├── index.js
    │   └── index.html
    └── backend/
        ├── server.js
        └── .env

I say "roughly", because technically more files actually exist in this project, and some files shown above exist a bit deeper in the tree. I just wanted to make it clear that these will be the main files in the project.

OK, so let's start ٩( 'ω' )و

Set up a Node environment

Create a directory to work in

We'll start off by creating a directory to place our frontend and backend projects in, and move to that directory.

mkdir myproject
cd myproject

If you're using Visual Studio Code, you can enter the following into the terminal to open up your project in the editor which makes managing the project easier.

code .

Install Node

Install Node into this directory.
Since we'll be using react, Node needs to be version 10.16 or later. It's up to you on how you install Node - I personally like using nodenv to manage my node projects.

nodenv local 14.5.0

Great, now that we have that set up, let's carry on!

Set up a React App

Create React App

We'll use create-react-app to build our React application simply and quickly. Run the following command in the myproject directory.

npx create-react-app frontend

This may take a few minutes, but in our myproject directory we should end up with a directory named frontend, with a whole lot of files inside.

Run the App

Move into the newly created directory and start the React App.

cd frontend
npm start

If your browser has started to run and is showing the screen below, we're ready to move on. If not, access http://localhost:3000/ to view this page. Make a note that this project will be running on port 3000.

Delete unnecessary files

Since our objective in this article isn't focused on making fancy looking applications, let's delete everything in our src directory except for the index.js file.

Run some React code

Open up index.js in the editor and delete every line of code in there, so we can start from scratch. Let's run a simple code that uses React to render content into the UI.

import React from 'react';
import ReactDOM from 'react-dom';

const myelement = <h1><u>These are the details of the myelement const</u></h1>;

ReactDOM.render(
    myelement,
    document.querySelector('#root')
);

Refresh the browser running the react App, and we should get this.

So far so good - now our next step is to start working on API calls.

Make REST API calls to Random User Generator API

Random User Generator API

Random User Generator API is an API service that generates random fake user information - a quick and easy place to test out REST API calls from our React project.

Fetch data from Random User Generator API

We'll first make our API call to the following endpoint: https://randomuser.me/api/

We'll add in a function to make a REST API call to this endpoint, and we'll display the result in the console.

import React from 'react';
import ReactDOM from 'react-dom';

//-----Added in code from here-------
const restEndpoint = "https://randomuser.me/api/";

const callRestApi = async () => {
    const response = await fetch(restEndpoint);
    const jsonResponse = await response.json();
    console.log(jsonResponse);
};

callRestApi();
//--------------to here---------------

const myelement = <h1><u>These are the details of the myelement const</u></h1>;

ReactDOM.render(
    myelement,
    document.querySelector('#root')
);

Reload your browser running the React App, and you should see this in your console.

By making a request to the https://randomuser.me/api/ endpoint, we're given back data of a random user. Every time we refresh the browser, we should see new information of a random user being displayed in the console.

Now since we're using React, let's try rendering the result into the browser UI.

Render the response

So we should be able to render the result if we were to pass the result into ReactDOM.render(), right? Let's update our code so that the first parameter of this method will call our callRestApi function. We'll adjust our callRestApi function to return a React element by using React.createElement, with our third parameter being a stringified version of our REST API response. We'll also remove any unused functions and variables.

import React from 'react';
import ReactDOM from 'react-dom';

const restEndpoint = "https://randomuser.me/api/";

const callRestApi = async () => {
    const response = await fetch(restEndpoint);
    const jsonResponse = await response.json();
    console.log(jsonResponse);
    return React.createElement('h1', null, JSON.stringify(jsonResponse));
};

ReactDOM.render(
    callRestApi(),
    document.querySelector('#root')
);

So this should in theory get the REST API response, and then render the result into the root element. Let's see the result.

Objects are not valid as a React child (found: [object Promise]) ... Whaaaaat...?

So let's see what went wrong.

ReactDOM.render() calls the callRestApi() function to obtain the element to render on the root.

ReactDOM.render(
    callRestApi(),
    document.querySelector('#root')
);

As callRestApi() is an async function, it immediately returns a promise object while it goes off to make the REST API call.

const callRestApi = async () => {
    //...
};

REST API calls are not instant. Because there's a server on the other end processing the request, it takes time for the result to be responded back. React doesn't "wait" for the REST API result to come back though when it's told to render an element - this results in ReactDOM.render() trying to render this pending promise object immediately, and failing.

So what do we do?

For React to take care of REST API calls, we need to use the useState Hooks and useEffect Hooks in our code.

For those who are unfamiliar with these notations:

useState hooks allow us to use special "state" variables that we can utilize to render into the React UI.
useEffect hooks allow us to run functions after rendering has finished. We'll use this to run a REST API call and update the state variable, which will then cause React to re-render the UI with the new state variable.

import React, { useState, useEffect } from 'react';
import ReactDOM from 'react-dom';

const restEndpoint = "https://randomuser.me/api/";

const callRestApi = async () => {
    const response = await fetch(restEndpoint);
    const jsonResponse = await response.json();
    console.log(jsonResponse);
    return JSON.stringify(jsonResponse);
};

function RenderResult() {
  const [apiResponse, setApiResponse] = useState("*** now loading ***");

  useEffect(() => {
      callRestApi().then(
          result => setApiResponse(result));
  },[]);

  return(
      <div>
          <h1>React App</h1>
          <p>{apiResponse}</p>
      </div>
  );
};

ReactDOM.render(
    <RenderResult/>,
    document.querySelector('#root')
);

Running this should give us the following result, with data of a random user displayed. We can reload the page to display datasets of other random users.

Great!

You'll notice there's a lag before the user data is displayed on the UI. This lag is caused by the REST API call which takes a bit of time to get the response back from the server it's requesting to. The UI will not re-render until the code retrieves the response.

We won't go into too much details about what each hook related statement does, as it's probably easier to understand through the React docs. But here is an overview of what we are doing.

Our initial state value is the string "*** now loading ***", which is displayed in the UI due to the initial rendering.

const [apiResponse, setApiResponse] = useState("*** now loading ***");

After the rendering finishes, useEffect() runs the REST API call, waits for the response to come back (which is causing the lag), then updates the state variable with the new response.

useEffect(() => {
    callRestApi().then(
        result => setApiResponse(result));
},[]);

React automatically re-renders the UI whenever there's a state change, and thus updates the UI with the response from the REST API call. The second argument of useEffect() controls when the re-rendering should be done - in this case, we passed in an empty array so that the re-rendering is only invoked once.

Next steps

In this article, we've gone through methods on how to make REST API calls to a REST endpoint from a React component, and render it into the UI.

In part 2 of this series, we'll run into common issues that developers run into when trying to call other REST endpoints.

                   ＿人人人人人人人＿
                   ＞ CORS ERRORS ＜
                   ￣Y^Y^Y^Y^Y^Y^￣
                   (\__/) 
                   (•ㅅ•) 
                   /つ つ

Maker Faire Tokyo 2020: IoT Samurai Swords and Remote VR Existences

William Sayama — Sat, 03 Oct 2020 15:58:30 +0000

Maker Faire Tokyo 2020

Maker Faire is an event for all types of makers and crafters to exhibit the wonderful art that they've created! October 3rd and 4th were the dates for Maker Faire Tokyo 2020, held on-site (and online as well!) with many people being aware and cautious of COVID-19. Everyone wore masks, and every 5 steps would lead them to a hand sanitizer 🧼

This article introduces 2 Kintone hacks made by our team that were exhibited at our Kintone booth.

These 2 hacks were interesting, as they showed 2 different ways in which developers can interact and code with Kintone in their projects and hackathons.

Here's our booth by the way with a lovely Steampunk theme to it ⚙️💖

What is Kintone?

Kintone is a web platform for teams to collaborate productively on their data.

But for developers, you just have to know that it's a cool platform that allows you to create web databases really quickly and easily with no-code, and that's it's extensively customizable with their APIs.

Below are the exhibits we introduced at our booths.

Exhibit 1: KATANACTION

Created by @RyxBB8

What is it?

KATANACTION is an interactive exhibit, where attendees are challenged to slice their enemies as quick as possible with our IoT samurai sword.

// Detect dark theme var iframe = document.getElementById('tweet-1312217828896858114-438'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1312217828896858114&theme=dark" }

Were my sword skillz too fast for you? 🌝

OK, it's actually an exhibit so that attendees will feel like they are super fast anime samurais by just partially pulling a sword out of their sheath and putting it back in again.

How does it work?

There were two parts to the hack - we made a game on the browser using JavaScript that ran on top of the Kintone platform, and we also put together some IoT.

The Game

Kintone has a really neat feature that allows us to upload some front-end JavaScript files to the Kintone App (database). This allowed us to customize the GUI of the Kintone App - we got rid of the default GUI, and replaced it with a game screen and a score ranking page.

The score ranking displayed information stored in the Kintone App, where scores of participants were automatically recorded via REST API after they finished playing the game.

The IoT

The IoT sword was made with:

a plastic sword with some magnetic sensors to detect when the sword was partially pulled out and back into the sheath
a cute hand-made doll with an on/off magnet to connect/disconnect the head
2 M5Stick microcontrollers loaded with an Obniz OS, located inside both the sword and the doll

The flow of the game

The Obniz was controlled by the JavaScript files located on the Kintone App so that the IoT and the Game would work in sync.

The player started the game by pressing on a foot switch that made an enemy pop-up on the browser after a few seconds. When the player pulled the sword partially out of the sheath and back in again, it caused several magnetic sensors to change values, that resulted in the magnet in the doll to turn off, dislocating its head.

Exhibit 2: Remote Existence

Created by @will_yama

What is it?

Remote Existence gathers small tweets and posts from other team members, and visualizes it into a VR Environment.

// Detect dark theme var iframe = document.getElementById('tweet-1312272029777719300-122'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1312272029777719300&theme=dark" }

In Japan, many developers like to post updates of what they are thinking of while they are working, wether it's about what they're trying to code, what they're listening to, or what they'd like to eat.

Other team members like viewing these thoughts, but it's really up to the developer on where they post this content - some like to tweet on Twitter, some like to post in their Slack channel, some like to chat on discord.

Remote Existence gathered these scattered information and displayed it all in one VR environment.

How does it work?

As there were many channels of where developer's random thoughts were posted, these were gathered and stored into one central database, Kintone, using some help from Zapier.

We had a custom script running every few seconds in the Unity environment that made REST API calls to the Kintone App, so that information of the latest tweet or post was obtained. This content, name and time stored in this data was processed and visualized into the VR environment.

We also had some large physical buttons in front of our monitor, which when pressed would place new records into Kintone, which were picked up periodically by our Unity code and visualized into the VR environment.

And that's about it - I'm still learning how to use Unity, but everything I learn from it is really exciting and fun. I'm always saved by the awesome asset creators on the store, which makes me love unity even more. I did my best though to add a steampunk theme into the environment by adding pipes, rotating cogwheels, and a victorian top hat for the little dude.

Photos!

The Kintone booth

Explaining the VR environment for remote workers

Attendees trying out the VR environment and Iot Swords

Super samurai kid

Super samurai girl

Final Thoughts

I hope you guys liked these introductions. Kintone can serve as the front-end or the back-end of your projects, wether it would be a web app or an IoT integration.

My favorite exhibit at Maker Faire Tokyo 2020?

Definitely this one:
// Detect dark theme var iframe = document.getElementById('tweet-1312260680783859712-296'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1312260680783859712&theme=dark" }

Deploy a REST API calling node.js App to Heroku

William Sayama — Sat, 22 Feb 2020 01:55:50 +0000

This tutorial shows how to deploy a node.js App to Heroku.

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

A Mac and a Chrome browser was used for this tutorial.

Setting up Kintone

Getting a Kintone domain

If you don't already have one, you can get a free Kintone domain by applying for a developer license.

Creating a database

Databases in Kintone are called Apps. But this is confusing considering the context, so I will notate this as App(database).

Create an App(database) from scratch

Drag and Drop a Text field and a Drop-down field withe the following information:

Field Type	Field Name	Field Code	Options
Text	Name	name
Drop down	Hobby	hobby	Add the following choices: Sports, Drawing, Traveling, Eating

Save the form, and navigate to the App Settings tab to generate an API token. Take note of this API Token, as we will be using it later in our node.js App. Also take note of the database (App) ID, which is a number that can be found inside the URL of the database (App).

Click on Activate App to deploy this database within your Kintone environment.

Adding data into the database

You will be navigated to the page of the App that displays a list of records. But since the database is empty, no records will be listed yet.

Click on the plus button to start adding records. Go ahead to input 5 records or so.

Click on the database(App) name to return to the record list page.

OK, now we have a Kintone database(app) with some data inside. From our node.js app, we will use the API token to authenticate a request to retrieve record data from this database (App).

Setting up a node.js app

We will use node v12.6.0 in this example.

Creating a package.json file

Move to a directory of your choice and start creating a package.json file with the npm init command in the terminal.

npm init

Hit enter to answer the questions with default settings, but answer test command as node mywebapp.js.

Your package.json contents should look something like this.

Installing dependancies

The node.js app will need to use the Kintone JS SDK rest-api-client to make calls to Kintone, and the express module for server related code. Install these with the --save option so that the dependancies are saved into the package.json file as well.

$ npm install @kintone/rest-api-client --save

$ npm install express --save

Preparing scripts for the node.js app

Create the following files in the same directory as the package.json file.

index.html

<!DOCTYPE html>
<html>
<head>
    <title>My Web App</title>
</head>
<body>
    <h1>My Web App</h1>
    <form method="POST" action="/kintoneresponse">
        <input type="submit" />
    </form>
</body>
</html>

mywebapp.js

const { KintoneRestAPIClient } = require("@kintone/rest-api-client");
const express = require('express');
const PORT = process.env.PORT || 3000;

// Create express application
const ExpressApp = express();

// Page: (root) 
// Action: display contents of /index.html
ExpressApp.get('/', function (req, res) {
    res.sendFile('/index.html', { root: __dirname });
});

// Page: (root)/kintoneresponse
// Action: Get records from Kintone database and display them
ExpressApp.post('/kintoneresponse', function (req, res) {

    const client = new KintoneRestAPIClient({
        baseUrl: 'https://xxxxx.kintone.com',
        auth: { apiToken: 'xxxxx' }
    });

    const params = {
        app: xxxxx,
        fields: ['name', 'hobby'],
        query: ''
    }

    client.record
        .getRecords(params)
        .then(resp => {
            console.dir(resp.records, { depth: null });

            // Create an HTML string to display on the page
            let htmlstring = '<ol>';
            for (i=0; i<resp.records.length; i++)
            {
                htmlstring = htmlstring 
                            + '<li>' 
                            + resp.records[i].name.value + ' likes ' + resp.records[i].hobby.value 
                            + '</li>';
            }

            htmlstring = htmlstring + "</ol>";

            // Display the html string on the page
            res.send(htmlstring);
        })
        .catch(err => {
            console.log(err);
        });
});

ExpressApp.listen(PORT, () => console.log(`Listening on ${PORT}`));

Change the contents of the mywebapp.js file so that the URL and API token match your environment.

    const client = new KintoneRestAPIClient({
        baseUrl: 'https://xxxxx.kintone.com',
        auth: { apiToken: 'xxxxx' }
    });

In this example, the baseURL and authentication is hardcoded so that the it's easier to understand. In reality though, you should be passing these in as environmental variables. Why? Because even if you are coding on the backend, there are still security risks when it comes to hardcoding.

Here's a great article on how to use environmental variables for node.js: freeCodeCamp|Here’s how you can actually use Node environment variables

As for using environmental variables with Heroku (which is later introduced in this article), you can use their Config Vars feature. Refer to their configuration article Configuration and Config Vars for more details.

OK, so for the next step, set the database(app) ID so it matches your database.

    const params = {
        app: xxxxx,
        fields: ['name', 'hobby'],
        query: 'hobby in ("Sports")'
    }

Starting the web app

Run the following command which will look through package.json to run node mywebapp.js.

$ npm test

Access http: //localhost: 3000/ in your browser to view the running web app.

Deploying and running the web app on Heroku

Now let's deploy this app to Heroku so that anybody will be able to access it.

You'll need Git to proceed, so install it if you don't have it yet. Then visit the Heroku site, sign up for an account, and follow the instructions to install the Heroku CLI.

In the directory of your package.json file, initialize git.

$ git init

Create a .gitignore file as we want to exclude the node_modules directory from being committed (they will be generated upon deployment on Heroku).

$ touch .gitignore

The .gitignore file is hidden, but if you are skeptical, you can use the ls command with the -a option to find it in your terminal.

$ ls -a

Add node_modules to the .gitignore file.

$ echo "node_modules" >> .gitignore

Check to see if node_modules was written into the file.

$ cat .gitignore

Add an initial commit to the staging environment. Meaning that the files in this directory will be ready to be pushed onto Heroku. But it won't be pushed yet.

$ git add .
$ git commit -m 'initial commit'

Create a Heroku App. This App will appear on the App list of your Heroku account, and also create a custom domain that you can access.

$ heroku create

There's no content to access to yet though on that domain, as our code hasn't been pushed to Heroku. Let' do that.

$ git push heroku master

Heroku will start creating various resources for the App.
After this is done, you will find that accessing the domain will give you an error. Earlier, we used the npm test command to run our App. A similar thing needs to be done with Heroku, which is explained in the Heroku Docs:

To determine how to start your app, Heroku first looks for a Procfile. If no Procfile exists for a Node.js app, we will attempt to start a default web process via the start script in your package.json.

Either method is find, but let's go with adding a start script in package.json. Edit this file so the the scripts section looks like the following:

"scripts": {
    "test": "node mywebapp.js",
    "start": "node mywebapp.js"
  }

Now that we made our changes, let's commit this to the staging environment.

$ git add .
$ git commit -m 'my comment'

And then push it again to Heroku

$ git push heroku master

Access the custom Heroku domain, and you should see your node.js App working!

Reference

These materials were used for reference when creating this article:

Having Fun with Browser Games & Web databases

William Sayama — Fri, 25 Oct 2019 13:19:46 +0000

Introduction

This post introduces how to spin up a phaser.io game integrated with a Kintone Web Database.

There's no need to set up a node.js environment, to get an AWS serverless environment ready, or to install the latest .NET framework.

If you have a browser and a text editor, you can follow along easily.
And no, you won't be needing a credit card, so you can put that away.

What is Kintone?

Kintone is a cloud platform for teams with a visual web database builder. Kintone's REST APIs and JavaScript APIs enable further extensions to be built on top of the platform.
https://www.kintone.com/

What is Phaser.io?

Phaser is a free 2D game framework for making HTML5 games for desktop and mobile.
https://phaser.io/

Prerequisites

A Kintone Cloud Environment

Kintone is a cloud service that has flexible web database features.
We will be creating a web database on Kintone, and then building a phaser.io game on top of that.

You can obtain a Kintone environment by either applying for a free Kintone Developer License, or requesting for a free trial through Kintone.com. The former is more handy, as the developer license will be available to you indefinitely.

Phaser.io Files

In this example, we will be using the Phaser 2 library and an example game listed on their website, Invaders. I understand that Phaser 3 is available, but to be honest, I couldn't find any good game examples that use Phaser 3.

The Phaser Version 2 Library

This library can be obtained from the below page.
https://phaser.io/download/release/2.13.3
Download the js file to your local computer.

The Invaders Game Example Code

This code is available on the below page.
https://phaser.io/examples/v2/games/invaders#download
Save the zip file on to your local computer and extract the phaser-examples-master folder.

Running the Invaders Game on Kintone

Follow these 5 steps to start running the Invaders game on Kintone

1. Create a Kintone App

Web databases in Kintone are called "Apps".
Once you log in, click on the + sign on the Apps widget to start creating a new App. Select "Create App from Scratch", and give a name to your App.
On the form editor, drag and drop 2 number fields into the form. Name them "Scale" and "Health", and also set their field codes as "Scale" and "Health".

Save the form, and click on the blue Activate App button.
Your web database is now ready, and you will be directed to a page that holds a list of your data. Except that you don't have any data yet, so it will contain no data.

Which is where we move on to our next step.

2. Input Some Data

On this List view page, click on the + button to start adding data to the App.
You'll notice that the input form is the form you created in the previous step. Let's place in the value 0.2 for the Scale field, and the value 5 for the Health field. Click on Save to save this input data.

Click on the + button again to input some new data. Let's place in 1 and 10 for Scale and Health.
Repeat this process again, and place in 0.7 and 2 for Scale and Health.

OK, once we are done here, click on the name of your App to navigate to the List view. Previously, we saw this page had not data. Now that you've put new data inside, it should now look a bit more lively.

We will be utilizing this data in a later step.

3. Create a Custom View

Access the App's setting page by clicking the cog wheel.
The view tab allows you to set new views by limiting the fields you want to see, and by setting filter conditions. Kintone also allows a "Calendar view and" a "Custom view".
In this example, we will be using a Custom view, which is a view defined by HTML elements.

Click on the + button to add a new view, and select "Custom view". In the "HTML Code" option, insert the following html:

<div id="phaser-example"></div>

Click Save, and then the Update App button to apply these new settings.

4. Make Edits to the Invaders JavaScript File

We need to modify the invaders.js file before applying it to the Kintone App.
Open up the invaders file in your local editor. This file can be found in the phaser-examples-master folder under examples > games.

Update the preload() Function

By default, the Invaders code is loading images in this method by stating a local path. As we are activating this game on the browser, we need to change these paths to a valid path. Unfortunately, Kintone doesn't have a stable place to host image files (I hope this gets updated soon!), so upload the images onto an image hosting service such as https://imgur.com and reference these images in the preload() function:

game.load.image('bullet','{path to bullet.png}');
game.load.image('enemyBullet', '{path to enemy-bullet.png}');
game.load.spritesheet('invader', '{path to invader32x32x4.png}', 32, 32);
game.load.image('ship', '{path to player.png}');
game.load.spritesheet('kaboom', '{path to explode.png}', 128, 128);
game.load.image('starfield', '{path to starfield.png}');
//game.load.image('background', '{path to background2.png}'); <-- this file is not used

If you are using imgur, the link should be in the format of https://i.imgur.com/{randomstring}.png

The name and locations of the images within the downloaded folder may be a bit confusing - use the below table as reference:

Image variable	Image	Location
bullet		assets/games/invaders/bullet.png
enemyBullet		assets/games/invaders/enemy-bullet.png
invader		assets/games/invaders/invader32x32x4.png
ship		assets/games/invaders/player.png
kaboom		assets/games/invaders/explode.png
starfield		assets/games/invaders/starfield.png

Update the Phaser.Game method

State "Phaser.CANVAS" for the third parameter of the Phaser.Game method so that images can be loaded and used from an external server.

var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create, update: update, render: render });

Update the restart() Function

This Invaders example doesn't reset the score when you die and restart the game. It's not a large matter, but it was sort of bugging me, so add the following code at the end of the restart() function in the invaders.js file so that the score resets to 0 when you restart your Invaders game:

score = 0;
scoreText.text = scoreString + score;

5. Add JavaScript files to Your Kintone App

Now this is the final step for getting the Invaders file to work on top of Kintone.

Access the App's settings page by clicking on the cog wheel. Click on the "App Settings" tab, and select the "JavaScript and CSS Customization" settings. This page allows you to upload JavaScript and CSS files that are to be run when pages of the Kintone App run.

Under the "Upload JavaScript for PC" settings, click on "Upload file", and upload the phaser.js library, and the Invaders file that we've been working on. Make sure that the phaser.js library is located above the Invaders file, as Kintone will read these files in order from the top, and the Invaders file will be using methods that exist within the phaser.js library.

Once uploaded, click on Save, and Update changes to apply these new changes to the App.

You should be navigated to the Custom view page, where the Invaders game should load.

Use the arrow keys to move the player's ship, and the spacebar to shoot bullets! Pew pew!

Further Configurations to the Invaders Game

Before integrating the game with the data in our Kintone database, we'll make some further updates to the code.

Scaling the Alien Size

The createAliens() function contains the code for, well, creating the Aliens.

for (var y = 0; y < 4; y++)
{
    for (var x = 0; x < 10; x++)
    {
        var alien = aliens.create(x * 48, y * 50, 'invader');
        alien.anchor.setTo(0.5, 0.5);
        alien.animations.add('fly', [ 0, 1, 2, 3 ], 20, true);
        alien.play('fly');
        alien.body.moves = false;
    }
}

Scale the alien size by adjusting the scale property of the aliens:

for (var y = 0; y < 4; y++)
{
    for (var x = 0; x < 10; x++)
    {
        var alien = aliens.create(x * 48, y * 50, 'invader');
        alien.anchor.setTo(0.5, 0.5);
        alien.animations.add('fly', [ 0, 1, 2, 3 ], 20, true);
        alien.play('fly');
        alien.body.moves = false;
        alien.scale.x = 0.2; //<--- 
        alien.scale.y = 0.2; //<---
    }
}

This should make the aliens 1/5 of the default size.

Adding HP to the aliens

Aliens in this Invaders game die with just one hit of the laser. This is due to alien.kill() method being called within the collisionHandler() function. Phaser has a health component (Phaser.Component.Health) that adds an HP component to the game's characters, so that the kill method is called when their HP reaches or goes below 0.

To configure the aliens to have HP, first replace the alien.kill() method with alien.damage() method within the collisionHandler() function:

    //  When a bullet hits an alien we kill them both
    bullet.kill();
    //alien.kill(); //<---
    alien.damage(1); //<---

Next, configure the aliens' health parameters in the createAliens() function:

for (var y = 0; y < 4; y++)
{
    for (var x = 0; x < 10; x++)
    {
        var alien = aliens.create(x * 48, y * 50, 'invader');
        alien.anchor.setTo(0.5, 0.5);
        alien.animations.add('fly', [ 0, 1, 2, 3 ], 20, true);
        alien.play('fly');
        alien.body.moves = false;
        alien.scale.x = 0.2;
        alien.scale.y = 0.2;
        alien.health = 5; //<--- 
    }
}

With this, aliens will start off with an HP of 5, which will be reduced by the integer stated in alien.damage() every time the player's bullet hits them. When the alien's HP reaches 0 or below, the alien's kill method will be called.

Integrating Databases with the Invaders Game

OK so now that we've got our Invaders game running on the browser on top of Kintone, we'll get right to the question - why are we using a Kintone database to do this?
This is because we want to relate the data inside the database with the Invaders game that we are playing.

Let's add some final touches.

Add an Immediate Function and a Kintone Event

As a best practice to writing code on Kintone, we will wrap the current code in an immediate function, and also set a Kintone List View event. This will ensure that the code will run only when the record list view (including the custom view) is displayed.

(function () {
    "use strict";
    kintone.events.on('app.record.index.show', function (event) {

    /////////////////////////////////////
    //  The code we've written so far  //
    /////////////////////////////////////

    });
})();

When using "use strict", undeclared variables cause errors.
For some reason, enemyBullets, live and bullet are not declared in the original code, so declare them in the list of variables under the preload() function:

var player;
var aliens;
var bullets;
var bulletTime = 0;
var cursors;
var fireButton;
var explosions;
var starfield;
var score = 0;
var scoreString = '';
var scoreText;
var lives;
var enemyBullet;
var firingTimer = 0;
var stateText;
var livingEnemies = [];
var enemyBullets; //<---
var live; //<---
var bullet; //<---

Set the Code to Run Only on the Custom View

The Invaders game code will run in any view since we are currently using Kintone's Record List View event.

To ensure that the game code will only run when we are in the Custom view, add the following:

(function () {
    "use strict";
    kintone.events.on('app.record.index.show', function (event) {

      if (event.viewType != "custom") {return;} // <---

Update the createAliens() Function

Replace the double loop that created the aliens to the below code.

for (var i=0; i<event.records.length;i++)
{
  var alien = aliens.create(i * 48,  50, 'invader');
  alien.anchor.setTo(0.5, 0.5);
  alien.animations.add('fly', [ 0, 1, 2, 3 ], 20, true);
  alien.play('fly');
  alien.body.moves = false;
  alien.scale.x = event.records[i].Scale.value;
  alien.scale.y = event.records[i].Scale.value;
  alien.health = event.records[i].Health.value;
}

The event variable is an object made available by Kintone when the Record List event was triggered. It includes data of the Record List, including an array of record data. As we have set the field codes for the two number fields to be Scale and Health, the values for these fields can be found in each content of the array. For example, event.records[0].Scale.value will have the numerical value stored in the Scale field of the 1st record.

The code above will create multiple aliens equal to the number of records in the record list (taken from event.records.length). Also, the size and health changed from being predefined numbers to values from the Kintone database records.

Update the collisionHandler() Function

The explosion animation that is displayed when the player's bullets hit the enemies are a bit off when the aliens are scaled down/up.
To fix this bug, the explosion.reset(alien.body.x, alien.body.y); method in the collisionHandler() function needs to be altered:

explosion.reset(alien.body.center.x, alien.body.center.y);

Save the File and Re-Upload It to the Kintone App

Now that the code is further altered, save your invaders.js file, access the JavaScript and CSS Customization settings of the Kintone App, and replace the old file with the latest saved file.
Click Save, and Update App to apply the changes.

Try out the updated game in your Custom view

Summary

This post went through how to set up an Invaders game related to a web database, just using the browser and a Kintone cloud environment. By doing this, users who are not able to code can join the game development process by updating the Kintone database properties and adding in new data, that will be reflected upon the Invaders file.

Feel free to copy the code and test it out on your environment - I will be happy to see enhanced versions of the example code in this post!

The resulting invaders code used

(function () {
    "use strict";
    kintone.events.on('app.record.index.show', function (event) {

      if (event.viewType != "custom") {return;}

      var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create, update: update, render: render });

      function preload() {

        game.load.image('bullet','{path to image}');
        game.load.image('enemyBullet', '{path to image}');
        game.load.spritesheet('invader', '{path to image}', 32, 32);
        game.load.image('ship', '{path to image}');
        game.load.spritesheet('kaboom', '{path to image}', 128, 128);
        game.load.image('starfield', '{path to image}');
        game.load.image('background', '{path to image}');

      }

      var player;
      var aliens;
      var bullets;
      var bulletTime = 0;
      var cursors;
      var fireButton;
      var explosions;
      var starfield;
      var score = 0;
      var scoreString = '';
      var scoreText;
      var lives;
      var enemyBullet;
      var firingTimer = 0;
      var stateText;
      var livingEnemies = [];
      var enemyBullets;
      var live;
      var bullet;

      function create() {

          game.physics.startSystem(Phaser.Physics.ARCADE);

          //  The scrolling starfield background
          starfield = game.add.tileSprite(0, 0, 800, 600, 'starfield');

          //  Our bullet group
          bullets = game.add.group();
          bullets.enableBody = true;
          bullets.physicsBodyType = Phaser.Physics.ARCADE;
          bullets.createMultiple(30, 'bullet');
          bullets.setAll('anchor.x', 0.5);
          bullets.setAll('anchor.y', 1);
          bullets.setAll('outOfBoundsKill', true);
          bullets.setAll('checkWorldBounds', true);

          // The enemy's bullets
          enemyBullets = game.add.group();
          enemyBullets.enableBody = true;
          enemyBullets.physicsBodyType = Phaser.Physics.ARCADE;
          enemyBullets.createMultiple(30, 'enemyBullet');
          enemyBullets.setAll('anchor.x', 0.5);
          enemyBullets.setAll('anchor.y', 1);
          enemyBullets.setAll('outOfBoundsKill', true);
          enemyBullets.setAll('checkWorldBounds', true);

          //  The hero!
          player = game.add.sprite(400, 500, 'ship');
          player.anchor.setTo(0.5, 0.5);
          game.physics.enable(player, Phaser.Physics.ARCADE);

          //  The baddies!
          aliens = game.add.group();
          aliens.enableBody = true;
          aliens.physicsBodyType = Phaser.Physics.ARCADE;

          createAliens();

          //  The score
          scoreString = 'Score : ';
          scoreText = game.add.text(10, 10, scoreString + score, { font: '34px Arial', fill: '#fff' });

          //  Lives
          lives = game.add.group();
          game.add.text(game.world.width - 100, 10, 'Lives : ', { font: '34px Arial', fill: '#fff' });

          //  Text
          stateText = game.add.text(game.world.centerX,game.world.centerY,' ', { font: '84px Arial', fill: '#fff' });
          stateText.anchor.setTo(0.5, 0.5);
          stateText.visible = false;

          for (var i = 0; i < 3; i++) 
          {
              var ship = lives.create(game.world.width - 100 + (30 * i), 60, 'ship');
              ship.anchor.setTo(0.5, 0.5);
              ship.angle = 90;
              ship.alpha = 0.4;
          }

          //  An explosion pool
          explosions = game.add.group();
          explosions.createMultiple(30, 'kaboom');
          explosions.forEach(setupInvader, this);

          //  And some controls to play the game with
          cursors = game.input.keyboard.createCursorKeys();
          fireButton = game.input.keyboard.addKey(Phaser.Keyboard.SPACEBAR);

      }

      function createAliens () {

        for (var i=0; i<event.records.length;i++)
        {
          var alien = aliens.create(i * 48,  50, 'invader');
          alien.anchor.setTo(0.5, 0.5);
          alien.animations.add('fly', [ 0, 1, 2, 3 ], 20, true);
          alien.play('fly');
          alien.body.moves = false;
          alien.scale.x = event.records[i].Scale.value;
          alien.scale.y = event.records[i].Scale.value;
          alien.health = event.records[i].Health.value;
        }

        aliens.x = 100;
        aliens.y = 50;

          //  All this does is basically start the invaders moving. Notice we're moving the Group they belong to, rather than the invaders directly.
          var tween = game.add.tween(aliens).to( { x: 200 }, 2000, Phaser.Easing.Linear.None, true, 0, 1000, true);

          //  When the tween loops it calls descend
          tween.onLoop.add(descend, this);
      }

      function setupInvader (invader) {

          invader.anchor.x = 0.5;
          invader.anchor.y = 0.5;
          invader.animations.add('kaboom');

      }

      function descend() {

          aliens.y += 10;

      }

      function update() {

          //  Scroll the background
          starfield.tilePosition.y += 2;

          if (player.alive)
          {
              //  Reset the player, then check for movement keys
              player.body.velocity.setTo(0, 0);

              if (cursors.left.isDown)
              {
                  player.body.velocity.x = -200;
              }
              else if (cursors.right.isDown)
              {
                  player.body.velocity.x = 200;
              }

              //  Firing?
              if (fireButton.isDown)
              {
                  fireBullet();
              }

              if (game.time.now > firingTimer)
              {
                  enemyFires();
              }

              //  Run collision
              game.physics.arcade.overlap(bullets, aliens, collisionHandler, null, this);
              game.physics.arcade.overlap(enemyBullets, player, enemyHitsPlayer, null, this);
          }

      }

      function render() {

          // for (var i = 0; i < aliens.length; i++)
          // {
          //     game.debug.body(aliens.children[i]);
          // }

      }

      function collisionHandler (bullet, alien) {
          //  When a bullet hits an alien we kill them both
          bullet.kill();
          //alien.kill();
          alien.damage(1);

          //  Increase the score
          score += 20;
          scoreText.text = scoreString + score;

          //  And create an explosion :)
          var explosion = explosions.getFirstExists(false);
          //explosion.reset(alien.body.x, alien.body.y);
          explosion.reset(alien.body.center.x, alien.body.center.y);
          explosion.play('kaboom', 30, false, true);

          if (aliens.countLiving() == 0)
          {
              score += 1000;
              scoreText.text = scoreString + score;

              enemyBullets.callAll('kill',this);
              stateText.text = " You Won, \n Click to restart";
              stateText.visible = true;

              //the "click to restart" handler
              game.input.onTap.addOnce(restart,this);
          }

      }

      function enemyHitsPlayer (player,bullet) {

          bullet.kill();

          live = lives.getFirstAlive();

          if (live)
          {
              live.kill();
          }

          //  And create an explosion :)
          var explosion = explosions.getFirstExists(false);
          explosion.reset(player.body.x, player.body.y);
          explosion.play('kaboom', 30, false, true);

          // When the player dies
          if (lives.countLiving() < 1)
          {
              player.kill();
              enemyBullets.callAll('kill');

              stateText.text=" GAME OVER \n Click to restart";
              stateText.visible = true;

              //the "click to restart" handler
              game.input.onTap.addOnce(restart,this);
          }

      }

      function enemyFires () {

          //  Grab the first bullet we can from the pool
          enemyBullet = enemyBullets.getFirstExists(false);

          livingEnemies.length=0;

          aliens.forEachAlive(function(alien){

              // put every living enemy in an array
              livingEnemies.push(alien);
          });


          if (enemyBullet && livingEnemies.length > 0)
          {

              var random=game.rnd.integerInRange(0,livingEnemies.length-1);

              // randomly select one of them
              var shooter=livingEnemies[random];
              // And fire the bullet from this enemy
              enemyBullet.reset(shooter.body.x, shooter.body.y);

              game.physics.arcade.moveToObject(enemyBullet,player,120);
              firingTimer = game.time.now + 2000;
          }

      }

      function fireBullet () {

          //  To avoid them being allowed to fire too fast we set a time limit
          if (game.time.now > bulletTime)
          {
              //  Grab the first bullet we can from the pool
              bullet = bullets.getFirstExists(false);

              if (bullet)
              {
                  //  And fire it
                  bullet.reset(player.x, player.y + 8);
                  bullet.body.velocity.y = -400;
                  bulletTime = game.time.now + 200;
              }
          }

      }

      function resetBullet (bullet) {

          //  Called if the bullet goes out of the screen
          bullet.kill();

      }

      function restart () {

          //  A new level starts

          //resets the life count
          lives.callAll('revive');
          //  And brings the aliens back from the dead :)
          aliens.removeAll();
          createAliens();

          //revives the player
          player.revive();
          //hides the text
          stateText.visible = false;

          score = 0;
          scoreText.text = scoreString + score;

      }
  });
})();