Научите да правите сопствену апликацију за ћаскање на рачунару помоћу Реацт и Елецтрон, корак по корак

Овај водич је написан у сарадњи са сјајним Цхристианом Нвамбом.

Када учите кодирање, на располагању вам је гомила ресурса - књиге, екранизација, водичи, чак и вежбе. Али да бисте постали одличан програмер, морате вежбати оно што научите у пројекту.

Учење кроз рад мотивација је за овај чланак. Почећете од ничега и креираћете комплетну апликацију за ћаскање, корак по корак.

Пројекат ћете градити корак по корак и да бисмо вас тестирали да га разумете, на крају смо уврстили неке посебне бонус изазове. Јесте ли на тесту?

Ево шта ћемо направити:

Прилично цоол, зар не ??

Када наставите, научићете како да направите ћаскање у реалном времену, листу „ко је на мрежи“ и успут како да структурирате Реацт апликацију. Да бисмо напајали наше ћаскање, користићемо услугу коју помажем у изградњи, а зове се Цхаткит.

Звучи добро? Укључите се у ФрееЦодеЦамп радио за глатку, нежну музику у позадини да бисте били фокусирани и кренимо!

Оно што треба да знате

Заправо, још нешто?:

Било би лепо када бисте већ знали неке основне ЈаваСцрипт, Ноде и Реацт. То је речено, ако се не осећате пријатно са овим технологијама, ипак покушајте!

Намерно смо структурирали овај водич да бисмо јасно поставили где треба налепити код да бисте могли да га пратите. Ако имате питања, оставите их овде!

У реду, први корак:

Сетуп Елецтрон

Да бисмо направили десктоп платформу са више платформи са веб технологијама, користићемо Елецтрон.

Да би нас склонили са тла, направили смо минимални почетни образац. Преузми:

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

И инсталирајте те локалне зависности:

npm install

Отворите Цхаткит налог

Нисмо превише забринути због стварања позадине у овом упутству, па ћемо користити Цхаткит.

Да бисте наставили даље, креирајте бесплатни налог и нову инстанцу под називом „Елецтрон десктоп цхат“:

У прозору подешавања укључите добављача тест токена:

Забележите крајњу тачку добављача пробног токена , локатор инстанце и тајни кључ . Требаће нам у следећем кораку.

Подесите Ноде сервер

Цхаткит има два основна концепта: корисници и собе.

Корисници могу да креирају собе, придруже им се и ћаскају у њима. Али пре него што корисник може да ступи у интеракцију са собом, морамо је створити.

Ово се мора догодити на серверу.

У цхату елецтрон-десктоп, покрените:

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

И залепите ово у нову датотеку која се зове сервер.јс:

Не заборавите да замените инстанцеЛоцатор и тастер са ваш власник Основни локатор и Кључ .

Већина овог кода је узорак, увоз зависности, подешавање Екпресс-а итд.

Важан део је рута „/ усерс“ која обрађује захтеве за креирање новог корисника.

Покрените сервер са node server.jsи видећете да је сервер „Покренут на порту 3001“.

Креирајте образац за корисничко име

Када неко учита нашу апликацију, желећемо да од њега затражимо корисничко име, а затим га пошаљемо „/ усерс“.

Инсталирајте неке компоненте УИ матичног изгледа са:

npm install --save react-desktop

И креирајте компоненту обрасца која се зове УсернамеФорм:

Овде можете прочитати више о компонентама облика Реацт. Случајно, документација користи класу НамеФорм сличну нашој, тако да би све требало бити познато!

Даље, замените све апликације са:

И да га тестираш, трчи npm run dev. Видећете да је приказан образац за корисничко име:

Уверите се да је сервер покренут (запамтите, команда је ` node server.js), притисните Субмит и видећете да је корисник креиран:

Прелазни екрани без библиотеке

Једном када имамо корисника, можемо га пребацити из обрасца за корисничко име на стварни екран за ћаскање. То бисмо сада требали дефинисати.

Направите нову компоненту која се зове Цхат:

И ажурирајте апликацију:

Покрените апликацију, унесите корисничко име и прећи ћете на екран за ћаскање:

Додајте цхат у реалном времену са Цхаткит-ом

Ствари се стварно одвијају, зар не?

Да бисте се повезали на Цхаткит са клијента, морате инсталирати @ пусхер / цхаткит:

npm install --save add @pusher/chatkit

И замените читав цхат са:

Не заборавите да замените вредности tokenProviderUrlи instanceLocatorвредностима са крајњом тачком добављача пробних жетона и локатором инстанце .

Покрените апликацију, притисните ⌘ + ⌥ + И (Цонтрол + Схифт + И) и видећете да сте се повезали са Цхаткит-ом.

Направите собу за Цхаткит

Имамо корисника, али сада нам треба соба!

Да бисте га креирали, користите Цхаткит инспектор:

Не заборавите да копирате ИД собе, ово ће нам требати у следећем кораку.

Направите компоненту собе за ћаскање

Сада имамо собу, можемо се претплатити на нове поруке послате у тој соби.

Да бисте их приказали, направите компоненту МессагеЛист:

И ажурирајте Цхат:

Као и увек, не заборавите да ажурирате roomIdсвој стварни ИД собе.

Сада, када се поруке пошаљу у нашу собу, onNewMessageбиће позване. Одавде можемо да ажурирамо своје стање, а заузврат и наш кориснички интерфејс.

У секунди ћемо дозволити корисницима да пошаљу своје поруке. За сада, да бисте тестирали претплату, користите инспектор:

Слање порука

Да бисте дозволили корисницима да шаљу сопствене поруке, креирајте компоненту СендМессагеФорм:

И ажурирајте Цхат:

Поново учитајте апликацију помоћу ⌘ + Р (Цонтрол + Схифт + Р) и моћи ћете да шаљете поруке:

Заправо, зашто не бисте отворили две апликације паралелно и разговарали сами са собом?

У које доба бити жив ...

Обликујте кориснички интерфејс

Захваљујући Реацт Десктоп-у, наша апликација већ изгледа пристојно, али можемо и боље.

Направимо неколико подешавања и дефинишемо свој изглед за употребу у следећем и последњем кораку.

Замените све индек.цсс са:

Покажите ко је на мрежи

Да бисмо завршили нашу апликацију за ћаскање, додаћемо листу „ко је на мрежи“ да бисте погодили ко је на мрежи!

Направите компоненту ОнлинеЛист:

Затим ажурирајте Цхат:

Да ли сте очекивали да ће то бити теже? Дефинитивно сам пробао први пут!

Будући да Цхаткит usersдинамички ажурира својство, не морамо да управљамо било којим својим стањем. Једноставно морамо да кажемо Реацт-у да се поново прикаже и, заузврат, поново процени usersсваки пут када неко дође на мрежу ( onUserCameOnline), пређе ван мреже ( onUserWentOffline) или се придружи соби ( onUserJoined).

Само напред, покрените сервер и клијента и дивите се својој величанственој новој апликацији за ћаскање:

Ако сте стигли тако далеко, могли бисте и даље ићи ?! Убодите у ове бонус изазове ...

Изазов 1: Покажите ко у соби активно куца

Погледајте да ли можете да додате индикаторе куцања у апликацију. На пример, ако куцам, ви и сви остали у соби видели бисте „Боокер пише ...“.

Да смо обојица Цхрис и ја куцали, видели бисте „Боокер и Цхрис типкају ...“ и тако даље.

Савети:

  • Документација о индикаторима куцања у Цхаткит-у
  • Водич за слацк цлоне

Изазов 2: Дозволите кориснику да креира сопствену собу

У овом упутству смо користили инспектора за стварање собе, а затим смо тешко кодирали ИД собе. Ово није добра пракса.

У већини апликација желели бисте динамички да креирате собе са функцијом цреатеРоом.

Када неко учита апликацију, питајте га и за име собе:

Ако соба постоји, придружите јој се; ако не, креирајте је па јој се придружите.

Савети:

  • цреатеРоом документација

Закључак

То је било забавно! За шта, мање од сат времена, направили смо прилично кул апликацију за ћаскање.

Једна ствар коју сам приметио (а можда сте и ви то учинили) је да је једном кад основа буде успостављена (шаблон, Цхаткит веза и тако даље) додавање нових функција ћаскања прилично једноставно.

Поред изазова, радознали бисмо да видимо где бисте још могли да однесете пријаву. Неке идеје:

  • Пошаљите датотеке
  • Број непрочитаних порука
  • Обавештења
  • Читајте курсоре
  • Приватне поруке „један на један“

Слободно нас пратите на Твиттер-у, @боокерцодес и @цодебеаст.

До следећег пута, циао.