Skip to content

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

5 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

AdaptUI 🚀

AdaptUI adalah framework open-source berbasis Vanilla JavaScript dan Web Components. Framework ini secara otomatis menyesuaikan gaya UI (misalnya beralih ke Material Design) ketika diakses di perangkat Android, dan dilengkapi dengan alat CLI (Command Line Interface) untuk membungkus aplikasi web Anda menjadi Android APK native dengan bantuan Capacitor.

Fitur Utama

  • Adaptive Web Components: Komponen UI super ringan (<adapt-navbar>, <adapt-button>) yang otomatis mendeteksi OS pengguna.
  • Material Design Otomatis: Tampilan website Anda akan terlihat seperti aplikasi asli ketika dibuka di HP Android.
  • CLI Android Wrapper: Ubah aplikasi web (dist/build) Anda menjadi proyek Android Studio hanya dengan satu baris perintah.
  • Monorepo: Struktur kode rapi menggunakan NPM Workspaces, memisahkan library UI dan tool CLI.

Struktur Proyek

  • /packages/ui-core: Inti dari AdaptUI. Berisi Web Components dan CSS dinamis.
  • /packages/cli-wrapper: Script Node.js yang bertugas menscaffold Capacitor Android di atas hasil build web Anda.
  • /apps/demo-app: Aplikasi percobaan (menggunakan Vite) untuk mendemonstrasikan UI dan proses pembungkusan Android.

📦 Instalasi via NPM

Library ini tersedia secara publik dan bisa diinstal langsung di proyek baru Anda:

# 1. Untuk menginstal komponen UI (Web Components) di proyek web Anda:
npm install adaptui-core

# 2. Untuk menginstal CLI perakit Android secara global di komputer Anda:
npm install -g adaptui-cli

Panduan Penggunaan

1. Menjalankan Demo UI di Browser

  1. Clone repositori ini.
  2. Jalankan instalasi dependensi di folder utama:
    npm install
  3. Jalankan server dari dalam demo app:
    cd apps/demo-app
    npm run start
  4. Buka di browser. Gunakan Chrome DevTools (F12), aktifkan mode perangkat (Device Mode), pilih perangkat Android, lalu refresh halaman untuk melihat gaya Material Design aktif!

2. Membungkus Web Menjadi Aplikasi Android (Menggunakan CLI NPM)

  1. Lakukan build pada aplikasi web Anda:
    cd apps/demo-app
    npm run build
  2. Jalankan alat CLI global dari AdaptUI (pastikan Anda sudah menginstal adaptui-cli secara global):
    adaptui-cli build-android --dir=./dist
  3. Sebuah folder android (Native Capacitor) akan otomatis di-generate. Anda tinggal membuka folder tersebut di Android Studio untuk di-build menjadi .apk atau .aab!

Lisensi

Proyek open-source ini dirilis di bawah lisensi MIT.

About

No description, website, or topics provided.

Resources

Stars

1 star

Watchers

0 watching

Forks

Releases

Packages

Contributors

Languages