Да ли сте се икада запитали како функционише ВхатсАпп? Или како се различити корисници повезују и размењују поруке у четовима? Креирање поједностављене апликације за ћаскање може бити одличан начин да схватите основне функције које стоје иза апликација за ћаскање.
Изградња апликације за ћаскање може изгледати као застрашујући задатак, међутим, Фиребасе поједностављује процес. Омогућава вам да брзо покренете било коју апликацију, уклањајући потребу за прилагођеном позадином или подешавањем базе података.
Шта је Фиребасе Цлоуд Датабасе
Фиребасе је развојна платформа заснована на облаку која нуди низ позадинских услуга као што су база података у реалном времену, аутентификација и хостинг. У основи његових услуга базе података је НоСКЛ база података у облаку која користи модел документа за складиштење података у реалном времену.
Подесите Фиребасе пројекат и Реацт Цлиент
Можете да проверите код апликације за ћаскање који је доступан на овом месту ГитХуб спремиште и бесплатан је за коришћење под МИТ лиценцом. Уверите се да сте конфигурисали Фиребасе пре покретања апликације.
Да бисте започели, пређите на Фиребасе и пријавите се за налог. На корисничкој контролној табли кликните Креирајте пројекат да се постави нови пројекат.
Након што креирате свој пројекат, изаберите и кликните на икону кода на страници са прегледом пројекта да бисте регистровали своју апликацију. Регистрација у Фиребасе-у вам омогућава да приступите његовим ресурсима и да их користите за прављење Реацт веб апликације.
Обратите пажњу на упутства за интеграцију Фиребасе-овог СДК-а у ваш пројекат под Додајте Фиребасе СДК.
Следећи, креирајте Реацт апликацију и инсталирајте Фиребасе СДК у своју апликацију. Поред тога, увезите реацт-фиребасе-хоокс пакет који поједностављује рад са Фиребасе-ом у Реацт-у.
нпм инсталл фиребасе реацт-фиребасе-хооксКонфигуришите Фиребасе у вашој Реацт апликацији
У вашем срц директоријум, креирајте нову датотеку и дајте јој име, фиребасе-цонфиг.јс. Копирајте променљиве окружења са контролне табле вашег Фиребасе пројекта и налепите их у ову датотеку.
увоз { инитиализеАпп } из"фиребасе/апп";
увоз { гетФиресторе } из'@фиребасе/фиресторе';
увоз { гетАутх, ГооглеАутхПровидер } из"фиребасе/аутх";конст фиребасеЦонфиг = {
апиКеи: "АПИ_КЕИ",
аутхДомаин: "аутхДомаин",
ИД пројекта: "ИД пројекта",
сторагеБуцкет: "канта за складиштење",
мессагингСендерИд: „ИД пошиљаоца поруке“,
аппИд: „ИД апликације“
};
конст апп = инитиализеАпп (фиребасеЦонфиг);
конст дб = гетФиресторе (апликација);
конст аутх = гетАутх (апликација)
конст провајдер = Нова ГооглеАутхПровидер();
извоз {дб, аутх, провајдер}
Користећи конфигурацију вашег Фиребасе пројекта, ви иницијализујете Фиребасе, Фиресторе и Фиребасе функције аутентификације за коришћење у вашој апликацији.
Подесите Фиресторе базу података
Ова база података ће чувати корисничке податке и поруке ћаскања. Пређите на страницу са прегледом пројекта и кликните на Креирајте базу података дугме да бисте подесили свој Цлоуд Фиресторе.
Дефинишите режим базе података и локацију.
На крају, ажурирајте правила базе података Фиресторе да бисте омогућили операције читања и писања из Реацт апликације. Кликните на Правила картицу и промените читају и пишу правило да истина.
Када завршите са подешавањем базе података, можете креирати демо колекцију — ово је НоСКЛ база података у Фиресторе-у. Збирке се састоје од докумената као записа.
Да бисте креирали нову колекцију, кликните на Започните прикупљање дугме и наведите ИД колекције — име табеле.
Интегришите Фиребасе аутентификацију корисника
Фиребасе пружа готове производе аутентификација и ауторизација решења која се лако имплементирају као што су провајдери за пријављивање на друштвене мреже или прилагођени добављач лозинке за е-пошту.
На страници са прегледом пројекта изаберите Аутентикација са листе приказаних производа. Затим кликните на Подесите метод пријављивања дугме за конфигурисање Гоогле провајдера. Изаберите Гоогле са листе добављача, омогућите га и попуните имејл подршке за пројекат.
Направите компоненту за пријаву
Када завршите са конфигурисањем провајдера на Фиребасе-у, пређите на фасциклу свог пројекта и креирајте нову фасциклу, компоненте, у /src именик. Унутар компоненте фолдер, креирајте нову датотеку: СигнИн.јс.
У СигнИн.јс датотеку, додајте код испод:
увоз Реаговати из'реаговати';
увоз { сигнИнВитхПопуп} из"фиребасе/аутх";
увоз { аутх, провидер } из'../фиребасе-цонфиг'
функцијаПријавите се() {
конст сигнИнВитхГоогле = () => {
сигнИнВитхПопуп (аутх, провидер)
};
повратак (
извозУобичајено Пријавите се
- Овај код увози аутентификацију и објекте Гоогле добављача које сте иницијализовали у Фиребасе конфигурационој датотеци.
- Затим дефинише а Пријавите се функција која имплементира сигнИнВитхПопуп метод из Фиребасе-а који узима у Аутентикација и провајдер компоненте као параметри. Ова функција ће аутентификовати кориснике помоћу њихових Гоогле друштвених пријава.
- Коначно, враћа див који садржи дугме које, када се кликне, позива сигнИнВитхГоогле функција.
Направите компоненту за ћаскање
У овој компоненти ће се налазити главна карактеристика ваше апликације за ћаскање, прозор за ћаскање. Креирајте нову датотеку унутар компоненте фолдер и дајте му име Цхат.јс.
Додајте код испод у Цхат.јс Фајл:
увоз Реагујте, { усеСтате, усеЕффецт } из'реаговати'
увоз { дб, аутх } из'../фиребасе-цонфиг'
увоз СендМессаге из'./СендМессаге'
увоз { цоллецтион, куери, лимит, ордерБи, онСнапсхот } из"фиребасе/фиресторе";функцијаЋаскање() {
конст [мессагес, сетМессагес] = усеСтате([])
конст { ИД корисника } = аутх.цуррентУсер
усеЕффецт(() => {
конст к = упит(
збирка (дб, "поруке"),
ордерБи("Креирано"),
граница (50)
);
конст подаци = онСнапсхот (к, (КуериСнапсхот) => {
дозволити поруке = [];
КуериСнапсхот.форЕацх((доц) => {
мессагес.пусх({ ...доц.дата(), ид: доц.ид });
});
сетМессагес (поруке)
});
повратак() => подаци;
}, []);
повратак (
- Овај код увози базу података, компоненте за аутентификацију иницијализоване у фиребасе-цонфиг.јс датотеку и прилагођене методе Фиресторе које олакшавају манипулацију сачуваним подацима.
- Она имплементира збирка, упит, лимит, ордерБи, и онСнапсхот Фиресторе методе за упит и снимање снимка тренутно ускладиштених података у колекцији Фиресторе порука, пореданих према времену када су креиране, и чита само 50 најновијих порука.
- Методе Фиресторе су омотане и покренуте унутар а усеЕффецт закачите да бисте осигурали да се поруке приказују одмах, сваки пут када притиснете дугме за слање, без освежавања прозора странице. Када се подаци прочитају, они се чувају у стању порука.
- Затим проверава да направи разлику између послатих и примљених порука — да ли се кориснички ИД сачуван уз поруку поклапа кориснички ИД за пријављеног корисника, а након тога поставља име класе и примењује одговарајући стил за порука.
- На крају, он приказује поруке, а Одјава дугме, и СендМессаге саставни део. Тхе Одјава дугме онЦлицк руковалац позива аутх.сигнОут() метод који обезбеђује Фиребасе.
Креирајте компоненту за слање поруке
Креирајте нову датотеку, СендМессаге.јс датотеку и додајте код испод:
увоз Реагујте, { усеСтате } из'реаговати'
увоз { дб, аутх } из'../фиребасе-цонфиг'
увоз { цоллецтион, аддДоц, серверТиместамп} из"фиребасе/фиресторе";функцијаСендМессаге() {
конст [мсг, сетМсг] = усеСтате('')
конст мессагесРеф = збирка (дб, "поруке");
конст сендМсг = асинц (е) => {
конст { уид, пхотоУРЛ } = аутх.цуррентУсер
чекати аддДоц (мессагесРеф, {
текст: порука,
цреатедАт: серверТиместамп(),
уид: уид,
пхотоУРЛ: пхотоУРЛ
})
сетМсг('');
};повратак (
'Порука...'
типе="текст" вредност={мсг}
онЦханге={(е) => сетМсг (е.таргет.валуе)}
/>
извозУобичајено СендМессаге
- Слично као Цхат.јс компоненту, увезите методе Фиресторе и иницијализовану базу података и компоненте за аутентификацију.
- За слање порука, СендМессаге функција имплементира аддДоц Фиресторе метод који креира нови документ у бази података и чува прослеђене податке.
- Тхе аддДоц метода узима два параметра, објекат података и референтни објекат који указује у коју колекцију желите да ускладиштите податке. Метод прикупљања Фиресторе специфицира колекцију за складиштење података.
- На крају, он приказује поље за унос и дугме на веб страници како би се омогућило корисницима да шаљу поруке у базу података.
Увезите компоненте у датотеку Апп.јс
На крају, у вашем Апп.јс датотеку, увезите Пријавите се и Ћаскање компоненте да бисте их приказали у вашем претраживачу.
У вашем Апп.јс датотеку, избришите шаблонски код и додајте код испод:
увоз Ћаскање из'./цомпонентс/Цхат';
увоз Пријавите се из'./цомпонентс/СигнИн';
увоз { аутх } из'./фиребасе-цонфиг.јс'
увоз { усеАутхСтате } из'реацт-фиребасе-хоокс/аутх'
функцијаАпликација() {
конст [корисник] = усеАутхСтате (аутх)
повратак (
<>
{корисник? <Ћаскање />: <Пријавите се />}
</>
);
}
извозУобичајено Апликација; Овај код приказује Пријавите се и Ћаскање компоненте условно провером статуса аутентификације корисника. Статус аутентификације се деструктурира из Фиребасе компоненте аутентификације уз помоћ усеАутхСтате кука из реацт-фиребасе-хоокс пакет.
Проверава да ли је корисник аутентификован и приказује Ћаскање компонента иначе тхе Пријавите се компонента је приказана. Коначно, додајте било који ЦСС стил, покрените развојни сервер да бисте сачували промене и идите на прегледач да бисте видели коначне резултате.
Фиребасе функционалности без сервера
Фиребасе пружа низ функција изван базе података у реалном времену и аутентификације. Можете користити његове функционалности без сервера за брзо покретање и скалирање било које апликације. Штавише, Фиребасе се неприметно интегрише и са веб и са мобилним апликацијама, што олакшава прављење апликација на више платформи.
