ws

Pengenalan API dan Tools

Disini akan digunakan beberapa tools

git scm

Download git-scm dari https://git-scm.com/downloads

Get SSH Key

to get ssh key in your computer, and put in your github or gitlab ssh key setting.

cat ~/.ssh/id_rsa.pub

if there is no key appears, plese generate the key also set global config of git in next section and please add the public key to your github profile.

Generate RSA Key

Just One time for first instalation of git scm,

ssh-keygen -t rsa -b 4096 -C "your_email@example.com"

Set config global

Just One time for first instalation of git scm,

$ git config --global user.name "John Doe"
$ git config --global user.email johndoe@example.com

Postman

1. Install postman. Pilih salah satu dari sini https://github.com/public-apis/public-apis.
2. lakukan request ke public api dengan postman contoh : https://alexwohlbruck.github.io/cat-facts/docs/
3. Pilih menu </> atau code pilih javascript fetch

Tailwind

Untuk membuat antarmuka menggunakan komponen tailwind contoh :https://tailwindcomponents.com/component/multi-line-table

lakukan download. fork repo ini. kemudian open with code. taruh file htmlnya di folder di dalam folder site

fork repo

lakukan clone repo yang di fork

install plugin live server

Menghubungkan situs dengan Public API

1. Buat folder NPM di dalam folder site
2. Buat template tailwindcss simpan sebagai index.html
3. buat file js dengan nama croot.js panggil di bawah dengan script, sebelum tag penutup body

    <script src="./croot.js"></script>
   

4. Buka dengan live server, inspect lihat di console.

   

5. Isi dari script croot.js contoh :

    var myHeaders = new Headers();
    myHeaders.append("Cookie", "connect.sid=s%3AMsnp_KW3uPWTf6gN4GDNl7XAoOShdRL2.VK05aaDbN1FeG%2BScGHtOuxENv5s2ABoZZzLpqN%2FUbZs");
   
    var requestOptions = {
      method: 'GET',
      headers: myHeaders,
      redirect: 'follow'
    };
   
    hasil=""
   
    fetch("https://cat-fact.herokuapp.com/facts", requestOptions)
      .then(response => response.text())
      .then(result => tampilkan(result))
      .catch(error => console.log('error', error));
   
    function tampilkan(result){
      console.log(result);
      hasil=JSON.parse(result);
   
      //document.getElementById("nama").innerHTML(result);
    }
   

   akan terlihat variabel hasil di console log

   

   untuk akses variabel global hasil kita pakai console log

   

   kemudian tambahkan ramuan looping untuk mengeluarkan semuanya

   

Kerjakan

1. Buat folder NPM di dalam folder site di dalam folder chapter01. Pilih Public API
2. Ada dua file yang dibuat yaitu dengan nama index.html dan croot.js. Boleh menambahkan file css
3. Buat html bisa membaca semua data dari API, pastikan setiap orang berbeda, tidak boleh sama API nya.
4. Pull Request Dengan Subjek : 1-KELAS-NPM-NAMA ,
5. Isi Deskripsi : Tambahkan skrinsut javascript certificate.
   • Take course from mygreatlearning or from LinkedIn
   • Take Javascript Learning from Google for next class meeting.
6. Pastikan akses API hanya menggunakan protokol https

This site is open source. Improve this page.