1
00:00:01,160 --> 00:00:02,570
‫Instruktur: Dalam

2
00:00:02,570 --> 00:00:05,280
‫kuliah sebelumnya, ketika berbicara tentang front-end

3
00:00:05,280 --> 00:00:08,710
‫dan back-end, saya menyebutkan situs web, atau aplikasi

4
00:00:08,710 --> 00:00:11,370
‫sederhana dan statis dan dinamis, beberapa

5
00:00:11,370 --> 00:00:14,600
‫kali tetapi tanpa benar-benar mendefinisikan apa itu.

6
00:00:14,600 --> 00:00:17,870
‫Jadi, dalam video ini, saya ingin mengklarifikasi hal-hal ini

7
00:00:17,870 --> 00:00:20,620
‫dan juga berbicara tentang API untuk membawa

8
00:00:20,620 --> 00:00:23,620
‫semua konsep ini ke dalam gambaran yang lebih besar

9
00:00:23,620 --> 00:00:26,013
‫dari pengembangan web back-end secara umum.

10
00:00:27,460 --> 00:00:30,120
‫Jadi, mari kita mulai dengan berbicara tentang

11
00:00:30,120 --> 00:00:32,410
‫situs web statis versus dinamis.

12
00:00:32,410 --> 00:00:34,920
‫Jadi, situs web statis, atau situs web

13
00:00:34,920 --> 00:00:36,630
‫sederhana seperti yang saya

14
00:00:36,630 --> 00:00:39,070
‫sebut di video terakhir, adalah ketika

15
00:00:39,070 --> 00:00:43,640
‫pengembang mengunggah file akhir situs web yang siap disajikan ke server web.

16
00:00:43,640 --> 00:00:46,580
‫File-file ini biasanya berisi HTML, CSS,

17
00:00:46,580 --> 00:00:50,320
‫JavaScript, gambar, dan banyak lagi, dan seperti yang saya

18
00:00:50,320 --> 00:00:53,970
‫katakan, ini adalah file persis yang nantinya akan dikirim

19
00:00:53,970 --> 00:00:57,090
‫oleh server ke browser ketika situs web diminta.

20
00:00:57,090 --> 00:00:59,040
‫Browser kemudian akan mengambil

21
00:00:59,040 --> 00:01:01,320
‫file-file ini dan merendernya sebagaimana adanya.

22
00:01:01,320 --> 00:01:04,320
‫Ini berarti tidak ada pekerjaan yang dilakukan di

23
00:01:04,320 --> 00:01:07,510
‫server, tidak ada kode back-end, dan juga tidak ada

24
00:01:07,510 --> 00:01:08,730
‫aplikasi yang berjalan.

25
00:01:08,730 --> 00:01:09,563
‫Oke?

26
00:01:09,563 --> 00:01:12,900
‫Jadi, ini hanya server web statis yang menyajikan file statis,

27
00:01:12,900 --> 00:01:15,670
‫persis seperti yang saya sebutkan di video terakhir.

28
00:01:15,670 --> 00:01:17,460
‫Sekarang, Anda mungkin berpikir, tunggu,

29
00:01:17,460 --> 00:01:19,233
‫ketika ada JavaScript

30
00:01:19,233 --> 00:01:21,290
‫di halaman, maka biasanya ada efek

31
00:01:21,290 --> 00:01:23,610
‫dinamis, seperti animasi dan semacamnya, bukan?

32
00:01:23,610 --> 00:01:26,480
‫Nah, dinamika yang Anda maksud itu ada

33
00:01:26,480 --> 00:01:28,050
‫dinamika yang berbeda.

34
00:01:28,050 --> 00:01:31,580
‫Itu hanya dalam konteks pengembangan front-end.

35
00:01:31,580 --> 00:01:34,370
‫Dalam konteks browser, dinamis tidak ada

36
00:01:34,370 --> 00:01:37,200
‫hubungannya dengan efek pada halaman atau hal-hal yang

37
00:01:37,200 --> 00:01:40,570
‫bergerak, tetapi dengan cara situs web dibuat di server.

38
00:01:40,570 --> 00:01:41,870
‫Oke?

39
00:01:41,870 --> 00:01:45,210
‫Jadi, situs web dinamis berbeda dari situs web statis

40
00:01:45,210 --> 00:01:47,440
‫karena biasanya dibangun di server

