Sådan bygges en todo-app i realtid med React Native

Tak til Bela Bordeaux

En todo-app berører alle de vigtige dele af opbygningen af ​​en datadrevet app, herunder oprette, læse, opdatere og slette (CRUD) -operationer. I denne historie bygger jeg en todo-app med et af de mest populære mobilrammer, React Native.

Jeg bruger ReactiveSearch Native, et open source-bibliotek, der leverer React Native UI-komponenter og forenkler bygningen af ​​datadrevne apps.

Her er hvad jeg skal bygge i denne historie:

Todo-app

Tjek appen på snack eller på expo.

Hvad er React Native?

Sådan siger dokumenterne:

React Native giver dig mulighed for at opbygge mobile apps ved hjælp af kun JavaScript. Den bruger det samme design som React, så du kan komponere et rigtigt mobil UI fra deklarative komponenter.

Selv hvis du lige er kommet i gang med React eller React Native, skal du være i stand til at følge med på denne historie og opbygge din helt egen todo-app i realtid.

Hvorfor bruge ReactiveSearch? ⚛

ReactiveSearch er et open source React og React Native UI-komponentbibliotek til Elasticsearch, som jeg har medforfatter til nogle fantastiske mennesker. Det leverer en række React Native-komponenter, der kan oprette forbindelse til enhver Elasticsearch-klynge.

Jeg har skrevet en anden historie om Opbygning af en GitHub Repo Explorer med React og Elasticsearch, som du måske tjekker for en kort oversigt over Elasticsearch. Selv hvis du ikke har haft nogen erfaring med Elasticsearch, skal du kunne følge denne historie fint.

Opsætning af ting ⚒

Vi vil bruge React Native-versionen af ​​biblioteket her.

Inden vi begynder at bygge UI, bliver vi nødt til at oprette en datastore i Elasticsearch. ReactiveSearch fungerer med ethvert Elasticsearch-indeks, og du kan nemt bruge det med dit eget datasæt.

Se mit app-datasæt her. Du kan også klone dette til din egen app

For kortfattethed kan du bruge mit datasæt direkte eller oprette et selv ved hjælp af appbase.io, som giver dig mulighed for at oprette et hostet Elasticsearch-indeks (aka app).

Alle todos er struktureret i følgende format:

{
  "title": "react-native",
  "afsluttet": sandt,
  "createAt": 1518449005768
}

Startprojektet

Inden vi kommer i gang, vil jeg anbefale at installere garn. På Linux kan det gøres blot ved at tilføje garnlageret og køre installationskommandoen via din pakkehåndtering. På Mac skal du først installere Homebrew for at gøre tingene enklere. Her er garnet installationsdokumenter for mere detaljeret. Den næste ting, du muligvis installerer, er vagtmand. Det er en filovervågningstjeneste, som vil hjælpe den reaktive native packager med at køre problemfrit.

Jeg har konfigureret startprojektet med create-react-native-app i en GitHub-gren her. Du kan downloade en zip eller klone basegrenen ved at køre følgende kommando:

git klon -b base https://github.com/appbaseio-apps/todos-native
  • Installer derefter afhængighederne og start pakkeren:
cd todos-native && garn && garn start
  • Når pakkeren er startet, kan du muligvis køre appen på din telefon ved hjælp af Expo-appen eller ved hjælp af en Android- eller IOS-emulator:
Basisopsætning med alle faner. Klon herfra.

Dykning i kode

Når du har klonet koden fra basegrenen, skal du se en katalogstruktur som nedenfor:

navigation
├── RootComponent.js // Rootkomponent til vores app
├── MainTabNavigator.js // Tab-navigationskomponent
skærme
├── TodosScreen.js // gengiver TodosContainer
komponenter
├── Header.js // Header-komponent
├── AddTodo.js // Tilføj todo-input
├── AddTodoButton.js // Tilføj todo-flydende knap
├── TodoItem.js // Todo-varen
├── TodosContainer.js // Todos hovedcontainer
api
├── todos.js // API'er til udførelse af skrivninger
konstanter // Alle typer konstanter, der bruges i app
typer // Todo-type, der skal bruges sammen med prop-typer
utils // Streaminglogik går her

Lad os fordele, hvad basisopsætningen kommer med:

1. Navigation

  • Alle de nødvendige konfigurationer til at oprette forbindelse til Elasticsearch er på constants / Config.js.
  • Vi bruger TabNavigator fra reaktion-navigation til at vise skærmen Alle, Aktiv og Afsluttet todos. Dette er gengivet af navigationen / RootComponent.js. Du vil bemærke, at RootComponent indpakker alt inde i ReactiveBase-komponenten fra ReactiveSearch. Denne komponent leverer alle de nødvendige data til de børn ReactiveSearch-komponenter. Du kan forbinde dit eget Elasticsearch-indeks her ved blot at opdatere konfigurationer i konstanter / Config.js.

Navigationslogikken findes i navigation / MainNavigator.js. Lad os undersøge, hvordan det fungerer. Her er dokumenterne til fanenavigation, hvis du vil henvise til noget.

  • TabNavigator-funktionen accepterer to argumenter, hvor den første er rutekonfigurationer og den anden TabNavigator-konfigurationer. I ovenstående uddrag passerer vi konfigurationer til at vise en fane-navigationslinje i bunden og indstille forskellige ikoner for hver fane.

2. TodosScreen og TodosContainer

TodosScreen-komponenten i skærme / TodosScreen.js indpakker vores vigtigste TodosContainer-komponent i komponenter / TodosContainer.js, hvor vi tilføjer forskellige komponenter til appen. TodosContainer viser filtrerede data, baseret på, om vi er under fanen Alle, Aktiv eller Afsluttet.

3. API'er til oprettelse, opdatering og sletning af todos

API'erne til CUD-operationer på Elasticsearch findes i api / todos.js. Det indeholder tre enkle metoder, der tilføjes, opdateres og ødelægges, hvilket arbejde med ethvert Elasticsearch-indeks som specificeret i konstanter / Config.js. Et vigtigt punkt at huske er, at hvert todo-element, vi opretter, vil have et unikt _id-felt. Vi kan bruge dette _id-felt til opdatering eller sletning af en eksisterende todo.

Til vores app har vi blot brug for tre metoder til at tilføje, oprette eller slette todos. Du kan dog finde en detaljeret forklaring om API-metoderne i dokumenterne.

Bygning af komponenterne og brugergrænsefladen

Lad os begynde at tilføje nogle komponenter for at fuldføre appens funktionalitet.

1. Tilføjelse af Todos

Vi bruger Fab fra native-base til at gengive en flydende knap til tilføjelse af todos.

Nu kan du bruge denne komponent i komponenter / TodosContainer.js.

import AddTodoButton fra './AddTodoButton';
...
eksport standardklasse TodosContainer udvider React.Component {
  render () {
    Vend tilbage (
      
        ...
        
      
    );
  }
}

Når vi har tilføjet knappen, ser vi noget lignende:

Efter tilføjelse af AddTodoButton

Når nogen klikker på denne knap, bliver vi nødt til at vise input til tilføjelse af en todo. Lader tilføje koden til dette i komponenter / AddTodo.js.

De vigtigste komponenter, der bruges her, er TextInput, afkrydsningsfelt og Ionicons med ligetil props. Vi bruger titel og er afsluttet fra staten. Vi videresender rekvisitterne todo, on Tilføj, onCancelDelete og onBlur fra komponenterne / TodosContainer.js. Disse vil hjælpe os med at tilføje nye todos eller nulstille visningen, hvis du ønsker at annullere tilføjelse af todos.

Nu kan vi opdatere komponenter / TodosContainer.js med de nødvendige ændringer til gengivelse af AddTodo-komponent:

AddTodo-komponenten gengives i en ScrollView-komponent. Vi videresender også en onPress-prop til AddTodoButton for at skifte tilstand og betinget vise AddTodo-komponenten baseret på this.state.addingTodo. OnAdd-prop, der sendes til AddTodo, opretter også en ny todo ved hjælp af tilføjelses-API på api / todos.js.

Når du har klikket på knappen Tilføj, ser vi input til at tilføje en todo som denne:

Tilføjelse af en todo

2. Viser Todos

Når du er færdig med at tilføje en todo, tilføjes den i Elasticsearch (som vi konfigurerede i konstanter / Config.js). Alle disse data kan ses i realtid ved hjælp af ReactiveSearch Native-komponenter.

