Как да се изгради приложение в реално време с React Native

Благодарение на Бела Бордо

Приложението todo засяга всички важни части от изграждането на всяко приложение, управлявано от данни, включително операциите Създаване, четене, актуализиране и изтриване (CRUD). В тази история ще създавам приложение за todo с една от най-популярните мобилни рамки, React Native.

Ще използвам ReactiveSearch Native, библиотека с отворен код, която предоставя React Native UI компоненти и опростява изграждането на приложения, управлявани от данни.

Ето какво ще изградя в тази история:

Todo App

Вижте приложението на закуска или на изложение.

Какво е React Native?

Ето какво казват документите:

React Native ви позволява да създавате мобилни приложения, като използвате само JavaScript. Той използва същия дизайн като React, като ви позволява да съставите богат мобилен потребителски интерфейс от декларативни компоненти.

Дори ако току-що започвате с React или React Native, трябва да можете да следвате тази история и да изградите свое собствено приложение за todo в реално време.

Защо да използвате ReactiveSearch? ⚛

ReactiveSearch е библиотека с компоненти с отворен код React and React Native UI за Elasticsearch, която съм съавтор с някои страхотни хора. Той предоставя разнообразни компоненти на React Native, които могат да се свържат с всеки клъстер Elasticsearch.

Написах друга история за изграждането на GitHub Repo Explorer с React и Elasticsearch, която може да проверите за кратък преглед на Elasticsearch. Дори и да не сте имали опит с Elasticsearch, трябва да можете да следвате добре тази история.

Настройка на нещата ⚒

Тук ще използваме версията на React Native на библиотеката.

Преди да започнем да изграждаме потребителския интерфейс, ще трябва да създадем хранилище за данни в Elasticsearch. ReactiveSearch работи с всеки индекс на Elasticsearch и можете лесно да го използвате със свой собствен набор от данни.

Вижте набора ми от данни тук. Можете също да клонирате това към собственото си приложение

За краткост можете да използвате моя набор от данни директно или да създадете такъв за себе си с помощта на appbase.io, който ви позволява да създадете хостван индекс Elasticsearch (известен още като приложение).

Всички тодоси са структурирани в следния формат:

{
  "заглавие": "реагира-роден",
  "завършен": вярно,
  "createdAt": 1518449005768
}

Стартовият проект

Преди да започнем, бих препоръчал да инсталирате прежда. В Linux това може да се направи просто като се добави хранилището на преждата и се изпълни командата за инсталиране чрез вашия мениджър на пакети. На Mac първо трябва да инсталирате Homebrew, за да направите нещата по-прости. Ето и документите за инсталиране на прежда за повече подробности. Следващото нещо, което можете да инсталирате, е пазачът. Това е услуга за гледане на файлове, която ще помогне на реагиращия опаковчик да работи безпроблемно.

Тук създавам проекта за начинаещи с приложението create-react-native в клона на GitHub. Можете да изтеглите цип или да клонирате основния клон, като изпълните следната команда:

git clone -b база https://github.com/appbaseio-apps/todos-native
  • След това инсталирайте зависимостите и стартирайте пакера:
cd todos-native && прежда && прежда
  • След стартирането на опаковчика можете да стартирате приложението на телефона си с помощта на приложението Expo или с помощта на Android или IOS емулатор:
Основна настройка с всички раздели. Клонирайте се оттук.

Гмуркане в код

След като клонирате кода от основния клон, трябва да видите структура на директория като по-долу:

навигация
├── RootComponent.js // Root компонент за нашето приложение
├── MainTabNavigator.js // Компонент за навигация в раздела
екрани
├── TodosScreen.js // Извежда TodosContainer
елементи
├── Header.js // Компонент Header
├── AddTodo.js // Добави todo вход
├── AddTodoButton.js // Добавяне на плаващ бутон todo
├── TodoItem.js // Елементът todo
├── TodosContainer.js // Основен контейнер на Todos
API
├── todos.js // API за изпълнение на записи
константи // Всички видове константи, използвани в приложението
видове // Тип Todo, който ще се използва с подпорни типове
utils // Логиката за поточно преминаване тук

Нека да разберем какво предлага основната настройка:

1. Навигация

  • Всички необходими конфигурации за свързване към Elasticsearch са на константи / Config.js.
  • Използваме TabNavigator от реакция-навигация за показване на екрана за всички, активни и завършени тодоси. Това се изобразява от навигацията / RootComponent.js. Ще забележите, че RootComponent обгръща всичко в компонента ReactiveBase от ReactiveSearch. Този компонент предоставя всички необходими данни на дъщерните компоненти на ReactiveSearch. Можете да свържете свой собствен индекс Elasticsearch тук, като просто актуализирате конфигурациите в константи / Config.js.

Навигационната логика присъства в навигацията / MainNavigator.js. Нека разгледаме как работи. Ето документите за навигация в раздела, ако искате да се позовавате на нещо.

  • Функцията TabNavigator приема два аргумента, първият е конфигурациите на маршрута, а вторият - конфигурациите на TabNavigator. В горния фрагмент предаваме конфигурациите за показване на лента за навигация в таб в долната част и настройване на различни икони за всеки раздел.

2. TodosScreen и TodosContainer

Компонентът TodosScreen в екрани / TodosScreen.js обвива основния ни компонент TodosContainer в компоненти / TodosContainer.js, където ще добавяме различни компоненти за приложението. TodosContainer ще покаже филтрирани данни въз основа на това дали сме в раздела Всички, Активни или Завършени.

3. API за създаване, актуализиране и изтриване на todos

API-тата за CUD операции в Elasticsearch присъстват в api / todos.js. Той съдържа три прости метода добавяне, актуализиране и унищожаване, които работят с всеки индекс Elasticsearch, както е посочено в константи / Config.js. Важен момент, който трябва да имате предвид, е, че всеки елемент на todo, който създаваме, ще има уникално поле _id. Можем да използваме това поле _id за актуализиране или изтриване на съществуващо todo.

За нашето приложение просто ще ни трябват три метода за добавяне, създаване или изтриване на тодоси. Можете обаче да намерите подробно обяснение за методите на API в документите.

Изграждане на компонентите и потребителския интерфейс

Нека започнем да добавяме някои компоненти, за да завършим функционалността на приложението.

1. Добавяне на Тодос

Ще използваме Fab от родна база, за да изобразим плаващ бутон за добавяне на todos.

Сега можете да използвате този компонент в компоненти / TodosContainer.js.

импортиране на AddTodoButton от './AddTodoButton';
...
експортиране по подразбиране клас TodosContainer разширява React.Component {
  render () {
    връщане (
      <Преглед на стил = {styles.container}>
        ...
        
      
    );
  }
}

След като добавим бутона, ще видим нещо подобно:

След добавяне на AddTodoButton

Сега, когато някой натисне този бутон, ще трябва да покажем данните за добавяне на todo. Нека добавим кода за това в компоненти / AddTodo.js.

Основните компоненти, използвани тук, са TextInput, Checkbox и Ionicons с директни подпори. Използваме заглавие и попълваме от държавата. Ще предадем реквизитите todo, onAdd, onCancelDelete и onBlur от компонентите / TodosContainer.js. Те ще ни помогнат при добавянето на нови тодоси или в нулирането на изгледа, ако искате да отмените добавянето на todos.

Сега можем да актуализираме компоненти / TodosContainer.js с необходимите промени за изобразяване на компонента AddTodo:

Компонентът AddTodo се изобразява в компонент на ScrollView. Ние също така предаваме onPress опора към AddTodoButton, за да превключим състоянието и условно да покажем компонента AddTodo въз основа на this.state.addingTodo. Подпорът onAdd, предаден на AddTodo, също създава ново todo, използвайки API за добавяне на api / todos.js.

След като щракнете върху бутона за добавяне, ще видим данните за добавяне на todo като този:

Добавяне на тодо

2. Показване на Тодос

