Halo teman-teman apa kabar Welcome back to my channel di video kali ini kita akan belajar terkait dengan swager Apa itu swager swager adalah dokumentasi untuk race Fi nanti kita akan pelajari mengenai swager ini lebih dalam di video Kali ini apa aja agenda kita kita akan berkenalan dengan swager kemudian fungsi swager penggunaan swager dengan Express JS kemudian kita coba E terapkan pada sebuah Project ya Nah Apa itu swager swager adalah sebuah Framework open source yang memungkinkan developer perangkat lunak untuk mendesain membangun dan mendokumentasikan Fi dengan cara yang terstruktur dan terorganisir Fi adalah singkatan dari application programming interface yaitu sebuah antuka yangubungkan aplikasi dengan aplikasi lainnya dengan menggunakan swager developer dapat menghasilkan dokumen FPI yang mudah dibaca diuji dan diintegrasikan Nah teman-teman kalau misalkan ingin membaca lebih jauh terkait dengan swager silakan kunjungi swager.io Nah nanti halaman eh website resminya kurang lebih seperti ini Ini teman-teman bisa baca-baca lebih dalam inii ada kenapa kita menggunakan swager kemudian ada untuk petunjuk testingnya kemudian tools-nya dan juga ada yang e pronya juga ya silakan teman-teman nanti bisa pelajari fungsi swager fungsi swager digunakan untuk mendesain membangun dan mendokumentasikan FPI dengan cara yang terstruktur dan terorganisir membuat dokumen FPI yang interaktif dan mudah dibaca baik oleh manusia maupun mesin kemudian menghasilkan kode server dan K untuk berbagai bahasa dari spesifikasi api menghubungkan alat-alat terkait api seperti pengujian otomatis integrasi dan validasi nah komponen apa aja yang ada di swager Nah ada swager tadii beberapa komponen ada swager editor kemudian ada swager codegen kemudian ada swager Ui Nah nanti kita akan e fokus di swager UI ini ya kita nanti akan menggunakan sebuah ekstensi untuk eh Express JS yang dihubungkan dengan swager UI nah eh kita akan eh menghubungkan swager kita dengan Express JS ada beberapa yang harus kita instal seperti swager UI Express kemudian swager jsdc nah caranya kita bisa menggunakan NPM ya ataupun teman-teman kalau menggunakan yarn juga bisa ya yarn Eh add kemudian swager UI Express swager jsdc nah kemudian kita juga nanti bisa Eh ini ya mengor swager ui-nya ke dalam Project kita nanti kita akan coba nah sekarang kita akan e buat untuk projectnya teman-teman bisa buka terminalnya supaya nanti lebih jelas ya saya akan masuk ke directory C ini ya kemudian saya akan membuat dirtory eh Swag Express ya atau spager app lah ya oke kemudian saya akan masuk ke swagernya saya akan clear screen Nah di sini pertama kita akan menginisiasi dulu projectnya ya Jadi buat teman-teman yang EE sebelumnya belum pernah mengikuti terkait dengan materi Express sebaiknya teman-teman pelajari dulu ya terkait dengan expressnya karena ini sudah lanjutan dari basic Express nah saya akan menginisiasi dulu projectnya saya akan menggunakan yarn in it Min y Kita akan menggunakan yarn ya nah saya anggap teman-teman sudah menginstal e notde JS kemudian menginstal nvm dan juga yarnya ya di video awal awal sudah kita Jelaskan bagaimana cara menginstal yarn cara menginstal yarn ini teman-teman bisa menggunakan NPM eh i - g baru ketikan yarn ya yarn kemudian kalau misalkan teman-teman ingin spesifik sama dengan versi yang saya teman-teman Eh bisa tambahkan versinya berarti NPM i - g Yar kemudian add eh S 22.19 Ini kalau misalkan tem-san mau nginstal yang sama versinya dengan saya Oke saya akan clear kemudian kita akan menginstal kebutuhan untuk Project kita ya saya akan menggunakan yarn add nah kita akan menginstal ini ya Ada swager JS doc kemudian swager UI Express kemudian Express kemudian nomon ini kita gunakan oke Sudah terinstal ya kemudian saya juga akan menginstal yarn eh add kita gunakan sebagai development yaitu slin ya ini untuk membantu supaya errornya eh Ketahuan ya Oke kita akan clear kemudian eh saya akan menginit sllin-nya kita akan Init Ya seperti ini npx slin in it nah kita akan gunakan sebagai eh pendeteksi error ini ya Kita akan menggunakan yang kedua cek Sintak dan pencarian masalah kemudian kita akan menggunakan eh export import modu kemudian kita tidak menggunakan Framework kita juga tidak menggunakan typesript Nah tekan spasi kalau misalkan tidak dipilih ya kalau dipilih tekan spasi Saya akan menggunakan note aja Nah nanti kita file config-nya berupa json oke ya Ini sudah saya akan menggunakan neofim untuk eh Project kali ini saya akan membuka nfim di sini nah ini sudah kebuka ya oke terkait dengan Bagaimana cara mengconfig npim Sudah saya e berikan tutorial di channel ini silakan teman-teman cek ya oke di sini kita akan membuat file indeknya kita tekan a ee kemudian src nah saya akan membuat fileindex.js nanti dia akan ee dibuatkan ya fileindex.js-nya kemudian saya akan membembuat eh untuk javascript config-nya saya akan tekan a lagi Kemudian saya akan buat JS config djson nah saya akan buatkan config untuk js-nya ya Nah kemudian saya akan Buat beberapa config-nya saya sudah tutorialnya sudah saya sampaikan di awalawal ya ini mengulang saja Oke ini saya tambahkan nah kemudian kita juga akan melihat Yang linnya lin-nya Sudah Ya ini sudah masuk berarti sudah ada Harusnya ya kemudian teman-teman bisa lihat di bagian packetnya kebutuhan yang kita butuhkan expr Sudah nomon sudah Ya kemudian swager doc kemudian swager UI juga sudah Lin juga sudah kita tinggal tambahkan untuk e type-nya ya kita akan gunakan type-nya kita akan typ-nya kita gunakan modul kemudian di sini kita akan gunakan script nanti scrip ini untuk menjalankan kita akan gunakan Dev nah Dev nya nanti akan menjalankan ee nodmon bisa menggunakan yang ini kita gunakan do/src/index ya Nah ini juga Eh sama ya Oke kita bisa tutup tekan escipe dan kita save nah bagian ini saya tambahkan lagi nih ee src/ ya esipe dan save lagi ya ini untuk config packet-nya kita bisa close sekarang kita akan buka untuk eh indeksnya Nah di file indek ini kita akan definisikan beberapa kebutuhan ya misalkan ini kita close dulu kita akan impor dulu import e Express Express from eh Express ya ini kita gunakan kemudian kita juga akan impor swager dog ya impor Eh swager eh JS doc dari swager JS doc kita muncul tapi karena belum kita gunakan Masih error ya kemudian kita juga akan impor ee e swager UI swager ui-nya Kita akan ambil dari eh swager UI Express kita ambil dari sini kita tinggal ee buat sebuah konstanta F ya kita gunakan misalkan F kemudian Express ini Nah kita tinggal diinikan juga untuk port ya Nah port kita kasih port-nya 3.000 aja Oke ini kita tinggal definisikan saya akan definisikan app.use kita akan buat e nanti menggunakan json kemudian kita juga akan menggunakan app.use ini juga ya ini kita akan coba buat dulu entry pointnya supaya nanti bisa digunakan aja app.get ini home-nya ini memiliki request eh [Musik] responian kita gunakan errow function kita tambahkan ke sini Hello Word Setelah itu kita tinggal listennya ya kita gunakan app listen kita tinggal ambil ini ya kita akan save nah ini masih error belum dipakai gak apa-apa nanti kita pakai ini jadi tidak eror kita coba dulu ini sudah jalan atau belum Saya akan duplicate ini duplicate tab nah kemudian kita akan jalankan jendep kita tekan enter nah ini sudah jalan kita akan tekan contonttrol dan klik nah ini muncul ya berarti hell kita sudah jalan nah kita akan coba lanjutkan nih untuk confignya kita akan buat e File baru Nah untuk membuat e contoh dami prosesnya ya saya tekan a kemudian saya akan membuat file user. S nah di file user ini kita akan membuat dami transaksi supaya nanti kita bisa mendapatkan eh proses crad-nya Ya saya akan membuat eh user nah user Ini adalah sebuah array Nah nanti memiliki ID Misalkan ya misalkan satu kemudian eh name kita tambahkan name misalkan user satu kemudian kita Tambahkan lagi email buat contohnya hanya tiga aja field-nya ya misalkan example @ e email.com nah ini contohnya ya satu kita tambahkan beberapa supaya ee Ini user 2 saya buat tiga contoh aja ini ya email 3 ini error karena belum kita kita pakai Oke kita akan gunakan di sini kita akan sor kita akan export e kemudian cons pertama kita akan buat get all nah get all ini kita memiliki request kemudian respon Nah di sini kita akan e respon kita akan gunakan json dan kita kembalikan usernya Oke ini kita save kita akan coba tambahkan dulu ya di sini supaya tidak error Nah kita Coba bikin dulu satu nah supaya kita nanti bisa menggunakan swagernya kita akan definisikan untuk definisi swagernya kita akan buat sebuah konstanta namanya option option option ini kita buat buat untuk eh pendefinisian ya Nah seperti ini swager api eh kita akan ganti dengan user api versinya satu Misalkan ya kemudian eh nanti kita menggunakan src dan bukan route ya tapi src dan semua yang ada di folder src Nah karena kita memiliki index dan user di folder src ya Nah nanti kita menggunakan ini kemudian kita buat sebuah konstanta swager dog nah swer dog ini kita akan isi dari swager jsd nah yang kita ambil dari option nah seperti ini ya Nah kemudian dari sini kita coba untuk use ya kita masukkan ke dalam middleware use Nah misalkan nanti api kita akan dicek dengan menggunakan ini api doc nanti kita akan jalankan swer UI serviceer setup dari setup yang kita buat sini oke ini untuk e pendefinisiannya ya nah kemudian kita akan mencoba membuat e komponennya ya ini agak panjang memang kita akan buat komponen komponen swager didefinisikan dengan bintang Seperti ini kemudian di sini kita definikan add eh swagerwager kemudian ini kemudian kita buat di sini [Musik] komponen nah komponen kita buat komponennya Misalkan seperti ini ya ini contoh aja nih Eh exampelnya kita buat 1 2 3 4 id-nya ataupun kita kasih sampelnya di sini tiga aja ya Kita kasih tig kemudian pojok kode kode dan email-nya misalkan COD example code example.com Setelah itu kita akan diminta untuk menutupnya Nah di sini kita membutuhkan name yang wajib diisi ya Nah tipenya di sini objectek user ini kemudian nanti kita membutuhkan name dan email nah Id ini tipenya adalah integer bukan string kita akan buat in integer Nah integernya nanti eh formatnya bukan uid karena kita buat e sederhana aja ya ini kita hapus integer nah auto generate ID of eh The user misalkan ya kemudian name ini string nah ini the name of the user kemudian e email tipenya string nah email ini kemudian formatnya adalah email kemudian deskripsinya diemail is the user email usernya ya ini contohnya seperti ini nah example nah ini adalah contoh untuk eh komponen Oke sekarang kita buat swagernya di sini kita buat lagi slash bintang-bintang kemudian kita enter swager kemudian kita tambahkan di sini tag-nya kita akan definisikan name-nya adalah user deskripsinya di user managing api misalkan user api sama aja ya oke di sini baru kita akan definisikan untuk ee eh contoh get all ya berarti app do eh get Nah app.get di sini endpint-nya users misalkan ya kemudian di sini kita akan Panggil get all nah get all ini dari yang tadi kita buat ya di sini nah dia akan ee dipanggil ke sini kita tinggal menambahkan users djs ke sini get all-nya ya ya kita save nah seperti ini kemudian di sininya kita bisa tambahkan nih di bagian atas dari eh kita akan definisikan swager kemudian end pointint-nya adalah user metodenya get ini summary get all user kemudian tag-nya adalah user nah responnya nanti 200 deskripsinya ini ee list dari user eah kontennya ini application json kemudian skemanya tipenya Ray skemanya tipenya array kemudian itemnya ini kita ambil dari user yang kita buat di awal tadi ya Ini ini user yang kita buat skemanya kita panggil ke sini oke ini kita bisa save Nah kita memiliki eh pengetesan api doc ya teman-teman bisa buka ke sini nah ini ee kalau misalkan kita user misalkan ya kita enter nah ini muncul ya user-nya tapi kalau misalkan kita coba duplicate kemudian kita akan Panggil api doc Nah kita enter Nah sekarang sudah muncul ya ini user Fi kemudian ee Ini get yang tadi kita buat kita bisa turunkan di sini tuh ini contoh keluarannya kemudian kalau misalkan kita tryout dan kita execute Nah kita mendapatkan datanya Nah ini eh untuk gate ya kita sudah Ee berhasil menjalankannya Ini kalau misalkan teman-teman refresh lagi dia kembali lagi ke eh awalnya nah seperti ini tuh Oke kita akan tambahkan untuk proses eh selanjutnya yaitu get by ID ya ini baru get all kita akan buat lagi export e cons get by ID nah get by Id ini memiliki request dan juga respon ini kita akan mendapatkan dari parameter id ya ID kita akan par karena tipe datanya kita integer tadi ya kita harus meng-convert karena requestnya formatnya string param-nya ya params kemudian kita ambil params ID params ID nah di params ID kita akan coba cari usernya ya cons user user ini kita akan ambil dari user array yang atas ini misalkan ini dari database ya kemudian kita akan cari eh find kita cari ya Nah pencariannya kita akan gunakan misalkan B untuk itemnya ya tiap itemnya B ini kita akan cek dengan bid karena kita memiliki ID sini dari objeknya ya kemudian kita akan bandingkan dengan ID yang dari parameter ini Oke kita akan turunkan Nah di sini kita akan Cek jika e tidak ada usernya tidak ketemu ya kita akan e return kan eh rest do eh status saya tambahkan di sini biasanya misalnya user notfone kalau misalkan els-nya kita akan convert E usernya ini ya Ini kalau misalkan kita berhasil Nah kita akan gunakan lagi export ini ke indeknya di sini nah kita tinggal e buatkan lagi di sini untuk metodenya get by ID ya Nah get by Id ini kita akan mendapatkan hanya satu ID saja kita tambahkan di sini F dget Nah di sini kita akan gunakan user kita akan tambahkan di sini ID parameternya ya kemudian eh kita tambahkan get eh by Id ini ya get by id-nya kita tambahkan ke sini Oke kita akan save sebenarnya secara Fa Ini bisa kita Panggil ya teman-teman bisa menggunakan posmen juga bisa Nah di sini Kita akan ambil dari ee swagernya ya ini kita Eh kalau misalkan berhasil kita akan mendapatkan 200 nah inpad nah kalau misalkan tidak berhasil kita akan diberikan user not Fone ya oke Ini kalau misalkan error juga bisa ya kita akan sampai 404 aja kalau misalkan teman-teman mau sampai tadi error 500 juga boleh ya internal server error itu namanya user misalkan notpone deskripsinya sampai sini juga bisa kita tambahkan di sini 404 ini untuk self-nya Komponen eh description by ID kontennya appcation Jess kita coba ya nanti kita perbaiki kalau misalkan error kita lihat ini kita buka lagi kita bisa refresh ini yang get by id-nya muncul ya kita coba Oke ini ada error rendingalication.jasen Berarti ada yang salah nih Kita coba perbaiki ya kita Coba perbaiki ini eh 200 by ID content application json kita kita akan langsung ke skema ya skema kemudian setelah skema langsung ke 404 kita langsung ke sini aja Nah jadi setelah Ee Kita Deskripsikan ininya id-nya p kemudian di sini kita mendapatkan ID kita akan skema tipenya integer kemudian ini harus diisi ini user ID ya sebagai gambarannya metodenya get kalau responnya berhasil dia akan merespon 200 descriptionnya ini get by ID kemudian kontennya inilication J skemanya kita akan mengherap ke komponen skema user nanti kalau misalkan gagal ini user not Fone description-nya ya kita coba lagi ini kita bisa refresh ulang kemudian kita buka kita tryout Nah kita masukkan misalkan di sini ya kemudian kita execute Oh di sini ada error 500 ya e pars integer param ID request Oh ini request ini harusnya menggunakan request ya bukan respon kita save Oke kita coba lagi sepertinya itu masalahnya Oke kita coba buka lagi oke ya kita tryout kita tambahkan 3 kemudian kita execute Nah sekarang sudah e 200 ya berarti nah ini juga sudah keluar berarti proses kita sudah Ee berhasil Nah tadi kita ada keliru Di sini ya harusnya request kita memasukkan respon Oke ini untuk get by ID nah sekarang kita akan coba tambahkan untuk create ya kita akan tambahkan create kita akan expor e cons kemudian createah create akan memiliki request kemudian respon kita akan buat sebuah konstanta user yang kita ambil dari request do eh body ya Kita akan ambil dari body kemudian e kita akan masukkan ke dalam userspush kita masukkan eh user-nya kita masukkan ke dalam array kita ya kemudian kita akan respon do eh Jon kita akan masukkan usernya jadi eh kita akan kirimkan e jasonnya kita akan save create ini kemudian kita akan panggil ke sini kita tambahkan appp kemudian entry point-nya slash users nanti kita akan e Panggil yang create ini ya Nah kemudian di bagian atasnya kita akan definisikan untuk swagernya Nah kita e bisa tambahkan sama kayak tadi ya kita bisa slash slash eh kita bisa ambil ini dulu oke 200 kalau misalkan error [Musik] kitaakan misalkan 400 ya ininya 400 di sini eh invalid user misalkan ya nah ini kalau misalkan kita menerima pos ini tag-nya adalah user kemudian kita akan request body ini harus diisi nah Nah skemanya kita akan ambil dari komponen skema user kemudian responnya kalau misalkan berhasil kita akan mendapatkan 201 nah kemudian description-nya successful create kemudian kontennya kita aplication json skema ini komponen user-nya kemudian kalau misalkan tidak ada dia akan mengambil invalid user data Oke kita bisa buka lagi nah ini kita refresh lagi ya kita refresh Nah user-nya sudah muncul kita Oh yang Po yang atasnya ya malah yang post ini kita coba tray out nah ini contohnya kita gunakan ini Kita execute nah ini dua 200 ya jadi Ee kita berhasil untuk mengirimkan ee Ini kalau misalkan teman-teman Mau diubah juga silakan ya ini contohnya kita menggunakan sampel kita sudah kirimkan dan ee ininya 200 tadi kita kasihnya 201 ya ini kita ganti aja dengan 200 ini bisa kita coba lagi kita buka TR out oke di sini pojok kode t misalkan ya kita execute nah ini sudah 200 ini pojok kode 3 udah masuk ya Jadi ini e prosesnya sudah berhasil Oke ini untuk insert-nya sudah berhasil kita akan Tambahkan lagi untuk proses update ya Nah proses update ini agak panjang kita akan expor eh cons misalkan update kita akan request kemudian respon kemudian kita akan buatkan pertama kita akan buatkan id-nya ya ID yang kita ambil dan dari eh request kita akan pars integer karena tipe data kita integer ini kita ambil dari request Jangan salah lagi seperti tadi kemudian param params kemudian kita ambil id-nya Oke kemudian kita akan mengambil usernya cons user user ini kita ambil dari users dari Ray yang di atas tadi Ya kemudian kita akan cari dengan menggunakan e objek b Nanti kita akan cari B ini b.id id-nya harus sama dengan parsing dari usernya Id ini ya Oke kita akan Cek jika Ee tidak ada user user-nya ini kosong Nah kita akan ee kasih 404 hotphone ya kemudian kalau misalkan Ee tidak kita akan kirimkan Nah kita akan update dulu user D name Kita akan ambil request body name dan juga ini ya Jadi kita ada name dan email yang dari kiriman user kita akan ubah dan kita kirimkan balik ini ya respon send Jason ya kita save Oke kita kembali ke sini ini kita tinggal definisikan app Put putnya kita ke users kemudian kita definisikan id-nya Nah di sini kita akan Panggil update-nya oke di sini kita tambahkan juga untuk swager-nya ya dragernya kita gunakan update kita ambil dulu ee respon-nya ini kita gunakan kemudian update user by ID tagnya user parameternya kita ambil dari p kemudian kita akan ambil id-nya skemanya nanti integer ini harus diisi true kemudian ini rer ID kemudian kita akan request body ini juga harus diisi ya kontennya application json skemanya kita ambil dari user responnya kalau misalkan nanti eh bisa jadi respon kemudian kita tambahkan description nah description-nya ee misalkan diupdate ya kontennya nanti Jason skemanya kita ambil dari skema kemudian kalau misalkan error 400 kita akan kasih eh not font kalau misalkan not font ya Oke ini kita bisa tutup untuk swagernya Oke saya akan save Ini kalau misalkan kita ada update ya kita buka lagi di sini refresh nah ini put-nya sudah muncul kita bisa buka e kita coba tryout ini ada id-nya yang mau kita tryout di tambahkan id-nya 3 Misalkan ya kemudian yang mau kita ubah misalkan ini saya ganti xx ya kemudian kita tinggal execute nah ini kita berhasil ya Oke kita berhasil mendapatkannya dan ini tidak error kita buapat 200 ini untuk url-nya nah ini perubahan yang kita buat nih Oke ini untuk update berhasil ya Jadi ini ee eh kode xx-nya tidak error dan kembaliannya juga sesuai ini harus diisi ini untuk update kita sekarang Tambahkan lagi untuk Delete nah untuk delete kita harus mendapatkan lagi id di sini ya saya akan tambahkan export on eh remove ya kita akan tambahkan remove request kemudian respons nah kemudian kita akan buat sebuah cons ID Kita akan ambil karena tadi parameternya integer kita ambil dari requestparams.id kita ambil ID Oke kemudian eh Kita akan ambil usernya user Kita akan ambil dari users d eh kita cari dengan menggunakan objek B nah kita akan cari b.id harus sama dengan yang user kirimkan id-nya kalau misalkan ada kita akan Cek jika dia tidak ada usernya maka ini not font kita akan returnkan eh status 404 dan json-nya eh user not Fone Nah kalau misalkan ada kita akan eh user index of user ini akan kita refres ya Jadi kita akan membuat user eh yang kita ambil dari users dot filter kita akan filter nah menggunakan yang tidak ada seperti ini ya Jadi kita akan filter user ini yang tidak ada dengan id-nya jadi dia akan selalu mengembalikan yang e id-nya tidak sama aja kalau yang sama dia akan hapus kemudian dia akan eh respon jesson-nya ini eh kita bisa kirimkan message ataupun kita kirimkan lagi usernya Ya Nah kita kirimkan usernya atas tadi kan tadi ada user kirimkan lagi usernya save remennya bisa kita tambahkan ke sini oke kita tambahkan appdete kemudian nya ini kemudan kita harus mengkan kemudian kita akan Panggil remove ini ya oke kemudian swagernya kita juga akan definisikan di sini ya Nah swagernya kita membutuhkan ID lagi sama seperti tadi ya kita membutuhkan ID kemudian kalau misalkan ada kita akan dapatkan respons 200 nah ini pesannya user deleted kemudian kalau misalkan tidak ada 404 user not font kita akan save Oke sekarang kita buka lagi swager-nya kita buka kita refresh ya nah ini delate sudah ada kita buka Nah ini kita akan tryout kita masukkan tiga kita akan execute nah ini sudah berhasil ya 203 ini ee yang kita hapus dan ini tandanya berhasil 200 karena kita tadi memiliki ID 123 ya ini Eh sudah berhasil ya Jadi untuk mendefinisikan swager menggunakan Express kita sudah lakukan untuk get all data kemudian get by ID Kemudian untuk input untuk update dan untuk delete sudah berhasil kita e buat nanti buat teman-teman yang membutuhkan file latihannya Silakan ambil file latihnya di kolom deskripsi di bawah mudah-mudahan bisa menu teman-teman buat teman-teman yang belum subscribe jangan lupa subscribe dan Nyalakan tombol loncengnya Sampai ketemu di video selanjutnya