Press "Enter" to skip to content

One Hour Pair Programming Hack: Firebase and React


un buon lunedì mattina buon giorno
mattina sono mpj e questo è David noi
avere abbiamo un ritardo di qui non quello che ho
è stato appena mi aspettavo che tu dica qualcosa
altrimenti oggi andremo ad accoppiare il programma a
clone di posto reddit utilizzando firebase e
reagire perché abbiamo fatto un episodio il
precedentemente dove non abbiamo effettivamente
riuscire a costruire molto così perché non solo
prova a costruirlo e in effetti finisci bene
lo finisco o irritabilità no
so che penso che dovremmo farlo da
gratta sì anche a me penso che lo faremo solo
rimanere bloccati se proviamo a ricostruirlo e
sì più io non so nemmeno come noi
leggere il vecchio codice e una chiave
la cosa con questi episodi dovrebbe essere quella
Non si dovrebbe avere a guardare qualsiasi altra
sì episodio quindi ci proveremo
costruire un reddit redditizio posto clone reddit
era questo progetto in cui le persone potevano venire
per posizionare e aggiungere un pixel a un grande
tela e avevano un pixel e poi
alla fine la comunità avrebbe solo
costruire qualcosa di che abbiamo questo
una cosa che dovremmo fare solo
per un’ora e vedere se lo facciamo siamo
lo farò, proveremo ad accoppiare
programma per davvero ce ne siamo andati abbastanza bene
suggerimenti che non eravamo in realtà
coppia di programmazione l’ultima volta che ci abbiamo provato
coppia di programmi software da cucina
qualità senza incidere sul tempo a
consegnarlo è controintuitivo, ma due
le persone che lavorano con un semplice computer lo faranno
aggiungere tanta funzionalità a due persone
lavorando separatamente tranne che lo farà
si tratta di un’uguaglianza molto più elevata che abbiamo effettivamente avuto
dimostrato che piuttosto bene negli ultimi
episodio mi piace l’ultimo episodio quando noi
ho provato a fare la programmazione delle coppie, ma davvero
non ho provato a far funzionare la programmazione della coppia
su due parti separate del progetto
è qualcosa che abbiamo imparato no
davvero lavoro vuoi dire che non l’abbiamo fatto
effettivamente ottenere una buona qualità perché noi
fallito sì, non siamo arrivati dove
pensiamo che avremmo entrambi successo
fare i nostri rispettivi compiti così abbiamo solo
diviso in due ma uno di noi è rimasto bloccato
e che probabilmente non avresti se
abbiamo entrambi sciamavano su di esso in realtà ha fatto
non menzionare nulla sul driver
navigatore
la cosa va bene così che ci limitiamo ad accoppiare il programma
e vedere quali sono i diritti prima di te
posso solo menzionare ciò che l’autista e
navigare i tuoi concetti sono quando quando
Ho fatto un paio di programmazione in cui le persone
che sono come leggere il libro su di esso uno
la persona è un autista che è la persona
che in realtà detiene la tastiera e
si sta concentrando sulla sintassi e sul
nitty-gritty dell’algoritmo che crea il
cosa compilare
bene il Navigatore è la persona con
che contiene un blocco note per così dire come
okay, dove stiamo andando nel loro grande?
schema delle cose Ok basta parlare I
pensa bene, creiamo un progetto
creare una risposta sì, perché non in realtà
cancelliamo solo il vecchio codice o
wow scorretto che prende una sorpresa a
sacco di s npm è come abbiamo tirato dentro
tutto ciò che crea reagire divertimento divertente app
riempito e sta installando sto impostando a
Timer e andiamo, voglio dire, ti penso
non ho condiviso il progetto sbagliato con me
sapere come funziona
Oh intendo font sul fondo okay mio dio
è aperta la sessione di codice dopo le due
minuti
l’ottimo MPM inizia, quindi iniziamo
con la cosa che si è iniziato con la
l’ultima volta un sistema di coordinate con alcuni
tipo di pixel mandorla possiamo cliccare il
pixel e cambia il colore del pixel
quindi coordiniamo sistema e pixel
in realtà inizi con la dichiarazione del
sistema di coordinate forse sì buona idea
supponiamo che questo stato sia oggettivo e noi
chiamato pixel forse e come a
processo che potrebbe essere un array in cui il
icona successiva per qualche motivo questo è come
l’unico codice esadecimale che avrei saputo dal cuore
era il colore di sfondo del mio primo
siti Web o questa è la coordinata
il sistema lo chiama pixel
tutti i pixel giusti gli altri sono migliori
Era molto coerente e tutto bene, allora
per ogni questo punto come questo non lo dichiaro
la mappa dei pixel mi piace davvero
queste sovrapposizioni di signora Dealio I
non so davvero perché la gente sia così
entusiasta dell’intelligenza al punto di
questo è per darmi un buon suggerimento per
le cose ma il mio codice qui è
in realtà buoni suggerimenti come me e questo
copre questo e quello mi succede tutto
il tempo con questi collegamenti per ogni pixel
e avrà come pixel sinistro il
x volte qualcosa
eccetto larghezza e altezza diciamo solo sì
esattamente perché non vogliamo usarlo
altrimenti andando il che si tratti di un dolore
il culo sul cellulare suppongo solo con
dove puoi tenerlo come dimensioni dell’immagine
è fantastico, è fantastico, è strano
poi alti per scegliere sfondo sufficiente
colore abbiamo un fallimento questo non lo è
permesso prima di super fammi solo aggiungere
super quassù non è corretto, lo so
non fa sua posizione all’inizio forse
che il div wrapping non è oh si
hai ragione nella sua posizione assoluta no
posizione relativa e poi quelli
sotto o oh sì, va tutto bene
lo fa assolutamente sì, tu
otto si si aggiungerò qualche altro
[Musica]
e poi abbiamo avuto un selezionatore di colori che non ho
sapere se questo non è corretto, ma abbiamo fatto il
il modo in cui hai iniziato l’ ultima volta sei stato tu
costruito la parte lato client prima così
facciamo solo il selettore dei colori e poi
abbiamo quasi finito e quindi possiamo fare come
la logica in seguito cosa dovremmo avere
qui sì, quello sopra non lo è
importa quello sopra oh sto solo andando
copia incolla questa installazione reagisci colore
le barre di avanzamento sono sempre fantastiche
siamo in dodici minuti, va bene così
sta andando abbastanza bene
richiede una vite peer-dipendente che tu colleghi
le dipendenze sono incredibilmente incredibili
il male va bene la dichiarazione dei duplicati reagisce
sì che è sessualmente vero sì tutto bene
ottiene un picker è definito, ma mai utilizzare
quindi cerchiamo di usarlo
come posizioniamo bene questa cosa se
fai clic da qualche parte nelle coordinate
sistema che vuoi avere accanto ad esso
sì capisco che capisco quello ma il mio
la domanda è come come mettiamo il
selezionatore di chitarra puoi farlo solo se io
fai come se fossi qui yeah and go 100 is
se ne andrà a sinistra no non si muoverà
indicazioni andando lì potremmo solo
posizionalo ma poi sarà un po ‘
difficile con esso perché ha un po ‘
freccia in alto, mm-hmm, scopo che puoi
in realtà basta aggirare il problema con
parlando uno che non ha una freccia
ora è il cerchio questo sembra buono questo
questo è giocoso raccoglitore di circoli non lo è
definito come nel rendering che chiami
prendi un picker oh va tutto bene così dolce
dovremmo volerci avvolgere in qualcosa o
possiamo usare solo quel componente e
spostalo, penso che ci avvolgeremo
in qualcosa che vorrei mi piacesse, ne sono sicuro
c’è un modo per farlo, ma nel
interesse del tempo del cuore ho capito
che noi se possiamo semplificare l’app
quindi per evitare un problema allora
più potere a noi così fuori lo stile al
div above there we go why did not that
mossa
oh sì, deve essere una posizione dolce
si, funziona bene, dopo, penso
che dovremmo aggiungere come quando fai clic
da qualche parte si otterrà la posizione in
il sistema di coordinate e in questo modo noi
può aggiornare la matrice di pixel il
afferma tutto bene, quindi dove aggiungiamo il
gestore onclick Non ho idea del clic
eccoti ora nello stile whoops
la programmazione dei capelli mi sta già pagando
proprio come se fossi una bambinaia
ti tiene lontano dal fare
cose brutte come no no no no non toccare
quella lezione no no no no quello è un coltello
questo punto gestisce i pixel su cui non abbiamo cliccato
ho molto spazio per questa console, oh mio
dio che sparava a un fattorino
non sembra che il clic sia
registrazione o forse lo è e
in realtà non gestire ottenerlo sul
definito come gestore onclick su di esso
Comunque
facciamo un handle se si tratta di un clip-on sort
di Lord Nope sembra ancora nulla è
accadendo davvero se questo è
chiamato al clic forse non lo è
[Musica]
al clic con C no, è vero, sei tu
devi avere il BAM, non aspettare un minuto
aspetta un attimo penso di essermi imbattuto in questo
intrappolare l’ultima volta guardiamo questo pixel
cosa vedi che è solo questo
non ha altezza, ok, quindi cinque
cento percento e con cento percento
dovrebbe risolverlo
sì , distruggiamolo
ok tecnicamente, lo penso ancora
deve essere la posizione: assoluta in ordine
lavorare bene
perché la larghezza e l’altezza non sono realmente
ha senso nel contesto di
potremmo incorrere in problemi in seguito
perché quando vogliamo scorrere oltre
la griglia ma qualunque cosa sì
così ora che dovrebbe gestire i pixel kick
Prendi un evento ehi lo sai che lo so
come dobbiamo solo farlo dieci
mille pixel oh oh sì oh allora cosa
stavi dicendo così i pixel della maniglia
funzione cliccata dovrebbe prendere un evento o
cado come un video che ho smesso di tenere
dimenticando che come ci piace davvero
davvero bisogno di una telecamera di streaming perché
diventa troppe cose da mantenere
nella tua testa quindi aggiungi un evento che otterremo
le coordinate dall’evento in qualche modo
tra acquisizione di elemento client
perché restituiamo la posizione relativa a
la finestra non è il genitore, penso che
questo sembra ragionevole sì e poi noi
dividi quello per la dimensione del pixel per ottenere
siamo nel nostro sistema di coordinate, va bene
Y diviso per qualunque cosa si chiami
dimensione del pixel oh siamo sicuri di fare una porta di matematica
dovremmo vedere console.log le coordinate
allora possiamo solo vedere se ha senso
quando ticchiamo intorno oh è vero
è vero
Penso che queste piste siano sensate, quindi se tu
clicca sul rosso il pixel rosso e giusto
assicurati che quando fai clic all’esterno di
dovrebbe generare l’angolo successivo
5: 3 sì sì e sopra e sotto sì
cose OOP bello lavorare sì va bene così
non l’abbiamo allora dovremmo trarre la
raccoglitore di cerchi dove hai cliccato così noi
bisogno di avere un modo di posizionare il
raccoglitore di cerchi usando lo stato quindi lo stile
dovresti avere lo stile sopra di esso
involucro oh sì sì sì la sinistra
posizione dovrebbe essere qualcosa di simile
punto selezionare quello
selezionato per ornette volte la dimensione del pixel
si la coordinata di X questa è una dy
boom non può leggere correttamente X di un define
so che è perché non abbiamo detto
vittoria sì esattamente così abbiamo bisogno di
gestisci quel caso, quindi lo farò
la coordinata selezionata no o no non dovrebbe
hai il doppio e commerciale che tu
dovrebbe disegnare solo se hai selezionato
coordinare no sì hai ragione
ma dovrebbe essere questo stop selezionato
coordinare sì, è la cosa è ciascuno
dovrebbe essere e anche io dovrei chiudere il mio
tag correttamente Oh chiudendolo lì io
penso che questo stato abbia selezionato questo stato
coordinare così le frecce di questa fermata
stati
oh si si ho capito facciamo solo test
che X è 4 y è 5 9 quindi appare
sembra un 90 anni sì
quindi è necessario impostare effettivamente questo
non impostare coordinate selezionate dello stato e
allora il tuo punteggio non credo si
whoops non può leggere la proprietà set state of
undefined oh sì, uno standard costante
merda di JavaScript ha fatto questo per molti
molti anni e ancora ci cadiamo dentro così
questo significa che quando fai così
questo significa che questo non verrà gestito
le foto si aspettano che perderà tutto questo
contesto così il modo in cui si tende a fare
questo è solo creare una nuova funzione su
ogni ogni render che è legato a questo
[Musica]
Grazie al lavoro va bene ora quando clicchiamo
possiamo incastrarci per un po ‘?
che sta andando davvero bene
si 30 minuti
vogliamo solo ottenere il colore da quando
stiamo scegliendo dal così via
questo lavoro poi reagisce con la bomba colorata
cambia tu ottieni un colore che ha un esagono
proprietà che andiamo a cambiare questa maniglia punto
colore scelto, faccio un assurdo se c’è
uno XY che lo sovrascriverebbe
altrimenti dovremmo semplicemente inserirlo
sì, quindi prendiamo le coordinate
questo stato non ha pixel punti Kong cat
e aggiungeremo un nuovo pixel con X
in realtà puoi selezionare semplicemente aggiungerlo
con questo ma non vengono selezionati
coordinate e dargli un colore che noi
ho qui che sarà colorato su X
Gesù Cristo questo è molto più facile ora
che l’hai fatto una volta mi sento
quasi come sovrumano rispetto all’ultimo
tempo oh ho perso David mm-hmm
ho una connessione sapere cosa c’è
sta succedendo dov’è la mia connessione
indietro Amo mia suocera, ma lei ha
il peggior Wi-Fi è per questo che sto ricevendo un
cavo sì, stiamo migliorando costantemente
il nostro setup di streaming per questo come noi
non usato per il formato e sta per
ho dei nodi ma voglio dire che lo sono davvero
godendo che un pochino ci si sente
Posso essere dispiaciuto come sembra
quando ho iniziato a gridare come quando
stai imparando così tanto come ogni
l’apprendimento è come se avessi estremamente alto
impatto ti rendi semplicemente conto di come noi
ho fatto con sync pepper o ci siamo fatti tutti
dovrei ottenere questa cosa e mi piace davvero
così quando è come muoversi così velocemente
hai capito per impostare un colore quando si
fai clic sul selettore dei colori, non vediamo che lo sono
Devo effettivamente fare i set
è anche sì e questo stato non lo fa
pixel oh pixel ah se sei seduto il
stato e cep solo i pixel fanno i suoi
sovrascrivere la parte Cornett selezionata di
lo stato che lo fa ha appena impostato il
i pixel lo alimentano appena è questa parte
del sito ok whoops questo non stato
non impostare lo stato non è la funzione no
è corretto è solo questo che è a
palo mi aspettavo che questo facesse qualcosa
sta funzionando sì sì per me è
lavorando per te si
cos’è che è così strano che non lo sia
lavorando per me basta aggiornare il browser
perché ho bisogno di aggiornare il tuo browser
Non lo so, ha appena iniziato a lavorare per
io oggi abbiamo un po ‘poco
il tempo non parla così tanto
ora dobbiamo nascondere l’immagine a colori
una volta che abbiamo cliccato e impostato un colore noi
basta impostare la coordinata selezionata su no
non funziona no non lo sa perché
Io quello che penso stia succedendo perché quello
stava succedendo l’ultima volta era così
genera come genera una nuova cricca
che lo imposta di nuovo mm-hmm così io
pensa che il modo in cui l’ho fatto è durato
il tempo è che ignoro pixaflux se
la coordinata selezionata è c’è a
Cornette selezionata è un po ‘spenta
anche se il motivo è che penso che sia perché
il tuo browser è così piccolo che si muove
dentro l’immagine è ampia è questo il perché
perché la cosa è che quando lo faccio
localmente funziona per me
Oh come ho ho cambiato la taglia a
molto sì, che ho detto ma non l’hai fatto
ascoltami bene scusa scusa non l’ho fatto io
non ho capito cosa stavi dicendo
si pensavo che intendessi la taglia
della finestra sì è questo su quello noi
dovrebbe essere fissato no perché abbiamo solo
20 minuti ok abbastanza giusto
ciao quindi è il momento di aggiungere firebase così io
pensa saltiamo l’ ambiente
le variabili lo incolliamo nel
progetto abbiamo poco tempo nello spazio
questo in e poi compro gara
[Musica]
come siamo in tempo 16 minuti e mezzo
nel bar blu ci sono le guide oh qui
è
va bene così come è il colore
andando invece di impostare lo stato
qui sta per scrivere al
raccolta in modo da sta andando essere simile
Suona bene, rimani pixel puntini, penso a te
bisogno di fare qualcosa come questo come faccio io
ho bisogno di creare un database e noi
pronto la modalità test e brilla
pixel, non la faccio proprio fare così
ad esso grande o scavalcare un singolo
documento usa questo set questa documentazione
presume che voglio inserire con a
ID documento specifico ma non voglio farlo
che volevo solo aggiungere come un
il bambino arbitrario lo sceglie va bene lo è
imposta sempre i dati aggiungi un nuovo documento
in collezione puoi farlo senza il
ID e sarà solo lavorare appendere Harris
aggiunto ok
oh questo è molto semplice è solo aggiungere Oh
esattamente un’API molto elegante e poi lo è
sarà questa cosa, suppongo e poi
abbiamo solo commentato questo per ora noi
non hai DPM che cos’è firebase no
è la parola della collezione , credo
così giusto quindi clicco qui e vedrò
otteniamo qualcosa al tempio di fuoco Gesù
Cristo, questa cosa procede lentamente
non dovrebbe essere ricarico, lo farò
controlla gli errori nel frattempo Oh Dio
il ragazzo si sta facendo impazzire, cazzo, sì, noi
è necessario correggere questo errore questo non lo è
un errore è solo un avvertimento ma è
come se riempisse la tua console così
proprio lì basta aggiungerlo per impostazione predefinita se
loro come te io non lo so io
penso che sia solo una retrocompatibilità
Suppongo ma perché non credo che la versione
invece come invece di fastidio
tutti con questa merda 9 minuti 9
minuti ok ok ok
non manca oh è in realtà lo fa
Non sto aggiungendo cose ora
vuol aggiungere penso lo fa lo fa lo fa
Allora, come ci iscriviamo a questo
raccolta fai una query e poi tu
puoi possedere un’istantanea sì, fallo su a
raccolta Penso di sì, sì, perché
è come indossare tutto ciò che è come
una query senza inviti una cosa
con la programmazione di coppia è che tendo a
rimanere bloccato come la modalità di messa a fuoco ora è
più volte in cui hai effettivamente
ha detto la soluzione, ma io non ero
aperto perché ero così concentrato su
sulla soluzione dei problemi sì, penso che sia così
questo probabilmente è un errore comune quando tu
inizia la programmazione della coppia, forse
uno nell’istantanea
Mi piaceva la merda istantanea I senza senza
eccezione quando scrivo la parola istantanea
Scrivo snap shit prima doc i dati sono
non una funzione sembra molto simile
okay è un oggetto snapshot di query oh
sì sì sì, so perché questo non lo fa
lavoro è perché questo esempio è
osservando un documento mentre siamo
osservando una collezione oh così fa
senso per noi di avere questo è un
collezione e una collezione non ha
dati ha Doc destrezza di tutti i diritti
non è una merda di funzione è una domanda
l’istantanea appena presunta dovrebbe avere porte
oh è perché non è un
funzione e ora otteniamo il documento di query
istantanee così ha i cani dati
[Musica]
non fare i dati sì, li hai fatti
vuoi disegnarli ora o cosa sei
cercando di fare sto cercando di inserirli
lo stadio l’output della mappa è cosa
vuoi fare un set nello stato
sì così ora dovresti ottenere le cose se io
aggiungi cose giuste, sì, siamo noi
fatto boom qual è il tempo Oh su uno
minuti e cinque secondi per andare alla grande
va bene che è esso ha parti yeah yeah di
certo, ma come possiamo non puoi costruire un
pacchetto software completo in un’ora
come ottenere un software gratuito pug con
tutte le funzionalità di cui hai bisogno
centinaia di ore sì, mi piace come quando
si aggiorna, non possiamo semplicemente aggiustare
così così quando lo aggiorni semplicemente
disegna i pixel iniziali oh sì sì
vero proviamo a si no no no no no no
non saltiamo in quello che abbiamo fatto
sbaglio prima come oh stiamo solo andando
sistemare una sinistra okay e poi quello ha preso
quello che abbiamo imparato va bene, naturalmente
Aiuta il fatto che abbiamo fatto questo prima sorta di
e ha fallito e ora siamo solo santi di merda
sapevo come farlo ma penso che ora
alla fine abbiamo un po ‘come abbandonare il
l’intero driver di Navigator era come te
sono stato l’autista e ho provato ad apprezzare il tag
lungo quello che stavi pensando piuttosto che
mi stai ascoltando ma è vero fino a quando
quel punto penso che sia andato molto bene
pensa che un modo per spezzare sia quello
come fermare e solo chiedere continuamente cosa
stiamo facendo sì
che ho fatto alla fine, ma mi ci è voluto un
molto tempo per capire che sì, ma io
significa che dovrebbe essere una mia responsabilità a
responsabilità perché è così facile
quando stai bene ora so cosa siamo
facendo e ora penso di avere una presa
di cose da correre avanti sì ma
poi perdi il Navigatore e poi tu
perdere il supporto del tuo navigatore sì
si, è stato divertente, penso di doverlo dire
una cosa sulla condivisione live penso che il
la parte più preziosa è il tutto simile
linee di marcatura sì – mostra solo qui io sono
vai qui, fai come se non lo avessi fatto davvero
dover digitare nulla, sì che non è
necessariamente tutto ciò utile anche il
fatto che probabilmente puoi farlo
scorrere nel file e guardare
le parti che sto guardando ad una cosa
è un po ‘triste quando ci sentiamo
come questa volta ci siamo sentiti come oh possiamo
in realtà farlo in un’ora significa
che diventiamo molto più orientati ai compiti
e tu non hai tempo per chiacchierare e
come chiacchiere inutili se ti capita molto
sappi che cazzo fai questo
sì , non diventa così dolce e divertente
come si anche mi piace prendere un sacco di
il tempo pensa di pensare pensa al tempo
dobbiamo fare questo sì
Penso che forse dovremmo avere
il caffè si rompe in esso oh sì come i piedi
Vika svedese così come ogni 20 minuti siamo
solo noi non tiriamo il mio Doros si a
pausa nella foresta nel mezzo ovest dove noi
fermare il timer ‘e avere una tazza di tazza di
caffè e mangia almeno 10 biscotti ciascuno
per ottenere sì ho rush zucchero e forse solo
parlare di qualcosa di diverso dal
codice che interesserebbe tutti yeah
probabilmente è piuttosto dubbio
quindi perché stiamo praticamente comprimendo
un intero giorno lavorativo in un’ora così
farebbe un sacco di buonsenso
quindi dovremmo avvolgere questa cosa per favore
suggerisci cosa vorresti che facessimo e
il prossimo episodio nei commenti o su
il divertente forum divertente se sei un mecenate
hai appena visto un episodio di divertimento
funzione divertente li rilasciamo tutti
Lunedì mattina via 200 GMT ma lo farai
dimenticalo quindi puoi iscriverti o
guardare un altro episodio di questo momento per
cliccando qui sono mpj e sono David
fino al prossimo lunedì mattina resta curioso
Please follow and like us: