Daftar Isi

1. Pengantar NodeJS dan Ekosistemnya
2. Persiapan Environment dan Instalasi NodeJS
3. Membuat Server dengan Express.js
4. Mengenal GraphQL dan Membuat API GraphQL
5. Integrasi MongoDB dengan Mongoose
6. Membuat Aplikasi Fullstack dengan NodeJS dan React
7. Source Code dan Channel Pembelajaran Lainnya

1. Pengantar NodeJS dan Ekosistemnya

NodeJS adalah runtime JavaScript yang berjalan di server, memungkinkan Anda membangun aplikasi backend dengan JavaScript. NodeJS memiliki ekosistem yang kaya dengan ribuan modul yang tersedia melalui npm.

Dalam panduan ini, Anda akan belajar membangun server dengan Express, membuat API GraphQL, menghubungkan database MongoDB, dan membangun aplikasi fullstack modern.

Keunggulan NodeJS

• Non-blocking I/O dan event-driven architecture.
• JavaScript di server dan client, memudahkan fullstack development.
• Ekosistem npm yang sangat besar.
• Dukungan komunitas yang aktif dan banyak tutorial.

2. Persiapan Environment dan Instalasi NodeJS

Unduh dan instal NodeJS dari situs resmi: https://nodejs.org/en/download/

Setelah instalasi, cek versi NodeJS dan npm:

node -v
npm -v
    

Pastikan versi NodeJS minimal 16.x dan npm sudah terpasang.

3. Membuat Server dengan Express.js

Express adalah framework minimalis untuk membangun server HTTP di NodeJS.

Langkah 1: Inisialisasi project dan instalasi Express

mkdir nodejs-graphql-app
cd nodejs-graphql-app
npm init -y
npm install express
    

Langkah 2: Buat file index.js

const express = require('express');
const app = express();
const PORT = 4000;

app.get('/', (req, res) => {
  res.send('Halo dari Express Server!');
});

app.listen(PORT, () => {
  console.log(`Server berjalan di http://localhost:${PORT}`);
});
    

Jalankan server dengan:

node index.js
    

Buka http://localhost:4000 di browser untuk melihat pesan.

4. Mengenal GraphQL dan Membuat API GraphQL

GraphQL adalah query language untuk API yang memungkinkan client meminta data secara spesifik.

Langkah 1: Instalasi Apollo Server dan GraphQL

npm install apollo-server graphql
    

Langkah 2: Buat file graphql-server.js

const { ApolloServer, gql } = require('apollo-server');

const typeDefs = gql`
  type Query {
    hello: String
  }
`;

const resolvers = {
  Query: {
    hello: () => 'Halo dari GraphQL API!',
  },
};

const server = new ApolloServer({ typeDefs, resolvers });

server.listen().then(({ url }) => {
  console.log(`Server GraphQL berjalan di ${url}`);
});
    

Jalankan server GraphQL:

node graphql-server.js
    

Buka URL yang muncul di terminal, coba query:

query {
  hello
}
    

5. Integrasi MongoDB dengan Mongoose

MongoDB adalah database NoSQL populer, dan Mongoose adalah ODM untuk memudahkan interaksi dengan MongoDB di NodeJS.

Langkah 1: Instalasi Mongoose

npm install mongoose
    

Langkah 2: Koneksi ke MongoDB dan definisi model

const mongoose = require('mongoose');

mongoose.connect('mongodb://localhost:27017/myapp', {
  useNewUrlParser: true,
  useUnifiedTopology: true,
});

const userSchema = new mongoose.Schema({
  name: String,
  email: String,
});

const User = mongoose.model('User', userSchema);

async function run() {
  const user = new User({ name: 'Andi', email: 'andi@example.com' });
  await user.save();
  console.log('User tersimpan:', user);
  mongoose.connection.close();
}

run();
    

6. Membuat Aplikasi Fullstack dengan NodeJS dan React

Kita akan membuat aplikasi sederhana yang menghubungkan backend NodeJS dengan frontend React.

Langkah 1: Buat project React

npx create-react-app client
cd client
npm start
    

Langkah 2: Contoh fetch data dari API Express

import React, { useEffect, useState } from 'react';

function App() {
  const [message, setMessage] = useState('');

  useEffect(() => {
    fetch('http://localhost:4000')
      .then(res => res.text())
      .then(data => setMessage(data))
      .catch(err => console.error(err));
  }, []);

  return (
    <div style={{ textAlign: 'center', marginTop: '50px' }}>
      <h1>Pesan dari Server:</h1>
      <p>{message}</p>
    </div>
  );
}

export default App;
    

Pastikan backend Express berjalan di port 4000 dan mengizinkan CORS jika diperlukan.

7. Source Code dan Channel Pembelajaran Lainnya

Berikut beberapa sumber dan channel yang dapat Anda gunakan untuk memperdalam pembelajaran NodeJS, GraphQL, dan MongoDB:

• Dokumentasi Resmi NodeJS - Referensi lengkap NodeJS.
• Dokumentasi Apollo GraphQL - Panduan lengkap GraphQL dengan Apollo.
• Dokumentasi Mongoose - Referensi ODM MongoDB untuk NodeJS.
• Traversy Media (YouTube) - Channel populer dengan tutorial NodeJS dan fullstack.
• The Net Ninja (YouTube) - Playlist tutorial GraphQL dan MongoDB.

Source Code Lengkap

Anda dapat mengunduh source code lengkap dari tutorial ini di: