ws

HTTP Header and Body Capture

Syarat Umum

Memiliki akun requestcatcher.com atau webhook.site atau pipedream.com
Coba melakukan method post dengan Postman dengan header token
Lihat hasilnya di web, terlihat ada token disana
Setting Repo untuk Github Pages
Ingat selalu inspect console untuk melihat error javascript, jika terjadi error CORS Police, maka ganti ke pipedream.com

Setting Endpoint di Pipedream

Pipedream merupakan endpoint testing API, untuk membaca header dan body(raw message) dari http client yang kita request. Http client request bisa dari postman maupun kode javascript kita. Pada langkah ini kita akan melakukan:

Membuat Akun pipedream
Testing Endpoint menggunakan Postman
Membangun HTML Form dengan Tailwind CSS Component
Membuat file js untuk mengirimkan data form ke endpoint pipedream
Melihat hasilnya di dashboard pipedream
Production mode menggunakan github pages

Disini kita akan melakukan request dengan menggunakan javascript fetch.

Membuat Akun

Kunjungi pipedream.com , terus klik Sign Up Free!
Klik sign up with github
Authorize
Pilih Nama Workspace yang tersedia, ditandai dengan tanda centang hijau, kemudian klik Continue
Opsional membagikan link workspace seperti ini, https://pipedream.com/@bukupedia/invite?token=4adefabe60301ac06b000ee620533e73 . Lanjutkan dengan menekan tombol Skip.
Klik New HTTP / Webhook REquest
Pilih Event Data : Raw REquest, HTTP Response : 200 OK . Kemudian klik Save and Continue
Akan keluar unique URL untuk endpoint : https://eol0j1lmdtbpzp.m.pipedream.net . Kemudian kita coba dengan postman dahulu

Melakukan Testing Endpoint

Disini kita akan membuka Postman untuk melakukan testing endpoint dahulu, dengan contoh :

Method POST Headers kita isi dengan Key : Login , Value : Bebas. Pada bagian body isi dengan data json .Kemudian klik Send
Dashboard Pipedream akan muncul 1 New Event, kita buka event tersebut.
Disana akan terlihat pada bagian headers ada Login yang kita masukkan dan pada bagian body ada json yang kita masukkan ke postman. Artinya endpoint dan http request bekerja dengan baik untuk menangkap header dan body yang dikirimkan.

Simpan kode javascript yang dibuat oleh postman dengan menekan tanda </> dibagian pojok kanan atas, kemudian pilih javascipt - Fetch

var myHeaders = new Headers();
myHeaders.append("Login", "rollygantengsekali");
myHeaders.append("Content-Type", "application/json");

var raw = JSON.stringify({
  "uuid": "sadsadsad",
  "phonenumber": "6281312000300",
  "delay": 1
});

var requestOptions = {
  method: 'POST',
  headers: myHeaders,
  body: raw,
  redirect: 'follow'
};

fetch("https://eol0j1lmdtbpzp.m.pipedream.net", requestOptions)
  .then(response => response.text())
  .then(result => console.log(result))
  .catch(error => console.log('error', error));

Membuat Form Pendaftaran

Kita cari dulu di google dengan keyword sign up form tailwind component free. Contoh : https://tailwindcomponents.com/component/simple-registersign-up-form/landing
Kita unduh kodenya untuk kita pakai ditaruh di repo kita dan coba kita live server dari vscode.
Cari element dari input dan buttonnya kemudian kita beri id
Buat file js kita masukkan dahulu javascript yang didapatkan dari postman ke js tersebut, kemudian panggil pada bagian bawah sebelum tag penutup body
```
<script src="croot.js"></script>
```

Membuat Fungsi Javascript

Pada bagian ini kita akan membuat fungsi-fungsi di javascript untuk mengirimkan data dari html menuju endpoint pipedream yang kita buat. Kenapa harus dibuat fungsi? agar kode program javascript tetap rapih dan mudah terbaca.

