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

1. 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.

2. 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

1. Masuk ke direktori backend:

   cd WebScrapeAI/backend

1. 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

1. Masuk ke direktori frontend:

   cd WebScrapeAI/frontend

1. Instal dependensi:

   npm install

1. 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

• Spring Boot Documentation
• Jsoup Documentation
• Hugging Face Summarization Models
• OpenAPI Documentation
• Vite Documentation
• Netlify Deployment Guide

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.