Pengkodean

Panduan Utama untuk Visualisasi Data di Aplikasi React Anda

Daftar Isi sembunyikan 1 Alasan Mengapa Anda Harus Membuat Bagan di Aplikasi React Menggunakan FusionCharts 1.1 Beragam jenis bagan...

Ditulis oleh Daniel Roncaglia · 14 min baca >
Visualisasi Data di Aplikasi React Anda

Jujur saja, membuat grafik di aplikasi React selalu rumit. Selain itu, pengembang perlu memperhatikan sejumlah faktor saat membuat bagan di React, seperti jenis bagan, desain, warna, latar belakang, nilai, kumpulan data, opsi, dan banyak lagi. Untungnya, perpustakaan pembuatan bagan JavaScript menyukainya FusionChart telah mempermudah pembuatan grafik dalam aplikasi React. Secara luas dianggap sebagai salah satu alat visualisasi data terbaik, FusionCharts adalah pustaka bagan JavaScript yang membantu pengembang web dan seluler menghasilkan bagan, pengukur, dan peta untuk mendukung dasbor. 

Dengan lebih dari 100 jenis bagan dan lebih dari 2,000 peta, FusionCharts tidak hanya membantu Anda membuat bagan interaktif untuk aplikasi web namun juga memungkinkan Anda menambahkan fitur pelaporan cerdas seperti ekspor bagan, menelusuri, menampilkan data secara selektif, serta menggulir dan memperbesar grafik Anda.

Mari cari tahu cara membuat grafik di aplikasi React menggunakan FusionCharts. Namun sebelum masuk ke seluk beluknya, mari cari tahu mengapa Anda harus membuat grafik di aplikasi React menggunakan FusionCharts.

Alasan Mengapa Anda Harus Membuat Grafik di Aplikasi React Menggunakan FusionCharts

Dengan bantuan FusionCharts, pengembang dapat dengan mudah membuat bagan yang indah di aplikasi React dan kemudian menambahkan kemampuan pelaporan tingkat lanjut seperti penelusuran tanpa batas dan ekspor bagan dalam hitungan menit. Berikut adalah beberapa alasan utama Anda harus membuat grafik di aplikasi React menggunakan FusionCharts.

Beragam jenis bagan

Visualisasi Data di Aplikasi React Anda

FusionCharts menawarkan kepada Anda banyak jenis bagan. Baik itu kolom sederhana atau diagram lingkaran, penjualan khusus, diagram pemasaran, atau diagram zoom dan gulir tingkat lanjut, FusionCharts mencakup semua kebutuhan pembuatan diagram Anda. 

Mudah digunakan

FusionCharts membuat proses pembuatan grafik di aplikasi React menjadi pengalaman yang mudah dan tidak merepotkan. Karena menggunakan XML/JSON sebagai antarmuka datanya, yang perlu Anda lakukan hanyalah mengubah data Anda menjadi XML/JSON menggunakan bahasa pemrograman atau GUI visual yang disediakan di FusionCharts untuk membuat grafik interaktif. 

Grafik animasi dan interaktif

Dengan FusionChart, Anda dapat dengan cepat dan mudah merender bagan animasi dengan banyak opsi interaktif untuk pengguna akhir. Selain itu, berbagai jenis bagan mendukung berbagai bentuk animasi dan interaktivitas, sehingga memberikan pengalaman unik bagi pengguna akhir. 

Customizable

Salah satu dari banyak hal yang Anda sukai tentang FusionCharts adalah hampir semuanya dapat disesuaikan. Dari keterangan hingga warna titik, Anda dapat menyesuaikan semuanya sesuai kebutuhan Anda. 

Data perusahaan yang dapat diakses

Karena FusionCharts adalah perangkat lunak visualisasi berbasis cloud, Anda dan pengembang Anda dapat mengakses laporan kapan saja dan di mana saja. 

Dengan bantuan pustaka pembuatan bagan JavaScript ini, pengembang dapat membuat bagan interaktif untuk aplikasi web dan perusahaan di React dengan cepat dan mudah. 

Sekarang kita tahu mengapa FusionCharts adalah salah satu alat visualisasi data terbaik dan mengapa ini adalah pilihan sempurna untuk membuat grafik di aplikasi React, mari cari tahu cara membuat grafik di aplikasi React menggunakan FusionCharts.

