1
00:00:00,360 --> 00:00:01,320
Witamy spowrotem.

2
00:00:01,680 --> 00:00:05,790
Więc ten film stanowi dość duży przełom w tej klasie.

3
00:00:05,790 --> 00:00:11,580
Ruszamy z technologii czysto front-end do naszego pierwszego smaku tyłu i tworzenie stron internetowych.

4
00:00:11,580 --> 00:00:13,940
Więc mamy zamiar nadal korzystać z wszystkiego, co nauczyliśmy się.

5
00:00:13,950 --> 00:00:20,880
To G-mail CSSA javascript, ale mamy zamiar nauczyć się nowych technologii, które pomogą nam dokonać pełnych aplikacji internetowych.

6
00:00:20,880 --> 00:00:25,300
Oczywiście przed rozpoczęciem pisania kodu mamy kilka innych rzeczy musimy dbać.

7
00:00:25,410 --> 00:00:27,840
Zaczniemy od przeglądu, jak działa Internet.

8
00:00:27,840 --> 00:00:38,580
Wtedy będziemy rozmawiać o statycznych kontra dynamicznych stron i gdzie Front End pasuje i gdzie wygodnie i pasuje i przeważnie Porozmawiamy bardziej dogłębnie o konkretnych tyłu i technologii, które mamy zamiar pracować.

9
00:00:39,030 --> 00:00:43,660
OK, więc zacznijmy od 60 drugiej wersji, jak działa Internet.

10
00:00:43,980 --> 00:00:50,790
Kiedy idziemy do Euro tutaj, żeby mnie Dot Com kursów slash jest kilka rzeczy, które zdarzają się za kulisami.

11
00:00:50,790 --> 00:00:56,130
Pierwszą rzeczą jest to, że nasz komputer musi dowiedzieć się, jaki adres IP, aby wysłać żądanie.

12
00:00:56,490 --> 00:01:04,840
Więc potrzeba nam, że R-OH do zapoznania się przyjść robi prawidłowego adresu IP, który jest unikalny lokalizator dla ciebie i mnie serwerze.

13
00:01:05,130 --> 00:01:10,050
Potem raz mamy, że adres IP i żądania New Age TTP jest wysyłany.

14
00:01:10,290 --> 00:01:14,910
Więc wniosek jest wysyłany na ten adres IP i nie jest to tylko puste prośba.

15
00:01:14,910 --> 00:01:16,800
Ma kilka informacji.

16
00:01:16,800 --> 00:01:20,830
Porozmawiamy więcej o konkretne szczegóły, które są w tym wniosku w następnym filmie.

17
00:01:21,090 --> 00:01:27,910
Ale wersja skrócona jest to, że takie rzeczy jak adres IP własnego czasu, że jesteś wysłanie go na tego typu żądania.

18
00:01:27,990 --> 00:01:31,920
A co najważniejsze specyficzna strona, która prosisz.

19
00:01:31,950 --> 00:01:34,710
Więc w tym przypadku mamy z prośbą o stronie kursu jest.

20
00:01:34,830 --> 00:01:43,010
Tak, że jest zakodowany w żądaniu, który jest wysyłany obok mnie dostaje się do tego wniosku i domyśla się, co robić.

21
00:01:43,140 --> 00:01:44,810
A następnie reaguje z czymś.

22
00:01:45,030 --> 00:01:52,230
Jeśli więc pytasz kursów Slash serwer Tomy będzie dowiedzieć się, co musi iść na stronie przedmiotu.

23
00:01:52,230 --> 00:02:13,580
Więc zakładam, że idzie do bazy danych i chwyta grono kursów i obrazów zestawia je w tym jeden długi plik HTL z pewnym powodzeniem, a niektóre javascript, a potem w końcu odesłać do mnie do mojego komputera ma odpowiedź HTP a następnie robi do przeglądarki, której zadaniem jest uczynić stronę.