След като приключите с добавянето на todo, той се добавя в Elasticsearch (който конфигурирахме в константи / Config.js). Всички тези данни могат да бъдат прегледани в реално време с помощта на Native компоненти на ReactiveSearch.

Има над 10 местни потребителски интерфейса, които библиотеката предоставя. За нашето приложение todo ще използваме основно компонента ReactiveList, за да покажем състоянието на todos.

Нека добавим компонента ReactiveList и да покажем нашите тодоси. Ще добавим този компонент в компоненти / TodosContainer.js и необходимите методи за работа. Ето как ще се използва ReactiveList:

Все още не сме добавили метода onAllData, но нека разберем малко за реквизита, който сме използвали тук:

  • componentsId - уникален идентификатор за компонента.
  • defaultQuery: заявката, която първоначално се прилага за списъка. Ще използваме match_all, за да покажем всички тодоси в случай по подразбиране.
  • поток: дали да предавате нови актуализации на резултатите или просто да показвате исторически резултати. Задавайки това на true, сега слушаме и актуализациите на Todo на живо. Ще добавим по-късно логиката, свързана с потока.
  • onAllData - функция за обратно извикване, която получава списъка на текущите елементи на todo и стрийминга (нови тодоси и всякакви актуализации) и връща компонент React или JSX за изобразяване. Ето как изглежда синтаксисът:

Можете да прочетете повече за всички тези реквизити подробно на страницата с документи на ReactiveList.

За да видим нещо, ще трябва да върнем JSX или React компонент от обратното обаждане на onAllData. За целта ще използваме FlatList на React Native, който е съставен от текстови компоненти. В следващата стъпка ще добавим нашия персонализиран компонент TodoItem.

Интегриране на ReactiveList с onAllData

3. Добавяне на TodoItem (и)

След това ще създадем отделен компонент TodoItem за показване на всеки todo, който ще съдържа всички необходими маркировки за елемент от todo като CheckBox, Text и икона за изтриване. Това става в компоненти / TodoItem.js:

Този компонент получава todo от своите реквизити заедно с onDelete и onUpdate, които се използват съответно за актуализиране и изтриване на todo елемента. Ние ги използваме на необходимите места, използвайки опората onPress на компонентите, които използваме.

След това можем да импортираме и използваме компонента TodoItem в нашата onAllData в компоненти / TodosContainer.js. Ще предадем todo като опора, заедно с методите на API за актуализиране и унищожаване, които ще бъдат използвани от компонента TodoItem.

След добавяне на TodoItem в TodosContainer

4. Актуализиране на актуализации на данни

Може би сте забелязали, че тодосите се показват добре, освен че не можете да видите актуализирани тодоси, без да опресните приложението. В тази последна стъпка ще приспособим тази липсваща част от пъзела.

В предишния раздел добавихме метод onAllData за компонента ReactiveList. Вторият параметър на onAllData получава поточни актуализации, които ще използваме, за да поддържаме актуализирани винаги. Ето как ще изглежда актуализираният метод на onAllData в компоненти / TodosContainer.js.

Методът mergeTodos присъства в utils / index.js. Ето как работи:

StreamData получава масив от todo обекти, когато те са създадени, изтрити или актуализирани. Ако даден обект е актуализиран, той съдържа _ актуализиран ключ, зададен на true. По същия начин, ако обектът бъде изтрит, той съдържа _deleted ключ, зададен на true. Ако е създаден обект, той не съдържа нито едно от двете. Използвайки тези точки, добавихме функцията mergeTodos.

С това би трябвало да можете да видите промените в тодо елементи в реално време! Ако имате допълнително устройство / емулатор, работещо със същото приложение, и двете ще предават нови актуализации също.

Полезни връзки

  1. Демо на приложението Todos, expo link, стартов проект и окончателен изходен код
  2. ReactiveSearch GitHub repo ️
  3. Документи на ReactiveSearch

Надявам се, че ви е харесала тази история. Ако имате някакви мисли или предложения, моля, уведомете ме и се забавлявайте!

Специални благодарности на Dhruvdutt Jadhav, че ми помогна в тази история и приложението Todos.