Langkah-Langkah Membuat Chart di Aplikasi React Menggunakan FusionCharts

Membuat grafik di aplikasi React menggunakan FusionCharts cukup mudah. Cukup ikuti langkah-langkah ini:

Langkah 1: Siapkan proyek React

Untuk membuat bagan di aplikasi React, Anda perlu menyiapkan proyek React terlebih dahulu. Salah satu cara terbaik untuk menyiapkan lingkungan adalah menggunakan aplikasi create-react.

Buka terminal dan masukkan kode ini:

npx buat-reaksi-aplikasi proyek-fusioncharts-pertama
cd proyek-fusioncharts-pertama
mulai npm

Langkah 2: Instal FusionCharts dan sertakan dependensi

Setelah Anda menyiapkan proyek React, instal modul react-fusioncharts dan fusioncharts menggunakan perintah berikut:

npm instal fusioncharts reaksi-fusioncharts –simpan

Setelah Anda menginstal komponen FusionCharts, Anda dapat mengganti kode di file App.js dengan kode yang ditunjukkan pada langkah-langkah di bawah ini untuk membuat bagan pertama Anda. Pastikan Anda mengimpor semua dependensi yang diperlukan untuk memulai. 

// Langkah 1 – Sertakan reaksi
impor Bereaksi dari “bereaksi”;

// Langkah 2 – Sertakan komponen react-fusioncharts
impor ReactFC dari “react-fusioncharts”;

// Langkah 3 – Sertakan perpustakaan fusioncharts
impor FusionCharts dari “fusioncharts”;

// Langkah 4 – Sertakan tipe grafik
impor Kolom2D dari “fusioncharts/fusioncharts.charts”;

// Langkah 5 – Sertakan tema sebagai perpaduan
impor FusionTheme dari “fusioncharts/themes/fusioncharts.theme.fusion”;

// Langkah 6 – Menambahkan bagan dan tema sebagai ketergantungan pada bagan fusi inti
ReactFC.fcRoot(FusionCharts, Column2D, FusionTheme);

Langkah 3: Siapkan data

Setelah Anda menginstal FusionCharts dan menyertakan dependensinya, Anda perlu menyiapkan data bagan. Pada contoh berikut, data cadangan bahan bakar fosil di berbagai negara ditampilkan dalam bentuk tabel:

NegaraJumlah cadangan bahan bakar fosil
Venezuela290K
Arab Saudi260K
Kanada 180K
Iran140K
Rusia115K
UEA100K
US30K
Tiongkok30K

FusionCharts menerima data dalam format JSON. Jadi data di atas akan mengambil bentuk di bawah ini.

// Mempersiapkan data grafik
data grafik konstan = [
  {
    label: “Venezuela”,
    nilai: “290”
  },
  {
    label: “Saudi”,
    nilai: “260”
  },
  {
    label: “Kanada”,
    nilai: “180”
  },
  {
    label: “Iran”,
    nilai: “140”
  },
  {
    label: “Rusia”,
    nilai: “115”
  },
  {
    label: “UEA”,
    nilai: “100”
  },
  {
    label: “AS”,
    nilai: “30”
  },
  {
    label: “Tiongkok”,
    nilai: “30”
  }
];

Langkah 4: Konfigurasikan bagan Anda

Sekarang data untuk bagan Anda sudah siap, mari kita mulai menata gaya, memposisikan, dan memberikan konteks pada bagan Anda. 

Tinggi dan lebar: Ukuran grafik ditentukan menggunakan atribut 'lebar' dan 'tinggi'.

Tipe: 'Jenis' menentukan jenis bagan yang akan Anda plot.

Bagan: Objek 'bagan' di bawah 'DataSource' berisi opsi konfigurasi bagan seperti tema dan format tampilan angka. 

// Buat objek JSON untuk menyimpan konfigurasi grafik
konfigurasi grafik const = {
  ketik: “kolom2d”, // Tipe grafik
  lebar: “700”, // Lebar grafik
  tinggi: “400”, // Ketinggian grafik
  Format data: “json”, // Tipe data
  sumber data: {
    // Konfigurasi Bagan
    bagan: {
      keterangan: “Negara dengan Cadangan Bahan Bakar Fosil Terbanyak [2017-18]”,    //Mengatur judul grafik
      subCaption: “Dalam MMbbl = Satu Juta barel”,             //Mengatur subteks grafik
      xAxisName: “Negara”,           //Tetapkan nama sumbu x
      yAxisName: “Cadangan (MMbbl)”,  //Tetapkan nama sumbu y
      nomor Akhiran: “K”,
      tema: “fusi”                 //Tetapkan tema bagan Anda
    },
    // Data Bagan – dari langkah 2
    data: grafikData
  }
};

