Getting Started With Svelte (Stop Using React!)

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.

Outline

• Completed Project
• Get Started
• Get Your Free Kintone Database
• Workshop Slides
• Create a Kintone Web Database App
• Kintone API Token
• Create a .env File
• Workshop Steps
  • Files to Edit
  • +page.svelte File
  • +server.js File
  • Solutions to the Tasks
• Appendix
  • What is Svelte?
  • What is Kintone?
• Debugging - Let's Fix Those Problems 💪
  • npm install command is not working
  • Unable to Add Card?
  • Unable to Add a Card?
  • Unexpected end of JSON input Error?
  • Array.addCard Error?

---

Completed Project

Get Started

First, 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

Get Your Free Kintone Database

bit.ly/KDP_NEW

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

---

Workshop Slides

Check out the slides.pdf file for the workshop slides!

---

Create a Kintone Web Database App

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 ⚠️

• Field Code is case sensitive
• Field Code and options must be as specified in the steps, or the code will not work

---

Kintone API Token

To generate an API Token for a Kintone App:

1. Go to the Kintone App
2. Go to the Gear icon ⚙️ (top right corner) > Open the App Settings page
3. Click on the App Settings Tab > Click on API Token settings
4. Click the Generate button to generate a token
5. Enable the View records, Add records and Edit records checkboxes
6. Click the Save button (top left corner) to save the token setting
7. Finally, click the Update App button (top right corner) to implement the token setting change.

Confused? 🤔 → Check out the gif below:

Generate a Kintone API Token Gif 📺

---

Create a .env File

1. Using the .env.example file as a template, create a .env file.
2. Then input your Kintone credentials like the following:

VITE_SUBDOMAIN = "example"
VITE_APPID = "1"
VITE_APITOKEN = "abcdefghijklmnopqrstuvwxyz"

⚠️ DO NOT DELETE THE .env.example FILE!

.env.example is used by env-cmd to verify that .env file is correctly configured.

---

Workshop Steps

Files to Edit

1. Credentials - Create .env file by duplicating the .env.example file
2. Frontend that builds the cards - src/routes/+page.svelte
3. Backend that connects with Kintone - src/routes/kintone/+server.js

+page.svelte File

Two tasks in +page.svelte file:

• Task 1 - Add the cards from Kintone to the cardInfo array
• Task 2 - Add a loop to go through the cardInfo array and display the cards

+server.js File

Two tasks in +server.js file:

• Task 3 - Get our title and color of the card to POST to Kintone
• Task 4 - Try filling out this POST fetch to Kintone

Solutions to the Tasks

Task 1 - Add the cards from Kintone to the cardInfo array

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;
}
};

Task 2 - Add a loop to go through the cardInfo array and display the cards

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}

Task 3 - Get our title and color of the card to POST to Kintone

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
  }
  }
}

Task 4 - Try filling out this POST fetch to Kintone

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)
}

---

Appendix

What is Svelte?

Svelte is a free, open-source frontend JavaScript framework for making interactive web apps.

• Unlike React, Svelte compiles code to small, framework-less vanilla JS to optimize for speed
• Unlike React, Svelte surgically updates the DOM, so you don't have to worry about a virtual DOM diffing.

What is Kintone?

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

You can add JavaScript, CSS, &/or HTML to enhance the 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

---

Debugging - Let's Fix Those Problems 💪

Here is a rundown of common problems that may occur & their solutions!

npm install command is not working

1. Verify the Node.js & npm versions inside the intro-to-svelte folder
2. Just installed Node.js? Verify you configured Node.js versions inside the intro-to-svelte folder

• Mac: nodenv local 14.5.0
• Windows: nvm use 14.5.0

Unable to Add Card?

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!

Unable to Add a Card?

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

• the Kintone App's API Token has permissions for Add records and Edit records
• the Kintone App's settings has been saved and you clicked on the blue Update App button

Unexpected end of JSON input Error?

Solution: 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)”

Array.addCard Error?

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)