[TUTORIAL] Cara menghubungkan (Integrasi) Flutter dan Node.js dengan API

byInzaghi's Blog Admin -
0

Assalamu‘alaikum wr. wb.

Hello guys! Kali ini kita akan melakukan menghubungkan (Integrasi) Flutter dan Node JS dengan menggunakan Web API.

Cara menghubungkan (Integrasi) Flutter dan Node.js dengan API

Sumber Referensi : Blog.Logrocket.com, Geeksforgeeks.org, Medium.com (@vinayak_amirtharaj), dan Dbestech.com

Aplikasi Web Flutter dapat dijalankan pada server web apa pun. Jadi, mengapa Anda ingin meng-host aplikasi web Flutter Anda pada server Node.js? Nah, sejujurnya, karena banyak alasan yang sama ketika Anda memilih Node.js untuk aplikasi web dan API Anda yang lain: itu sangat baik dalam melayani volume besar permintaan sederhana, Anda dapat mengode front end dan back end Anda dalam JavaScript, dan sebagainya.

Anda mungkin sudah memiliki API Node.js yang melayani data untuk aplikasi Flutter iOS atau Android Anda. Mengkompilasi aplikasi Flutter Anda sebagai aplikasi web dan meng-hostingnya pada server Node.js yang sudah ada mungkin menjadi perluasan logis dari solusi Anda saat ini, tanpa perlu menambahkan biaya hosting tambahan ke dalam persamaan.

Tapi sebelum memulai, inilah Struktur Folder yang dilakukan untuk membuat Project ini :

📁 flutter_node_project
├── 📁 flutter_node
   ├── 📁 lib
      ├── main.dart
   ├── .gitignore
   ├── .metadata
   ├── analysis_options.yaml
   ├── nama_project_aplikasi.iml
   ├── pubspec.lock
   ├── pubspec.yaml
   ├── README.md
├── 📁 node_server
   ├── 📁 node_modules
   ├── .gitignore
   ├── server.js
   ├── package.json
   ├── package-lock.json

A. Persiapan Project Flutter

Berikut ini adalah beberapa Cara untuk Persiapan Project Flutter terlebih dahulu.

1. Membuat dan Setup Project

Pertama, Buatlah Project Flutter terlebih dahulu dengan mengetik :

flutter create flutter_node

Setelah itu, Setting pada Dependency Flutter pubspec.yaml di berikut ini :

dependencies:
  flutter:
    sdk: flutter
  http: ^0.13.3

2. Membuat Request

Kemudian, buatlah Program Dart Flutter yang berada di Program Utama (lib/main.dart) :

import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;

void main() {
  runApp(MyApp());
  fetchData(); // Panggil fetchData di sini jika perlu
}

void fetchData() async {
  final response = await http.get(Uri.parse('https://httpbin.org/get'));
  if (response.statusCode == 200) {
    // Proses data dari response.body
    print(response.body);
  } else {
    // Tangani kesalahan
    print('Error: ${response.statusCode}');
  }
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  Future<List<dynamic>> fetchItems() async {
    try {
      final response = await http.get(Uri.parse('http://localhost:3000/items'));

      if (response.statusCode == 200) {
        return json.decode(response.body);
      } else {
        throw Exception('Failed to load items: ${response.statusCode}');
      }
    } catch (error) {
      throw Exception('Failed to load items: $error');
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter CRUD Example'),
      ),
      body: FutureBuilder<List<dynamic>>(
        future: fetchItems(),
        builder: (context, snapshot) {
          if (snapshot.connectionState == ConnectionState.waiting) {
            return CircularProgressIndicator();
          } else if (snapshot.hasError) {
            return Text('Error: ${snapshot.error}');
          } else {
            List<dynamic> items = snapshot.data!;
            return ListView.builder(
              itemCount: items.length,
              itemBuilder: (context, index) {
                return ListTile(
                  title: Text(items[index]['name']),
                );
              },
            );
          }
        },
      ),
    );
  }
}

2. Melukakan API Testing

Untuk mendapatkan Link/URL API, bukalah Situs HTTPbin di sini (Httpbin.org).

Kemudian, pilihlah "HTTP Methods" dan pilihlah "GET". Setelah itu, klik Tombol "Execute".

Setelah itu, Salinlah (Copy) pada Request URL seperti pada Gambar di bawah ini :

https://httpbin.org/get



B. Persiapan Server Node.js

Jika sudah di atas, mari kita buat juga Project untuk Node.js. Pertama, ketiklah :

mkdir node_server
cd node_Server

Setelah itu, ketiklah Perintah ini lagi untuk membuat Project Node.js :

npm init -y

Dan juga Install Express dengan mengetik :

npm install express

Dan inilah hasilnya :

Jangan lupa juga untuk menginstal Axios dengan mengetik :

npm install axios

Kemudian, buatlah Program JavaScript untuk server.js :

const express = require("express");
const http = require("http");
const axios = require("axios");

const app = express();

// Bagian Express
app.get("/api/data", (req, res) => {
  // Kirim data sebagai respons
  res.json({ message: "Hello from the API!" });
});

const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
  console.log(`Server is running on port ${PORT}`);
});

// Bagian HTTP Request
const options = {
  hostname: "example.com",
  port: 80,
  path: "/api/data",
  method: "GET",
};

const req = http.request(options, (res) => {
  let data = "";

  res.on("data", (chunk) => {
    data += chunk;
  });

  res.on("end", () => {
    // Proses data dari 'data'
    console.log(data);
  });
});

req.on("error", (error) => {
  console.error(`Error: ${error.message}`);
});

req.end();

// Bagian Axios
axios
  .get("https://httpbin.org/get")
  .then((response) => {
    // Proses data dari response.data
    console.log(response.data);
  })
  .catch((error) => {
    // Tangani kesalahan
    console.error(`Error: ${error.message}`);
  });

// Menambahkan CORS (Cross-Origin Resource Sharing)
app.use((req, res, next) => {
  res.setHeader(
    "Access-Control-Allow-Origin",
    "http://localhost:your_flutter_port"
  );
  res.setHeader(
    "Access-Control-Allow-Methods",
    "GET, POST, OPTIONS, PUT, PATCH, DELETE"
  );
  res.setHeader(
    "Access-Control-Allow-Headers",
    "X-Requested-With,content-type"
  );
  res.setHeader("Access-Control-Allow-Credentials", true);
  next();
});

Kemudian, ketiklah Perintah berikut ini untuk menjalankan Server di Node.js :

node server.js

Maka, akan seperti ini Pesan yang muncul :

Server is running on port 3000
{
  args: {},
  headers: {
    Accept: 'application/json, text/plain, */*',
    'Accept-Encoding': 'gzip, compress, deflate, br',
    Host: 'httpbin.org',
    'User-Agent': 'axios/1.6.2',
    'X-Amzn-Trace-Id': 'Root=1-6581551e-4611f9d74f29060246e196cc'
  },
  origin: '180.243.10.50',
  url: 'https://httpbin.org/get'
}
Error: read ECONNRESET
PS C:\Programming\NodeJS\flutter_node_project\node_server> node server.js
Server is running on port 3000
{
  args: {},
  headers: {
    Accept: 'application/json, text/plain, */*',
    'Accept-Encoding': 'gzip, compress, deflate, br',
    Host: 'httpbin.org',
    'User-Agent': 'axios/1.6.2',
    'X-Amzn-Trace-Id': 'Root=1-658157b3-5524d73500f069d272188f71'
  },
  origin: '180.243.10.50',
  url: 'https://httpbin.org/get'
}
Error: read ECONNRESET








Itulah Tutorial Cara menghubungkan (Integrasi) Flutter dan Node.js dengan API. Mohon maaf apabila ada sedikit kekurangan dan kesalahan apapun.

Terima Kasih 😄😘👌👍 :)

Wassalamu‘alaikum wr. wb.

Tags

Post a Comment

Previous Post Next Post