Opi rakentamaan oma työpöydän chat-sovellus Reactin ja Electronin avulla, askel kerrallaan

Tämä opetusohjelma on kirjoitettu yhteistyössä mahtavan Christian Nwamban kanssa.

Kun opit koodaamaan, sinulla on joukko resursseja - kirjoja, kuvaruutuja, opetusohjelmia ja jopa harjoituksia. Mutta tullaksesi suureksi kehittäjäksi sinun on harjoiteltava projektin avulla opittua.

Tekemällä oppiminen on tämän artikkelin motivaatio. Aloitat tyhjästä ja rakennat täydellisen chat-sovelluksen askel askeleelta.

Rakennat projektin askel kerrallaan ja testataksemme ymmärrät sen, sisällytimme lopuksi joitain erityisiä bonushaasteita. Oletko testissä?

Tässä me rakennamme:

Melko siistiä, eikö ??

Kun seuraat mukana, opit luomaan reaaliaikaisen chat-keskustelun, "kuka on verkossa" -luettelon ja matkan varrella, kuinka rakentaa React-sovellus. Chatin tehostamiseksi käytämme palvelua, jota autan rakentamaan, nimeltään Chatkit.

Kuulostaa hyvältä? Viritä FreeCodeCamp-radioon sileää, lempeää taustamusiikkia keskittyäksesi ja mennään!

Mitä sinun tarvitsee tietää

Itse asiassa vielä yksi asia:

Olisi mukavaa, jos tietäisit jo joitain perus JavaScriptiä, Solmua ja React. Tästä huolimatta, jos et tunne olosi mukavaksi näiden tekniikoiden kanssa, jatka!

Rakensimme tämän opetusohjelman tarkoituksella tekemään selväksi, mihin koodi liitetään, jotta voit seurata mukana. Jos sinulla on kysyttävää, pudota ne tänne!

Selvä, ensimmäinen vaihe:

Määritä elektroni

Rakennamme monialaisen työpöytäsovelluksen verkkotekniikoilla käyttämällä Electronia.

Päästäkseen meidät pois maasta teimme minimaalisen aloitusmallin. Lataa se:

git clone //github.com/pusher/electron-desktop-starter-template electron-desktop-chat
cd electron-desktop-chat

Ja asenna nämä paikalliset riippuvuudet:

npm install

Luo Chatkit-tili

Emme ole liian huolissaan taustan rakentamisesta tässä opetusohjelmassa, joten käytämme Chatkitia.

Luo seuraava tili luomalla ilmainen tili ja uusi instanssi nimeltä "Electron desktop chat":

Kytke testausvaltuuteen tarjoaja päälle asetusikkunassa:

Huomaa testitunnuksen tarjoajan päätepiste , ilmentymäloija ja salainen avain . Tarvitsemme niitä seuraavassa vaiheessa.

Määritä solmupalvelin

Chatkitillä on kaksi peruskäsitettä: käyttäjät ja huoneet.

Käyttäjät voivat luoda huoneita, liittyä niihin ja keskustella niissä. Mutta ennen kuin käyttäjä voi olla vuorovaikutuksessa huoneen kanssa, meidän on luotava se.

Tämän on tapahduttava palvelimella.

Suorita elektroni-työpöytä-chatissa:

npm install --save express cors body-parser pusher-chatkit-server

Ja liitä tämä uuteen tiedostoon nimeltä server.js:

Muista korvata instanceLocator ja avain kanssa yksinään oikeusasteen Locator ja Key .

Suurin osa tästä koodista on kattilalevy, riippuvuuksien tuonti, Expressin määrittäminen ja niin edelleen.

Tärkeä osa on "/ users" -reitti, joka käsittelee uuden käyttäjän luomispyynnöt.

Suorita palvelin palvelimella node server.jsja näet palvelimen olevan käynnissä portissa 3001.

Luo käyttäjätunnuslomake

Kun joku lataa sovelluksemme, haluamme pyytää heiltä käyttäjätunnuksen ja lähettää sen sitten "/ users".

Asenna joitain natiivin näköisiä käyttöliittymäkomponentteja seuraavilla tavoilla:

npm install --save react-desktop

Ja luo lomakekomponentti nimeltä UsernameForm:

Voit lukea lisää React-lomakekomponenteista täältä. Sattumalta dokumentaatiossa käytetään samanlaista NameForm-luokkaa kuin meillä, joten sen pitäisi olla tuttua!

Korvaa sitten kaikki sovellukset seuraavilla:

Ja testata sitä, juokse npm run dev. Näet, että käyttäjänimen muoto on tehty:

Varmista, että palvelin on käynnissä (muista, että komento on` node server.js), paina Lähetä ja näet, että käyttäjä on luotu:

Näytöt siirtyvät ilman kirjastoa

Kun meillä on käyttäjä, voimme siirtää heidät Käyttäjätunnus-muodosta todelliseen keskusteluruutuun. Meidän pitäisi määritellä se nyt.

Luo uusi komponentti nimeltä Chat:

Ja päivitä sovellus:

Suorita sovellus, kirjoita käyttäjänimi ja siirryt chat-näyttöön:

Lisää reaaliaikainen chat Chatkitin kanssa

Asiat ovat todella tulossa, etkö sanoisi?

Jos haluat muodostaa yhteyden Chatkitiin asiakkaalta, sinun on asennettava @ pusher / chatkit:

npm install --save add @pusher/chatkit

Ja korvaa kaikki chat:

Muista korvata tokenProviderUrlja instanceLocatorarvot testitunnuksen tarjoajan päätepisteellä ja ilmentymälokerolla .

Suorita sovellus, paina ⌘ + ⌥ + I (Control + Vaihto + I) ja näet, että olet muodostanut yhteyden Chatkitiin.

Luo Chatkit-huone

Meillä on käyttäjä, mutta nyt tarvitsemme huoneen!

Voit luoda sellaisen käyttämällä Chatkit-tarkastajaa:

Muista kopioida huonetunnuksesi, tarvitsemme tämän seuraavassa vaiheessa.

Luo chat-komponentti

Nyt meillä on huone, voimme tilata huoneeseen lähetetyt uudet viestit.

Voit tehdä ne luomalla MessageList-komponentin:

Ja päivitä chat:

Kuten aina, muista päivittää roomIdtodellinen huonetunnuksesi.

Nyt, kun viestejä lähetetään huoneeseemme, onNewMessagesoitetaan. Sieltä voimme päivittää tilamme ja vuorostaan ​​käyttöliittymämme.

Sekunnissa annamme käyttäjien lähettää omia viestejään. Testaa tilauksesi toistaiseksi tarkastajalla:

Lähetetään viestejä

Anna käyttäjien lähettää omia viestejä luomalla SendMessageForm-komponentti:

Ja päivitä chat:

Lataa sovellus uudelleen painamalla ⌘ + R (Control + Vaihto + R) ja voit lähettää viestejä:

Itse asiassa, miksi et avaisi kahta sovellusta rinnakkain ja keskustelisi itsesi kanssa?

Kuinka aika olla elossa ...

Tyylittele käyttöliittymä

React Desktopin ansiosta sovelluksemme näyttää jo kunnolliselta, mutta voimme tehdä paremmin.

Tehdään muutama muutos ja määritetään asettelumme käytettäväksi seuraavassa ja viimeisessä vaiheessa.

Korvaa kaikki index.css seuraavilla:

Näytä kuka on verkossa

Viimeistele chat-sovelluksemme lisäämällä "kuka on online" -luettelon näytettäväksi, arvasit, kuka on verkossa!

Luo OnlineList-komponentti:

Päivitä sitten chat:

Odotitko sen olevan vaikeampi? Tein ehdottomasti ensimmäisen kerran, kun yritin!

Koska Chatkit päivittää usersomaisuutta dynaamisesti, meidän ei tarvitse hallita mitään omaa tilojamme . Meidän on yksinkertaisesti kerrottava Reactille renderöinti ja arvioitava uudelleen usersjoka kerta, kun joku tulee verkkoon ( onUserCameOnline), menee offline-tilaan ( onUserWentOffline) tai liittyy huoneeseen ( onUserJoined).

Aja eteenpäin, suorita palvelin ja asiakas ja ihaile upeaa uutta chat-sovellustasi:

Jos olet tullut niin pitkälle, voit yhtä hyvin jatkaa? Pistä näihin bonushaasteisiin…

Haaste 1: Näytä kuka huoneessa kirjoittaa aktiivisesti

Katso, voitko lisätä sovelluksen kirjoitusindikaattoreita. Jos esimerkiksi kirjoitan, sinä ja kaikki muut huoneessa olevat henkilöt näkisitte ”Booker kirjoittaa ...”.

Jos Chris ja minä kirjoittaisimme molemmat, näet "Booker ja Chris kirjoittavat ..." ja niin edelleen.

Vihjeitä:

  • Chatkit-kirjoittamisen ilmaisimen dokumentaatio
  • Löysän kloonin opetusohjelma

Haaste 2: Anna käyttäjän luoda oma huone

Tässä opetusohjelmassa käytimme tarkastajaa luomaan huoneen ja koodasimme sitten huonetunnuksen kovalla koodilla. Tämä ei ole hyvä käytäntö.

Useimmissa sovelluksissa haluat luoda huoneita dynaamisesti createRoom-toiminnolla.

Kun joku lataa sovelluksen, pyydä heiltä myös huoneen nimi:

Jos huone on olemassa, liity siihen; jos ei, luo se ja liity siihen.

Vihjeitä:

  • createRoom-dokumentaatio

Johtopäätös

Se oli hauskaa! Rakensimme melko hienon chat-sovelluksen missä, alle tunnissa?

Yksi asia, jonka huomasin (ja ehkä sinäkin teitkin), on se, että kun perusta on paikallaan (malli, Chatkit-yhteys ja niin edelleen), uusien chat-ominaisuuksien lisääminen on melko yksinkertaista.

Haasteiden lisäksi olisimme utelias näkemään, minne muualla voisit viedä sovelluksen. Joitakin ideoita:

  • Lähetä tiedostoja
  • Lukemattomien viestien määrä
  • Ilmoitukset
  • Lue kohdistimet
  • Yksityinen henkilökohtainen viestintä

Seuraa meitä Twitterissä, @bookercodeissa ja @cebebeast.

Ensi kerralla, ciao.