41
00:01:47,440 --> 00:01:50,090
‫setiap kali ada permintaan baru masuk.

42
00:01:50,090 --> 00:01:51,740
‫Jadi, seperti yang

43
00:01:51,740 --> 00:01:55,040
‫kita lihat di video terakhir, situs web dinamis

44
00:01:55,040 --> 00:01:57,410
‫biasanya berisi database, lalu ada juga

45
00:01:57,410 --> 00:02:01,400
‫aplikasi yang berjalan, seperti Node.js. js app, yang mengambil

46
00:02:01,400 --> 00:02:04,340
‫data dari database, lalu, bersama dengan template yang

47
00:02:04,340 --> 00:02:07,730
‫telah ditentukan sebelumnya, membangun setiap halaman yang diminta pengguna

48
00:02:07,730 --> 00:02:10,670
‫secara dinamis berdasarkan data yang berasal dari database.

49
00:02:10,670 --> 00:02:13,360
‫Jadi, setiap kali browser meminta

50
00:02:13,360 --> 00:02:18,360
‫halaman, halaman tersebut kemudian dibuat sebagai file HTML, CSS, dan JavaScript,

51
00:02:18,560 --> 00:02:21,640
‫yang kemudian akan dikirim kembali ke browser.

52
00:02:21,640 --> 00:02:23,790
‫Keseluruhan proses ini terkadang disebut

53
00:02:23,790 --> 00:02:25,860
‫rendering sisi server.

54
00:02:25,860 --> 00:02:28,540
‫Jadi, sekali lagi, makanya disebut dinamis,

55
00:02:28,540 --> 00:02:31,560
‫karena website bisa berubah sewaktu-waktu sesuai dengan

56
00:02:31,560 --> 00:02:33,700
‫konten yang ada di

57
00:02:33,700 --> 00:02:36,520
‫database atau tindakan pengguna di situs tersebut.

58
00:02:36,520 --> 00:02:38,870
‫Misalnya, jika Anda masuk ke Twitter, itu

59
00:02:38,870 --> 00:02:41,140
‫akan menampilkan halaman yang sama

60
00:02:41,140 --> 00:02:43,510
‫sekali berbeda dari saat Anda keluar, bukan?

61
00:02:43,510 --> 00:02:45,920
‫Dan itu juga akan menampilkan halaman yang

62
00:02:45,920 --> 00:02:48,600
‫berbeda besok daripada hari ini karena ada tweet

63
00:02:48,600 --> 00:02:50,938
‫baru, jadi data baru di database.

64
00:02:50,938 --> 00:02:54,330
‫Dan itulah yang dimaksud dengan situs web dinamis.

65
00:02:54,330 --> 00:02:56,860
‫Sekarang, jika Anda, misalnya, pergi ke Jonas. io, dan omong-omong,

66
00:02:56,860 --> 00:02:58,223
‫Anda akan selalu melihat

67
00:02:59,150 --> 00:03:01,130
‫konten yang sama, situs web yang

68
00:03:01,130 --> 00:03:03,680
‫sama, tidak peduli kapan Anda berkunjung atau apa

69
00:03:03,680 --> 00:03:05,060
‫yang Anda lakukan di sana.

70
00:03:05,060 --> 00:03:08,870
‫Jadi, itu berarti itu adalah halaman statis, oke?

71
00:03:08,870 --> 00:03:10,950
‫Apakah perbedaan ini masuk akal?

72
00:03:10,950 --> 00:03:14,200
‫Sekarang, terkadang kita menggunakan istilah situs web dinamis

73
00:03:14,200 --> 00:03:16,450
‫dan terkadang istilah aplikasi web,

74
00:03:16,450 --> 00:03:18,790
‫tetapi keduanya adalah hal yang sama.

75
00:03:18,790 --> 00:03:21,320
‫Biasanya ketika orang merujuk ke aplikasi

76
00:03:21,320 --> 00:03:24,450
‫web, yang mereka maksud adalah situs web dinamis

77
00:03:24,450 --> 00:03:27,180
‫dengan beberapa fungsi seperti masuk, membuat profil

78
00:03:27,180 --> 00:03:30,540
‫pengguna, mencari hal-hal, dan hal-hal seperti itu secara umum.

79
00:03:30,540 --> 00:03:34,220
‫Situs web, misalnya, seperti blog WordPress.

