This Sunday morning I'm thinking to add Activity page to my site — inspired by Daniel Raffael activity page here.
So I want to have like activity gallery that stores exported image from Samsung Health.
The process is as follows — I will share the activity from my phone and then upload the image to the Telegram Bot. After that, the Activity page should display all activities, including the most recent one.
Here the system design that I will build. I like to define the process in sequence diagram.
Below are the steps to design and implement that idea.
Telegram Bot Service#
I will build telegram bot service using Rust called ZeroBot Activity
.
There's a framework called teloxide
in Rust to make Telegram bots.
It will handle user interaction. Input image, save it locally, push it to Github repository.
Backend#
For the backend, I'll use a persistent storage SQLite with Prisma as the ORM.
Here's the model activities
schema:
id: uuid
file_name: str
note: str
created_at: date
API Specification:#
Set up an API endpoint to fetch and save the activity.
List all activity
GET https://satrya.zeroinside.id/api/activities
Accept: application/json
Add a new activity
POST https://satrya.zeroinside.id/api/activities
Content-Type: application/json
Authorization: Basic <base64-encoded-credentials>
{
"file_name": "activity_file_name.jpg",
"note": ""
}
Frontend#
I will introduce a new route named activity and use Server-Side Rendering to display the component.
The UI layout will utilize a grid system,
specifically: class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4"
.
Each activity item will be displayed using a card.
It will look something like this: