Showing posts with label API. Show all posts
Showing posts with label API. Show all posts

Wednesday, 7 August 2019

Menggunakan Wikipedia API Dengan P5 JS dan Bootstrap

Pada postingan kali ini saya akan sharing menggunakan API wikipedia dengan P5.JS dan Bootstrap.

pertama-tama kita buat folder dengan nama wiki-api dan didalamnya buat file index.html seperti berikut :

<!DOCTYPE html>
<html>
<head>
    <title>Wikipedia API</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <script src="p5.js"></script>
    <script src="p5.dom.min.js"></script>
    <script src="p5.sound.min.js"></script>
    <script src="script.js"></script>
</head>
<body>

  <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <div class="container">
      <a class="navbar-brand" href="">Wikipedia - API</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
    </div>
  </nav>
  

  <div class="container mt-3">
    <div class="row justify-content-center">
      <div class="col-md-8">
        <div class="input-group mb-3">
          <input type="text" id="userinput" class="form-control" placeholder="Search..." aria-describedby="button-addon2">
          <div class="input-group-append">
            <button class="btn btn-primary ml-2" type="button" id="btn-search">Search <i class="fa fa-search"></i></button>
          </div>
        </div> 
      </div>
    </div>
    <hr>

    <div class="row"> 
      <h2 id="wiki-header"></h2>
      <ul class="list-group" style="width: 100%;" id="wiki-list">
        
      </ul>       

    </div>
  </div>

  <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.js"></script>
</body>
</html>


untuk P5.JS bisa di download DISINI setelah itu buat file script.js dan tuliskan source code seperti berikut :

let userInput;
let searchUrl = "https://en.wikipedia.org/w/api.php?action=opensearch&format=json&search=";
// let contentUrl = 'https://en.wikipedia.org/w/api.php?action=query&prop=revisions&rvprop=content&format=json&titles=';
// let counter = 0;

function setup() {
  noCanvas();
  userInput = select('#userinput');
  userInput.changed(startSearch);

  function startSearch(){
    counter = 0;
    goWiki(userInput.value());
  }

  function goWiki(term){
      let url  = searchUrl + term;
      loadJSON(url, gotData, 'jsonp');
  }

  function gotData(ouput){
    console.log(ouput[3][1]);

    let results = ouput[1];

    if (results.length > 0){
      $('#wiki-list').html('');
      $('#wiki-header').html('');
      
      $('#wiki-header').append(userInput.value() + " results");

      $.each(results, function(i, data){
        $('#wiki-list').append(`
            <li class="list-group-item d-flex justify-content-between align-items-center form-control">
            `+ data +`
              <a href="`+ ouput[3][i] +`" target="_blank">
                <span class="badge badge-primary badge-pill">Lihat Detail</span>
              </a>
            </li> 
        `);
      })
    }else{
      $('#wiki-header').append("No results found for " + userInput.value());
    }
    userInput.value("");
  }
}


Jika sudah coba di jalankan, maka hasilnya akan seperti berikut :







jika kita langsung mengakses url API-nya tampilannya seperti berikut :





sekian postingan kali ini semoga bermanfaat :D


Monday, 14 January 2019

Mengenal RestfulAPI

Apa itu API?
API(Application Programming Interface) merupakan sekumpulan (method, fungsi atau URL endpoint) yang digunakan untuk mengembangkan aplikasi lebih dari satu platform yang berbeda. Lalu apa kegunaan API ini? dengan menggunakan API maka kita dapat mengunakan sumber daya dari aplikasi lain tanpa perlu mengetahui bagaimana aplikasi itu dibuat. 

REST (REpresentational State Transfer) merupakan standar arsitektur komunikasi berbasis web yang sering diterapkan dalam pengembangan layanan berbasis web. Umumnya menggunakan HTTP (Hypertext Transfer Protocol) sebagai protocol untuk komunikasi data. REST pertama kali diperkenalkan oleh Roy Fielding pada tahun 2000.

RESTful API.RESTful API / REST API merupakan implementasi dari API (Application Programming Interface).


 Berikut ilustrasi Rest API :



Terdapat 4 komponen utama dalam ResfulAPI, yaitu :

URL Design
RESTful API diakses menggunakan protokol HTTP. Penamaan dan struktur URL yang konsisten akan menghasilkan API yang baik dan mudah untuk dimengerti developer.  Contoh penamaan URL / endpoint yang baik adalah seperti berikut :
- /Produks
- /Produks/BajuAnak

HTTP Verbs
Setiap request yang dilakukan terdapat metode yang dipakai agar server mengerti apa yang sedang di request client, diantaranya yang umum dipakai adalah : 

GET
GET adalah metode HTTP Request yang paling simpel, metode ini digunakan untuk membaca atau mendapatkan data dari sumber.
Contoh :
GET /users : Mengembalikan daftar user
GET /users/1234 : Mengembalikan data user dengan ID 1234

POST
POST adalah metode HTTP Request yang digunakan untuk membuat / menambahkan data baru dengan menyisipkan data dalam body saat request dilakukan.
Contoh :
POST /Produk : Membuat data produk baru

PUT
PUT adalah metode HTTP Request yang biasanya digunakan untuk melakukan update data. 
Contoh :
PUT /Produk/BJ001 : Meng-update data produk dengan kode produk BJ001

DELETE
DELETE adalah metode HTTP Request yang digunakan untuk menghapus suatu data.
Contoh :
DELETE
/Produk/BJ001 : Menghapus data produk dengan kode produk BJ001

Response Status
HTTP response code adalah kode standarisasi dalam menginformasikan hasil request kepada client. 
 
berikut ini adalah response code yang biasa digunakan pada REST : 200 OK : Response code ini menandakan bahwa request yang dilakukan berhasil.

201 Created
Response code ini menandakan bahwa request yang dilakukan berhasil dan data telah dibuat. Kode ini digunakan untuk mengkonfirmasi berhasilnya request PUT atau POST.


400 Bad Request
Response code ini menandakan bahwa request yang dibuat salah atau data yang dikirim tidak ada.


401 Unauthorized
Response code ini menandakan bahwa request yang dibuat membutuhkan authentication sebelum mengakses resource.


404 Not Found
Response Code ini menandakan bahwa resource yang di dipanggil tidak ditemukan.


405 Method Not Allowed
Response code ini menandakan bahwa request endpoint ada tetapi metode HTTP yang digunakan tidak diizinkan.


409 Conflict
Response code ini menandakan bahwa request yang dibuat terdapat duplikasi, biasanya informasi yang dikirim sudah ada sebelumnya.


500 Internal Server Error
Response code ini menandakan bahwa request yang dilakukan terdapat kesalahan pada sisi server atau resource.

 
Response Format
Setiap request yang dilakukan client akan menerima data response dari server, response tersebut biasanya berupa data XML ataupun JSON.  
 
Sekian sedikit penjelasan singkat tentang RestFul API, semoga bermanfaat :D
 


Belajar SAP ABAP RAP

  Belajar SAP ABAP RAP: Pengenalan dan Konsep Dasar Restful ABAP Programming Model Kalau kamu seorang ABAPer yang mulai terjun ke dunia SAP...