Langkah 5: Render grafiknya

Sekarang, setelah semua bagian teka-teki terpecahkan, sekarang saatnya untuk menggabungkan semuanya dari atas dan membuat Bagan Sederhana. Berikut kode gabungan untuk merender Bagan Sederhana. 

// LANGKAH 1 – Sertakan Dependensi
// Sertakan reaksi
impor Bereaksi dari “bereaksi”;
impor ReactDOM dari “react-dom”;

// Sertakan komponen react-fusioncharts
impor ReactFC dari “react-fusioncharts”;

// Sertakan perpustakaan fusioncharts
impor FusionCharts dari “fusioncharts”;

// Sertakan tipe grafik
impor Kolom2D dari “fusioncharts/fusioncharts.charts”;

// Sertakan tema sebagai fusi
impor FusionTheme dari “fusioncharts/themes/fusioncharts.theme.fusion”;

// Menambahkan bagan dan tema sebagai ketergantungan pada bagan fusi inti
ReactFC.fcRoot(FusionCharts, Column2D, FusionTheme);

// LANGKAH 2 – Data Bagan
data grafik konstan = [
  {
    label: “Venezuela”,
    nilai: “290”
  },
  {
    label: “Saudi”,
    nilai: “260”
  },
  {
    label: “Kanada”,
    nilai: “180”
  },
  {
    label: “Iran”,
    nilai: “140”
  },
  {
    label: “Rusia”,
    nilai: “115”
  },
  {
    label: “UEA”,
    nilai: “100”
  },
  {
    label: “AS”,
    nilai: “30”
  },
  {
    label: “Tiongkok”,
    nilai: “30”
  }
];

// LANGKAH 3 – Membuat objek JSON untuk menyimpan konfigurasi grafik
konfigurasi grafik const = {
  ketik: “column2d”, // Tipe bagan
  lebar: “700”, // Lebar grafik
  tinggi: “400”, // Tinggi grafik
  format data: “json”, // Tipe data
  sumber data: {
    // Konfigurasi Bagan
    bagan: {
      //Mengatur judul grafik
      keterangan: “Negara dengan Cadangan Bahan Bakar Fosil Terbanyak [2017-18]”,
      //Mengatur subteks grafik
      subCaption: “Dalam MMbbl = Satu Juta barel”,
      //Tetapkan nama sumbu x
      xAxisName: “Negara”,
      //Tetapkan nama sumbu y
      yAxisName: “Cadangan (MMbbl)”,
      nomor Akhiran: “K”,
      //Tetapkan tema bagan Anda
      tema: “fusi”
    },
    // Data Bagan
    data: grafikData
  }
};

// LANGKAH 4 – Membuat elemen DOM untuk meneruskan komponen react-fusioncharts
kelas Aplikasi memperluas React.Component {
  memberikan() {
    kembali ( );
  }
}

ekspor Aplikasi default;

Setelah Anda merender grafik, Anda akan dapat melihat Grafik Sederhana, seperti yang ditunjukkan di bawah ini:

Visualisasi Data di Aplikasi React Anda

Sekarang setelah Anda mengetahui cara membuat grafik sederhana di aplikasi React menggunakan FusionCharts, mari cari tahu tentang beberapa fitur FusionCharts lainnya. Berikut beberapa demo grafik yang dibuat menggunakan FusionCharts di aplikasi React. 

Peta Dunia

Untuk merender bagan peta dunia, Anda perlu menggunakan kode gabungan berikut:

mengimpor Bereaksi, { Komponen } dari 'reaksi'

mengimpor FusionChart dari 'grafik fusi';

mengimpor Peta dari 'fusionchart/fusioncharts.maps';

mengimpor Dunia dari 'fusioncharts/maps/fusioncharts.dunia';

mengimpor ReaksiFC dari 'grafik reaksi-fusi';

mengimpor Tema Fusion dari 'fusioncharts/tema/fusioncharts.theme.fusion';

