1
00:00:00,360 --> 00:00:01,320
Tekrar hoşgeldiniz.

2
00:00:01,680 --> 00:00:05,790
Bu video bu sınıfta oldukça önemli bir kilometre taşını temsil ediyor.

3
00:00:05,790 --> 00:00:11,580
Yalnızca ön uç teknolojilerinden sırt ve web gelişiminin ilk tatlarına doğru ilerliyoruz.

4
00:00:11,580 --> 00:00:13,940
Bu yüzden öğrendiğimiz her şeyi kullanmaya devam edeceğiz.

5
00:00:13,950 --> 00:00:19,230
G-mail CSSA javascript ama tam web uygulamaları yapmamıza yardım eden bazı

6
00:00:19,230 --> 00:00:20,880
yeni teknolojileri öğreneceğiz.

7
00:00:20,880 --> 00:00:25,300
Elbette bazı kodları yazmaya başlamadan önce, dikkat etmemiz gereken birkaç şey daha var.

8
00:00:25,410 --> 00:00:27,840
Internet'in nasıl çalıştığını inceleyerek başlayacağız.

9
00:00:27,840 --> 00:00:32,310
Ardından, statik vs. ile ilgili konuşacağız. dinamik siteler ve nerede ön uç uyuyor

10
00:00:32,310 --> 00:00:37,650
ve nereye geri ve uyuyor ve çoğunlukla biz geri çalışacağız belirli arka ve teknolojileri hakkında daha

11
00:00:37,650 --> 00:00:38,580
fazla konuşacağız.

12
00:00:39,030 --> 00:00:43,660
Pekâlâ, İnternetin nasıl çalıştığına dair 60'ıncı sürümüyle başlayalım.

13
00:00:43,980 --> 00:00:49,890
Bana bir Euro'ya gittiğimde buradaki eğik çizgi dersleri sahnelerin arkasında birkaç şey var.

14
00:00:50,790 --> 00:00:56,130
Birincisi, bilgisayarımızın bir IP adresinin ne şekilde gönderileceğini anlaması gerekir.

15
00:00:56,490 --> 00:01:03,180
Bu yüzden sizi okumak için R-OH alır sizi ve benim sunucu için benzersiz bulma yeri olan

16
00:01:03,180 --> 00:01:04,840
doğru IP adresini alır.

17
00:01:05,130 --> 00:01:10,050
Sonra bir kere o IP adresimiz var ve Yeni Çağ TTP isteği gönderildi.

18
00:01:10,290 --> 00:01:14,910
Bu IP adresine bir istek gönderildi ve bu sadece boş bir istek değil.

19
00:01:14,910 --> 00:01:16,800
Bir sürü bilgi var.

20
00:01:16,800 --> 00:01:20,830
Bir sonraki videoda bu talebin içerdiği ayrıntılarla ilgili daha fazla konuşacağız.

21
00:01:21,090 --> 00:01:26,220
Ancak kısa sürüm, kendi IP Adresiniz gibi bir şeyleri bu tür bir istekte

22
00:01:26,220 --> 00:01:27,910
gönderdiğiniz zamana sahip olmasıdır.

23
00:01:27,990 --> 00:01:31,920
Ve en önemlisi, istediğin belirli sayfa.

24
00:01:31,950 --> 00:01:34,710
Bu durumda bu durumda dersin sayfasını istiyoruz.

25
00:01:34,830 --> 00:01:42,510
Bu, yanıma gönderilen istekte kodlanmış bu talebi alır ve ne yapacağımı

26
00:01:42,510 --> 00:01:43,010
belirler.

27
00:01:43,140 --> 00:01:44,810
Ve sonra bir şeyle karşılık verir.

28
00:01:45,030 --> 00:01:51,250
Dolayısıyla, Slash kurslarını talep edersek, Tomy sunucusu ders sayfasında neye ihtiyaç

29
00:01:51,300 --> 00:01:52,230
duyacağını bulacaktır.

30
00:01:52,230 --> 00:01:58,380
Bu yüzden bir veritabanına girdiğini ve kursları bir araya getirdiğini ve bazı

31
00:01:58,380 --> 00:02:05,310
başarılı ve bazı javascriptleri içeren bu bir uzun HTL dosyasına onları derleyen ve sonra

32
00:02:05,310 --> 00:02:13,580
nihayet bana geri bilgisayarıma gönderilen HTP yanıtını aldığını varsayacağım ve sonra işi sayfayı vermek olan bir tarayıcıya.