Der er over 10 native UI-komponenter, som biblioteket leverer. Til vores todo-app vil vi primært bruge ReactiveList-komponenten til at vise status for todos.

Lad os tilføje ReactiveList-komponenten og få vist vores todos. Vi tilføjer denne komponent i komponenter / TodosContainer.js og de nødvendige metoder til at den fungerer. Sådan bruges ReactiveList:

Vi har endnu ikke tilføjet onAllData-metoden, men lad os forstå lidt om de rekvisitter, vi har brugt her:

  • componentId - unik identifikator for komponenten.
  • defaultQuery: den forespørgsel, der oprindeligt skal anvendes på listen. Vi bruger match_all til at vise alle todos i standard sag.
  • stream: om du vil streame nye resultatopdateringer eller bare vise historiske resultater. Ved at sætte dette til sandt, lytter vi nu også til de live Todo-opdateringer. Vi tilføjer den streamingrelaterede logik senere.
  • onAllData - en tilbagekaldsfunktion, der modtager listen over aktuelle todo-poster og streaming (nye todos og eventuelle opdateringer) og returnerer en React-komponent eller JSX, der skal gengives. Sådan ser syntaks ud:

Du kan læse mere om alle disse rekvisitter i detaljer på ReactiveLists dokumentside.

For at se noget, bliver vi nødt til at returnere en JSX- eller React-komponent fra onAllData callback. Til dette vil vi bruge React Native's FlatList, der er sammensat af tekstkomponenter. I det næste trin tilføjer vi vores brugerdefinerede TodoItem-komponent.

Integrering af ReactiveList med onAllData

3. Tilføjelse af TodoItem (s)

Dernæst opretter vi en separat komponent TodoItem til at vise hver todo, der vil indeholde alle nødvendige markeringer for et todo-element som CheckBox, tekst og et sletteikon. Dette gælder komponenter / TodoItem.js:

Denne komponent henter todo'en fra sine rekvisitter sammen med onDelete og onUpdate, som bruges til at opdatere og slette henholdsvis todo-elementet. Vi bruger disse på de nødvendige steder ved hjælp af onPress-rekvisita for de komponenter, vi bruger.

Dernæst kan vi importere og bruge TodoItem-komponenten i vores onAllData i komponenter / TodosContainer.js. Vi videregiver todo'en som en prop sammen med API-metoderne til opdatering og destruktion, som bruges af TodoItem-komponenten.

Efter at have tilføjet TodoItem i TodosContainer

4. Streaming af dataopdateringer

Du har måske bemærket, at todoserne vises fint, medmindre du ikke kan se opdaterede todos uden at opdatere appen. I dette sidste trin vil vi passe til den manglende del af puslespillet.

I det foregående afsnit tilføjede vi en onAllData-metode til ReactiveList-komponenten. Den anden parameter på onAllData modtager streamingopdateringer, som vi vil bruge til altid at holde todoserne opdaterede. Sådan ser den opdaterede onAllData-metode ud i komponenter / TodosContainer.js.

MetgeTodos-metoden findes i utils / index.js. Sådan fungerer det:

StreamData modtager en række todo-objekter, når de er oprettet, slettet eller opdateret. Hvis et objekt opdateres, indeholder det en _opdateret nøgle indstillet til sand. På samme måde, hvis et objekt slettes, indeholder det en _deleteret nøgle indstillet til sand. Hvis der oprettes et objekt, indeholder det ingen af ​​de to. Ved hjælp af disse punkter har vi tilføjet funktionen mergeTodos.

Med dette skal du være i stand til at se ændringerne til at gøre ting i realtid! Hvis du har en ekstra enhed / emulator, der kører den samme app, streamer begge nye opdateringer også.

Nyttige links

  1. Todos app-demo, expo-link, startprojekt og slutkildekode
  2. ReactiveSearch GitHub repo ️
  3. ReaktiveSearch-dokumenter

Håber du nød denne historie. Hvis du har nogle tanker eller forslag, så lad mig det vide og have det sjovt!

Særlig tak til Dhruvdutt Jadhav for at hjælpe mig med denne historie og Todos-appen.