24
00:02:13,860 --> 00:02:19,880
Więc to rzeczywista zawartość wygląda przed nasza przeglądarka dba o nią i czyni ją dla nas jako ludzi.

25
00:02:20,010 --> 00:02:24,880
To, co komputer widzi tylko HMO sukces w javascript.

26
00:02:25,050 --> 00:02:42,600
Podsumowując to wszystko, kiedy idę do adresu URL i naciśnij enter pierwszą rzeczą, która się dzieje, musimy znaleźć adres IP dla danej domeny, a następnie wysłać wniosek HTP prośbą o danej stronie do tego adresu IP i wtedy serwer otrzyma takiego wniosku.

27
00:02:42,750 --> 00:02:45,310
To domyśla się, co robić, co odpowiedzieć.

28
00:02:45,570 --> 00:02:51,300
A następnie reaguje z powrotem H.M. SS w javascript.

29
00:02:51,300 --> 00:02:56,510
Następną rzeczą, którą chcę omówić jest różnica między statycznych i dynamicznych stron internetowych.

30
00:02:56,610 --> 00:03:00,960
Rozmawialiśmy o tym również w jednym z wczesnych filmów o tym, jak działa Internet.

31
00:03:00,960 --> 00:03:05,730
Chcę zrobić krótkie podsumowanie, ponieważ ważne jest, aby tylny koniec dyskusji, że jesteśmy o krok.

32
00:03:06,330 --> 00:03:22,530
Tak więc istnieją dwa różne rodzaje stron internetowych stron statycznych i dynamicznych stron dynamicznych stron internetowych są strony, które zostały opracowane na stronie serwera, na którym serwer jest ciągnięcie razem lub tworząc stronę internetową, zanim zostanie odesłana jako odpowiedź.

33
00:03:22,530 --> 00:03:25,610
Wszystko, co napisałem do tej pory był statyczny.

34
00:03:25,650 --> 00:03:31,330
Więc nawet coś takiego, że nie wygląda to statyczne, bo nie dynamicznej zawartości.

35
00:03:31,350 --> 00:03:35,000
Dostajemy losowych kolorów za każdym razem i to jest gra.

36
00:03:35,010 --> 00:03:48,030
To nie wydaje się statyczna jako strona sieci Web, która restauracja przykład kiedyś na wcześniejszym filmie na ten temat, ale nadal jest statyczna, ponieważ jest to ten sam HMO Css w javascript.

37
00:03:48,060 --> 00:03:49,160
Za każdym razem.

38
00:03:49,440 --> 00:03:58,530
Tak to wygląda inaczej, ponieważ mamy kilka losowych kolorów, ale to te same podstawowe elementy za każdym razem, że jesteśmy otwarcie w przeglądarce na dynamicznej strony internetowej.

39
00:03:58,560 --> 00:04:04,620
Możemy mieć różne JavaScript lub inny Css inny każdy zespół, który jest wysyłany z powrotem za każdym razem.

40
00:04:04,980 --> 00:04:11,580
Więc kiedy idziemy do czegoś podobnego Reddit na przykład i odśwież stronę mogę tu dostać inną treść.

41
00:04:11,820 --> 00:04:19,330
I rzeczywiście zrobić za każdym razem jesteś świeża strona dostaniesz nowe treści, a więc jest to baza danych, która jest kompilacją rzeczy.

42
00:04:19,380 --> 00:04:28,020
Jest tam niektóre kody kontrolne, jeśli nie jesteś zalogowany, a jeśli jesteś zalogowany to nie pokaże się formularz tutaj, ale pokaże przycisku Wyloguj.

43
00:04:28,320 --> 00:04:34,360
A jeśli nie jesteś zalogowany to pokazuje formę i to pokazuje zaloguj się lub zarejestruj się przyciski.

44
00:04:35,370 --> 00:04:44,430
Więc ta strona nie jest dokładnie to samo G H L M C Ss w JavaScript, który wysłał do mnie za każdym razem, gdy serwer jest rzeczywiście podejmowaniu decyzji co do odesłania.

45
00:04:44,430 --> 00:04:53,540
Budując stronę internetową przed wysłaniem go do mnie w porównaniu do tej strony jest tak samo dokładna zawartość za każdym razem.

46
00:04:56,320 --> 00:04:59,260
OK, więc skupmy się nieco więcej na tylnym końcu teraz.

47
00:04:59,350 --> 00:05:09,800
Więc ten schemat jest rodzajowy stosu i stosu to termin, który jest używany w odniesieniu do wszystkich technologii, które dana aplikacja internetowa używa.

48
00:05:09,820 --> 00:05:17,770
Więc H.T. Melchior mówi w javascript zawsze są prawie zawsze częścią stosu dziś o wielkich fantazyjnych aplikacji internetowych.

49
00:05:17,770 --> 00:05:21,310
Technicznie moglibyśmy mieć stronę internetową, która nie ma żadnych sukcesów.

50
00:05:21,340 --> 00:05:22,690
Byłoby to po prostu ohydne.

51
00:05:22,780 --> 00:05:28,420
Mogliśmy mieć stronę internetową, która nie ma żadnego klienta JavaScript po stronie, jak również i to po prostu nie byłoby bardzo interaktywne.

52
00:05:28,540 --> 00:05:46,050
Ale możemy jeszcze zrobić idealnie dobrą stronę internetową, jak to zrobiliśmy z oryginalnym portfel stock miejscu po prostu każdy zespół Elizeusz nam, ale większość aplikacji internetowych jak wspomniałem mają HDMI elsea mówi i JavaScript, który jest wysyłanych z powrotem na backend jest gdzie widzimy dużo więcej wariantów.

53
00:05:46,270 --> 00:05:57,720
Tak więc istnieją różne języki, które możemy napisać kod po stronie serwera i możemy pisać lub do tyłu i przy użyciu Ruby lub Python lub Skala lub Java lub JavaScript lub THP.

54
00:05:57,820 --> 00:05:59,500
Jest tak wiele opcji tam.

55
00:05:59,530 --> 00:06:01,930
Istnieje wiele różnych baz danych tam.

56
00:06:01,930 --> 00:06:07,760
Post-kryzysu i kontynuacja w moim, jak również i Mongo i tam jest tak wiele możliwości wyboru.

57
00:06:07,810 --> 00:06:16,110
Więc stos termin ten odnosi się do tego, co twórcy poszczególnych wyborów dokonanych i co dokładnie technologie, których używają.

58
00:06:16,180 --> 00:06:19,200
Jest to bardzo częste pytanie dla twórców zadać sobie nawzajem.

59
00:06:19,450 --> 00:06:25,010
Jaki jest twój stack w tym spółki lub co stosu używasz na tym konkretnym projekcie.

60
00:06:25,030 --> 00:06:28,290
Tak tu jest prawdziwym przykładem życia Reddit stosie.

61
00:06:28,510 --> 00:06:32,830
To są tylko niektóre z technologii, które Reddit używa na swojej stronie internetowej.

62
00:06:33,160 --> 00:06:37,010
Więc witryna jest napisana w Pythonie za pomocą ramy o nazwie kolby.

63
00:06:37,410 --> 00:06:42,610
Jest zbudowany na serwerze Silnik X i wykorzystuje postscripts w swojej bazie danych.

64
00:06:42,610 --> 00:06:48,250
Jest rzeczywiście strona internetowa poświęcona udostępniania różnych firm stosy zwane akcje stosie.

65
00:06:48,460 --> 00:06:55,470
Więc mam go otworzyć tutaj i to jest strona Reddit na tekstury i widzimy wszystkie różne technologie, z których korzystają.