ReaksiFC.fcRoot(FusionChart, Peta, Dunia, Tema Fusion);

const konfigurasi bagan = {

  mengetik: 'dunia',

  width: 600,

  tinggi: 400,

  format data: 'json',

  sumber data: {

    "bagan": {

      "keterangan": “Rata-Rata Pertumbuhan Populasi Tahunan”,

      “subteks”: ” 1965-2018″,

      “akhiran angka”: "%",

      “sertakan label nilai”: "1",

      “labelsepchar”: ":",

      “entitasFillHoverColor”: “#FFF9C4”,

      "tema": "fusi"

    },

    “rentang warna”: {

      “nilai kecil”: "0",

      "kode": “#FFE0B2”,

      “gradien”: "1",

      "warna": [

        {

          “nilai kecil”: "0.5",

          “nilai maksimal”: "1.0",

          "warna": “#FFD74D”

        },

        {

          “nilai kecil”: "1.0",

          “nilai maksimal”: "2.0",

          "warna": “#FB8C00”

        },

        {

          “nilai kecil”: "2.0",

          “nilai maksimal”: "3.0",

          "warna": “#E65100”

        }

      ]

    },

    "data": [

      {

        "Indo": "SA",

        "nilai": “.82”,

        “tampilkanLabel”: "1"

      },

      {

        "Indo": “TA”,

        "nilai": "2.04",

        “tampilkanLabel”: "1"

      },

      {

        "Indo": "SEBAGAI",

        "nilai": "1.78",

        “tampilkanLabel”: "1"

      },

      {

        "Indo": “AF”,

        "nilai": “.40”,

        “tampilkanLabel”: "1"

      },

      {

        "Indo": “Uni Eropa”,

        "nilai": "2.58",

        “tampilkanLabel”: "1"

      },

      {

        "Indo": "AU",

        "nilai": "1.30",

        “tampilkanLabel”: "1"

      }

    ]

  },

};

ekspor kegagalan kelas Aplikasi Meluas Komponen {

  menghasilkan () {

    kembali <ReaksiFC {...konfigurasi bagan} />;

  }

}

Setelah Anda merender bagan peta dunia, Anda akan dapat melihat peta dunia seperti yang ditunjukkan di bawah ini:

Visualisasi Data di Aplikasi React Anda

Demo pengukur sederhana

Untuk merender bagan ukuran sederhana, periksa kode gabungan berikut:

impor Bereaksi, { Komponen } dari 'bereaksi';

impor FusionCharts dari 'fusioncharts';

impor Widget dari 'fusioncharts/fusioncharts.widgets';

impor ReactFC dari 'react-fusioncharts';

impor FusionTheme dari 'fusioncharts/themes/fusioncharts.theme.fusion';

ReactFC.fcRoot(FusionCharts, Widget, FusionTheme);

konfigurasi grafik const = {

  ketik: 'pengukur sudut',

  lebar: 600,

  tinggi: 400,

  format data: 'json',

  sumber data: {

    "bagan": {

      “caption”: “Skor Kepuasan Pelanggan AS untuk 2018”,

      “Batas Bawah”: “0”,

      “Batas Atas”: “100”,

      “Nilai pertunjukan”: “1”,

      “numberSuffix”: “%”,

      “tema” : “perpaduan”,

      “tunjukkan Tip Alat”: “0”

    },

    “Rentang Warna”: {

      "warna": [

        {

          “Nilai minimum”: “0”,

          “Nilai Maks”: “25”,

          “kode”: “#F2726F”

        },

        {

        “Nilai minimum”: “25”,

        “Nilai Maks”: “75”,

        “kode”: “#FFC533”

        },

        {

          “Nilai minimum”: “75”,

          “Nilai Maks”: “100”,

          “kode”: “#62B58F”

        }

      ]

    },

    “dial”: {

      "memanggil": [

        {

          "Nilai": "75"

        }

      ]

    }

  },

};

ekspor kelas default Aplikasi extends Komponen {

  memberikan () {

    kembali ;

  }

}

Setelah Anda merender grafiknya, Anda akan dapat melihat grafik ukuran sederhana, seperti yang ditunjukkan di bawah ini:

Visualisasi Data di Aplikasi React Anda

Demo pengikatan data

Untuk merendernya, Anda perlu menggunakan kode gabungan berikut:

impor Bereaksi, { Komponen } dari 'bereaksi';

impor FusionCharts dari 'fusioncharts';

impor Bagan dari 'fusioncharts/fusioncharts.charts';

impor ReactFC dari 'react-fusioncharts';

impor FusionTheme dari 'fusioncharts/themes/fusioncharts.theme.fusion';

ReactFC.fcRoot(FusionCharts, Bagan, FusionTheme);

konfigurasi grafik const = {

  ketik: 'kolom2d',

  lebar: 600,

  tinggi: 400,

  format data: 'json',

  sumber data: {

    "bagan": {

      “caption”: “Negara-Negara Dengan Bahan Bakar Fosil Terbanyak [2018-19]”,

      “subCaption”: “Dalam MMbbl = Satu Juta barel”,

      “xAxisName”: “Negara”,

      “yAxisName”: “Cadangan (MMbbl)”,

      “numberSuffix”: “K”,

      “tema” : “perpaduan”,

      “perbaruiAnimDuration”: “0.4”

    },

    "data": [

      {

        “label”: “Venezuela”,

        "Nilai": "290"

      },

      {

        “label”: “Saudi”,

        "Nilai": "260"

      },

      {

        “label”: “Kanada”,

        "Nilai": "180"

      },

      {

        “label”: “Iran”,

        "Nilai": "140"

      },

      {

        “label”: “Rusia”,

        "Nilai": "115"

      },

      {

        “label”: “UEA”,

        "Nilai": "100"

      },

      {

        “label”: “AS”,

        "Nilai": "30"

      },

      {

        “label”: “Tiongkok”,

        "Nilai": "30"

      }

    ]

  },

};

ekspor kelas default Aplikasi extends Komponen {

  konstruktor(alat peraga) {

    super(alat peraga);

    this.state = chartConfigs;

    this.updateData = ini.updateData.bind(ini);

  }

  // Fungsi ini menghasilkan angka acak.

  dapatkanNomorAcak() {

    var maks = 290, min = 30;

    return Math.round(((max – min) * Math.random()) + min);

  }

  // Penangan untuk tombol pembaruan.

  // Memperbarui nilai grafik secara acak.

  perbaharui data() {

    var prevDs = Object.assign({}, this.state.dataSource);

    sebelumnyaDs.data[2].nilai = ini.getRandomNumber();

    sebelumnyaDs.data[3].nilai = ini.getRandomNumber();

    ini.setState({

      Sumber data: sebelumnya,

    });

  }

  memberikan() {

    kembali (

      

        

         

           

             className='btn btn-garis besar-sekunder btn-sm'

             onClick={ini.updateData}

           >

             Ubah Data Bagan

           

        

      

    );

  }

}

Visualisasi Data di Aplikasi React Anda
Visualisasi Data di Aplikasi React Anda

Demo peristiwa siklus hidup

Untuk menampilkan peristiwa siklus hidup, periksa cuplikan kode berikut:

impor React, { Component } dari “react”;

impor FusionCharts dari “fusioncharts”;

impor Bagan dari “fusioncharts/fusioncharts.charts”;

impor ReactFC dari “react-fusioncharts”;

impor FusionTheme dari “fusioncharts/themes/fusioncharts.theme.fusion”;

ReactFC.fcRoot(FusionCharts, Bagan, FusionTheme);

konfigurasi grafik const = {

  ketik: “kolom2d”,

  lebar: 600,

  tinggi: 400,

  Format data: “json”,

  sumber data: {

    "bagan": {

      “caption”: “Negara-Negara Dengan Bahan Bakar Fosil Terbanyak [2018-19]”,

      “subCaption”: “Dalam MMbbl = Satu Juta barel”,

      “xAxisName”: “Negara”,

      “yAxisName”: “Cadangan (MMbbl)”,

      “numberSuffix”: “K”,

      “tema”: “perpaduan”

    },

    "data": [

      {

        “label”: “Venezuela”,

        "Nilai": "290"

      },

      {

        “label”: “Saudi”,

        "Nilai": "260"

      },

      {

        “label”: “Kanada”,

        "Nilai": "180"

      },

      {

        “label”: “Iran”,

        "Nilai": "140"

      },

      {

        “label”: “Rusia”,

        "Nilai": "115"

      },

      {

        “label”: “UEA”,

        "Nilai": "100"

      },

      {

        “label”: “AS”,

        "Nilai": "30"

      },

      {

        “label”: “Tiongkok”,

        "Nilai": "30"

      }

    ]

  }

};