80
00:03:34,220 --> 00:03:36,380
‫Mereka masih dihasilkan secara dinamis,

81
00:03:36,380 --> 00:03:39,793
‫tetapi kita tidak dapat melakukan apa pun selain membacanya, bukan?

82
00:03:40,790 --> 00:03:44,510
‫Dan secara tradisional, situs web statis dan dinamis adalah satu-satunya

83
00:03:44,510 --> 00:03:47,300
‫dua jenis situs web, tetapi dalam beberapa

84
00:03:47,300 --> 00:03:49,840
‫tahun terakhir, berkat betapa canggihnya browser

85
00:03:49,840 --> 00:03:53,070
‫di sisi klien, kami melihat semakin banyak situs

86
00:03:53,070 --> 00:03:55,930
‫web yang, pada dasarnya, didasarkan pada API.

87
00:03:55,930 --> 00:03:57,580
‫Jadi, mari pelajari cara kerjanya dan bagaimana

88
00:03:57,580 --> 00:04:00,193
‫kita bisa menggunakan Node.js. js untuk memberi daya pada mereka.

89
00:04:02,060 --> 00:04:04,430
‫Mari kita simpan situs web dinamis di sini

90
00:04:04,430 --> 00:04:07,380
‫di slide sehingga kita dapat membandingkan keduanya dengan lebih baik.

91
00:04:07,380 --> 00:04:10,610
‫Jadi, seperti halnya situs web dinamis, kami memiliki

92
00:04:10,610 --> 00:04:13,880
‫basis data di sini dan kami memiliki aplikasi yang

93
00:04:13,880 --> 00:04:16,020
‫mengambil data dari basis data

94
00:04:16,020 --> 00:04:20,090
‫setiap kali klien membuat permintaan, jadi dalam hal itu, situs web

95
00:04:20,090 --> 00:04:23,210
‫yang didukung API sebenarnya sangat mirip dengan situs

96
00:04:23,210 --> 00:04:25,150
‫web dinamis. situs web.

97
00:04:25,150 --> 00:04:27,820
‫Jadi, keduanya bekerja secara dinamis.

98
00:04:27,820 --> 00:04:31,130
‫Sekarang, perbedaan besar di sini adalah bahwa dengan

99
00:04:31,130 --> 00:04:33,890
‫API, kami hanya mengirim data ke

100
00:04:33,890 --> 00:04:36,340
‫browser, biasanya dalam format data

101
00:04:36,340 --> 00:04:38,990
‫JSON, dan bukan seluruh situs web.

102
00:04:38,990 --> 00:04:42,090
‫Jadi, sekali lagi, hanya data yang dikirim ke klien

103
00:04:42,090 --> 00:04:44,670
‫dan bukan situs web yang siap ditampilkan.

104
00:04:44,670 --> 00:04:49,670
‫Jadi, tidak ada HTML, tidak ada CSS, hanya data JSON, oke?

105
00:04:49,860 --> 00:04:52,370
‫Jadi, ketika membangun situs web yang

106
00:04:52,370 --> 00:04:54,670
‫didukung API, selalu ada

107
00:04:54,670 --> 00:04:58,100
‫dua langkah ini, membangun API dan kemudian menggunakan

108
00:04:58,100 --> 00:05:01,110
‫API di sisi klien, dan omong-omong, API

109
00:05:01,110 --> 00:05:04,850
‫adalah singkatan dari antarmuka pemrograman aplikasi, dan pada tingkat

110
00:05:04,850 --> 00:05:07,800
‫yang sangat tinggi, pada dasarnya itu bagian

111
00:05:07,800 --> 00:05:11,260
‫dari perangkat lunak yang dapat digunakan oleh perangkat lunak

112
00:05:11,260 --> 00:05:15,340
‫lain, pada dasarnya, memungkinkan aplikasi untuk berbicara satu sama lain.

113
00:05:15,340 --> 00:05:17,220
‫Dan kita akan berbicara sedikit

114
00:05:17,220 --> 00:05:21,160
‫lebih dalam tentang apa sebenarnya API itu setelah kita mulai membangunnya.

115
00:05:21,160 --> 00:05:24,750
‫Bagaimanapun, sekarang tentang sisi klien yang baru saja saya sebutkan.

