Deze tutorial is geschreven in samenwerking met de geweldige Christian Nwamba.
Als je leert coderen, heb je een heleboel bronnen tot je beschikking: boeken, screencasts, tutorials en zelfs oefeningen. Maar om een geweldige ontwikkelaar te worden, moet je oefenen wat je leert met een project.
Leren door te doen is de motivatie voor dit artikel. Je begint vanuit het niets en bouwt stap voor stap een complete chatapplicatie.
Je bouwt het project stap voor stap en om te testen of je het begrijpt, hebben we aan het eind een aantal speciale bonusuitdagingen toegevoegd. Ben je klaar voor de test?
Dit is wat we gaan bouwen:
Best cool, toch ??
Als je meegaat, leer je hoe je een realtime chat kunt bouwen, een 'wie is er online'-lijst en gaandeweg hoe je een React-app kunt structureren. Om onze chat mogelijk te maken, gebruiken we een service die ik help met het bouwen van Chatkit.
Klinkt goed? Stem af op FreeCodeCamp-radio voor wat soepele, zachte achtergrondmuziek om gefocust te blijven en laten we gaan!
Wat je moet weten
Eigenlijk nog een ding?:
Het zou leuk zijn als je al wat basis JavaScript, Node en React kent. Dat gezegd hebbende, als je je niet op je gemak voelt bij deze technologieën, probeer het dan toch!
We hebben deze zelfstudie opzettelijk gestructureerd om duidelijk te maken waar de code moet worden geplakt, zodat u deze kunt volgen. Als je vragen hebt, laat ze dan hier achter!
Oké, stap één:
Stel Electron in
Om een platformonafhankelijke desktop-app met webtechnologieën te bouwen, gebruiken we Electron.
Om ons van de grond te krijgen, hebben we een minimaal startersjabloon gemaakt. Download het:
git clone //github.com/pusher/electron-desktop-starter-template electron-desktop-chatcd electron-desktop-chatEn installeer die lokale afhankelijkheden:
npm installMaak een Chatkit-account aan
We zijn niet al te bezorgd over het bouwen van een back-end in deze tutorial, dus we zullen Chatkit gebruiken.
Om verder te gaan, maakt u een gratis account en een nieuwe instantie met de naam "Electron desktop chat":
Schakel in het instellingenvenster de testtokenprovider in:
Noteer het eindpunt van uw testtokenprovider , exemplaarzoeker en geheime sleutel . We hebben ze nodig in de volgende stap.
Stel de knooppuntserver in
Chatkit heeft twee fundamentele concepten: gebruikers en kamers.
Gebruikers kunnen kamers maken, zich erbij aansluiten en erin chatten. Maar voordat een gebruiker met een kamer kan communiceren, moeten we er een maken.
Dit moet op de server gebeuren.
Voer in electron-desktop-chat het volgende uit:
npm install --save express cors body-parser pusher-chatkit-serverEn plak dit in een nieuw bestand genaamd server.js:
Vergeet niet om instanceLocator en key te vervangen door de uwe Instance Locator en Key .
De meeste van deze code is standaard, afhankelijkheden importeren, Express instellen, enzovoort.
Het belangrijkste onderdeel is de "/ users" -route die verzoeken afhandelt om een nieuwe gebruiker aan te maken.
Start de server met node server.jsen je zult zien dat de server "draait op poort 3001".
Maak het gebruikersnaamformulier
Wanneer iemand onze app laadt, willen we hem om een gebruikersnaam vragen en deze vervolgens naar "/ users" sturen.
Installeer een aantal native ogende UI-componenten met:
npm install --save react-desktopEn maak een formuliercomponent met de naam UsernameForm:
U kunt hier meer lezen over React-formuliercomponenten. Toevallig gebruikt de documentatie een klasse NameForm vergelijkbaar met de onze, dus het zou allemaal bekend moeten zijn!
Vervang vervolgens de hele app door:
En om het te testen, rennen npm run dev. U zult zien dat het gebruikersnaamformulier wordt weergegeven:
Zorg ervoor dat de server draait (onthoud dat het commando 'is node server.js), klik op Verzenden en je zult zien dat er een gebruiker is aangemaakt:
Overgangsschermen zonder bibliotheek
Zodra we een gebruiker hebben, kunnen we deze overzetten van het gebruikersnaamformulier naar het daadwerkelijke chatscherm. Dat moeten we nu definiëren.
Maak een nieuwe component met de naam Chat:
En update de app:
Start de app, voer een gebruikersnaam in en je gaat naar het chatscherm:
Voeg realtime chat toe met Chatkit
Dingen komen echt langs, zou je niet zeggen?
Om verbinding te maken met Chatkit vanaf de client, moet je @ pusher / chatkit installeren:
npm install --save add @pusher/chatkitEn vervang Chat helemaal door:
Vergeet niet om de tokenProviderUrlen instanceLocator-waarden te vervangen door Your Test Token Provider Endpoint en Instance Locator .
Start de app, druk op ⌘ + ⌥ + I (Control + Shift + I) en je zult zien dat je verbinding hebt gemaakt met Chatkit.
Maak een Chatkit-ruimte
We hebben een gebruiker maar nu hebben we een kamer nodig!
Gebruik de Chatkit-inspecteur om er een te maken:
Vergeet niet uw kamer-ID te kopiëren, deze hebben we nodig bij de volgende stap.
Maak een chatroomcomponent
Nu we een kamer hebben, kunnen we ons abonneren op nieuwe berichten die in die kamer worden verzonden.
Maak een component MessageList om ze weer te geven:
En update Chat:
Vergeet zoals altijd niet om roomIduw huidige kamer-ID bij te werken.
Nu, wanneer berichten in onze kamer worden verzonden, onNewMessagewordt gebeld. Vanaf hier kunnen we onze staat bijwerken en op zijn beurt onze gebruikersinterface.
Binnen een seconde zullen we gebruikers hun eigen berichten laten sturen. Gebruik voorlopig de inspecteur om het abonnement te testen:
Berichten versturen
Maak een SendMessageForm-component om gebruikers hun eigen berichten te laten verzenden:
En update Chat:
Herlaad de app met ⌘ + R (Control + Shift + R) en je kunt berichten verzenden:
Waarom zou u eigenlijk niet twee applicaties naast elkaar openen en een gesprek met uzelf voeren?
Wat een tijd om te leven ...
Stijl de gebruikersinterface
Dankzij React Desktop ziet onze app er al behoorlijk uit, maar we kunnen het beter doen.
Laten we een paar aanpassingen maken en onze lay-out definiëren voor gebruik in de volgende en laatste stap.
Vervang alle index.css door:
Laat zien wie er online is
Om onze chat-app af te maken, zullen we een "wie is er online" lijst toevoegen om te laten zien, je raadt het al, wie er online is!
Maak een OnlineList-component:
Update vervolgens Chat:
Verwachtte u dat dat moeilijker zou zijn? Ik deed het zeker de eerste keer dat ik het probeerde!
Omdat Chatkit de userseigenschap dynamisch bijwerkt , hoeven we onze eigen staat niet te beheren. We hoeven React gewoon te vertellen dat het opnieuw moet renderen en op zijn beurt opnieuw moet evalueren userselke keer dat iemand online ( onUserCameOnline), offline gaat ( onUserWentOffline) of toetreedt tot de ruimte ( onUserJoined).
Ga je gang, draai de server en client en bewonder je prachtige nieuwe chat-app:
Als je zo ver bent gekomen, kun je net zo goed doorgaan ?! Probeer deze bonusuitdagingen eens ...
Uitdaging 1: laat zien wie in de kamer actief aan het typen is
Kijk of je typindicatoren aan de app kunt toevoegen. Als u bijvoorbeeld aan het typen bent, zien u en alle anderen in de ruimte 'Boeker is aan het typen ...'.
Als Chris en ik allebei aan het typen waren, zou je zien "Booker en Chris zijn aan het typen ..." enzovoort.
Tips:
- Chatkit typindicator documentatie
- Zelfstudie over slappe kloon
Uitdaging 2: Laat de gebruiker zijn eigen kamer creëren
In deze zelfstudie hebben we de inspecteur gebruikt om een kamer te maken en hebben we vervolgens de kamer-ID hard gecodeerd. Dit is geen goede gewoonte.
In de meeste toepassingen zou u dynamisch kamers willen creëren met de createRoom-functie.
Als iemand de app laadt, vraag hem dan ook om een kamernaam:
Als de kamer bestaat, doe dan mee; zo niet, maak het dan aan en voeg je eraan toe.
Tips:
- createRoom documentatie
Conclusie
Dat was leuk! We hebben in minder dan een uur een behoorlijk coole chat-app gebouwd.
Een ding dat me opviel (en misschien deed jij dat ook) is dat als de basis eenmaal op zijn plaats is (sjabloon, Chatkit-verbinding, enzovoort), het toevoegen van nieuwe chatfuncties vrij eenvoudig is.
Afgezien van de uitdagingen, zijn we benieuwd waar u de aanvraag nog meer naartoe kunt brengen. Enige ideeën:
- Stuur bestanden
- Aantal ongelezen berichten
- Meldingen
- Lees cursors
- Privé één-op-één-berichten
Volg ons gerust op Twitter, @bookercodes en @codebeast.
Tot de volgende keer, ciao.