fullstack fastapi vuejs price aggregator

Agregator Harga Fullstack

Agregator harga supermarket Inggris melalui web scraping. Ini dikembangkan untuk proyek universitas saya sebagai MVP sehingga ada aspek yang tidak berfungsi dengan benar. Saya mungkin memperbaruinya di masa mendatang.

Fitur

• Backend Python REST melalui FastAPI
• VueJS Frontend SPA dengan TypeScript menggunakan template ini.
• Otentikasi JWT antara backend dan frontend
• CLI
• Buruh pelabuhan
• Puisi
• Harga Web Scraped melalui selectorlib
• Kikis halaman yang mendukung JavaScript menggunakan splash

Pengaturan

Pastikan Anda telah menginstal Docker dan Node.js.

1. Kloning repositori ini
2. cd ke root proyek dan jalankan docker-compose up --build -d . Memulai backend dan saat pertama kali dijalankan akan membangun semua container yang diperlukan yang dapat memakan waktu beberapa menit.
3. Setelah backend selesai dibuat, dapatkan shell dengan docker-compose exec backend bash .
4. Untuk menginisialisasi database, jalankan python manage.py createdb dari dalam bash shell.
   • (Opsional) Untuk menyemai db dengan data dummy, jalankan python manage.py seeddb Catatan semua kata sandi disetel ke kata sandi
5. cd ke direktori klien, jalankan npm install yang akan menginstal modul node yang diperlukan.
6. run npm run serve yang akan melayani frontend klien.

URL proyek

URL	Keterangan
0.0.0.0:8000/api	API JSON ujung belakang
0.0.0.0:8000/dokumen	Dokumentasi Referensi API OpenAPI/Swagger yang dihasilkan Backend
0.0.0.0:8000/dokumen ulang	Dokumentasi interaktif alternatif disediakan oleh ReDoc
host lokal:9527	Aplikasi Halaman Tunggal VueJS Frontend

CLI

Backendnya menyertakan CLI yang sangat terinspirasi oleh Dispatch Netflix.

typer (penulis yang sama dengan FastAPI) digunakan untuk membuat CLI untuk proyek dan diakses melalui manage.py.

Untuk menjalankan perintah, Anda memerlukan shell yang berjalan di dalam wadah backend dengan:

 docker-compose run backend bash

Untuk melihat semua perintah yang tersedia:

 root@72293bee6b37:/app# python manage.py 
Usage: manage.py [OPTIONS] COMMAND [ARGS]...

Options:
  --help  Show this message and exit.

Commands:
  config      Display application configuration.
  createdb    Creates an empty database.
  createrole  Add role to database.
  createuser  Create new user in the database.
  develop     Start a development server with reload.
  dropdb      Drop the existing database.
  routes      Display application routes and dependencies.
  seeddb      Add fake data to database.
  shell       Starts an interactive shell with app object imported.

Rute

 root@72293bee6b37:/app# python manage.py routes

Application Endpoints
Path                           Methods    Dependencies
-----------------------------  ---------  --------------------------------------------------------
/api/v1/users/                 GET        ['RoleChecker: Roles: admin,user']
/api/v1/users/                 POST       ['RoleChecker: Roles: admin,user']
/api/v1/users/{id}             GET        ['RoleChecker: Roles: admin,user']
/api/v1/users/{id}             PUT        ['RoleChecker: Roles: admin,user']
/api/v1/users/{id}             DELETE     ['RoleChecker: Roles: admin,user']
/api/v1/users/{id}/roles       GET        ['RoleChecker: Roles: admin,user']
/api/v1/users/{id}/roles       PUT        ['RoleChecker: Roles: admin,user']
/api/v1/users/{id}/shops       GET        ['RoleChecker: Roles: admin,user']
/api/v1/users/{id}/shops       PUT        ['RoleChecker: Roles: admin,user']
/api/v1/roles/                 GET        ['RoleChecker: Roles: admin,user']
/api/v1/roles/                 POST       ['RoleChecker: Roles: admin,user']
/api/v1/roles/{id}             GET        ['RoleChecker: Roles: admin,user']
/api/v1/roles/{id}             PUT        ['RoleChecker: Roles: admin,user']
/api/v1/roles/{id}             DELETE     ['RoleChecker: Roles: admin,user']
/api/v1/shops/                 GET        ['RoleChecker: Roles: admin,user']
/api/v1/shops/                 POST       ['RoleChecker: Roles: admin,user']
/api/v1/shops/{id}             PUT        ['RoleChecker: Roles: admin,user']
/api/v1/shops/{id}             DELETE     ['RoleChecker: Roles: admin,user']
/api/v1/shops/listings/        GET        ['RoleChecker: Roles: admin,user']
/api/healthcheck               GET        []

Konfigurasi

 python manage.py config

Application Configuration
Setting                     Value(s)
--------------------------  --------------------------------------------------------------------
APP_DIR                     /app/app
STATIC_DIR                  /app/app/static
EMAIL_TEMPLATES_DIR         /app/app/static/email-templates/html
PROJECT_NAME                Fastapi Backend
SERVER_HOST                 0.0.0.0
CORS_WHITELIST              ['http://localhost', 'http://localhost:8000', 'http://0.0.0.0:8000']
FASTAPI_ENV                 development
DEBUG                       False
LOG_LEVEL                   debug
FIRST_SUPERUSER             [email protected]
FIRST_SUPERUSER_PASSWORD    a5dbf43e07f4d19e5b73bc89a8f74
USERS_OPEN_REGISTRATION     True
SECRET_KEY                  **********
JWT_AUTH_LIFETIME_SECONDS   604800
JWT_EMAIL_LIFETIME_SECONDS  3600
SMTP_USER                   [email protected]
SMTP_PASSWORD               **********
SMTP_TLS                    False
SMTP_SSL                    False
SMTP_HOST                   mailhog
SMTP_PORT                   1025
POSTGRES_USER               postgres
POSTGRES_PASSWORD           **********
POSTGRES_HOST               postgres
POSTGRES_PORT               5432
POSTGRES_DB                 fastapi_backend

Tampilan depan

Tampilan masuk

Tampilan dasbor Admin

Tampilan CRUD pengguna

Tampilan pembuatan pengguna

Tampilan profil pengguna

Belanja tampilan CRUD

Tampilan pilihan toko

Tampilan daftar yang tergores