116
00:05:24,750 --> 00:05:28,300
‫Jadi, di sinilah situs web sebenarnya dirakit dengan

117
00:05:28,300 --> 00:05:31,470
‫memasukkan data yang kita terima ke dalam

118
00:05:31,470 --> 00:05:35,500
‫semacam template, biasanya menggunakan beberapa kerangka kerja front-end yang

119
00:05:35,500 --> 00:05:38,600
‫mewah seperti React, Angular, atau Vue.

120
00:05:38,600 --> 00:05:40,540
‫Saya tidak akan membahas secara

121
00:05:40,540 --> 00:05:43,170
‫spesifik di sini karena itu untuk kursus front-end,

122
00:05:43,170 --> 00:05:46,080
‫tetapi dalam istilah yang sangat umum, beginilah cara kerjanya.

123
00:05:46,080 --> 00:05:49,200
‫Jadi, Anda melihat bahwa ketika membangun situs web yang

124
00:05:49,200 --> 00:05:52,080
‫didukung API, fase pembuatan situs web semacam

125
00:05:52,080 --> 00:05:54,970
‫berpindah dari ujung belakang ke ujung depan, bukan?

126
00:05:54,970 --> 00:05:59,410
‫Atau bisa juga dikatakan berpindah dari server ke client.

127
00:05:59,410 --> 00:06:01,120
‫Itulah mengapa sering kali

128
00:06:01,120 --> 00:06:04,560
‫Anda akan melihat situs web dinamis disebut sebagai sisi

129
00:06:04,560 --> 00:06:07,730
‫server yang dirender karena sebenarnya dibuat di server.

130
00:06:07,730 --> 00:06:10,980
‫Di sisi lain, situs web yang didukung API

131
00:06:10,980 --> 00:06:15,360
‫sering disebut sebagai sisi klien yang dirender, yang masuk akal, bukan?

132
00:06:15,360 --> 00:06:17,200
‫Jadi, bagi kami

133
00:06:17,200 --> 00:06:20,750
‫pengembang back-end, sebenarnya jauh lebih mudah untuk hanya

134
00:06:20,750 --> 00:06:24,460
‫membangun API dan membiarkan orang-orang front-end membangun situs, bukan?

135
00:06:24,460 --> 00:06:27,760
‫Dan faktanya, Node adalah alat yang benar-benar sempurna untuk membangun

136
00:06:27,760 --> 00:06:31,510
‫API, dan ini sangat umum digunakan untuk itu, tetapi tentu saja,

137
00:06:31,510 --> 00:06:33,610
‫ini juga sangat cocok untuk

138
00:06:33,610 --> 00:06:37,210
‫membangun situs web yang dirender di sisi server yang dinamis.

139
00:06:37,210 --> 00:06:40,730
‫Jadi, dalam kursus ini, kita benar-benar akan melakukan kedua

140
00:06:40,730 --> 00:06:43,960
‫versi, dimulai dengan API, dan di akhir kursus,

141
00:06:43,960 --> 00:06:47,870
‫juga membangun situs web yang dirender menggunakan data yang sama persis.

142
00:06:47,870 --> 00:06:51,670
‫Saya memilih untuk melakukan keduanya karena menurut saya sangat penting bagi

143
00:06:51,670 --> 00:06:54,960
‫Anda untuk mengetahui cara membuat API dan situs web yang

144
00:06:54,960 --> 00:06:56,710
‫dirender di sisi server.

145
00:06:58,150 --> 00:06:59,840
‫Dan sekarang untuk menyelesaikan

146
00:06:59,840 --> 00:07:02,020
‫video ini, saya ingin segera menyebutkan

147
00:07:02,020 --> 00:07:05,630
‫bahwa API yang kami buat dengan Node, atau sebenarnya, bahasa

148
00:07:05,630 --> 00:07:07,150
‫lain apa pun,

149
00:07:07,150 --> 00:07:09,930
‫tentu saja dapat digunakan oleh klien lain selain

150
00:07:09,930 --> 00:07:12,920
‫browser, yang merupakan keuntungan besar dari membangun API alih-alih

151
00:07:12,920 --> 00:07:15,350
‫situs web yang dirender di sisi server.

152
00:07:15,350 --> 00:07:17,320
‫Jadi, katakanlah kita

153
00:07:17,320 --> 00:07:22,320
‫membuat contoh API di jonas. io/api/myCourseData.

154
00:07:22,380 --> 00:07:27,350
‫Jadi, setiap kali kami menekan URL itu, server akan mengirim kembali data

155
00:07:27,350 --> 00:07:28,980
‫tentang kursus pengembangan

156
00:07:28,980 --> 00:07:31,130
‫web yang sedang saya ajarkan.

157
00:07:31,130 --> 00:07:33,970
‫Sekarang, sejauh ini kami hanya berbicara

158
00:07:33,970 --> 00:07:38,060
‫tentang permintaan yang datang dari browser web, tetapi kami juga

159
00:07:38,060 --> 00:07:41,060
‫dapat meminta dan kemudian menggunakan data JSON

160
00:07:41,060 --> 00:07:44,860
‫yang sama persis pada aplikasi iOS asli atau aplikasi

161
00:07:44,860 --> 00:07:47,890
‫Android, atau bahkan pada aplikasi desktop untuk

162
00:07:47,890 --> 00:07:50,440
‫Mac atau untuk komputer Windows.

163
00:07:50,440 --> 00:07:54,130
‫Kemungkinannya benar-benar tidak terbatas ketika kami membangun API karena kami

164
00:07:54,130 --> 00:07:56,640
‫hanya memiliki satu sumber data, yang kemudian

165
00:07:56,640 --> 00:07:59,380
‫dapat diminta dan digunakan di mana saja,

166
00:07:59,380 --> 00:08:00,880
‫bukan hanya browser.

167
00:08:00,880 --> 00:08:03,210
‫Itu semacam masalah ketika kami membangun situs

168
00:08:03,210 --> 00:08:04,520
‫web dinamis normal.

169
00:08:04,520 --> 00:08:07,700
‫Kami mengembalikan file HTML dan CSS dan

170
00:08:07,700 --> 00:08:10,960
‫JavaScript, dan hanya browser yang benar-benar dapat memahaminya,

171
00:08:10,960 --> 00:08:14,470
‫jadi kami kemudian terjebak ke dalam platform tunggal itu.

172
00:08:14,470 --> 00:08:16,840
‫Dan itu mungkin tidak menjadi

173
00:08:16,840 --> 00:08:19,860
‫masalah dalam banyak kasus, tetapi untuk produk kompleks

174
00:08:19,860 --> 00:08:22,350
‫yang membutuhkan banyak aplikasi dan kemudian situs

175
00:08:22,350 --> 00:08:25,450
‫web dan aplikasi web, biasanya, API selalu dibutuhkan.

176
00:08:25,450 --> 00:08:29,530
‫Jadi, dalam contoh ini pada Jonas. io, saya bisa membangun API

177
00:08:29,530 --> 00:08:32,820
‫ini dan kemudian membangun situs web yang didukung API dan

178
00:08:32,820 --> 00:08:35,020
‫beberapa aplikasi dan mendapatkan data saya di

179
00:08:35,020 --> 00:08:37,830
‫semua klien ini hanya dari satu sumber, oke?

180
00:08:37,830 --> 00:08:41,100
‫Dan beberapa orang atau tim bahkan tidak memiliki klien sendiri

181
00:08:41,100 --> 00:08:44,240
‫sama sekali dan hanya menjual akses ke API mereka

182
00:08:44,240 --> 00:08:46,120
‫ke pihak ketiga yang

183
00:08:46,120 --> 00:08:49,560
‫kemudian akan menggunakan API ini dan bukan milik mereka sendiri.

184
00:08:49,560 --> 00:08:51,680
‫Jadi, benar-benar ada seluruh bisnis yang

185
00:08:51,680 --> 00:08:54,830
‫dibangun berdasarkan filosofi ini dengan hanya menjual API ke

186
00:08:54,830 --> 00:08:56,563
‫pengembang atau perusahaan lain.

187
00:08:57,520 --> 00:09:00,670
‫Bagaimanapun, saya berharap dengan slide terakhir ini konsep

188
00:09:00,670 --> 00:09:03,740
‫dan alasan dan, semacam, filosofi di

189
00:09:03,740 --> 00:09:07,380
‫balik pembuatan API sekarang menjadi sangat jelas bagi Anda.

190
00:09:07,380 --> 00:09:09,313
‫Jadi, mari kita lanjutkan.