The shopping list
Published: 2024-05-22 19:39:21

## Overview

Have you ever experienced forgetting what to buy which you had just remembered until a second ago? Well, I have, many times. So does my partner.. In order to keep them in memo, I created a app which can remember what to buy for us.

## Goal
 The goal is to implement create/read/delete interactive communication with database without complicated operation.
'Simple' is kind of important keyword in this app as it is used by not only me but also my partner who is not familier with programming.
 
 You might wonder why 'update' feature(U from CRUD) is not included. That's because my app doesn't need to modify 
item(s) in the list. I focused on three create/read/delete features to keep it simple.


## Features
A user oparates via communication tool, LINE(I would say the app ,LINE, is one of the most popular communication tool in my coutry.), it has nice API feature which can do webhook to call a function deployed somewhere else, this time I deployed a my codes to supabase. Sending a message to LINE API account (each LINE user can create their own API account) triggers to call it. Once triggered, LINE API sends a request to supabase edge functions where I deployed and get response from it depend on what message a user sends.



![diagram how it works](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/li4javrav1m4rwkfhw3k.png)

The events depends on the input keyword.

### Create
If a user input doesn't include either 'Display', 'Clear', 'Delete', which means add a new item to the list, all you have to do is to type a item you want to memo and tap send button.
Below is example how it works, only you need to do is to send a word to line account.

![example image of how to add to list 'create'](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lvx9b06llgqqcruk5anv.png)

### Read
It is main feature of the app, if you want to get a list from database, just type "Display", and it responds with all item in the iist. I set capital D as first letter of keyword because we both are iphone users, which has keyboard feature that first letter of a sentence is automatically in capital as default.


![example image of how to read the list](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0duqay0sqgsdn0jrzd6j.png)



### Delete
There are two ways to delete item from the list.
#### "Delete ***"
one is using keyword "Delete", this is used when you want to delete specific item.


![example image when 'Delete' is used](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h8ok7aqn3ig7kqfgetkz.png)


#### "Clear"
The other way is using "Clear". When you input this keyword, it clears all item in the list.

![example image when 'Clear' is used](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6nck6tkfl2hcbski3xp7.png)


### Utilize Line Feature
Actually(you might imagine), keywords "Diplay" and "Clear" are the frequently used in this app. 
so I added ready-for-tapped buttons called "Rich Menu", this is one feature of Line that you can assign arbitrary command easily.
with only one tap, and you can see the list or delete them all.


![example image of Rich Menu](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8boiezsuje6ho0fwcwzd.png)


## TechStack
Frontend --- Line message API,
Backend --- supabase edge function in Typescript
Database --- supabase

## Summary
This app is useful. we have been using it for a few weeks and works well so far. It is also good practice to understand how to deploy, connect to database.

Thank you for reading.