33
00:02:13,860 --> 00:02:18,870
Dolayısıyla, gerçek içerik, tarayıcımızın onunla ilgilenmesinden önce bu şekilde görünür ve bizler için

34
00:02:18,870 --> 00:02:19,880
bizler için yapar.

35
00:02:20,010 --> 00:02:24,880
Bilgisayarın javascript'teki HMO başarısını gördüğü şey budur.

36
00:02:25,050 --> 00:02:31,320
Bütün bunları bir URL'ye gittiğimde özetlemek gerekirse, ilk gerçekleşen şeyin içine girmek isabet edersek bu

37
00:02:31,320 --> 00:02:39,330
etki alanının IP adresini bulmamız gerekir ve o zaman belirli bir sayfayı o IP adresinden istemek için bir HTP isteği

38
00:02:39,330 --> 00:02:42,600
göndeririz ve daha sonra sunucu Bu isteği alır.

39
00:02:42,750 --> 00:02:45,310
Neye cevap vereceğimi anlar.

40
00:02:45,570 --> 00:02:51,300
Ve sonra H ile karşılık verir. M. SS, javascript içinde.

41
00:02:51,300 --> 00:02:56,510
Konuşmak istediğim sonraki şey, statik ve dinamik web sayfaları arasındaki farktır.

42
00:02:56,610 --> 00:03:00,960
Bunun hakkında İnternet'in nasıl çalıştığına ilişkin ilk videolardan birinde de konuştuk.

43
00:03:00,960 --> 00:03:05,100
Hızlı bir özet yapmak istiyorum, çünkü sahip olmak üzeriniz olan arka uç tartışması için önemlidir.

44
00:03:06,330 --> 00:03:13,560
Dolayısıyla iki farklı Web sitesi türü vardır: statik sayfalar ve dinamik sayfalar dinamik web sayfaları,

45
00:03:13,710 --> 00:03:19,860
sunucu tarafında bir araya getirilmeden önce bir web sayfasının oluşturulması veya birlikte çekilmesi

46
00:03:19,890 --> 00:03:22,530
için sunucu tarafında derlenen sitelerdir.

47
00:03:22,530 --> 00:03:25,610
Şu ana kadar yazdığımız her şey durağandır.

48
00:03:25,650 --> 00:03:31,330
Öyleyse böyle bir şey bile durağanmış gibi görünmüyor çünkü dinamik içerik var.

49
00:03:31,350 --> 00:03:35,000
Her seferinde rasgele renkler alıyoruz ve bu bir oyun.

50
00:03:35,010 --> 00:03:42,030
Bu konudaki daha önceki videoda kullandığım restoran Web sayfası örneği kadar statik

51
00:03:42,030 --> 00:03:48,030
görünmüyor ancak javascript'teki aynı HMO C Ss'si olduğu için hala statik.

52
00:03:48,060 --> 00:03:49,160
Her seferinde.

53
00:03:49,440 --> 00:03:54,630
Evet farklı görünüyor çünkü bazı rasgele renklerimiz var ancak aynı temel

54
00:03:54,630 --> 00:03:58,530
parçaları, tarayıcıda dinamik bir web sitesinde her açtığımızda aynıdır.

55
00:03:58,560 --> 00:04:03,900
Her seferinde geri gönderilen her takımdan farklı javascript veya farklı Cs'lere

56
00:04:03,900 --> 00:04:04,620
sahip olabilirdik.

57
00:04:04,980 --> 00:04:11,100
Bu nedenle Reddit gibi bir şeye gittiğimizde sayfayı yenilediğimde buraya farklı bir içerik

58
00:04:11,100 --> 00:04:11,580
getirebiliriz.

59
00:04:11,820 --> 00:04:17,790
Aslında yeni içeriğinizin bulunduğu sayfaya her defasında yeni geliyorum ve bu nedenle işleri derleyen

60
00:04:17,790 --> 00:04:19,330
bir veritabanı var.

61
00:04:19,380 --> 00:04:24,960
Giriş yapmış olup olmadığınızı kontrol eden bazı kodlar var, oturum açtıysanız burada size bir

62
00:04:24,960 --> 00:04:28,020
form göstermeyeceğim, ancak size bir çıkış düğmesi gösterecektir.

63
00:04:28,320 --> 00:04:34,360
Ve giriş yapmadıysanız, size bir form gösterilir ve oturum açtığınız veya üye olduğunuzu gösterir.

64
00:04:35,370 --> 00:04:42,210
ne gönderileceğine karar verdiği her seferinde bana geri gönderen javascript'teki H G M L C Ss ile aynı değildir.

65
00:04:42,210 --> 00:04:44,430
Dolayısıyla bu web sayfası, sunucu aslında

66
00:04:44,430 --> 00:04:51,990
Bir web sayfasını bu sitede karşı gönderilmeden önce oluştururken, her seferinde aynı

67
00:04:51,990 --> 00:04:53,540
içeriğe sahiptir.

68
00:04:56,320 --> 00:04:59,260
Tamam o halde şimdi arka uç üzerinde biraz daha odaklanalım.

69
00:04:59,350 --> 00:05:06,940
Dolayısıyla bu diyagram genel bir yığın ve yığın, belirli bir web uygulamasının kullandığı tüm

70
00:05:07,210 --> 00:05:09,800
teknolojilere atıfta bulunan bir terimdir.

71
00:05:09,820 --> 00:05:16,840
Yani H. T. Melchior, javascript'de her zaman neredeyse her zaman büyük süslü web uygulamalarında

72
00:05:16,840 --> 00:05:17,770
yığının bir parçası olduğunu söylüyor.

73
00:05:17,770 --> 00:05:21,310
Teknik olarak, herhangi bir başarıya sahip olmayan bir Web sitemiz olabilir.

74
00:05:21,340 --> 00:05:22,690
Bu sadece iğrenç olurdu.

75
00:05:22,780 --> 00:05:27,430
Herhangi bir istemci tarafı javascripti olmayan bir web sitemiz olabilir ve sadece

76
00:05:27,430 --> 00:05:28,420
etkileşimli olmazdı.

77
00:05:28,540 --> 00:05:34,150
Ancak yine de orijinal fotoğraf portföy sitesiyle yaptığımız gibi mükemmel bir

78
00:05:34,150 --> 00:05:41,110
Web sitesi hazırlayabiliriz Eliseus bize ama çoğu web uygulaması, HDMI elsea diyor ve arka

79
00:05:41,350 --> 00:05:46,050
uçta geri gönderilmekte olan Javascript'imiz var. çok daha fazla değişken.

80
00:05:46,270 --> 00:05:51,910
Skala veya Java veya javascript veya THP yazabilir veya geri yazabilir veya kullanabiliriz.

81
00:05:51,910 --> 00:05:57,720
Yani sunucu tarafı kodu yazabildiğimiz çeşitli diller vardır ve Ruby veya Python veya

82
00:05:57,820 --> 00:05:59,500
Orada çok seçenek var.

83
00:05:59,530 --> 00:06:01,930
Dışarıda her çeşit farklı veri tabanı var.

84
00:06:01,930 --> 00:06:07,760
Post kriz sonrası ve benim için de netice ve Mongo ve çok seçenek var.

85
00:06:07,810 --> 00:06:14,590
Yani yığın terimi, geliştiricilerin hangi seçimleri yaptıkları ve kullandığı teknolojileri

86
00:06:14,590 --> 00:06:16,110
ifade eder.

87
00:06:16,180 --> 00:06:19,200
Geliştiricilerin birbirlerine sormaları çok yaygın bir sorundur.

88
00:06:19,450 --> 00:06:25,010
Bu şirketteki yığınınız nedir veya bu belirli projede hangi yığın kullanıyorsunuz.

89
00:06:25,030 --> 00:06:28,290
İşte Reddit yığınının gerçek bir örneği.

90
00:06:28,510 --> 00:06:32,830
İşte bu, Reddit'in web sitesinde kullandığı teknolojilerin bazıları.

91
00:06:33,160 --> 00:06:37,010
Dolayısıyla site, balon olarak adlandırılan bir çerçeveyi kullanarak Python'da yazılmıştır.

92
00:06:37,410 --> 00:06:42,610
Bir X X sunucusunda yerleşiktir ve postscript'leri veritabanında kullanmaktadır.

93
00:06:42,610 --> 00:06:48,250
Aslında Stack paylaşımı adı verilen farklı şirketlerin yığınlarını paylaşmaya ayrılmış bir Web sitesi var.

94
00:06:48,460 --> 00:06:54,760
Bu yüzden onu burada açtım ve bu doku üzerindeki Reddit sayfası ve kullandığı tüm farklı

95
00:06:54,760 --> 00:06:55,470
teknolojileri görebiliyoruz.

96
00:06:55,660 --> 00:06:59,270
Ve genetik Python post gresse Amazon S3.

97
00:06:59,410 --> 00:07:02,590
Ve bunların altında ne için kullanıldıklarını anlatıyor.

98
00:07:02,590 --> 00:07:04,980
Kaç tane simge olduğundan bıkmayınız.

