Scribd
Upload
7 views

HW06 - Appsmith

The document provides instructions for an assignment to build a customer info page in AppSmith using the Northwind database. Students are asked to insert a new customer, build API endpoints to GET and PUT customer data, build the AppSmith interface with a table bound to customer data and a form to edit it, and test that changes made in the form update the database.

Uploaded by

Tanmay Shah
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
7 views

HW06 - Appsmith

The document provides instructions for an assignment to build a customer info page in AppSmith using the Northwind database. Students are asked to insert a new customer, build API endpoints to GET and PUT customer data, build the AppSmith interface with a table bound to customer data and a form to edit it, and test that changes made in the form update the database.

Uploaded by

Tanmay Shah
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 6

CS 3200 - Database Design - Fontenot

Homework 06 - AppSmith
Regular Submission Deadline: Tuesday April 9 @ 11:59 to GradeScope
Regular Extra Credit (3 points total) Early Submission Deadline: Sunday April 7 @ 11:59 to GradeScope

Directions:
Follow the steps below and provide screenshots where requested.

Don’t forget to properly associate your solutions with the questions on GradeScope.

Academic Collaboration Reminder:


Remember that you may not look at, copy, capture, screenshot, or otherwise take possession of any other
students’ solutions to any of these questions except your partner should you choose to do this assignment in
pairs. Further, you may not provide your solutions in part or in whole to any other student. Doing any of the above
constitutes a violation of academic honesty which could result in an F in this class and a referral to OSCCR. What
is permissible? You are free and encouraged to talk to your peers about the conceptual material from the lectures
or the conceptual material that is part of this assignment. You can get a round a white board and talk through the
Sakila data model. You and your colleagues can work through sample SQL queries done in class or others that
you dream up on the fly. I’m very confident that each of you knows where the line between collaborative learning
and cheating sits. Please don’t cross that line.
AppSmith Walkthrough

The AppSmith documentation has a great introductory tutorial on how to pull data from a database (not using a REST
API) and allow the user to modify/add information. You can find the tutorial > here <. Note that it is 3 consecutive web
pages. I encourage you to do the walkthrough before attempting the steps below.

Your Assignment:

Modeled after the tutorial above, you’re going to create a Customer Info page in AppSmith using the sample Northwind
Database that is included in the project boilerplate repository.

1. Make sure you have a copy of the project boilerplate repo cloned to your local machine (laptop or desktop).
2. In the docker-compose.yml file, make sure the AppSmith service directives are uncommented.
3. User docker-compose to start the containers (from command line, docker compose up -d).
4. Using DataGrip, create a new data source and connect to MySQL running inside the db container.
5. Write a SQL Insert Statement to add a new customer to the customers table.
a. Use your real first name and last name (as it appears in Canvas). Note, this information is only stored on
your laptop; it is not sent to the cloud.
b. In the Company attribute, use the name of your project team.
c. For any other fields required, you can add fake values.
6. Write a select statement to return all the data from the customers table and execute it.
7. Make sure the new entry from Step 5 is visible on your screen from the execution of the select statement. Take a
screenshot of Datagrip showing the insert statement, select statement, and data table at the bottom of the
window showing the newly added row and paste it below the directions where indicated.

8. In the Flask Customer Blueprint,


a. Modify the GET /customers route to also return the customer ID in addition to the attributes already
listed.
b. Add a PUT /customers route that will update the customers information given their ID number. You can
base this off the examples in the Products Blueprint. You only need to include attributes that are
returned from the GET /customers route.
c. Screenshot the new route code in Python and paste below.

9. In a web browser, navigate to the AppSmith tool running in the web appsmith container. If you haven’t loaded it
before, you will have to go through the welcome screens to create a new account. All of the info you enter is only
stored on your laptop.
10. Based on the AppSmith introductory tutorial and lecture demonstrations, do the following:
a. Create a new app in AppSmith named HW06-<last_name>. (For Dr. Fontenot, it would be
HW06-fontenot). You may also rename the default application if you’d like.
b. In the app, create a GET API query to the Flask API to retrieve all customer information.
c. Add a table to the AppSmith page, and bind it to the API Query you created in 10.b.
d. Add a JSONForm to the AppSmith page, and bid it to the selected row from 10.c.
e. Create a PUT query in AppSmith that puts the form data of 10.d into the body of the request. It should
call PUT /customers of your REST API
f. Add an event handler for the JSONForm so that when the submit button is clicked, the PUT query
created in 10.e will be executed. Then add another event handler that will run the query that is bound to
the table so the table data will be updated.
11. Run the AppSmith app.
a. Choose one of the rows from the table (which should update the JSONForm). Screenshot your browser
showing the current state of the App Table and Form.
b. Scroll through the table data finding the row you added to the customers table Step 5 above. Screenshot
your browser showing the current state of the App Table and Form.
c. Swap your first name and last name in the JSON Form and click submit. Screenshot your browser
showing the current state of the App Table and Form.
12. Back in Datagrip, re-run the query to display all the data from the customer table. Find the row that you
updated in 11.c and screenshot DataGrip showing the updated customer data.

Paste Screenshots Here:

1. Screenshot from Step 7.


2. Screenshot from Step 8.c.
3. Screenshot from Step 11.a.

4. Screenshot from Step 11.b.

5. Screenshot from Step 11.c.


6. Screenshot from Step 12.

You might also like