66
00:06:55,660 --> 00:06:59,270
I genetyki Python po Gresse Amazon S3.

67
00:06:59,410 --> 00:07:02,590
I mówi, poniżej trochę o tym, co oni służą.

68
00:07:02,590 --> 00:07:04,980
Nie daj się przytłoczony ilu ikony istnieją.

69
00:07:05,110 --> 00:07:09,530
Ilu nazwy i wszystkie te różne kategorie i te wszystkie inne warunki.

70
00:07:09,790 --> 00:07:11,100
To nie koncentruje się tutaj.

71
00:07:11,340 --> 00:07:15,910
Chcę tylko pokazać, że różne strony internetowe wykorzystują różne technologie.

72
00:07:15,910 --> 00:07:20,190
Więc kliknij na stosach i możemy spojrzeć na niektóre inne stosy firmy.

73
00:07:20,290 --> 00:07:33,130
Na przykład powietrzu B i B można zobaczyć, że FBN B używa szyny i Ruby, które wykorzystują mój eSKY również wiele do javascript Java.

74
00:07:33,520 --> 00:07:35,720
Wykorzystują całą masę różnych technologiach.

75
00:07:35,770 --> 00:07:38,500
Więc wróćmy do naszych zjeżdżalni tutaj.

76
00:07:38,500 --> 00:07:45,650
Kolejną rzeczą, którą chcemy przywołać to, że to właśnie tutaj niebieska linia oznacza granicę między tylnym końcem i przód.

77
00:07:46,000 --> 00:07:51,490
Więc rozmawialiśmy o tym jak dynamiczna strona jest zbudowana przez serwer na backend.

78
00:07:51,490 --> 00:07:57,050
Więc to tu ta część wykresu, gdzie jest dynamiczna część terenu przychodzi.

79
00:07:57,250 --> 00:08:13,130
Więc to wszystko jest logika napisany w Pythonie na czerwono to przypadek, że domyśla się, jeśli użytkownik jest zalogowany, jeśli musimy pokazać formę, co dodać, aby dodać do strony jakie obrazy, aby umieścić w razie musimy mieć znak i zablokować przycisku lub przycisku Wyloguj.

80
00:08:13,240 --> 00:08:23,600
Wszystko to odbywa się w tył iw tej części wykresu, a następnie odsyła godz tim L S S C i JavaScript.

81
00:08:23,680 --> 00:08:26,170
Więc oto stos, że będziemy się uczyć.

82
00:08:26,380 --> 00:08:27,800
Mamy zamiar użyć węzła j.

83
00:08:27,870 --> 00:08:28,440
Tak.

84
00:08:28,450 --> 00:08:33,120
Więc będziemy wciąż pisząc skrypt, ale będziemy pisać je na backend.

85
00:08:33,280 --> 00:08:40,090
Mamy zamiar wykorzystać ramy o nazwie Express mamy również zamiar użyć Mangu DBI w naszej bazie danych.

86
00:08:40,370 --> 00:08:46,490
I wtedy oczywiście będziemy mieć również h t m l c e s i JavaScript podobnie jak używaliśmy w ciągu ostatnich kilku jednostek.

87
00:08:46,720 --> 00:08:58,950
Więc teraz w tym momencie w trakcie może uważasz się za front-end developer lub front-end developer w szkoleniu, gdzie omówiliśmy wszystko, co musisz wiedzieć, aby zacząć przód stron internetowych.

88
00:08:58,960 --> 00:09:14,510
Teraz mamy zamiar zacząć mówić o powrót w tworzeniu stron internetowych i raz wnosimy te dwa razem pod koniec kursu gdziekolwiek pisania kodu po stronie serwera przy pomocy Express A.J. jak Mongo D-B mamy dziennik użytkownika w ale jesteśmy również pisanie po stronie klienta lub przedni koniec JavaScript.

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

90
00:09:16,390 --> 00:09:19,090
To, co nazwalibyśmy internetowej rozwoju pełnego stosu.