ekspor kelas default Aplikasi extends Komponen {

  konstruktor(alat peraga) {

    super(alat peraga);

    ini.status = {

      pesan:

        “Anda akan melihat pemberitahuan di sini untuk peristiwa siklus hidup bagan”

    };

    this.beforeDataUpdate = ini.beforeDataUpdate.bind(ini);

    this.dataUpdated = ini.dataUpdated.bind(ini);

    this.drawComplete = ini.drawComplete.bind(ini);

    this.renderComplete = ini.renderComplete.bind(ini);

  }

  // Pengendali panggilan balik untuk acara 'sebelum Pembaruan Data'.

  sebelumPembaruanData() {

    this.state.message = [ Status: , ” sebelumPembaruan Data”];

  }

  // Pengendali panggilan balik untuk acara 'dataUpdated'.

  dataDiperbarui() {

    biarkan newMessage = this.state.message.slice();

    newMessage.push(“, dataDiperbarui”);

    ini.setState({

      pesan: Pesan baru

    });

  }

  // Pengendali panggilan balik untuk acara 'drawComplete'.

  seriLengkap() {

    biarkan newMessage = this.state.message.slice();

    newMessage.push(“, drawComplete”);

    ini.setState({

      pesan: Pesan baru

    });

  }

  // Pengendali panggilan balik untuk acara 'renderComplete'.

  renderComplete() {

    biarkan newMessage = this.state.message.slice();

    newMessage.push(“, renderComplete”);

    ini.setState({

      pesan: Pesan baru

    });

  }

  memberikan() {

    kembali (

      

        <ReactFC

          {…chartConfig}

          fcEvent-beforeDataUpdate={ini.beforeDataUpdate}

          fcEvent-dataUpdated={ini.dataDiperbarui}

          fcEvent-drawComplete={ini.drawComplete}

          fcEvent-renderComplete={ini.renderComplete}

        />

        

          {ini.status.pesan}

        

      

    );

  }

}

Visualisasi Data di Aplikasi React Anda
Visualisasi Data di Aplikasi React Anda

Takeaway Terakhir

Apakah Anda ingin membuat diagram sederhana atau diagram lingkaran atau diagram zoom dan gulir tingkat lanjut di aplikasi React, gunakan FusionChart untuk membuatnya akan menjadi pilihan terbaik Anda. Secara luas dianggap sebagai salah satu alat visualisasi data terbaik, FusionCharts memanfaatkan JavaScript (HTML5) dan Flash untuk membuat visualisasi data menakjubkan yang tak tertandingi oleh komponen sisi server konvensional. Karena pustaka pembuatan bagan JavaScript ini berfungsi dengan data XML dan JSON, pustaka ini dapat diintegrasikan dengan database dan teknologi sisi server apa pun seperti ASP, PHP, dan JSP, dan lain-lain. Meskipun membuat grafik dalam aplikasi React menggunakan FusionCharts mungkin tampak seperti tugas yang sulit, prosesnya cukup sederhana dan mudah.

Dengan mengikuti langkah-langkah di atas, Anda dapat dengan cepat dan mudah membuat grafik yang indah di aplikasi React menggunakan FusionCharts.

Paket FusionCharts React memberi Anda yang terbaik dari kedua dunia. Anda dapat menggunakan kekuatan JavaScript untuk menyematkan dan memanipulasi grafik sambil memanfaatkan sepenuhnya mesin pembuat grafik FusionCharts yang canggih.

FusionCharts adalah perpustakaan yang sangat sederhana untuk digunakan dan memiliki dukungan untuk semua teknologi terbaru seperti Angular, Vue, dan React. Dokumentasi React menunjukkan komponen-komponen yang tersedia secara default, namun mungkin ada baiknya Anda memeriksanya Dokumentasi FusionCharts untuk melihat di mana Anda dapat menyesuaikan perpustakaan untuk proyek Anda berikutnya.

source_code_example-removebg-pratinjau

Untuk Apa MongoDB Digunakan?

Ashok Kumar in Pengkodean
  ·   3 min baca

Tinggalkan Balasan

Translate »