Halo teman-teman semuanya, pada seri artikel kali ini kita semua akan belajar bagaimana cara mengimplementasikan login menggunakan Google di project berbasis React.
Jika teman-teman perhatikan, banyak sekali sebuah website mengimplementasikan login via google di dalamnya, alasannya karena memudahkan para pengguna agar tidak perlu membuat sebuah akun secara manual.
Di tutorial pertama ini, kita akan fokus pada langkah pertama yaitu membuat project React menggunakan Vite. Kenapa Vite? Karena selain ringan, Vite memberikan performa yang luar biasa dan sangat mudah untuk digunakan, terutama saat kita sedang mengembangkan aplikasi skala kecil hingga menengah.
Langkah 1 - Installasi Node.js
Pertama, kita perlu menginstall Node.js di dalam komputer terlebih dahulu, jika teman-teman belum menginstall-nya, maka silahkan diinstall terlebih dahulu.
Untuk langkah-langkah installasi Node.js, teman-teman bisa ikuti dari situs resminya di https://nodejs.org/en/download dan untuk memastikan, apakah Node.js sudah berhasil terinstall, silahkan jalankan perintah berikut ini di dalam terminal/CMD.
node --version
npm --version
Langkah 2 - Membuat Project React (Vite)
Sekarang kita akan lanjutkan belajar membuat project React menggunakan Vite. Silahkan teman-teman masuk ke dalam folder dimana akan menyimpan project-nya, kemudian jalankan perintah berikut ini di dalam terminal/CMD.
npm create vite@5.2.3 react-google -- --template react
Perintah di atas, digunakan untuk mengenerate template project React menggunakan Vite dan nama project-nya adalah react-google.
Langkah 3 - Menjalankan Project React
Setelah berhasil membuat template project React dengan Vite, maka kita akan lanjutkan untuk melakukan installasi dependensi yang dibutuhkan.
Silahkan teman-teman jalankan perintah berikut ini di dalam terminal/CMD.
cd react-google
Perintah di atas, digunakan untuk masuk ke dalam folder project yang sudah kita buat sebelumnya.
Setelah itu, silahkan jalankan perintah berikut ini di dalam terminal/CMD dan pastikan sudah berada di dalam project-nya.
npm install
Silahkan ditunggu proses installasinya sampai selesai dan pastikan teman-teman terhubung dengan internet.
Setelah selesai, sekarang kita akan belajar bagaimana cara menjalankan project-nya, silahkan teman-teman jalankan perintah berikut ini di dalam terminal/CMD dan pastikan berada di dalam project-nya.
npm run dev
Jika berhasil, project akan dijalankan di dalam localhost dengan port 5173. Teman-teman bisa mengaksesnya di browser dengan mengetikkan http://localhost:5173.
Langkah 4 - Menambahkan CSS Bootstrap
Agar nanti tampilkan project lebih bagus, maka kita akan integrasikan dengan Bootstrap. Silahkan teman-teman buka file index.html yang ada di dalam project, kemudian ubah semua kode-nya menjadi seperti berikut ini.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>React Google Sign In - SantriKoding.com</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
body {
background-color: lightgray;
}
</style>
</head>
<body>
<div id="root"></div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<script type="module" src="/src/main.jsx"></script>
</body>
</html>
Dari perubahan kode di atas, kita melakukan load Css dan Js dari Bootstrap secara online (CDN).
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
Kesimpulan
Pada artikel ini, kita semua telah belajar bagaimana cara membuat project React menggunakan Vite, menjalankan project React dan mengintegrasikan project React dengan Bootstrap.
Pada artikel selanjutnya, kita semua akan belajar bagaimana cara konfigurasi OAuth Google di dalam project React.
Terima Kasih