91
00:09:19,270 --> 00:09:26,380
Określenie pełnego stosu Web Development odnosi się do pisania kodu na wszystkich częściach komina tylny koniec i przedni koniec.

92
00:09:26,710 --> 00:09:30,990
Poniżej przedstawiono schemat niektórych funkcji, które można zrealizować w koszu.

93
00:09:31,210 --> 00:09:51,420
I to jest przy użyciu Reddit jako przykład ponownie widać mamy funkcje, takie jak sprawdzenie, czy użytkownik jest zalogowany sign up użytkownikowi dodać nowy wpis do bazy danych utworzyć nowy komentarz usunąć post z rodzaju bazy danych i pozycjonowanie słupki stworzyć nowy sub Reddit dodać abonenta do newslettera i zapisać, że w bazie danych.

94
00:09:51,760 --> 00:10:00,270
A najważniejszy jest oczywiście dowiedzieć się, co każdy zespół będzie zobaczyć oceny w javascript wysłać z powrotem do użytkownika, który jest następnie wysłany z powrotem.

95
00:10:00,460 --> 00:10:10,730
Przekraczając tę ​​niebieską linię, gdzie jesteśmy teraz idzie do przodu, że H.M.S. zabójcy i Javascript został wysłany z powrotem do mnie, a potem widzę to w mojej przeglądarce.

96
00:10:11,020 --> 00:10:17,260
Mam jeszcze jeden schemat tutaj również rozmowy na temat czołowy kontra back-end, ale to nieco inaczej sformatowany.

97
00:10:17,560 --> 00:10:24,070
Ten diagram sekwencji zdarzeń między przedniej i tylnej iw ciągu kilku załadowaniu strony.

98
00:10:24,370 --> 00:10:29,410
Tak na przednim końcu jeśli pójdę ją przeczytać dot com i odświeżyć.

99
00:10:29,680 --> 00:10:34,790
Wysyłam prośbę o stronie Reddit, a następnie, że idzie go odczytać.

100
00:10:34,960 --> 00:10:39,340
To sprawia, że ​​żądania do serwera, a serwer widzi, że pytam na stronie głównej.

101
00:10:39,370 --> 00:10:52,040
Więc jest jakiś server side logika chwyta górny słupek z bazy danych i sprawia, że ​​przez cały czas LNC SS i JavaScript że widzę tutaj, a następnie wysyła je z powrotem do mnie którą następnie wyświetlić w przeglądarce.

102
00:10:52,780 --> 00:11:02,370
Następnym krokiem jest to, że mogę coś wpisać w polu wyszukiwania, takich jak psy, które zrobię teraz wpisywać psy tutaj i naciśnij Enter.

103
00:11:02,710 --> 00:11:10,320
A kiedy uderzę wprowadzić nowy wniosek jest odsyłany do serwera Reddit tym razem mówiąc, że szukam dla psów.

104
00:11:10,570 --> 00:11:25,930
Więc serwer ma jakąś logikę, która pobiera moje wyszukiwanie utrzymujące psy i wyszukuje wszystkie posty, które pasują do tego terminu w bazie danych, a następnie sprawia mi jakąś nową wieku mężczyzn ocenia we JavaScript do strony z wynikami psa, a następnie wysyła je z powrotem do mnie ,

105
00:11:26,620 --> 00:11:32,700
A potem moja przeglądarka renderuje go i widzę to, że jest bardzo, bardzo uproszczoną wersję oczywiście.

106
00:11:32,810 --> 00:11:39,660
Jest o wiele więcej dzieje się za kulisami i Reddit będą faktycznie tworząc własną wersję aplikacji bardzo podobny do lektury.

107
00:11:39,820 --> 00:11:46,630
Gdy dowiadujemy się więcej o Express i wiem J.S. i Mongo DB I będziemy dokonanie pełnego stosowania stosu.