Ben tornato.
Quindi questo video rappresenta una pietra miliare molto importante in questa classe.
Stiamo passando da tecnologie puramente front-end al nostro primo assaggio di back e sviluppo web.
Quindi continueremo a usare tutto ciò che abbiamo imparato.
È un javascript CSS per Gmail, ma impareremo alcune nuove tecnologie che ci aiutano
a realizzare applicazioni web complete.
Naturalmente, prima di iniziare a scrivere del codice, abbiamo alcune altre cose di cui dobbiamo occuparci.
Inizieremo esaminando come funziona Internet.
Quindi parleremo di statico vs. siti dinamici e dove il front end si
adatta e dove back e si inserisce e per lo più parleremo più approfonditamente del back e delle tecnologie
specifiche con cui lavoreremo.
OK, iniziamo con la versione da 60 secondi di come funziona Internet.
Quando andiamo a un Euro qui per me, ci sono alcune cose che succedono dietro le quinte.
La prima cosa è che il nostro computer ha bisogno di capire a quale indirizzo IP inviare una richiesta.
Quindi ti ci porta R-OH tu a leggere fuori entra l'indirizzo IP corretto che è il localizzatore unico
per te e me server.
Quindi, una volta ottenuto l'indirizzo IP e la richiesta TTP New Age viene inviata.
Quindi una richiesta viene inviata a quell'indirizzo IP e non è solo una richiesta vuota.
Ha un sacco di informazioni.
Parleremo di più sui dettagli specifici presenti in quella richiesta nel prossimo video.
Ma la versione breve è che ha cose come il tuo indirizzo IP il tempo che stai
inviando a quel tipo di richiesta.
E soprattutto la pagina specifica che stai chiedendo.
Quindi in questo caso stiamo chiedendo la pagina del corso.
In modo che è codificato nella richiesta che viene inviata accanto a me ottiene quella richiesta e capisce cosa
fare.
E poi risponde con qualcosa.
Quindi, se stiamo chiedendo dei corsi di Slash, il server Tomy capirà cosa deve andare sulla pagina
del corso.
Quindi presumo che entri in un database e afferri un sacco di corsi e le immagini li
compili in questo unico file HTL con un po 'di successo e qualche javascript e poi alla fine mi
rispedisca al mio computer abbia una risposta HTP e poi ottiene a un browser il cui compito è quello di rendere la pagina.
Ecco come appare il contenuto reale prima che il nostro browser si occupi di esso e lo rende
per noi come umani.
Questo è ciò che il computer vede solo con successo HMO in javascript.
Per riassumere tutto ciò quando vado a un URL e premo invio, la prima cosa che
succede è che dobbiamo trovare l'indirizzo IP per quel dominio e poi mandiamo una richiesta HTP chiedendo una pagina particolare a
quell'indirizzo IP e poi al server riceve quella richiesta.
Capisce cosa fare con cosa rispondere.
E poi risponde con H. M. SS in javascript.
La prossima cosa che voglio discutere è la differenza tra pagine web statiche e dinamiche.
Ne abbiamo parlato anche in uno dei primi video su come funziona Internet.
Voglio fare un rapido riassunto perché è importante per la discussione sul back-end che stiamo per avere.
Quindi ci sono due diversi tipi di siti Web pagine statiche e pagine dinamiche pagine web dinamiche sono
siti compilati sul lato server in cui il server sta riunendo o costruendo una pagina
Web prima di essere rispedito come risposta.
Tutto ciò che abbiamo scritto finora è statico.
Quindi, anche qualcosa del genere non sembra statico perché c'è un contenuto dinamico.
Otteniamo colori casuali ogni volta ed è un gioco.
Non sembra statico come l'esempio di pagina Web del ristorante che ho usato nel video precedente su
questo argomento, ma è ancora statico perché è lo stesso HMO C S in javascript.
Ogni singola volta.
Sì, sembra diverso perché abbiamo alcuni colori casuali ma sono gli stessi pezzi fondamentali ogni
volta che stiamo aprendo nel browser su un sito web dinamico.
Potremmo avere javascript diversi o diverse C S diverse per ogni squadra che viene rimandata
ogni volta.
Quindi, quando andiamo a qualcosa come Reddit per esempio e aggiorno la pagina, posso ottenere diversi contenuti
qui.
E in effetti ogni volta che fai fresca la pagina ottieni nuovi contenuti e quindi c'è un database
che sta compilando le cose.
Alcuni codici controllano se sei loggato e se hai effettuato l'accesso non visualizzerai un modulo
qui ma ti mostrerà un pulsante di disconnessione.
E se non sei loggato ti mostra un modulo e ti mostra i log in o i pulsanti registrati.
stessa HG M L C S in javascript che mi viene restituita ogni volta che il server sta effettivamente decidendo cosa inviare.
Quindi questa pagina web non è la
Nel costruire una pagina web prima di inviarmela contro questo sito è lo stesso contenuto
esatto ogni volta.
OK quindi concentriamoci un po 'di più sul back-end ora.
Quindi questo diagramma è uno stack generico e lo stack è un termine che viene utilizzato per fare riferimento a tutte le
tecnologie utilizzate da una particolare applicazione Web.
Quindi H. T. Melchior dice che in javascript sono sempre quasi sempre parte di uno stack al giorno
d'oggi su grandi app web fantasiose.
Tecnicamente potremmo avere un sito Web che non ha alcun successo.
Sarebbe solo orribile.
Potremmo avere un sito Web che non ha alcun javascript sul lato client e non
sarebbe molto interattivo.
Ma possiamo ancora creare un sito Web perfettamente funzionante come abbiamo fatto con il sito portfolio fotografico
originale di ogni team Eliseus, ma la maggior parte delle applicazioni web come ho detto tutte hanno HDMI e dice che
Javascript che viene inviato sul backend è dove vediamo un molte più varianti.
tornare e usare Ruby o Python o Skala o Java o javascript o THP.
Quindi ci sono diverse lingue che possiamo scrivere sul lato server e possiamo scrivere o
Ci sono così tante scelte lì.
Ci sono tutti i tipi di database diversi là fuori.
Post post-crisi e sequel nel mio pure e Mongo e ci sono così tante scelte.
Quindi il termine stack si riferisce a quali scelte particolari sono state fatte dagli sviluppatori e quali sono le
tecnologie esatte che usano.
È una domanda molto comune per gli sviluppatori chiedersi l'un l'altro.
Qual è il tuo stack in quell'azienda o quale stack stai utilizzando in questo specifico progetto.
Quindi, ecco un esempio di vita reale di stack Reddit.
Quindi queste sono alcune delle tecnologie che Reddit usa sul suo sito web.
Quindi il sito è scritto in Python usando un framework chiamato flask.
È costruito su un server X del motore e utilizza i postscript come database.
C'è in realtà un sito Web dedicato alla condivisione di stack di aziende diverse chiamate Stack share.
Quindi l'ho aperto qui e questa è la pagina di Reddit sulla trama e possiamo vedere tutte le diverse tecnologie
che usano.
E la genetica di Python post gresse Amazon S3.
E ti dice di seguito un po 'su per cosa sono usati.
Non essere sopraffatto da quante icone ci sono.
Quanti nomi e tutte queste diverse categorie e tutti questi diversi termini.
Questo non è l'obiettivo qui.
Tutto quello che voglio mostrarti è che diversi siti Web usano tecnologie diverse.
Quindi facciamo clic sugli stack e possiamo dare un'occhiata ad alcuni stack di altre società.
Per esempio, l'aria B e B possono vedere che FBN B usa rotaie e Ruby che usano il mio pozzo Esky per
javascript Java.
Usano un sacco di diverse tecnologie.
Quindi torniamo alle nostre diapositive qui.
Un'altra cosa che voglio sottolineare è che questa linea blu qui indica il confine tra back
end e front end.
Quindi abbiamo discusso di come un sito dinamico è costruito da un server sul back-end.
Quindi qui questa parte del diagramma è dove entra la parte dinamica del sito.
rosso è il caso che capisce se un utente è loggato se abbiamo bisogno di mostrare un modulo cosa
aggiungere per aggiungere alla pagina quali immagini inserire se abbiamo bisogno di avere una registrazione e pulsante di blocco o un pulsante di uscita.
Quindi questa è tutta la logica scritta in Python in
Tutto ciò è fatto nella parte posteriore e in questa parte del diagramma e quindi restituisce h
tim L C S S e Javascript.
Quindi ecco lo stack che stiamo per imparare.
Useremo il nodo j.
Sì.
Quindi scriveremo ancora javascript ma lo scriveremo sul backend.
Useremo un framework chiamato Express e useremo anche Mangu DBI come nostro database.
E poi ovviamente avremo h t m l c s s e Javascript proprio come abbiamo usato
nelle ultime unità.
Quindi ora, a questo punto del corso, puoi considerarti uno sviluppatore front-end o uno sviluppatore front-end in formazione
in cui abbiamo coperto tutto ciò che devi sapere per iniziare a fare il front
end dei siti web.
Ora inizieremo a parlare di back nello sviluppo del web e una volta che porteremo questi due insieme verso la fine
del corso, ovunque scriviamo il codice lato server con Express A. J. come Mongo D-B abbiamo il
login dell'utente, ma stiamo anche scrivendo javascript lato client o front-end.
H Tim L e C Ss.
Questo è ciò che chiameremmo lo sviluppo web dello stack completo.
Il termine sviluppo completo dello stack web si riferisce al codice di scrittura su tutte le parti dello stack, il back-end
e il front-end.
Ecco un diagramma di alcune delle funzionalità che possiamo implementare nel carrello.
usando Reddit come esempio di nuovo puoi vedere che abbiamo caratteristiche come controllare se l'utente è loggato
iscriviti un utente aggiungi un nuovo post al database crea un nuovo commento rimuovi un post dal database sort e
classifica i post crea un nuovo sub Reddit aggiunge un iscritto alla newsletter e lo salva nel database.
E questo sta
E il più importante, naturalmente, è capire cosa ogni team vedrà valutare in javascript per
tornare all'utente che verrà poi rispedito.
Attraversando questa linea blu dove stiamo andando al front end che H. M. S. gli assassini e Javascript
vengono inviati a me e quindi vedo questo nel mio browser.
Ho ancora uno schema qui che parla anche di front end contro back end ma è formattato in
modo leggermente diverso.
Questo diagramma la sequenza di eventi tra front-end e back e nel corso di alcuni carichi di pagina.
Quindi sul front end se vado a leggerlo dot com e aggiornare.
Sto inviando una richiesta per la home page di Reddit e poi la leggerò.
Quella richiesta lo fa al loro server e il server vede che sto chiedendo la home page.
Quindi c'è una logica lato server che afferra il primo post dal database e fa tutto il tempo
di LNC SS e javascript che vedo qui e poi mi restituisce quello che poi visualizzo nel mio browser.
Il prossimo passo è che potrei digitare qualcosa in una casella di ricerca come i cani, che ora farò, digitare i
cani qui e premere invio.
invio una nuova richiesta viene inviata di nuovo al server Reddit questa volta dicendo che sto cercando cani.
E quando premo
Quindi il server ha una logica che prende il mio termine di ricerca cani e trova tutti i post che
corrispondono a quel termine nel database e poi mi fa qualche nuovo maschio di età in javascript per la pagina dei
risultati del cane e poi me lo rispedisce .
E poi il mio browser lo rende e vedo che questa è una versione molto molto semplificata, ovviamente.
C'è molto di più che accade dietro le quinte e Reddit creerà la nostra
versione di un'applicazione molto simile a leggerla.
Una volta che impareremo di più su Express e conosciamo J. S. e Mongo DB E realizzeremo un'applicazione completa.