Ovaj je vodič napisan u suradnji s nevjerojatnim Christianom Nwambom.
Kada učite kodirati, na raspolaganju vam je hrpa resursa - knjige, snimke zaslona, vodiči, čak i vježbe. Ali da biste postali izvrstan programer, morate vježbati ono što naučite s projektom.
Učenje kroz rad motivacija je za ovaj članak. Počet ćete od ničega i izraditi cjelovitu aplikaciju za chat, korak po korak.
Projekt ćete graditi korak po korak i kako bismo provjerili razumijete li ga, na kraju smo uvrstili neke posebne bonus izazove. Jeste li na testu?
Evo što ćemo izgraditi:
Prilično cool, zar ne ??
Kad slijedite, naučit ćete kako izgraditi chat u stvarnom vremenu, popis "tko je na mreži", a usput i strukturirati React aplikaciju. Za pokretanje našeg chata koristit ćemo uslugu koju pomažem u izgradnji, a zove se Chatkit.
Zvuči dobro? Uključite se u radio FreeCodeCamp za glatku, nježnu pozadinsku glazbu kako biste ostali fokusirani i krenimo!
Što trebaš znati
Zapravo, još nešto?:
Bilo bi lijepo kada biste već znali neke osnovne JavaScript, Node i React. Kad se to kaže, ako se ne osjećate ugodno s ovim tehnologijama, ipak pokušajte!
Namjerno smo strukturirali ovaj vodič da bismo jasno stavili kamo zalijepiti kôd kako biste mogli slijediti. Ako imate pitanja, ostavite ih ovdje!
U redu, prvi korak:
Postavljanje Electron
Za izradu višeplatformne stolne aplikacije s web tehnologijama koristit ćemo Electron.
Da bismo se maknuli s tla, napravili smo minimalni početni predložak. Preuzmite:
git clone //github.com/pusher/electron-desktop-starter-template electron-desktop-chatcd electron-desktop-chatI instalirajte te lokalne ovisnosti:
npm installIzradite račun za Chatkit
U ovom se uputstvu ne bavimo previše stvaranjem pozadine, pa ćemo koristiti Chatkit.
Da biste nastavili dalje, stvorite besplatni račun i novu instancu nazvanu “Electron desktop chat”:
U prozoru postavki uključite davatelja testnih žetona:
Zabilježite krajnju točku davatelja testnih žetona , lokator instance i tajni ključ . Trebat će nam u sljedećem koraku.
Postavite Node poslužitelj
Chatkit ima dva temeljna koncepta: korisnici i sobe.
Korisnici mogu stvoriti sobe, pridružiti im se i u njima razgovarati. No, prije nego što korisnik može komunicirati sa sobom, moramo je stvoriti.
To se mora dogoditi na poslužitelju.
U chatu electron-desktop, pokrenite:
npm install --save express cors body-parser pusher-chatkit-serverI zalijepite ovo u novu datoteku koja se zove server.js:
Ne zaboravite zamijeniti instanceLocator i ključ vlastitim Instance Locatorom i ključem .
Većina ovog koda je standardni obrazac, uvoz ovisnosti, postavljanje Expressa i tako dalje.
Važan dio je ruta “/ users” koja obrađuje zahtjeve za stvaranje novog korisnika.
Pokrenite poslužitelj sa node server.jsi vidjet ćete da je poslužitelj "Pokretanje na priključku 3001".
Izradite obrazac za korisničko ime
Kada netko učita našu aplikaciju, morat ćemo ga zamoliti za korisničko ime i poslati ga na “/ users”.
Instalirajte neke komponente korisničkog sučelja izvornog izgleda sa:
npm install --save react-desktopI stvorite komponentu obrasca koja se zove UsernameForm:
Ovdje možete pročitati više o komponentama oblika React. Slučajno se u dokumentaciji koristi klasa NameForm slična našoj, pa bi to sve trebalo biti poznato!
Dalje, zamijenite cijelu aplikaciju sa:
I da ga testirate, trčite npm run dev. Vidjet ćete da je prikazan obrazac za korisničko ime:
Provjerite je li poslužitelj pokrenut (sjetite se, naredba je ` node server.js), pritisnite Submit i vidjet ćete da je korisnik stvoren:
Prijelazni zasloni bez knjižnice
Jednom kada imamo korisnika, možemo ga prebaciti iz obrasca za korisničko ime na stvarni zaslon za chat. To bismo sada trebali definirati.
Stvorite novu komponentu nazvanu Chat:
I ažurirajte aplikaciju:
Pokrenite aplikaciju, unesite korisničko ime i prijeći ćete na zaslon za chat:
Dodajte chat u stvarnom vremenu s Chatkitom
Stvari se stvarno događaju, zar ne biste rekli?
Da biste se povezali s Chatkitom s klijenta, morate instalirati @ pusher / chatkit:
npm install --save add @pusher/chatkitI zamijenite sav chat sa:
Ne zaboravite zamijeniti vrijednosti tokenProviderUrli instanceLocatorvrijednostima s krajnjom točkom davatelja ispitnih žetona i lokatorom instance .
Pokrenite aplikaciju, pritisnite ⌘ + ⌥ + I (Control + Shift + I) i vidjet ćete da ste se povezali s Chatkitom.
Stvorite sobu za Chatkit
Imamo korisnika, ali sada nam treba soba!
Da biste ga stvorili, upotrijebite Chatkit inspektor:
Ne zaboravite kopirati svoj ID sobe, trebat će nam u sljedećem koraku.
Stvorite komponentu chat sobe
Sada imamo sobu, možemo se pretplatiti na nove poruke poslane u toj sobi.
Da biste ih prikazali, stvorite komponentu MessageList:
I ažurirajte Chat:
Kao i uvijek, ne zaboravite ažurirati roomIdsvoj stvarni ID sobe.
Sada, kada se poruke pošalju u našu sobu, onNewMessagepozvat će se. Odavde možemo ažurirati svoje stanje, a zauzvrat i korisničko sučelje.
U sekundi ćemo dopustiti korisnicima da pošalju vlastite poruke. Za sada za testiranje pretplate upotrijebite inspektor:
Slanje poruka
Da biste korisnicima omogućili slanje vlastitih poruka, stvorite komponentu SendMessageForm:
I ažurirajte Chat:
Ponovo učitajte aplikaciju pomoću ⌘ + R (Control + Shift + R) i moći ćete slati poruke:
Zapravo, zašto ne biste otvorili dvije aplikacije paralelno i razgovarali sami sa sobom?
U koje doba biti živ ...
Oblikujte korisničko sučelje
Zahvaljujući React Desktop-u, naša aplikacija već izgleda pristojno, ali možemo i bolje.
Napravimo nekoliko podešavanja i definiramo svoj izgled za upotrebu u sljedećem i posljednjem koraku.
Zamijenite sve index.css sa:
Pokažite tko je na mreži
Da bismo završili našu aplikaciju za chat, dodat ćemo popis "tko je na mreži" da biste pogodili tko je na mreži!
Stvorite komponentu OnlineList:
Zatim ažurirajte Chat:
Jeste li očekivali da će to biti teže? Definitivno sam prvi put probala!
Budući da Chatkit usersdinamički ažurira svojstvo, ne moramo upravljati vlastitom državom. Jednostavno trebamo reći Reactu da se ponovno prikaže i, zauzvrat, ponovno procijeni userssvaki put kad netko dođe na mrežu ( onUserCameOnline), ode van mreže ( onUserWentOffline) ili se pridruži sobi ( onUserJoined).
Samo naprijed, pokrenite poslužitelj i klijenta i divite se svojoj veličanstvenoj novoj aplikaciji za chat:
Ako ste stigli tako daleko, mogli biste i nastaviti ?! Ubodite u ove bonus izazove ...
Izazov 1: Pokažite tko u sobi aktivno tipka
Pogledajte možete li aplikaciji dodati indikatore tipkanja. Na primjer, ako tipkam, vi i svi ostali u sobi vidjet ćete "Booker tipka ...".
Da smo Chris i ja tipkali, vidjeli biste "Booker i Chris tipkaju ..." i tako dalje.
Savjeti:
- Dokumentacija indikatora tipkanja Chatkita
- Vodič za klonule klonove
Izazov 2: Dopustite korisniku da kreira vlastitu sobu
U ovom uputstvu koristili smo inspektora za stvaranje sobe, a zatim smo teško kodirali ID sobe. Ovo nije dobra praksa.
U većini aplikacija željeli biste dinamički stvarati sobe s funkcijom createRoom.
Kad netko učita aplikaciju, pitajte ga i za naziv sobe:
Ako soba postoji, pridružite joj se; ako ne, stvorite ga pa mu se pridružite.
Savjeti:
- createRoom dokumentacija
Zaključak
To je bilo zabavno! Izgradili smo prilično cool aplikaciju za chat za što manje od sat vremena?
Jedna stvar koju sam primijetio (a možda ste i vi to učinili) je da je jednom kad je osnova uspostavljena (predložak, Chatkit veza i tako dalje) dodavanje novih značajki chata prilično jednostavno.
Osim izazova, radoznali bismo vidjeti gdje biste još mogli odnijeti prijavu. Neke ideje:
- Pošaljite datoteke
- Broj nepročitanih poruka
- Obavijesti
- Čitajte kursore
- Privatne osobne poruke
Slobodno nas pratite na Twitteru, @bookercodes i @codebeast.
Do sljedećeg puta, ciao.