99
00:07:05,110 --> 00:07:09,530
Kaç isim ve tüm bu farklı kategoriler ve tüm bu farklı terimler.

100
00:07:09,790 --> 00:07:11,100
Burada odak noktası değil.

101
00:07:11,340 --> 00:07:15,910
Sana göstermek istediğim tek şey, farklı Web sitelerinin farklı teknolojileri kullanması.

102
00:07:15,910 --> 00:07:20,190
Öyleyse yığınları tıklayın ve diğer şirket yığınlarına bir göz atalım.

103
00:07:20,290 --> 00:07:31,570
Örneğin hava B ve B, FBN B'nin rayları ve Ruby'yi kullandığını görebilir; bu da Ruby'nin javascript'i için Esky kuyum

104
00:07:32,230 --> 00:07:33,130
alanımı kullanıyor.

105
00:07:33,520 --> 00:07:35,720
Bir sürü farklı teknolojiyi kullanıyorlar.

106
00:07:35,770 --> 00:07:38,500
Şimdi slaytlarımıza geri dönelim.

107
00:07:38,500 --> 00:07:44,110
Getirmek istediğim başka bir şey de burada bu mavi çizginin arka uç ve ön uç

108
00:07:44,110 --> 00:07:45,650
arasındaki sınırı gösteriyor olması.

109
00:07:46,000 --> 00:07:51,490
Dolayısıyla dinamik bir sitenin arka uçtaki bir sunucu tarafından nasıl oluşturulduğunu tartıştık.

110
00:07:51,490 --> 00:07:57,050
Dolayısıyla burada diyagramın bu kısmı, sitenin dinamik bölümünün geldiği yerdir.

111
00:07:57,250 --> 00:08:02,810
budur; bir kullanıcıya oturum açarsa, giriş yaptıysak rakamları belirtiriz, eğer bir form göstermemiz

112
00:08:03,280 --> 00:08:10,120
gerekiyorsa, sayfaya ne ekleyeceğiz, kaydolmamız gerekiyorsa hangi resimlerin koyulacağını ve kilitleme düğmesi veya bir çıkış düğmesi.

113
00:08:10,120 --> 00:08:13,130
Python'da kırmızı olarak yazılmış olan tüm mantık

114
00:08:13,240 --> 00:08:20,290
Bunların hepsi şemanın arka tarafında ve bu bölümde yapılır ve daha sonra h tim L

115
00:08:20,410 --> 00:08:23,600
C S S ve Javascript'i geri gönderir.

116
00:08:23,680 --> 00:08:26,170
İşte öğrenme yapacağımız yığın.

117
00:08:26,380 --> 00:08:27,800
J düğümünü kullanacağız.

118
00:08:27,870 --> 00:08:28,440
Evet.

119
00:08:28,450 --> 00:08:33,120
Dolayısıyla hâlâ javascript yazacağız ancak arka planda yazacağız.

120
00:08:33,280 --> 00:08:39,610
Express adlı bir çerçeveyi kullanacağız ve ayrıca Mangu DBI'yi veritabanımız olarak kullanacağız.

121
00:08:40,370 --> 00:08:45,610
Ve elbette ayrıca son birkaç birimde kullandığımız gibi html ve CSS'leri

122
00:08:45,610 --> 00:08:46,490
de alacağız.

123
00:08:46,720 --> 00:08:52,510
Dolayısıyla şu anda kursun bu noktasında, kendinizi bir ön uç geliştirici ya da eğitimde bir ön

124
00:08:52,510 --> 00:08:57,490
uç geliştiricisi olarak düşünebilirsiniz; burada, web sitelerinin ön uçlarını başlatmaya başlamanız için bilmeniz

125
00:08:57,490 --> 00:08:58,950
gereken her şeyi verdik.

126
00:08:58,960 --> 00:09:03,160
Şimdi web geliştirmede geri konuşmaya başlayacağız ve bu ikisini birlikte Express A ile sunucu

127
00:09:03,160 --> 00:09:09,790
tarafı kod yazan her yerde kursun sonuna getireceğiz. J. Mongo D-B olarak kullanıcı girişi

128
00:09:09,790 --> 00:09:14,510
sahibiyiz ancak aynı zamanda istemci tarafı veya ön uç javascript yazıyoruz.

129
00:09:14,510 --> 00:09:16,170
H Tim L ve C Ss.

130
00:09:16,390 --> 00:09:19,090
Tam yığında web geliştirme olarak adlandırdığımız şey de budur.

