Learn why Svelte is the most loved web framework & let's build your first Svelte App with a Kintone Database!
Our free, live workshop will walk you through creating a Web Database App, setting up a Svelte project, and using GET and POST requests to save to a Kintone web database.
.env
FileFirst, clone the kintone-workshops/intro-to-svelte repo! đ
Then go inside the folder.
cd Downloads
git clone https://github.com/kintone-workshops/intro-to-svelte
cd intro-to-svelte
Open the intro-to-svelte
folder in VS Code as well:
code .
Once you are inside the folder, let's install the dependencies and open our project:
npm install
npm run dev
Check out the slides.pdf file for the workshop slides!
Steps | Screenshot |
---|---|
From the Kintone portal, click the [+] button to create an App | |
Select Create App from Scratch option | |
Name the App (Ex: Kintone Cards) | |
Add Text and Radio Button fields | |
Open the Text field settings | |
Set the Name (Title ) and Field Code (title ) |
|
Open the Radio Button field settings | |
Set the Name (Color ), Options (Red & Blue ), and Field Code (color ) |
|
Last, remember to save your changes! |
â ď¸ Warning â ď¸
To generate an API Token for a Kintone App:
Generate
button to generate a tokenView records
, Add records
and Edit records
checkboxesSave
button (top left corner) to save the token settingUpdate App
button (top right corner) to implement the token setting change.Confused? đ¤ â Check out the gif below:
.env
File.env
file.VITE_SUBDOMAIN = "example"
VITE_APPID = "1"
VITE_APITOKEN = "abcdefghijklmnopqrstuvwxyz"
.env.example is used by env-cmd to verify that .env
file is correctly configured.
.env
file by duplicating the .env.example file+page.svelte
FileTwo tasks in +page.svelte
file:
cardInfo
arraycardInfo
array and display the cards+server.js
FileTwo tasks in +server.js
file:
File: src/routes/+page.svelte
cardsInfo.forEach((card) => {
cards.push({
title: card.title.value,
color: card.color.value,
id: card.Record_number.value
});
});
console.log(cards);
if (cards.length >= 1) {
visible = true;
}
};
File: src/routes/+page.svelte
{#each cards as card, i}
<div
class:blue-card={card.color === 'Blue'}
class:red-card={card.color === 'Red'}
in:fly|local={{ y: 200, duration: 2000 + i * 10000 }}
>
<p>{card.title}</p>
<label>
<input type="radio" bind:group={card.color} value="Red" name={i} />
Red
</label>
<label>
<input type="radio" bind:group={card.color} value="Blue" name={i} />
Blue
</label>
</div>
{/each}
File: src/routes/kintone/+server.js
const body = await request.json();
let title = await body.title;
let color = await body.color
const requestBody = {
'app': appid,
'record': {
'title': {
'value': title
},
'color': {
'value': color
}
}
}
File: src/routes/kintone/+server.js
try {
let response = await fetch(postRecordsURL, fetchOptions);
const responseData = await response.json();
return new json(responseData);
} catch (error) {
console.log(error)
}
Svelte is a free, open-source frontend JavaScript framework for making interactive web apps.
Kintone is a no-code/low-code cloud platform for teams to quickly & easily share and collaborate on their data.
You can add JavaScript, CSS, &/or HTML to enhance the frontend UI/UX of a Kintone App. This can include features such as maps, buttons, and color-coding.
Read up on how to customize and develop on the Kintone platform at kintone.dev
Here is a rundown of common problems that may occur & their solutions!
npm install
command is not workingintro-to-svelte
folderintro-to-svelte
foldernodenv local 14.5.0
nvm use 14.5.0
Did you get a Invalid response from route /kintone: handler should return a Response object
?
Error Message:
POSTING TO: https://undefined.kintone.com/k/v1/record.json?app=undefined title: null, color: null
Invalid response from route /kintone: handler should return a Response object
Error: Invalid response from route /kintone: handler should return a Response object
at render_endpoint (file:///Users/.../Downloads/intro-to-svelte/node_modules/@sveltejs/kit/src/runtime/server/endpoint.js:44:10)
...
Looks like you forgot the .env
file! đ¤Ś
Make sure included your Kintone Subdomain in the .env
file!
Are you getting no error message from the terminal nor the browser console but still unable to add a new card to the board (or Kintone)?
Verify that
Add records
and Edit records
Update App
buttonSolution: Verify that you have Saved
and Updated
the Kintone App after generating the API Token.
Error Message:
Uncaught (in promise) SyntaxError: Unexpected end of JSON input at HTMLButtonElement.getCards (+page.svelte? [sm]:17:40)â
Solution: Verify that server.js's POST function is returning a responseData
object. This object does not have a .records
property.
â ď¸ Common mistake if you are copying and pasting from the GET function.
Error Message:
SyntaxError: Unexpected end of JSON input
at Array.addCard (+page.svelte:47:44)