Web Scraping Summarization with Vite React TypeScript and Spring Boot

#webdev #react #springboot #ai

Dalam artikel ini, kami akan menunjukkan bagaimana cara membuat aplikasi web yang memungkinkan pengguna untuk melakukan web scraping dan summarization dengan menggunakan teknologi modern seperti Vite React TypeScript di frontend dan Spring Boot di backend. Aplikasi ini memungkinkan pengguna untuk meng-scrape konten dari halaman web dan meringkasnya secara otomatis menggunakan model Hugging Face.

Fitur Utama Aplikasi

Frontend:
- Dibangun menggunakan Vite dengan React dan TypeScript untuk kecepatan dan pengalaman pengguna yang interaktif.
- Menggunakan Axios untuk berkomunikasi dengan API backend.
- Di-deploy ke Netlify untuk kemudahan akses.
Backend:
- Spring Boot digunakan untuk membangun API yang mengelola proses web scraping dan summarization.
- Menggunakan Jsoup untuk scraping konten web dan Hugging Face untuk summarization.
- Dokumentasi API interaktif disediakan melalui OpenAPI.

Langkah-langkah Penggunaan

Untuk mencoba dan mengembangkan aplikasi ini, ikuti langkah-langkah di bawah ini.

1. Clone Repository

Anda dapat meng-clone repository GitHub untuk mendapatkan salinan dari aplikasi ini:

git clone https://github.com/dioarafll/WebScrapeAI.git

Setelah berhasil meng-clone, Anda dapat mengikuti instruksi di bawah untuk menjalankan proyek ini di lokal Anda.

2. Menjalankan Backend

Masuk ke direktori backend:

   cd WebScrapeAI/backend

Jalankan aplikasi Spring Boot:

Pastikan Anda sudah memiliki Java dan Maven terinstal. Anda dapat menjalankan aplikasi dengan perintah:

   mvn spring-boot:run

API backend akan berjalan di http://localhost:8080.

3. Menjalankan Frontend

Masuk ke direktori frontend:

   cd WebScrapeAI/frontend

Instal dependensi:

   npm install

Jalankan aplikasi frontend:

   npm run dev

Aplikasi frontend akan berjalan di http://localhost:3000.

Demo Aplikasi

Untuk melihat demo langsung dari aplikasi ini, Anda dapat mengunjungi situs Netlify di bawah ini:

Demo Aplikasi di Netlify

Pada halaman demo ini, Anda dapat mencoba memasukkan URL dari halaman web yang ingin Anda scrape dan melihat hasil scraping serta summarization secara langsung.

Tautan Eksternal

Dengan mengikuti langkah-langkah ini, Anda dapat dengan mudah mengembangkan, menguji, dan men-deploy aplikasi Web Scraping dan Summarization berbasis Vite React TypeScript dan Spring Boot.