Membuat fungsi PostSignUp() yang berfungsi untuk melakukan Post Form Data Sign Up. Fungsi ini diambil dari postman, yang kita modif data inputan dari id form html.

 function PostSignUp(namadepan,namabelakang,email,password){
       var myHeaders = new Headers();
       myHeaders.append("Login", "rollygantengsekali");
       myHeaders.append("Content-Type", "application/json");

       var raw = JSON.stringify({
           "namadepan": namadepan,
           "namabelakang": namabelakang,
           "email": email,
           "password": password
       });

       var requestOptions = {
           method: 'POST',
           headers: myHeaders,
           body: raw,
           redirect: 'follow'
       };

       fetch("https://eol0j1lmdtbpzp.m.pipedream.net", requestOptions)
           .then(response => response.text())
           .then(result => console.log(result))
           .catch(error => console.log('error', error));
 }

Membuat fungsi PushButton() untuk melakukan aksi setelah menekan tombol, pada bagian html button tambahkan atribut onclick.

 function PushButton(){
       namadepan=document.getElementById("namadepan").value;
       namabelakang=document.getElementById("namabelakang").value;
       email=document.getElementById("email").value;
       password=document.getElementById("password").value;
       PostSignUp(namadepan,namabelakang,email,password);
 }

Kita test dengan klik kanan Open with live server, kita isi form nya sambil inspect console lalu klik button yang kita buat. Terlihat dari console data success dikirim. kemudian kita lihat pada dashboard pipedream data sudah diterima dengan baik oleh endpoint baik itu header maupun body.

Tambahan Estetika UX

Pasti merasa aneh bukan setelah menekan tombol, tapi tampilan tidak berubah sama sekali seolah tidak terjadi apa-apa. Disini kita akan coba untuk mengubah tampilan jika tombol di klik, maka form akan disembunyikan dan menampilkan data yang diterima dari endpoint pipedream. Oke kita cukup menambahkan satu fungsi lagi dan memodifikasi fungsi PostSignUp() khususnya dibagian result then fetch nya. Langkahnya sebagai berikut :

Pertama kita cari dulu element yang akan kita hidden, bisa menggunakan inspect elemetns untuk identifikasinya, kemudian kita kasih id
Kita coba script style display pada bagian console dengan menggunakan id yang sudah kita buat, style display mana yang bisa menghilangkan formsignup apakah block atau none. Terlihat di gambar none bisa mengilangkan element formsignup, kita mungkin akan pakai script ini di fungsi kita yang akan datang. Dari sini kita paham bagaimana menyembunyikan element dengan js.
```
  document.getElementById("formsignup").style.display = 'none';
  document.getElementById("formsignup").style.display = 'block';
```
Tambahkan fungsi GetResponse() di file js kita yang sudah dibuat sebelumnya, dan melakukan modifikasi dari fungsi PostSignUp pada bagian then result.
```
  function GetResponse(result){
        document.getElementById("formsignup").innerHTML = result;
  }
```
Kita ujicoba dengan mengisi form dan klik tombol submit, maka form kita sudah berhasil.
Setting pages pilih deployment from branch pilih main. Maka form kita bisa diakses dari menjadi github pages. Alamat github pages biasanya sub domain dari github.io. Kita juga bisa menggunakan custom domain kita sendiri, Contoh : https://universitas.bukupedia.co.id/ws/Chapter02/A/NPM/

Kerjakan

Buatlah form sign up yang melakukan POST ke pipedream.com ketika klik button.
Buat Folder NPM didalam Chapter02/A yang berisi 2 file minimal js dan html, dengan nama index.html, croot.js. Boleh menambahkan file css atau favicon.
file croot.js minimal berisi 3 fungsi, tidak boleh ada kode js diluar dari fungsi, semua harus masuk ke dalam fungsi js.
Form dibangun dengan menggunakan CSS tailwind, desain html tidak boleh sama, harus berbeda satu sama lain.
Pull Request dengan nama 2-Kelas-NPM-NAMA di folder Chapter02/A/NPM, dengan deskripsi disertakan di bawah ini.
Sertakan skrinsutan dari live server aplikasi dan pipedream.com
Sertakan link Github Pages Sudah jalan di repo masing-masing. kode program maksimal nilai 60 poin.
Sertakan skinsutan juga sertifikat 4 sertifikasi berikut, masing-masing bernilai 10 poin:
- https://www.mygreatlearning.com/academy/learn-for-free/courses/go-programming-language
- https://www.mindluster.com/certificate/3394
- https://www.codecademy.com/learn/learn-go
- https://www.coursera.org/specializations/google-golang

This site is open source. Improve this page.