Jak vytvořit todo aplikaci v reálném čase pomocí React Native

Díky Bela Bordeaux

Aplikace todo se dotýká všech důležitých částí vytváření jakékoli aplikace založené na datech, včetně operací CRUD (Create, Read, Update and Delete). V tomto příběhu budu vytvářet todo aplikaci s jedním z nejpopulárnějších mobilních rámců, React Native.

Budu používat ReactiveSearch Native, knihovnu s otevřeným zdrojovým kódem, která poskytuje komponenty React Native UI a zjednodušuje vytváření aplikací založených na datech.

V tomto příběhu budu stavět následující:

Todo App

Podívejte se na aplikaci na svačinu nebo na expo.

Co je React Native?

Zde je uvedeno, co dokumenty říkají:

React Native vám umožňuje vytvářet mobilní aplikace pouze pomocí JavaScriptu. Používá stejný design jako React a umožňuje vám sestavit bohaté mobilní uživatelské rozhraní z deklarativních součástí.

I když jste právě začínají s React nebo React Native, měli byste být schopni sledovat spolu s tímto příběhem a vytvořit si vlastní aplikaci v reálném čase todo.

Proč používat ReactiveSearch? ⚛

ReactiveSearch je knihovna open-source React and React Native UI komponent pro Elasticsearch, kterou jsem spoluautorem s několika skvělými lidmi. Poskytuje různé komponenty React Native, které se mohou připojit k libovolnému klastru Elasticsearch.

Napsal jsem další příběh o budování průzkumníka GitHub Repo s programem React and Elasticsearch, který si můžete prohlédnout a získat stručný přehled o programu Elasticsearch. I když jste s Elasticsearch neměli žádné zkušenosti, měli byste být schopni tento příběh sledovat dobře.

Nastavení věcí ⚒

Budeme používat verzi React Native knihovny zde.

Než začneme s budováním uživatelského rozhraní, musíme v Elasticsearch vytvořit datové úložiště. ReactiveSearch pracuje s jakýmkoli indexem Elasticsearch a můžete jej snadno použít s vlastním datovým souborem.

Podívejte se na můj datový soubor aplikace zde. Můžete to také naklonovat do své vlastní aplikace

Pro stručnost, můžete použít můj dataset přímo nebo si vytvořit sami pro sebe pomocí appbase.io, které vám umožní vytvořit hostovaný index Elasticsearch (aka aplikace).

Všechny úkoly jsou strukturovány v následujícím formátu:

{
  "title": "reag-native",
  "dokončeno": pravda,
  "createdAt": 1518449005768
}

Startovací projekt

Než začneme, doporučuji instalaci příze. V systému Linux to lze provést jednoduše přidáním úložiště příze a spuštěním příkazu install prostřednictvím správce balíků. V systému Mac byste měli nejprve nainstalovat Homebrew, aby se věci zjednodušily. Zde jsou další dokumenty pro instalaci příze. Další věc, kterou můžete nainstalovat, je hlídač. Jedná se o službu sledování souborů, která pomůže hladce běžícímu balíku reaktivních nativních uživatelů.

Zde jsem nastavil startovací projekt pomocí aplikace create-rea-native-native do pobočky GitHub. Můžete si stáhnout zip nebo klonovat základní větev spuštěním následujícího příkazu:

git clone -b base https://github.com/appbaseio-apps/todos-native
  • Dále nainstalujte závislosti a spusťte balíček:
cd todos-native && příze && příze start
  • Po spuštění baliče můžete aplikaci spustit v telefonu pomocí aplikace Expo nebo pomocí emulátoru Android nebo IOS:
Základní nastavení se všemi záložkami. Klon odtud.

Potápění do kódu

Po zaklonování kódu ze základní větve byste měli vidět strukturu adresářů, jak je uvedeno níže:

navigace
├── RootComponent.js // Kořenová komponenta pro naši aplikaci
├── Komponenta navigace MainTabNavigator.js // Tab
obrazovky
├── TodosScreen.js // Vykreslí TodosContainer
komponenty
├── Header.js // Header component
├── AddTodo.js // Přidat todo vstup
├── AddTodoButton.js // Přidat todo plovoucí tlačítko
├── TodoItem.js // Todo položka
├── TodosContainer.js // Hlavní kontejner Todos
api
├── todos.js // API pro provádění zápisů
constants // Všechny typy konstant používaných v aplikaci
typy // Typ Todo, který se má použít s podpůrnými typy
utils // Zde jde o logiku streamování

