Friday, March 8, 2024

Membangun Sistem Login dengan JWT di Node.js

Filled under:

 Pada era digital saat ini, keamanan menjadi salah satu aspek terpenting dalam pengembangan aplikasi web. JSON Web Token (JWT) menawarkan solusi elegan untuk mengelola autentikasi dan otorisasi pengguna. Tutorial ini akan membimbing Anda melalui proses pembuatan sistem login menggunakan JWT di Node.js, disajikan dalam Bahasa Indonesia.

Persiapan

Pastikan Anda sudah menginstal Node.js di sistem Anda. Anda dapat memeriksanya dengan menjalankan node -v di terminal. Jika belum terinstal, silakan unduh dan instal dari situs resmi Node.js (https://nodejs.org/en).

Langkah 1: Membuat Proyek Baru

  1. 1. Buka terminal, buat folder baru untuk proyek Anda, dan navigasi ke dalam folder tersebut:


    mkdir proyek-login-jwt

    cd proyek-login-jwt


    2. isialisasi proyek Node.js:


    npm init -y


    Perintah ini akan menghasilkan file package.json yang berisi informasi dasar tentang proyek Anda.

    Langkah 2: Menginstal Paket yang Dibutuhkan

    Untuk proyek ini, kita akan menggunakan beberapa paket:

    • -express untuk framework server.
    • -jsonwebtoken untuk mengelola token JWT.
    • -bcrypt untuk mengenkripsi password.
    • -dotenv untuk mengelola variabel lingkungan.

    Instal paket-paket tersebut dengan npm:

    npm install express jsonwebtoken bcrypt dotenv

    Langkah 3: Membuat Server Express

    1. 1. Buat file baru bernama index.js di root proyek Anda.

    2. 2. Tambahkan kode berikut untuk mengatur server Express dasar:


      require('dotenv').config();

      const express = require('express');

      const app = express();

       

      app.use(express.json()); // Middleware untuk menguraikan JSON

       

      app.get('/', (req, res) => {

        res.send('Selamat Datang di Sistem Login JWT!');

      });

       

      const PORT = process.env.PORT || 3000;

      app.listen(PORT, () => {

        console.log(`Server berjalan di port ${PORT}`);

      });

      Langkah 4: Membuat Rute Registrasi

      1. 1. Di bawah kode server, tambahkan fungsi untuk registrasi pengguna:


        const bcrypt = require('bcrypt');

         

        // Simulasi database sederhana

        const users = [];

         

        app.post('/register', async (req, res) => {

          try {

            const salt = await bcrypt.genSalt();

            const hashedPassword = await bcrypt.hash(req.body.password, salt);

            const user = { username: req.body.username, password: hashedPassword };

            users.push(user);

            res.status(201).send('Pengguna berhasil didaftar');

          } catch {

            res.status(500).send('Terjadi kesalahan pada server');

          }

        });

      Langkah 5: Membuat Rute Login dan Mengeluarkan JWT

      1. 1. Tambahkan rute untuk login yang mengeluarkan JWT jika pengguna berhasil terautentikasi:

        const jwt = require('jsonwebtoken');

         

        app.post('/login', async (req, res) => {

          const user = users.find(u => u.username === req.body.username);

          if (user == null) {

            return res.status(400).send('Tidak dapat menemukan pengguna');

          }

          try {

            if (await bcrypt.compare(req.body.password, user.password)) {

              const accessToken = jwt.sign(user, process.env.ACCESS_TOKEN_SECRET);

              res.json({ accessToken: accessToken });

            } else {

              res.send('Login gagal');

            }

          } catch {

            res.status(500).send('Terjadi kesalahan pada server');

          }

        });


        2. Tambahkan ACCESS_TOKEN_SECRET ke file .env untuk keamanan token JWT:


        ACCESS_TOKEN_SECRET=rahasia_sangat_rahasia

        Langkah 6: Membuat Middleware untuk Verifikasi JWT

        1. 1. Buat fungsi middleware untuk memverifikasi token JWT:


          function authenticateToken(req, res, next) {

            const authHeader = req.headers['authorization'];

            const token = authHeader && authHeader.split(' ')[1];

            if (token == null) return res.sendStatus(401);

           

            jwt.verify(token, process.env.ACCESS_TOKEN_SECRET, (err, user) => {

              if (err) return res.sendStatus(403);

              req.user = user;

              next();

            });

          }


          2. Gunakan middleware ini pada rute yang ingin Anda lindungi. Misalnya, tambahkan rute /dashboard yang memerlukan autentikasi:


          app.get('/dashboard', authenticateToken, (req, res) => {

            res.send('Selamat Datang di Dashboard');

          });


          Kesimpulan


          Anda telah berhasil membuat sistem login menggunakan JWT di Node.js! Meskipun ini hanya contoh dasar, Anda dapat mengembangkannya lebih lanjut dengan menambahkan fitur seperti pengelolaan pengguna, penyimpanan data ke database, dan lainnya. Selamat mencoba dan teruslah belajar!

Penulis Oleh : oktafiando pradhana2:33 AM

Building a Real-Time Chat Application with React and Firebase

Filled under:

In the digital age, the ability to connect instantly with others across the globe has become an essential part of our daily lives. Whether for personal connections or business communications, chat applications serve as a vital bridge. Today, I'll guide you through creating your very own real-time chat application using React JS and Firebase. This tutorial is designed to be beginner-friendly, yet engaging enough for more experienced developers looking to expand their skill set.

Step 1: Setting Up Your Environment

Before diving into the coding part, make sure you have Node.js installed on your computer. Node.js will include npm (Node Package Manager), which you'll need to create a React application and manage your dependencies.

  1. 1. Create a React App: Open your terminal and run the following command to create a new React application named my-chat-app:
  2. npx create-react-app my-chat-app

1. Navigate to Your App Directory: Change to the directory of your newly created app:

cd my-chat-app


Step 2: Setting Up Firebase

Firebase offers a suite of cloud services, including a real-time NoSQL database that we'll use for our chat application.

  1. 1. Create a Firebase Project:

  2. 2. Add Firebase to Your Web App:

    • Once your project is created, click on "Web" (</>) to add Firebase to your app.
    • Register your app and copy the Firebase SDK snippet. You'll need this to initialize Firebase in your React app.
  3. 3. Install Firebase SDK: Go back to your terminal and run the following command in your project directory:

    npm install firebase

    1. 1. Initialize Firebase: Create a file named firebase.js in your src folder and paste your Firebase SDK snippet there. It will look something like this:
    2. import firebase from 'firebase/app';

      import 'firebase/database';

       

      const firebaseConfig = {

        // Your Firebase configuration object

      };

       

      firebase.initializeApp(firebaseConfig);

       

      export const database = firebase.database();

    Step 3: Building the Chat Interface

    1. 1. Create the Chat Component:
      • Create a new file named Chat.js in the src folder.
      • This component will handle rendering the chat messages and the input field for sending messages.
      • import React, { useState, useEffect } from 'react';

        import { database } from './firebase';

         

        function Chat() {

          const [messages, setMessages] = useState([]);

          const [newMessage, setNewMessage] = useState('');

         

          useEffect(() => {

            // Listen for new messages

            const messagesRef = database.ref('messages');

            messagesRef.on('value', (snapshot) => {

              const messagesSnapshot = snapshot.val();

              const messagesList = messagesSnapshot ? Object.keys(messagesSnapshot).map(key => ({

                ...messagesSnapshot[key],

                id: key

              })) : [];

              setMessages(messagesList);

            });

          }, []);

         

          const sendMessage = () => {

            // Send a new message

            database.ref('messages').push({

              text: newMessage,

              timestamp: Date.now()

            });

            setNewMessage('');

          };

         

          return (

            <div>

              <ul>

                {messages.map(message => (

                  <li key={message.id}>{message.text}</li>

                ))}

              </ul>

              <input

                value={newMessage}

                onChange={(e) => setNewMessage(e.target.value)}

                type="text"

              />

              <button onClick={sendMessage}>Send</button>

            </div>

          );

        }

         

        export default Chat;

    1. 1. Add Chat to App Component: Open src/App.js and import your Chat component. Include <Chat /> in your App component's render method.
    2. Step 4: Running Your Application

      1. 1. Start Your React App: In your terminal, run the following command:
      2. npm start

    Your application should now be running on http://localhost:3000. You'll see your chat interface, where you can send and receive messages in real-time.

    Conclusion

    Congratulations! You've just built a real-time chat application using React and Firebase. This basic application can serve as a foundation for more complex features, such as user authentication, message encryption, and custom user interfaces. Experiment with Firebase and React to expand your application, and most importantly, have fun coding!

    I hope this tutorial helps you on your journey to becoming a proficient web developer. Stay curious, and keep building amazing things!

Penulis Oleh : oktafiando pradhana2:07 AM

Friday, June 28, 2019

Ayo buat Game mudah dengan SCRATCH2!

Filled under:

Hai kalian para pecinta game! dipost sebelumnya kita sudah berhasil membuat game sederhana dengan aplikasi Construct2. Masih sulit? Kini saya membuat game dengan cara yang lebih sederhana dan mudah.

Kita ingin membuat game seperti apa sih?! Nah ini gamenya.


Cara memainkannya cukup ambil hadiah menggunakan topi dan jangan sampai jatuh kebawah, Dapatkan Score sebanyak-banyaknya.

Hal yang dibutuhkan untuk membuat game ini.
1. Aplikasi Scratch2 https://scratch.mit.edu/download/scratch2

Setelah mendownload Scratch2 selanjutnya kita langsung membuat game ini.

1. Buka aplikasi Scratch2



2. Kemudian atur backdrop (background) berada di sisi kiri bawah pada Desktop



3. Selanjutnya hapus kocheng oren karena kita tidak membutuhkannya



4. Buat objek baru (Sprite) klik yang ada logo muka dibawah



5. Pilih gambar topi dan putar 180 derajat



6. Pilih objek(Sprite) hadiah dan buat garis merah dan simpan dibawah



7. Selanjutnya mari kita mengoding dengan blok blok yang telah disediakan
8. Ini dia blok pada topi, pada posisi pertama menandakan bahwa ketika bendera hijau diklik maka akan selalu dapat digunakan apabila arah kanan ditekan maka topi akan bergeser searah koordinat x 10x sedangkan arah kiri sebaliknya



9. Selanjutnya pada Hadiah, dimana saat bendera hijau diklik maka posisi hadiah akan teracak dan selama game berjalan posisinya berubah setiap -5 point maka terlihat seperti terjatuh, dan apabila posisi koordinat telah lebih kurang dari -170 hadiah akan kembali ke posisi y 180.
ketika bendera hijau diklik, selama game berjalan akan disetel lagu happy birthday.
Ketika bendera hijau diklik, maka Score akan berada di posisi 0 dan selama game berlangsung, jika hadiah menyentuh topi maka akan berbunyi "water drop" dan menambah score menjadi 1 dan mengembalikan hadiah ke posisi acak dengan posisi y 180, dan jika hadiah menyentuh garis maka akan berbunyi "cymbal crash" sampai suaranya selesai dan game berhenti



Sekian game simple ini. mari kita namakan Drop! Ayo kita membuat game!

Penulis Oleh : oktafiando pradhana8:33 PM