Slide DevCoach

DevCoach 137 : Front-End | Belajar Cara Berkomunikasi Web dengan Server

Transcript

1. Dicoding Slides Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore. Front-End Web
2. Position Belajar Cara Web Berkomunikasi dengan Server Front-End Web Nur Rizki Adi Curriculum Developer
3. Learning Objectives • Menunjukkan mekanisme website dalam berkomunikasi dengan HTTP. • Menunjukkan Browser API yang dimanfaatkan untuk berkomunikasi. • Menjelaskan cara membuat request dengan fetch API. • Menjelaskan format data yang umum dipakai. • Mendemonstrasikan fetch API dalam Dicoding Books. Front-End Web
4. Agenda • Apa Itu Asynchronous JavaScript Request • Konsep Kerja Asynchronous Request • Web API untuk Membuat Request • Format Pertukaran Data • Global Asynchronous Function Front-End Web
5. HTTP Made Easy: Understanding the Web Client-Server Communication by Hackernoon
6. XMLHttpRequest Front-End Web Fetch API Browser API untuk Client-Server Communication
7. Apa Itu Fetch API • Web API yang berbasis Promise untuk melakukan proses pertukaran data, baik di dalam komputer atau antar komputer. • Ia adalah cara alternatif untuk menangani HTTP request (asynchronous process) dari XHR (XMLHttpRequest). Front-End Web
8. Mekanisme Data Dikirim/Diterima dari Server Front-End Web
9. Request Method untuk Server GET mengambil informasi. POST menambahkan data. PUT mengubah data. DELETE menghapus data.
10. Kode Status dari Server 200 (OK) Request berhasil dipenuhi oleh server (Web API). 400 (Bad Request) Server tidak mengerti request yang dikirimkan client. 401 (Unauthorized) Request membutuhkan authorization. 403 (Forbidden) Server memahaminya, tetapi menolak untuk diproses. 404 (Not Found) Resource yang client minta, tidak ditemukan. 500 (Server Error) Server mengalami kendala untuk memproses request.
11. Front-End Web Implementasi Fetch API fetch() global function - MDN
12. Front-End Web Implementasi Fetch API dengan Options
13. Nilai kembalian dari fetch() Promise Front-End Web
14. Cara Promise Bekerja • Promise ditetapkan dan akan memasuki tahapan awal: pending. • Ada dua keadaan sebuah “janji” dihasilkan. ◦ Reject ◦ Resolve Front-End Web
15. Diagram Alir dari Asynchronous Process
16. Format untuk Pertukaran Data • Format data yang seringkali dijadikan bahan pertukaran data. • Beberapa format data untuk antar komputer. ◦ Extensible Markup Language (XML) ◦ Comma-Separated Value (CSV) ◦ JavaScript Object Notation (JSON) Front-End Web
17. Tampak JSON sebagai Format Data Front-End Web
18. Dicoding Books https://github.com/dicodingacademy/a163-bfwd-labs/tree/602-dicoding-books-project-starter Front-End Web
19. Dummy Books API https://books-api.dicoding.dev/#/ Front-End Web
20. Permisalan REST API
22. CORS Error • Mekanisme keamanan yang membatasi cara sebuah web dari suatu domain dapat berinteraksi dengan domain yang berbeda. • Dengan alasan keamanan, ketika melakukan request ke server, kita hanya diperbolehkan melakukan request dari domain (origin) yang sama. Front-End Web
23. Contoh CORS Error example.com → example.com/api awesome.com --/--> example.com/api ✅ ❌ Front-End Web
24. Global Asynchronous Function setTimeout setInterval Front-End Web
25. Thank You nurrizkiadip Nur Rizki Adi Prasetyo @NAdiPrasetyo nrizki@dicoding.com Nur Rizki Adi Prasetyo Nur Rizki Adi Prasetyo Front-End Web
26. Feedback! Hadiah: • 2 Token Langganan Academy (30 Hari) *untuk pengisi feedback terpilih! dicoding.id/devcoachfeedback
27. Front-end Web