Analisis kebutuhan untuk Devkit

[apidong]

untuk Devkit, Fitur-fitur bahasa pemrograman yang dibutuhkan antara lain :

1. Mendukung Asynchronous
2. Mendukung database sqllite maupun mysql/mariadb
3. Bisa melakukan SSH
4. Mendukung Interaksi dengan Windows System
5. Mendukung Scheduling.
6. Mendukung Selenium untuk membuat auto login.

Dari Kebutuhan diatas bahasa pemogramann yang cocok adalah python.
kenapa php tidak terpilih, alasannya antara lain

1. Asynchronous Programming: PHP tidak mendukung asynchronous secara native. Meskipun ada pustaka seperti Swoole atau ReactPHP yang memungkinkan pemrograman async, integrasinya lebih kompleks dan tidak sebaik dukungan async bawaan di Python dengan FastAPI atau Node.js.
2. Integrasi dengan Selenium: PHP bisa digunakan untuk memanggil Selenium, tetapi ini tidak umum dan akan memerlukan skrip eksternal. Biasanya, bahasa seperti Python lebih disarankan untuk otomatisasi browser karena memiliki dukungan lebih baik untuk Selenium.
3. SSH: PHP bisa melakukan koneksi SSH dengan pustaka seperti phpseclib, tetapi ini tidak semudah dan sefleksibel pustaka SSH di Python seperti Paramiko.
4. Dukungan Cross-platform: Meskipun PHP bisa berjalan di Windows dan Linux, interaksi dengan sistem operasi khusus (seperti membuka aplikasi di Windows atau melakukan operasi latar belakang) bisa terbatas dibandingkan Python.

dari kekurangan php sangat tidak direkomendasikan. untuk itu python lebih cocok untuk kebutuhan ini.

python memiliki banyak framework, salah satunya adalah FastAPI.
Kelebihan FAstAPI antara lain :

1. Asynchronous Support: FastAPI mendukung asynchronous secara native, membuatnya cepat dan efisien dalam menangani banyak permintaan secara paralel.
2. Database: Gunakan ORM async seperti Tortoise ORM atau SQLAlchemy untuk koneksi ke MySQL atau SQLite.
3. SSH: Untuk koneksi SSH, gunakan pustaka Paramiko.
4. Interaksi dengan Windows System: Dengan menggunakan pustaka subprocess atau os, Anda dapat membuka aplikasi dan menjalankan command.
5. Scheduling: Gunakan pustaka seperti APScheduler untuk menambahkan dan mengelola schedule task di dalam aplikasi.

untuk frontend dipilih javascript menggunakan vue 3.
kelebihannya antara lain :

1. Komunikasi API yang Mudah: Vue 3 dapat berkomunikasi langsung dengan FastAPI melalui AJAX (menggunakan axios atau fetch) untuk mengambil dan mengirim data, sehingga memungkinkan pembuatan aplikasi Single-Page Application (SPA) yang cepat dan interaktif.
2. Pengelolaan State: Vue memiliki opsi pengelolaan state seperti Vuex atau Pinia, yang mempermudah sinkronisasi data antara komponen, memungkinkan aplikasi frontend yang lebih terstruktur dan efisien.
3. Frontend-Backend Separation: Dengan menggunakan Vue 3 di frontend dan FastAPI di backend, aplikasi Anda dapat diatur dengan arsitektur frontend-backend yang terpisah. Ini membuat pengembangan lebih modular dan memungkinkan Anda mengembangkan dan mengelola frontend secara independen dari backend.
4. Routing yang Lancar: Vue Router mempermudah pembuatan dan pengelolaan rute frontend untuk SPA, menjadikan navigasi aplikasi lebih cepat dan mulus tanpa perlu reload halaman dari server.

alasan kenapa tidak dipakainya laravel :

