‫Instruktur: Dalam
‫kuliah sebelumnya, ketika berbicara tentang front-end
‫dan back-end, saya menyebutkan situs web, atau aplikasi
‫sederhana dan statis dan dinamis, beberapa
‫kali tetapi tanpa benar-benar mendefinisikan apa itu.
‫Jadi, dalam video ini, saya ingin mengklarifikasi hal-hal ini
‫dan juga berbicara tentang API untuk membawa
‫semua konsep ini ke dalam gambaran yang lebih besar
‫dari pengembangan web back-end secara umum.
‫Jadi, mari kita mulai dengan berbicara tentang
‫situs web statis versus dinamis.
‫Jadi, situs web statis, atau situs web
‫sederhana seperti yang saya
‫sebut di video terakhir, adalah ketika
‫pengembang mengunggah file akhir situs web yang siap disajikan ke server web.
‫File-file ini biasanya berisi HTML, CSS,
‫JavaScript, gambar, dan banyak lagi, dan seperti yang saya
‫katakan, ini adalah file persis yang nantinya akan dikirim
‫oleh server ke browser ketika situs web diminta.
‫Browser kemudian akan mengambil
‫file-file ini dan merendernya sebagaimana adanya.
‫Ini berarti tidak ada pekerjaan yang dilakukan di
‫server, tidak ada kode back-end, dan juga tidak ada
‫aplikasi yang berjalan.
‫Oke?
‫Jadi, ini hanya server web statis yang menyajikan file statis,
‫persis seperti yang saya sebutkan di video terakhir.
‫Sekarang, Anda mungkin berpikir, tunggu,
‫ketika ada JavaScript
‫di halaman, maka biasanya ada efek
‫dinamis, seperti animasi dan semacamnya, bukan?
‫Nah, dinamika yang Anda maksud itu ada
‫dinamika yang berbeda.
‫Itu hanya dalam konteks pengembangan front-end.
‫Dalam konteks browser, dinamis tidak ada
‫hubungannya dengan efek pada halaman atau hal-hal yang
‫bergerak, tetapi dengan cara situs web dibuat di server.
‫Oke?
‫Jadi, situs web dinamis berbeda dari situs web statis
‫karena biasanya dibangun di server
‫setiap kali ada permintaan baru masuk.
‫Jadi, seperti yang
‫kita lihat di video terakhir, situs web dinamis
‫biasanya berisi database, lalu ada juga
‫aplikasi yang berjalan, seperti Node.js. js app, yang mengambil
‫data dari database, lalu, bersama dengan template yang
‫telah ditentukan sebelumnya, membangun setiap halaman yang diminta pengguna
‫secara dinamis berdasarkan data yang berasal dari database.
‫Jadi, setiap kali browser meminta
‫halaman, halaman tersebut kemudian dibuat sebagai file HTML, CSS, dan JavaScript,
‫yang kemudian akan dikirim kembali ke browser.
‫Keseluruhan proses ini terkadang disebut
‫rendering sisi server.
‫Jadi, sekali lagi, makanya disebut dinamis,
‫karena website bisa berubah sewaktu-waktu sesuai dengan
‫konten yang ada di
‫database atau tindakan pengguna di situs tersebut.
‫Misalnya, jika Anda masuk ke Twitter, itu
‫akan menampilkan halaman yang sama
‫sekali berbeda dari saat Anda keluar, bukan?
‫Dan itu juga akan menampilkan halaman yang
‫berbeda besok daripada hari ini karena ada tweet
‫baru, jadi data baru di database.
‫Dan itulah yang dimaksud dengan situs web dinamis.
‫Sekarang, jika Anda, misalnya, pergi ke Jonas. io, dan omong-omong,
‫Anda akan selalu melihat
‫konten yang sama, situs web yang
‫sama, tidak peduli kapan Anda berkunjung atau apa
‫yang Anda lakukan di sana.
‫Jadi, itu berarti itu adalah halaman statis, oke?
‫Apakah perbedaan ini masuk akal?
‫Sekarang, terkadang kita menggunakan istilah situs web dinamis
‫dan terkadang istilah aplikasi web,
‫tetapi keduanya adalah hal yang sama.
‫Biasanya ketika orang merujuk ke aplikasi
‫web, yang mereka maksud adalah situs web dinamis
‫dengan beberapa fungsi seperti masuk, membuat profil
‫pengguna, mencari hal-hal, dan hal-hal seperti itu secara umum.
‫Situs web, misalnya, seperti blog WordPress.
‫Mereka masih dihasilkan secara dinamis,
‫tetapi kita tidak dapat melakukan apa pun selain membacanya, bukan?
‫Dan secara tradisional, situs web statis dan dinamis adalah satu-satunya
‫dua jenis situs web, tetapi dalam beberapa
‫tahun terakhir, berkat betapa canggihnya browser
‫di sisi klien, kami melihat semakin banyak situs
‫web yang, pada dasarnya, didasarkan pada API.
‫Jadi, mari pelajari cara kerjanya dan bagaimana
‫kita bisa menggunakan Node.js. js untuk memberi daya pada mereka.
‫Mari kita simpan situs web dinamis di sini
‫di slide sehingga kita dapat membandingkan keduanya dengan lebih baik.
‫Jadi, seperti halnya situs web dinamis, kami memiliki
‫basis data di sini dan kami memiliki aplikasi yang
‫mengambil data dari basis data
‫setiap kali klien membuat permintaan, jadi dalam hal itu, situs web
‫yang didukung API sebenarnya sangat mirip dengan situs
‫web dinamis. situs web.
‫Jadi, keduanya bekerja secara dinamis.
‫Sekarang, perbedaan besar di sini adalah bahwa dengan
‫API, kami hanya mengirim data ke
‫browser, biasanya dalam format data
‫JSON, dan bukan seluruh situs web.
‫Jadi, sekali lagi, hanya data yang dikirim ke klien
‫dan bukan situs web yang siap ditampilkan.
‫Jadi, tidak ada HTML, tidak ada CSS, hanya data JSON, oke?
‫Jadi, ketika membangun situs web yang
‫didukung API, selalu ada
‫dua langkah ini, membangun API dan kemudian menggunakan
‫API di sisi klien, dan omong-omong, API
‫adalah singkatan dari antarmuka pemrograman aplikasi, dan pada tingkat
‫yang sangat tinggi, pada dasarnya itu bagian
‫dari perangkat lunak yang dapat digunakan oleh perangkat lunak
‫lain, pada dasarnya, memungkinkan aplikasi untuk berbicara satu sama lain.
‫Dan kita akan berbicara sedikit
‫lebih dalam tentang apa sebenarnya API itu setelah kita mulai membangunnya.
‫Bagaimanapun, sekarang tentang sisi klien yang baru saja saya sebutkan.
‫Jadi, di sinilah situs web sebenarnya dirakit dengan
‫memasukkan data yang kita terima ke dalam
‫semacam template, biasanya menggunakan beberapa kerangka kerja front-end yang
‫mewah seperti React, Angular, atau Vue.
‫Saya tidak akan membahas secara
‫spesifik di sini karena itu untuk kursus front-end,
‫tetapi dalam istilah yang sangat umum, beginilah cara kerjanya.
‫Jadi, Anda melihat bahwa ketika membangun situs web yang
‫didukung API, fase pembuatan situs web semacam
‫berpindah dari ujung belakang ke ujung depan, bukan?
‫Atau bisa juga dikatakan berpindah dari server ke client.
‫Itulah mengapa sering kali
‫Anda akan melihat situs web dinamis disebut sebagai sisi
‫server yang dirender karena sebenarnya dibuat di server.
‫Di sisi lain, situs web yang didukung API
‫sering disebut sebagai sisi klien yang dirender, yang masuk akal, bukan?
‫Jadi, bagi kami
‫pengembang back-end, sebenarnya jauh lebih mudah untuk hanya
‫membangun API dan membiarkan orang-orang front-end membangun situs, bukan?
‫Dan faktanya, Node adalah alat yang benar-benar sempurna untuk membangun
‫API, dan ini sangat umum digunakan untuk itu, tetapi tentu saja,
‫ini juga sangat cocok untuk
‫membangun situs web yang dirender di sisi server yang dinamis.
‫Jadi, dalam kursus ini, kita benar-benar akan melakukan kedua
‫versi, dimulai dengan API, dan di akhir kursus,
‫juga membangun situs web yang dirender menggunakan data yang sama persis.
‫Saya memilih untuk melakukan keduanya karena menurut saya sangat penting bagi
‫Anda untuk mengetahui cara membuat API dan situs web yang
‫dirender di sisi server.
‫Dan sekarang untuk menyelesaikan
‫video ini, saya ingin segera menyebutkan
‫bahwa API yang kami buat dengan Node, atau sebenarnya, bahasa
‫lain apa pun,
‫tentu saja dapat digunakan oleh klien lain selain
‫browser, yang merupakan keuntungan besar dari membangun API alih-alih
‫situs web yang dirender di sisi server.
‫Jadi, katakanlah kita
‫membuat contoh API di jonas. io/api/myCourseData.
‫Jadi, setiap kali kami menekan URL itu, server akan mengirim kembali data
‫tentang kursus pengembangan
‫web yang sedang saya ajarkan.
‫Sekarang, sejauh ini kami hanya berbicara
‫tentang permintaan yang datang dari browser web, tetapi kami juga
‫dapat meminta dan kemudian menggunakan data JSON
‫yang sama persis pada aplikasi iOS asli atau aplikasi
‫Android, atau bahkan pada aplikasi desktop untuk
‫Mac atau untuk komputer Windows.
‫Kemungkinannya benar-benar tidak terbatas ketika kami membangun API karena kami
‫hanya memiliki satu sumber data, yang kemudian
‫dapat diminta dan digunakan di mana saja,
‫bukan hanya browser.
‫Itu semacam masalah ketika kami membangun situs
‫web dinamis normal.
‫Kami mengembalikan file HTML dan CSS dan
‫JavaScript, dan hanya browser yang benar-benar dapat memahaminya,
‫jadi kami kemudian terjebak ke dalam platform tunggal itu.
‫Dan itu mungkin tidak menjadi
‫masalah dalam banyak kasus, tetapi untuk produk kompleks
‫yang membutuhkan banyak aplikasi dan kemudian situs
‫web dan aplikasi web, biasanya, API selalu dibutuhkan.
‫Jadi, dalam contoh ini pada Jonas. io, saya bisa membangun API
‫ini dan kemudian membangun situs web yang didukung API dan
‫beberapa aplikasi dan mendapatkan data saya di
‫semua klien ini hanya dari satu sumber, oke?
‫Dan beberapa orang atau tim bahkan tidak memiliki klien sendiri
‫sama sekali dan hanya menjual akses ke API mereka
‫ke pihak ketiga yang
‫kemudian akan menggunakan API ini dan bukan milik mereka sendiri.
‫Jadi, benar-benar ada seluruh bisnis yang
‫dibangun berdasarkan filosofi ini dengan hanya menjual API ke
‫pengembang atau perusahaan lain.
‫Bagaimanapun, saya berharap dengan slide terakhir ini konsep
‫dan alasan dan, semacam, filosofi di
‫balik pembuatan API sekarang menjadi sangat jelas bagi Anda.
‫Jadi, mari kita lanjutkan.