131
00:09:19,270 --> 00:09:25,450
Tam yığıt web geliştirme terimi, yığının tüm bölümlerinde arka uç ve ön uç kodunu yazmayı

132
00:09:25,450 --> 00:09:26,380
ifade eder.

133
00:09:26,710 --> 00:09:30,990
Sepette uygulayabileceğimiz bazı işlevlerin bir diyagramı.

134
00:09:31,210 --> 00:09:37,240
örnek olarak Reddit'i kullanıyor yine de kullanıcının oturum açtığına bakmak gibi özelliklere sahip olduğumuzu görebilirsiniz Kullanıcıya

135
00:09:37,240 --> 00:09:44,140
yeni bir üye girişi veritabanına yeni bir posta ekleme yeni bir yorum oluşturun veritabanından bir postayı kaldırma sıralama

136
00:09:44,140 --> 00:09:50,290
ve mesaj sıralamasını oluştur yeni bir alt Reddit haber bültenine bir abone ekleyin ve bunu veritabanına kaydedin.

137
00:09:50,290 --> 00:09:51,420
Ve bu bir

138
00:09:51,760 --> 00:09:57,640
Ve tabii ki en önemli olanı, her takımın javascript içinde değerlendirip neyi değerlendireceğini anlaması,

139
00:09:57,640 --> 00:10:00,270
daha sonra geri gönderilen kullanıcıya göndermektir.

140
00:10:00,460 --> 00:10:06,880
Bu mavi çizgiyi geçip şu anda H.'nin ön ucuna gideceğiz. M. S. katiller ve Javascript

141
00:10:06,910 --> 00:10:10,730
bana geri gönderildi ve bunu tarayıcımda gördüm.

142
00:10:11,020 --> 00:10:16,360
Burada, ön uç ile arka uç arasındaki görüşmelerin yanı sıra biraz farklı biçimlendirilmiş bir diyagram

143
00:10:16,360 --> 00:10:17,260
daha var.

144
00:10:17,560 --> 00:10:23,770
Bu diyagram, ön-arka ve birkaç sayfalık yüklerin gidişatı arasındaki olayların sırasını belirtir.

145
00:10:24,370 --> 00:10:29,410
Ön uçta bunu okursam dot com ve yenileyebilirim.

146
00:10:29,680 --> 00:10:34,790
Reddit ana sayfası için bir istek gönderiyorum ve sonra bunu okumak için gidiyorum.

147
00:10:34,960 --> 00:10:39,340
Bu istek kendi sunucusuna yapıyor ve sunucu ana sayfayı istediğimi görüyor.

148
00:10:39,370 --> 00:10:45,650
Dolayısıyla, veritabanından üstteki yazıyı kapmakta ve burada gördüğüm ve daha sonra tarayıcımda görüntülediğim bana

149
00:10:45,730 --> 00:10:52,040
geri gönderen her zaman LNC SS ve javascript'i yapan bazı sunucu tarafı mantığı var.

150
00:10:52,780 --> 00:11:00,400
Bir sonraki adım, şimdi yapacağım köpekler gibi bir arama kutusuna bir şeyler yazabileceğim, burada

151
00:11:00,460 --> 00:11:02,370
köpek yazıp içeri girmek.

152
00:11:02,710 --> 00:11:09,340
yeni bir istek Reddit sunucusuna geri gönderildi ve bu sefer köpekler için arama yaptığım söyleniyor.

153
00:11:09,340 --> 00:11:10,320
Ve girdiğimde

154
00:11:10,570 --> 00:11:16,630
Yani sunucu, benim arama terim köpeklerimi alır ve o terimle veritabanında eşleşen tüm yayınları bulur

155
00:11:16,630 --> 00:11:23,080
ve o zaman bana bazı eski çağdaki erkeklerin javascript içinde köpeklerin sonuçlar sayfasını değerlendirmesini sağlar ve

156
00:11:23,080 --> 00:11:25,930
sonra bunu bana geri gönderir .

157
00:11:26,620 --> 00:11:32,700
Ve sonra tarayıcım bunu işliyor ve bunun çok basitleştirilmiş bir sürüm olduğunu görüyorum.

158
00:11:32,810 --> 00:11:37,300
Sahnelerin arkasında çok daha fazla şey oluyor ve Reddit aslında okumak için

159
00:11:37,330 --> 00:11:39,660
benzer bir uygulamanın kendi sürümünü oluşturuyor.

160
00:11:39,820 --> 00:11:46,540
Bir keresinde Express hakkında daha fazla bilgi edinin ve J.'yi tanı. S. ve Mongo DB Ve tam bir yığın uygulaması yapacağız.