Advertisement
  1. Code
  2. Web Development
Code

Firebase для вашага наступнага праекта

by
Difficulty:BeginnerLength:LongLanguages:

Belarusian (беларуская мова) translation by Alex Grigorovich (you can also view the original English article)

У сённяшнім навучальным дапаможніку мы пазнаёмім вас с Firebase, стварыўшы просты дадатак для чатаў, выкарыстоўваючы Javascript API Firebase. Гэты дадатак прадаставіць вам будаўнічыя блокі для распрацоўкі больш дасканалых прыкладанняў рэальнага часу ў вашых уласных праектах.

Пачнем

Каб запусціць Firebase, вам трэба будзе стварыць бясплатны ўліковы запіс распрацоўніка, наведаўшы іх вэб-сайт і зарэгістраваўшыся.  Пасля таго, як вы паспяхова зарэгістраваліся, Firebase перанакіруе вас на панэль кіравання вашым уліковым запісам, дзе ў вас будзе доступ да ўсіх месцазнаходжанне дадзеных Firebase і іншым цікавым функцый. Аднак цяпер вы павінны выбраць месцазнаходжанне дадзеных Firebase пад назвай MY FIRST APP. Не саромейцеся пераназываць гэты дадатак або стварыць новы.

Калі было абрана месцазнаходжанне дадзеных Firebase, яму будзе прысвоена ўласнае унікальнае імя host-name. Гэта унікальнае імя хаста вельмі важна; таму што гэта месца, дзе вашы дадзеныя будуць прачытаныя і напісаныя. Мы абмяркуем імя хаста больш падрабязна, пазней у падручніку, але на дадзены момант:

Пачнем будаваць

Першы пункт парадку дня: стварыце новы HTML-файл, які спасылаецца на кліент Firebase, jQuery і Bootstrap CDN Цалкам відавочна, што нам трэба спасылацца на CDN Firebase. Зараз можа быць не так зразумела, чаму мы спасылаемся на jQuery і Bootstrap.  Я выкарыстоўваю jQuery і Bootstrap для хуткай распрацоўкі дадаткаў. Абедзве гэтыя бібліятэкі дазваляюць мне рабіць нешта вельмі хутка, і яны не патрабуюць вялікай колькасці дадатковага кода. Тым не менш, я не буду падрабязна обсужать ні jQuery, ні Bootstrap. Таму не саромейцеся больш даведацца аб гэтых бібліятэках JavaScript самастойна. 

HTML - код

Разметка, якая рэалізуе тое, што я апісаў, выглядае наступным чынам:

Цяпер, калі мы стварылі наш HTML-файл і спасылаемся на правільныя CDN, давайце прыступім да распрацоўкі астатняй часткі нашага дадатка.

Па-першае, нам трэба вызначыць, якія істотныя функцыянальныя магчымасці спатрэбяцца для гэтага дадатка. Падобна на тое, што большасць дадаткаў у стылі чатаў маюць два падабенства: поле для адпраўкі паведамленняў на сервер і падзел, які запаўняецца паведамленнямі з сервера. У нашым выпадку гэты сервер будзе нашым месцазнаходжаннем дадзеных Firebase.

Давайце рэалізуем акно паведамленні для адпраўкі паведамленняў на сервер перад пачаткам працы. Гэта запатрабуе ад нас стварэння простага інтэрфейсу, які ўключае ў сябе поле input і кнопку submit, загорнутыя ў тэгі form. Паколькі мы спасылаемся на табліцу стыляў Bootstrap, мы можам выкарыстоўваць некаторыя наканаваныя стылі для стварэння інтэрфейсу. Як я сказаў раней, гэта вельмі зручна і дазваляе нам пісаць менш кода.

Такім чынам, давайце спачатку змесцім div з атрыбутам класса container непасрэдна пасля адкрыцця тега body ў HTML-файле. Гэта функцыя бутстрапа, якая прадастаўляе абмежаванні шырыні і водступы для змесціва старонкі.  Ўнутры тэгаў кантэйнера дадайце загаловак, зняволены ў тэгі H1, каб мы маглі даць дадаткам апісальны імя. Мой загаловак будзе «Дадатак для Firebase Chat». Не саромейцеся выкарыстоўваць сваю творчасць пры напісанні сваёй назвы.

Разметка, якая рэалізуе тое, што я апісаў вышэй, выглядае так:

Акрамя таго, нам таксама неабходна дадаць атрыбут div з атрыбутамі класа: panel і panel-default. Панэль ўяўляе сабой кампанент Bootstrap, які па змаўчанні ўяўляе сабой просты блок, які змяшчае чатыры ўнутраных DIV: panel-heading, panel-title, panel-body і panel-footer. Мы не будзем выкарыстоўваць panel-heading і panel-title, але мы будзем выкарыстоўваць як panel-body, так і panel-footer.panel DIV будзе выкарыстоўвацца ў якасці асноўнага кантэйнера для кліента чата.

Разметка, якая рэалізуе тое, што я апісаў вышэй, выглядае наступным чынам:

На дадзены момант мы не будзем працаваць з panel-body. Тым не менш, нам трэба будзе выкарыстоўваць гэты раздзел пазней у падручніку для запаўнення паведамленняў з нашага месцазнаходжання дадзеных.

Прама цяпер мы будзем факусавацца на panel-footer. Футер панэлі будзе ўтрымліваць поле ўводу, кнопку адпраўкі і кнопку скіду. Мы дамо полі ўводу атрыбут id са значением comments, а для кнопкі - submit-btn.  Абодва гэтыя атрыбуту id вельмі важныя і спатрэбяцца пазней у падручніку. Не саромейцеся змяняць ідэнтыфікатары атрыбутаў для элементаў формы.

Разметка, якая рэалізуе тое, што я апісаў вышэй, выглядае наступным чынам:

Зараз давайце рэалізуем JavaScript, які дазволіць нам адправіць паведамленне ў месцазнаходжанне дадзеных Firebase.

JavaScript

Спачатку нам трэба дадаць набор тэгаў script непасрэдна над які закрывае тегом body ў файле HTML. У тэгах сцэнарыя нам трэба стварыць спасылку на месцазнаходжанне дадзеных Firebase.  Без гэтай спасылкі мы не можам запісваць дадзеныя ў наша месцазнаходжанне дадзеных. Гэта можа быць выканана шляхам ініцыялізацыі канструктара Firebase і перадачы нашага месцазнаходжання дадзеных у якасці параметру. Памятаеце, што месцазнаходжанне дадзеных Firebase было створана пры наладзе Firebase (унікальнае імя хаста).

Код, які рэалізуе тое, што я апісаў вышэй, выглядае наступным чынам:

Пасля ініцыялізацыі спасылкавага аб'екта Firebase нам трэба прывязаць апрацоўшчык падзеі кліку да селектары кнопкі адпраўкі.  Размяшчэнне гэтага селектара знаходзіцца ў футере панэлі. Акрамя таго, нам трэба пераканацца, што зваротны выклік апрацоўшчыка падзеі змяшчае аператар return false як апошнюю радок кода. Гэта гарантуе, што дзеянне па змаўчанні для адпраўкі формы не адбудзецца і не дазволіць падзеі абудзіць дрэва DOM. Аднак у некаторых выпадках вам можа спатрэбіцца всплывание падзей ўверх па DOM. 

У прыведзеных ніжэй фрагментах JavaScript рэалізавана тое, што апісана вышэй: 

Затым мы вызначым зменную, якая спасылаецца на селектар каментара і іншую зменную, якая выдаляе прабелы з пачатку і канца значэння каментара.

Код, які рэалізуе тое, што я апісаў вышэй, выглядае наступным чынам: 

Зараз нам трэба вызначыць метад, неабходны для фактычнага напісання каментарыяў да нашага месцазнаходжанні. 

Запіс дадзеных у Firebase

API Firebase прапануе некалькі спосабаў запісу дадзеных у месцазнаходжанне дадзеных. Аднак у сённяшнім уроку мы засяродзімся на выкарыстанні метадаў set () и push (). Давайце коратка разгледзім, што дазваляе кожны з гэтых метадаў.

  • • Метад set () будзе запісваць дадзеныя ў месцазнаходжанне дадзеных, а таксама перазапісваць любыя дадзеныя, якія ў цяперашні час захоўваюцца ў месцазнаходжанні дадзеных.
  • Метад push () будзе запісваць дадзеныя ў месцазнаходжанне дадзеных, аўтаматычна генеруючы новае даччынае месцазнаходжанне з унікальным імем. Акрамя таго, гэта ўнікальнае імя будзе мець прэфікс з адзнакай часу. Гэта дазволіць храналагічна адсартаваць усе даччыныя месцазнаходжаньня.

Пасля прагляду метадаў set () і push (); Я думаю, што цалкам відавочна, што нам трэба выкарыстоўваць метод push () у нашым дадатку. У адваротным выпадку мы будзем пастаянна перазапісваць апошні каментар у нашым месцазнаходжанні дадзеных, і гэта было б нявесела.

Для гэтага вернемся да JavaScript, які мы раней дадалі на нашу старонку. Цяпер нам трэба накіраваць значэнне каментара ў наша месцазнаходжанне дадзеных. Цяпер майце на ўвазе, што існуюць розныя метады push, якія дазваляюць нам перадаваць дадзеныя ў розных фарматах, такіх як аб'ект, масіў, радок, лік, лагічнае значэнне або нуль. Мы проста выкарыстоўваем аб'ект, у якога ёсць пара значэнняў ключа каментара і значэнне каментара.  Акрамя таго, мы дадамо дадатковы зваротны выклік для запуску пасля завяршэння метадаў push. Зваротны выклік вяртае аб'ект памылкі пры збоі, а пры паспяховым - нулявое значэнне.

Код, які рэалізуе тое, што я апісаў вышэй, выглядае наступным чынам: 

Зараз давайце дадамо нешта, каб карыстальнікі чата не маглі пісаць пустыя паведамленні ў наша месцазнаходжанне дадзеных. Гэта можна лёгка выканаць, дадаўшы просты аператар if else, які правярае даўжыню значэння каментара.

Код, які рэалізуе тое, што я апісаў вышэй, выглядае наступным чынам:

Выдатна, мы паспяхова завяршылі падзел нашага прыкладання, які дазваляе карыстальнікам запісваць дадзеныя ў наша месцазнаходжанне. Але, у нас ёсць недахоп у функцыянальнасці, якая дае карыстальнікам чат у рэжыме рэальнага часу. Гэты тып прыкладання запатрабуе магчымасці счытваць дадзеныя з даччыных месцазнаходжанне У межах месцазнаходжаньня дадзеных. 

Чытанне дадзеных з Firebase

Як мы згадвалі раней, большасць прыкладанняў у стылі чатаў чытаюць дадзеныя з сервера, а затым запаўняюць раздзел інтэрфейсу. Нам трэба будзе зрабіць тое ж самае ў нашым дадатку, выкарыстоўваючы API Firebase.

API Firebase прапануе некалькі метадаў для чытання дадзеных з месцазнаходжання дадзеных. У сённяшнім падручніку мы засяродзімся на выкарыстанні метаду on ()

Метад on () мае некалькі аргументаў, якія варта вывучыць, але мы разгледзім толькі першыя два аргументу: eventType і callback. Давайце разгледзім абодва з іх.

Выбар eventType

Аргумент «eventType» мае некалькі параметраў. Давайце паглядзім на кожнага, каб мы маглі вызначыць, які з іх лепш за ўсё будзе адказваць нашым патрэбам.

  •  «value» - будзе запускацца адзін раз і чытае ўсе каментары, затым будзе выкананы кожны раз, калі будуць зробленыя якія-небудзь змены ў каментарах.
  • «child_added» - запускаецца адзін раз для кожнага каментара, а таксама кожны раз, калі дадаецца новы каментар.
  • «child_removed» - будзе спрацоўваць пры выдаленні каментара.
  • «child_changed» - будзе спрацоўваць пры кожным змене каментара.
  • «child_moved» - будзе спрацоўваць ў любы час, калі будзе зменены парадак каментара.

Прагледзеўшы прыведзеныя вышэй варыянты, здаецца цалкам відавочным, што мы павінны выкарыстоўваць «child_added» як наш «eventType». Гэты тып падзеі будзе запускацца адзін раз для кожнага каментара ў нашым месцазнаходжанні дадзеных, а таксама кожны раз, калі дадаецца новы каментар.   Акрамя таго, пры даданні новага каментара ён не верне ўвесь набор каментароў у гэтым месцы, а толькі апошні даданыя. Гэта менавіта тое, што мы хочам! Няма неабходнасці вяртаць ўвесь набор каментароў пры даданні новага каментара.

Аналіз callback

«Callback» для метаду on () падае элемент, на які Firebase спасылаецца як на «маментальны здымак дадзеных», які мае некалькі функцый-членаў, сёння асноўная ўвага надаецца name () і val ().

Функцыя-член name () падае нам унікальнае імя «пяціхвілінкі дадзеных». Калі вы памятаеце раней, мы выкарыстоўвалі функцыю push () ,каб напісаць новы каментар да нашага месцазнаходжанні. Калі вызывался push (), ён генераваў новае даччынае месцазнаходжанне, выкарыстоўваючы унікальнае імя, і гэтае імя, якое будзе вернута з дапамогай функцыі члена call back, name ().

Функцыя член val () падае нам уяўленне аб'екта JavaScript «пяціхвілінкі дадзеных" і з дапамогай гэтага маментальнага здымка, мы зможам атрымаць каментар з нашага месцазнаходжання дадзеных. Аднак нам трэба адступіць на імгненне.

Раней у гэтым уроку мы рэалізавалі JavaScript, неабходны для ўводу каментароў у наша месцазнаходжанне Firebase, і мы зрабілі гэта, аддаўшы аб'ект з парай ключ-значэнне.У гэтым выпадку ключ быў «comment», і значэнне было уведзеным карыстальнікам.  Таму, калі мы хочам атрымаць каментар з нашага «пяціхвілінкі дадзеных», нам трэба распазнаць правільны тып дадзеных. У гэтым выпадку мы маем справу з аб'ектам, таму для доступу да згаданага ўласцівасці вы можаце выкарыстоўваць або кропкавую натацыю, альбо дужку.

Абодва прыведзеных ніжэй фрагмента JavaScript рэалізуюць тое, што апісана вышэй:

Адлюстраванне каментарыяў

Затым давайце створым просты, але чысты спосаб адлюстравання кожнага каментара. Гэта можа быць лёгка дасягнута шляхам аб'яднання кожнага каментара ў div і маркіроўкі кожнага каментара яго унікальным именем Звычайна каментары пазначаныя імем карыстальніка, які напісаў гэты каментар, у нашым выпадку гэта ананімны кліент чата.

Код, які рэалізуе тое, што я апісаў вышэй, выглядае наступным чынам:

Затым мы павінны дадаць кожны каментар у кантэйнер каментара і атрымаць бягучую вертыкальную пазіцыю панэлі пракруткі кантэйнера каментара і пракруціць да гэтага апошняга месцазнаходжаньня. Гэта гарантуе, што кожны раз, калі каментар змяшчаецца ў Firebase, усе карыстальнікі, якія выкарыстоўваюць прыкладанне чата, будуць бачыць апошні каментар. Усё гэта павінна быць зроблена ў зваротным выкліку.

Ён павінен выглядаць прыкладна так:

Зараз давайце выкарыстоўваецца і ў дачыненні некаторыя простыя стылі CSS да DIV, абгорнутым вакол кожнага блока каментароў. Гэта зробіць знешні выгляд крыху больш прывабным і зручным для карыстальніка. Гэтыя стылі павінны быць дададзены ў тэгі style, размешчаныя ў раздзеле headHTML. 

Код, які рэалізуе тое, што я апісаў вышэй, выглядае наступным чынам: 

Запуск дадатка

Прыйшоў час запусціць наш дадатак. Давайце пачнем з адкрыцця двух асобнікаў нашага любімага, сучаснага браўзэра і размяшчэння іх побач на нашым працоўным столе. Затем мы пяройдзем да нашага файлу, які мы стварылі, абодва маюць. Пратэстуйце гэта, напісаўшы некалькі каментароў і атрымлівайце асалоду ад праглядам магіі Firebase. 

Неверагодна, што толькі пара радкоў кода можа ствараць такое магутнае прыкладанне. Не саромейцеся рэдагаваць гэты фрагмент любым спосабам для атрымання жаданых вынікаў.

Паглядзіце онлайн-дэманстрацыю, каб убачыць яе ў дзеянні. Ніжэй прыведзены поўны зыходны код для ўсяго прыкладання для чатаў:

У выніку

У сённяшнім падручніку мы прапрацавалі увесь працэс ўкаранення простага прыкладання для чатаў, выкарыстоўваючы JavaScript API Firebase. Пры гэтым мы змаглі выпрабаваць моц Firebase і ацаніць яго выгода. Ніжэй прыведзены некаторыя з ключавых элементаў, якія мы сёння закранулі:  

  • Спасылка на месцазнаходжанне дадзеных Firebase шляхам ініцыялізацыі канструктара Firebase.
  • Запіс дадзеных у Firebase з дапамогай метаду push.
  • Чытанне дадзеных з Firebase з дапамогай метаду on з тыпам падзеі "child_added".

Спадзяюся, што гэты ўрок даў вам адпраўную кропку, з якой вы можаце пачаць працу з Firebase. Калі ў вас ёсць якія-небудзь пытанні ці каментары, не саромейцеся пакідаць іх ніжэй. Яшчэ раз дзякуй за ваш час і працягвайце даследаваць бясконцыя магчымасці API Firebase. 

Ресурсы

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.