1. Tumpang Tindih Fungsi Backend: Laravel dirancang untuk mengelola tugas backend (seperti autentikasi, pengelolaan data, validasi, dan logika bisnis). Jika backend sudah ditangani oleh FastAPI, Laravel akan menjadi berlebihan karena fungsi-fungsi backend sudah ditangani FastAPI.
2. Kompleksitas dan Overhead: Laravel menggunakan server-side rendering, yang membuatnya kurang ideal sebagai frontend. Laravel memerlukan server PHP, konfigurasi Blade templates, dan routing tambahan yang dapat memperlambat dan mempersulit arsitektur aplikasi jika hanya digunakan untuk frontend.
3. Tidak Optimal untuk SPA: Vue 3 lebih fleksibel dan efisien untuk membuat Single-Page Application (SPA) atau aplikasi frontend interaktif. Laravel bisa membuat SPA dengan tambahan pustaka seperti Inertia.js, tetapi itu masih bukan use case utama Laravel. Vue 3 langsung bekerja dengan API FastAPI melalui AJAX atau GraphQL tanpa perlu layer tambahan.
4. Ekosistem Frontend Modern: Vue 3 memiliki ekosistem dan alat khusus frontend, seperti Vue Router dan Pinia (atau Vuex). Alat ini dirancang khusus untuk mengelola tampilan, state, dan routing aplikasi SPA dengan cara yang efisien, sedangkan Laravel tidak memiliki fitur serupa untuk pengembangan frontend murni.

[apidong]

Untuk membangun aplikasi menggunakan Vue 3 sebagai frontend dan FastAPI sebagai backend, berikut adalah struktur proyek yang disarankan untuk memisahkan frontend dan backend. Struktur ini memungkinkan pengembangan yang modular dan deployment yang terpisah jika diperlukan.

project-root/
├── backend/ # Folder untuk backend FastAPI
│ ├── app/ # Folder utama untuk aplikasi FastAPI
│ │ ├── api/ # Endpoint atau router untuk API
│ │ │ ├── init.py
│ │ │ └── v1/ # Versi API, bisa disesuaikan jika ada versi berbeda
│ │ │ └── routes.py # File definisi endpoint
│ │ ├── core/ # Konfigurasi utama aplikasi
│ │ │ └── config.py # Pengaturan seperti koneksi database, secret key, dll.
│ │ ├── db/ # Pengaturan dan model database
│ │ │ ├── models.py
│ │ │ ├── session.py # Koneksi database, ORM session
│ │ │ └── init_db.py # Inisialisasi database
│ │ ├── main.py # Entry point aplikasi FastAPI
│ │ ├── dependencies.py # Dependensi seperti autentikasi
│ │ └── schemas.py # Definisi pydantic schema untuk request dan response
│ └── Dockerfile # File Docker untuk backend FastAPI
├── frontend/ # Folder untuk frontend Vue 3
│ ├── public/ # File publik untuk aplikasi Vue (index.html, favicon, dll.)
│ ├── src/ # Sumber utama aplikasi Vue
│ │ ├── assets/ # Gambar dan file statis
│ │ ├── components/ # Komponen Vue yang reusable
│ │ ├── router/ # Konfigurasi routing Vue
│ │ │ └── index.js # Definisi rute untuk aplikasi
│ │ ├── store/ # State management (Vuex atau Pinia)
│ │ │ └── index.js # Store utama aplikasi
│ │ ├── views/ # Komponen halaman Vue untuk setiap rute
│ │ ├── App.vue # Komponen utama Vue
│ │ └── main.js # Entry point untuk aplikasi Vue
│ └── vite.config.js # Konfigurasi Vite untuk build dan dev server Vue 3
├── .env # Environment variable untuk konfigurasi bersama
├── .gitignore # File untuk mengabaikan file tertentu di Git
├── docker-compose.yml # Docker Compose file untuk menjalankan frontend dan backend
└── README.md # Dokumentasi proyek

Penjelasan Struktur

• backend/app/api/: Berisi endpoint atau router untuk API. Anda bisa mengorganisasi endpoint berdasarkan versi (misalnya v1) atau fitur.
• backend/app/core/: Berisi konfigurasi utama aplikasi seperti pengaturan secret keys, konfigurasi database, dan pengaturan lain.
• backend/app/db/: Berisi definisi model database, koneksi session, dan skrip untuk inisialisasi database. Anda bisa menggunakan SQLAlchemy untuk ORM atau Tortoise ORM untuk async.
• backend/app/main.py: Entry point aplikasi FastAPI, biasanya berisi konfigurasi FastAPI dan setup routing.
• frontend/src/: Folder sumber utama Vue 3, dengan pembagian komponen, router, store, dan views.
• docker-compose.yml: Memungkinkan pengelolaan dan jalankan kedua layanan secara bersamaan. Dalam file ini, tentukan konfigurasi container untuk frontend (Vue 3) dan backend (FastAPI) sehingga kedua layanan dapat berinteraksi dengan lancar.