search

datastaxdevs / appdev-week1-todolist

Summer Series Week 1 - Run your first frontend application the Todolist
85 stars 97 forks source link

readme

TODO + Astra + Cassandra 📒

10 minutes, Beginner, Start Building

This is an example React To-Do application using a DataStax Astra free tier database.

image

🎯 Objectives

ℹ️ Frequently asked questions ℹ️

There is nothing preventing you from running the workshop on your own machine. If you do so, you will need

You will have to adapt commands and paths based on your environment and install the dependencies by yourself. We won't provide support to keep on track with schedule. However, we will do our best to give you the info you need to be successful.

Attending the session is not enough. You need to complete the homework detailed below and you will get a nice badge.

Materials for the Session

It doesn't matter if you join our workshop live or you prefer to do at your own pace, we have you covered. In this repository, you'll find everything you need for this workshop:

Homework

Don't forget to complete your upgrade and get your verified skill badge! Finish and submit your homework!

  1. Complete the practice steps from this repository as described below.
  2. Create a React app from scratch using NPX. Follow these instructions. Take a screenshot of your final working app.
  3. Launch the TODO starter app, connect it to the database, and display your changes from the database. Take a screenshot of your TODO app with your unique entries.
  4. Submit your homework here. Note: never share your Astra DB tokens!

That's it, you are done! Expect an email next week!

Let's start

Table of contents

  1. Login or Register to AstraDB and create database
  2. Create a security token
  3. Create a table with REST API using Swagger
  4. Insert data in the Table with the REST API using Swagger
  5. Retrieving values
  6. Launch GitPod IDE
  7. Launch the TODO app

An introduction to web development

CodePen starter examples

1. Login or Register to AstraDB and create database

ASTRADB is the simplest way to run Cassandra with zero operations at all - just push the button and get your cluster. No credit card required, $25.00 USD credit every month, roughly 5M writes, 30M reads, 40GB storage monthly - sufficient to run small production workloads.

✅ Step 1a: Click the button to login or register with Datastax. You can use your Github, Google accounts or register with an email.

Make sure to chose a password with minimum 8 characters, containing upper and lowercase letters, at least one number and special character

Use the following values when creating the database Field Value
database name todos_workshop_db
keypace todos
Cloud Provider Use the one you like, click a cloud provider logo, pick an Area in the list and finally pick a region.

You can technically use whatever you want and update the code to reflect the keyspace. This is really to get you on a happy path for the first run.

You will see your new database pending in the Dashboard.

image

The status will change to Active when the database is ready, this will only take 2-3 minutes. You will also receive an email when it is ready.

🏠 Back to Table of Contents

2. Create a security token

✅ Step 2a: Create a token for your app to use in the settings screen. Use "Database Administrator" permission.

✅ Step 2b: Copy the token value (eg AstraCS:KDfdKeNREyWQvDpDrBqwBsUB:ec80667c....) in your clipboard and save the CSV, this value would not be provided afterward.

👁️ Expected output

🏠 Back to Table of Contents

3. Create a table with REST API using Swagger

✅ Step 3a: Open Swagger by

  1. Click on your active database
  2. Click Connect TAB
  3. Click REST API
  4. Clik link to your swagger endpoint.

As shown on the picture below. image

✅ Step 3b: Navigate to create a table section

  1. Once Swagger is launched, scroll down and navigate to the schemas section

image

  1. Then, within the schemas section navigate to Create a table and click on it to open the section.
    • Take particular note of the REST URI /api/rest/v2/schemas/keyspaces/{keyspaceName}/tables.
    • Also take note this is using a POST command.

image

  1. Click the "Try it out" button

image

✅ Step 3c: Create table restfromreadme_by_id

  1. Enter your Astra token (X-Cassandra-Token)
  2. Enter the keyspaceName todos

image

  1. Finally, copy the create table statement using the code below into the body field

    {
"name": "restfromreadme_by_id",
"ifNotExists": true,
"columnDefinitions": [
{
  "name": "id",
  "typeDefinition": "uuid",
  "static": false
},
{
  "name": "text",
  "typeDefinition": "text",
  "static": false
},
{
  "name": "key",
  "typeDefinition": "text",
  "static": false
},
    {
      "name": "completed",
      "typeDefinition": "boolean"
    }
],
"primaryKey": {
"partitionKey": [
  "id"
]
}
}

  2. And click execute to apply the command and create the table

image

You should see a 201 response telling you it correctly created the "restfromreadme_by_id" table.

Again, take a note of the Request URL that was used to create the table. This comes into play later when we take a look at the code in astraRestClient.js used to create our TODO application table.

image

🏠 Back to Table of Contents

4. Insert data in the Table with the REST API using Swagger

Now that we have a table to use, let's insert a row of data into the table, again using REST to do so.

✅ Step 4a: Navigate to Add row section

  1. Scroll down and navigate to the data section
  2. Then find Add row and click it to open the section
    • Also take note this is using a POST command.
  3. Click Try it out just like we did previously

image

✅ Step 4b: FIll in values and add a row

  1. Add your Astra token
  2. Add the keyspaceName todos
  3. Add the tableName restfromreadme_by_id. Note, this is the table we created in the earlier step

image

  1. Copy the following JSON into the body
{"id":"57dbd260-d905-11eb-b985-c522859819b9","completed":false,"text":"TODO FROM README","key":"none"}
  1. Click Execute. You should see code 201 in the response telling you it was a success and displaying the id of the row you just created.

🏠 Back to Table of Contents

5. Retrieving values

Finally, now that we created a table and inserted a row of data let's GET the data back out.

✅ Step 5a: Navigate to Retrieve all rows section

  1. Scroll up within the data section
  2. Then find Retrieve all rows and click it to open the section
    • Take note this is using a GET command.
  3. Click Try it out just like we did previously

image

✅ Step 5b: Execute the command to display the data

  1. Enter your Astra token (X-Cassandra-Token)
  2. Enter the keyspaceName todos
  3. Enter the tableName restfromreadme_by_id

image

  1. Click Execute
  2. View the end result data that should be exactly what we created in the previous step

image

🏠 Back to Table of Contents

6. Launch GitPod IDE

Open in Gitpod

Need a refresher on React Basics?

Take me to the React stuff We've created a separate repo going over the Basics of React. To get there, click the link below. [GOTO React-Basics](https://github.com/datastaxdevs/react-basics) When you're done, just click on the "Back to Main" breadcrumb to come back here.

7. Launch the TODO app

✅ Step 7a: Retrieve application token to securely connect to the database

Use the token you previously generated. If you no longer have the token and did not download a .csv, you can generate a new token using the instructions above

✅ Step 7b: Configure Environment Variables and Install Dependencies

  1. Create .env file

In the repository directory run the following command to set up your Astra environment. Note that this does require Node 15 and NPM 7 to work. You can install a node version manager like nvm or n to use multiple versions on your system.

npm exec astra-setup todos_workshop_db todos
  1. 👩‍💻 Install all the packages
npm install -g netlify-cli

✅ Step 7c: Launch your app

Things to Note: