From f71afc7313b55bd7ab35567f916b2654db9de641 Mon Sep 17 00:00:00 2001 From: Kapten boneng Date: Fri, 28 Feb 2025 19:52:48 +0700 Subject: [PATCH 1/4] Create server.js Backend (Node.js + Express.js) Kita akan menggunakan Coingecko API untuk mendapatkan harga real-time. Langkah 1: Install Dependensi npm install express axios cors dotenv Langkah 2: Buat Server di server.js --- server.js | 39 +++++++++++++++++++++++++++++++++++++++ 1 file changed, 39 insertions(+) create mode 100644 server.js diff --git a/server.js b/server.js new file mode 100644 index 0000000..7dca5b3 --- /dev/null +++ b/server.js @@ -0,0 +1,39 @@ +require("dotenv").config(); +const express = require("express"); +const axios = require("axios"); +const cors = require("cors"); + +const app = express(); +app.use(express.json()); +app.use(cors()); + +const COINGECKO_API = "https://api.coingecko.com/api/v3/simple/price"; + +// Mendapatkan nilai tukar Pi Coin ke mata uang lain +app.get("/convert/:currency", async (req, res) => { + try { + const currency = req.params.currency.toLowerCase(); + const response = await axios.get(`${COINGECKO_API}?ids=pi-network&vs_currencies=${currency}`); + res.json(response.data); + } catch (error) { + res.status(500).json({ error: "Gagal mendapatkan nilai tukar" }); + } +}); + +// Swap antara dua mata uang kripto +app.get("/swap/:from/:to", async (req, res) => { + try { + const { from, to } = req.params; + const response = await axios.get(`${COINGECKO_API}?ids=${from},${to}&vs_currencies=usd`); + + const fromPrice = response.data[from].usd; + const toPrice = response.data[to].usd; + + const swapRate = fromPrice / toPrice; + res.json({ rate: swapRate }); + } catch (error) { + res.status(500).json({ error: "Gagal mendapatkan nilai tukar" }); + } +}); + +app.listen(5000, () => console.log("Server berjalan di port 5000")); From c7fd3dc079f4b92920c70e093d2bf3d5937db862 Mon Sep 17 00:00:00 2001 From: Kapten boneng Date: Fri, 28 Feb 2025 19:55:43 +0700 Subject: [PATCH 2/4] Create ConvertPi.js Frontend (React.js) Kita buat antarmuka pengguna agar pengguna bisa melihat nilai tukar dan melakukan swap. Langkah 1: Install Axios npm install axios Langkah 2: Buat Komponen Konversi di ConvertPi.js --- ConvertPi.js | 34 ++++++++++++++++++++++++++++++++++ 1 file changed, 34 insertions(+) create mode 100644 ConvertPi.js diff --git a/ConvertPi.js b/ConvertPi.js new file mode 100644 index 0000000..11ab55c --- /dev/null +++ b/ConvertPi.js @@ -0,0 +1,34 @@ +import { useState } from "react"; +import axios from "axios"; + +const ConvertPi = () => { + const [currency, setCurrency] = useState("usd"); + const [amount, setAmount] = useState(1); + const [converted, setConverted] = useState(null); + + const convertPi = async () => { + try { + const response = await axios.get(`http://localhost:5000/convert/${currency}`); + setConverted(response.data["pi-network"][currency] * amount); + } catch (error) { + console.error("Error fetching exchange rate:", error); + } + }; + + return ( +
+

Konversi Pi Coin

+ setAmount(e.target.value)} /> + + + {converted !== null &&

Hasil: {converted} {currency.toUpperCase()}

} +
+ ); +}; + +export default ConvertPi; From ad770b449e18c78271324de3fca688e8507b471d Mon Sep 17 00:00:00 2001 From: Kapten boneng Date: Fri, 28 Feb 2025 19:56:52 +0700 Subject: [PATCH 3/4] Create SwapCrypto.js --- SwapCrypto.js | 40 ++++++++++++++++++++++++++++++++++++++++ 1 file changed, 40 insertions(+) create mode 100644 SwapCrypto.js diff --git a/SwapCrypto.js b/SwapCrypto.js new file mode 100644 index 0000000..ac4dd5f --- /dev/null +++ b/SwapCrypto.js @@ -0,0 +1,40 @@ +import { useState } from "react"; +import axios from "axios"; + +const SwapCrypto = () => { + const [from, setFrom] = useState("pi-network"); + const [to, setTo] = useState("btc"); + const [amount, setAmount] = useState(1); + const [swapResult, setSwapResult] = useState(null); + + const swapCrypto = async () => { + try { + const response = await axios.get(`http://localhost:5000/swap/${from}/${to}`); + setSwapResult(amount * response.data.rate); + } catch (error) { + console.error("Error fetching swap rate:", error); + } + }; + + return ( +
+

Swap Kripto

+ setAmount(e.target.value)} /> + + ➡ + + + {swapResult !== null &&

Hasil: {swapResult} {to.toUpperCase()}

} +
+ ); +}; + +export default SwapCrypto; yg From b78700cdf70b3aaf89ef6664ba2ab62e57a41b42 Mon Sep 17 00:00:00 2001 From: Kapten boneng Date: Fri, 28 Feb 2025 19:58:10 +0700 Subject: [PATCH 4/4] Create App.js MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Hasil Akhir ✅ PiBukaHub kini memiliki fitur: ✔ Konversi Pi Coin ke mata uang lain (USD, EUR, BTC, ETH, dll.). ✔ Swap antara dua mata uang kripto (Pi Coin, BTC, ETH). ✔ Nilai tukar real-time dengan API dari CoinGecko. --- App.js | 13 +++++++++++++ 1 file changed, 13 insertions(+) create mode 100644 App.js diff --git a/App.js b/App.js new file mode 100644 index 0000000..42814b2 --- /dev/null +++ b/App.js @@ -0,0 +1,13 @@ +import ConvertPi from "./ConvertPi"; +import SwapCrypto from "./SwapCrypto"; + +function App() { + return ( +
+ + +
+ ); +} + +export default App;