Podívejme se, co základní nastavení přichází s:

1. Navigace

  • Všechny potřebné konfigurace pro připojení k Elasticsearch jsou na konstantách / Config.js.
  • Používáme TabNavigator z reaktivní navigace pro zobrazení obrazovky všech, aktivních a dokončených úkolů. Toto je vykresleno navigací / RootComponent.js. Všimnete si, že RootComponent zařadí vše uvnitř komponenty ReactiveBase z ReactiveSearch. Tato komponenta poskytuje veškerá nezbytná data dětským komponentám ReactiveSearch. Zde můžete připojit svůj vlastní index Elasticsearch pouhým aktualizováním konfigurací v konstantách / Config.js.

Logika navigace je k dispozici v adresáři Navigation / MainNavigator.js. Pojďme se podívat, jak to funguje. Zde jsou dokumenty pro navigaci na záložkách, pokud si přejete něco odkázat.

  • Funkce TabNavigator přijímá dva argumenty, z nichž první je konfigurace trasy a druhý konfigurace TabNavigator. Ve výše uvedeném úryvku procházíme konfiguracemi pro zobrazení navigačního pruhu karty dole a nastavení různých ikon pro každou kartu.

2. TodosScreen a TodosContainer

Komponenta TodosScreen v obrazovkách / TodosScreen.js obaluje naši hlavní komponentu TodosContainer do komponent / TodosContainer.js, do které přidáme různé komponenty pro aplikaci. TodosContainer zobrazí filtrovaná data podle toho, zda jsme na kartě Vše, Aktivní nebo Dokončeno.

3. API pro vytváření, aktualizaci a mazání úkolů

API pro operace CUD na Elasticsearch jsou k dispozici v api / todos.js. Obsahuje tři jednoduché metody přidávání, aktualizace a ničení, které pracují s jakýmkoli indexem Elasticsearch, jak je uvedeno v constants / Config.js. Důležité je mít na paměti, že každá položka, kterou vytváříme, bude mít jedinečné pole _id. Toto pole _id můžeme použít k aktualizaci nebo odstranění existujícího úkolu.

Pro naši aplikaci potřebujeme pouze tři způsoby přidávání, vytváření nebo mazání úkolů. Podrobné vysvětlení metod API naleznete v dokumentech.

Vytváření součástí a uživatelského rozhraní

Umožňuje začít přidávat některé součásti k dokončení funkčnosti aplikace.

1. Přidání Todos

Použijeme Fab z nativní základny k vykreslení plovoucího tlačítka pro přidávání úkolů.

Nyní můžete tuto komponentu použít v komponentách / TodosContainer.js.

import AddTodoButton z './AddTodoButton';
...
exportovat výchozí třídu TodosContainer rozšiřuje React.Component {
  poskytnout() {
    vrátit se (
      
        ...
        
      
    );
  }
}

Jakmile přidáme tlačítko, uvidíme něco podobného:

Po přidání AddTodoButton

Když někdo klikne na toto tlačítko, budeme muset ukázat vstup pro přidání úkolu. Umožňuje přidat tento kód do komponent / AddTodo.js.

Hlavními komponentami, které se zde používají, jsou TextInput, Checkbox a Ionicons s přímými rekvizitami. Používáme název a dokončeno ze státu. Z komponent / TodosContainer.js budeme předávat rekvizity todo, onAdd, onCancelDelete a onBlur. To nám pomůže při přidávání nových úkolů nebo resetování zobrazení, pokud si přejete zrušit přidávání úkolů.

Nyní můžeme aktualizovat komponenty / TodosContainer.js s potřebnými změnami pro vykreslení komponenty AddTodo:

Komponenta AddTodo se vykreslí uvnitř komponenty ScrollView. Také předáme podpěru onPress do AddTodoButton, abychom přepnuli stav a podmíněně zobrazili komponentu AddTodo na základě this.state.addingTodo. Propagace onAdd předaná AddTodo také vytvoří nové todo pomocí add API na api / todos.js.

Po kliknutí na tlačítko Přidat se zobrazí vstup pro přidání úkolu, jako je tento:

Přidání úkolu

2. Zobrazení Todos

Po dokončení přidávání úkolů je přidáno do Elasticsearch (které jsme nakonfigurovali v constants / Config.js). Všechna tato data lze zobrazit v reálném čase pomocí komponent ReactiveSearch Native.

Knihovna obsahuje více než 10 nativních komponent uživatelského rozhraní. Pro naši aplikaci todo použijeme především k zobrazení stavu úkolů komponentu ReactiveList.

Umožňuje přidat komponentu ReactiveList a zobrazit naše úkoly. Tuto komponentu přidáme do komponent / TodosContainer.js a nezbytné metody, aby fungovala. Takto se použije ReactiveList:

Ještě jsme nepřidali metodu onAllData, ale pojďme pochopit něco o rekvizitách, které jsme zde použili:

  • componentId - jedinečný identifikátor komponenty.
  • defaultQuery: dotaz, který má být použit na začátku seznamu. Použijeme match_all k zobrazení všech úkolů ve výchozím případě.
  • stream: zda streamovat nové aktualizace výsledků nebo jen zobrazovat historické výsledky. Nastavením tohoto na true nyní také posloucháme živé aktualizace Todo. Logiku související se streamováním přidáme později.
  • onAllData - funkce zpětného volání, která přijímá seznam aktuálních položek todo a streamování (nová todos a jakékoli aktualizace) a vrací komponentu React nebo JSX k vykreslení. Syntax vypadá takto:

O všech těchto rekvizitách se můžete dočíst podrobněji na stránce dokumentů ReactiveListu.

Abychom něco viděli, musíme vrátit zpět JSX nebo React komponenty z zpětného volání onAllData. K tomu použijeme FlatList React Native, který je složen z textových komponent. V dalším kroku přidáme naši vlastní komponentu TodoItem.

Integrace ReactiveListu s onAllData

3. Přidání TodoItem (s)

Dále vytvoříme samostatnou komponentu TodoItem pro zobrazení každého úkolu, který bude obsahovat všechny potřebné značky pro položku todo, jako je zaškrtávací políčko, text a ikona odstranění. To se týká komponent / TodoItem.js:

Tato součást získá todo ze svých rekvizit spolu s onDelete a onUpdate, které se používají k aktualizaci a mazání todo položky. Používáme je na nezbytných místech pomocí podpěry onPress komponent, které používáme.

Dále můžeme importovat a používat komponentu TodoItem v našem onAllData v komponentách / TodosContainer.js. Todo předáme jako podpěru spolu s metodami API pro aktualizaci a ničení, které budou použity komponentou TodoItem.

Po přidání TodoItem v TodosContainer

4. Aktualizace datových proudů

Možná jste si všimli, že se úkoly zobrazují dobře, s výjimkou případů, kdy nemůžete zobrazit aktualizovaná úkoly bez aktualizace aplikace. V tomto posledním kroku se hodíme do chybějící části skládačky.

V předchozí části jsme přidali metodu onAllData pro komponentu ReactiveList. Druhý parametr onAllData přijímá aktualizace datových proudů, které budeme používat k udržování aktualizovaných úkolů. Takto bude vypadat aktualizovaná metoda onAllData ve složkách / TodosContainer.js.

Metoda mergeTodos je přítomna v utils / index.js. Funguje to takto:

StreamData přijímá řadu objektů todo, když jsou vytvořeny, odstraněny nebo aktualizovány. Pokud je objekt aktualizován, obsahuje _updated klíč nastavený na true. Podobně, pokud je objekt odstraněn, obsahuje _deleted klíč nastavený na true. Pokud je objekt vytvořen, neobsahuje ani jeden z nich. Pomocí těchto bodů jsme přidali funkci mergeTodos.

Díky tomu byste měli mít možnost vidět změny úkolů v reálném čase! Pokud máte stejnou aplikaci spuštěné další zařízení / emulátor, obě budou také streamovat nové aktualizace.

Užitečné odkazy

  1. Ukázka aplikace Todos, odkaz expo, projekt startéru a konečný zdrojový kód
  2. ReactiveSearch GitHub repo ️
  3. Dokumenty ReactiveSearch

Doufám, že se vám tento příběh líbil. Pokud máte nějaké nápady nebo návrhy, dejte mi vědět a bavte se!

Zvláštní poděkování Dhruvduttovi Jadhavovi za pomoc s tímto příběhem a aplikací Todos.