Opbygning af en Fitness-app med React Native

Jeg er en ivrig bruger af apps som Freeletics og Headspace, der er målrettet mod krop og sind. Disse apps har bidraget meget til min personlige vækst, og nu på en sabbatsdag, var jeg på udkig efter at se, om jeg kunne bidrage med noget tilbage.

Jeg blev interesseret i fitness, mens jeg rejste til Silicon Valley for at arbejde. Da jeg var vågen tidligt som et resultat af jetlag, gik jeg til det eneste sted, der var åbent i Palo Alto kl. 17.00 - Equinox. Der var jeg sammen med en utrolig gruppe mennesker, inklusive Tim Cook, og forberedte sig på den næste dag på tvivlsomt den bedst mulige måde. Det inspirerede mig til at følge de samme morgenrutiner, som de gjorde, uanset hvor tidligt. Tilbage i Zürich begyndte jeg at deltage i mange gruppekonditionskurser. Jeg indså hurtigt, at mens folk havde en god træning sammen, var sansefællesskabet ret lavt på trods af intensiteten i den delte oplevelse. Kan dette forbedres med teknologi? Jeg samarbejdede med grundlæggerne af et fitnessprogram, der hedder atletisk strøm for at bygge et eksperiment. Vores app blev netop godkendt af app-butikken, og i denne historie vil jeg gerne dele min oplevelse med at bygge den.

Skærmbilleder af appen til atletisk strøm

At se på, hvor lidt du har brug for at oprette en mobilapp i dag, er ophøjet. Barrierer for indrejse har aldrig været så lav. Med sin "Lær én gang, skriv hvor som helst" tilgang har React Native gjort det muligt for front-community at oprette apps med en professionel finish ved hjælp af praktisk talt kun JavaScript og CSS færdigheder. Det reducerede også dramatisk udviklingsgabet mellem iOS og Android. Nyheder i programmeringssprog som ES6, Typescript og Flow har gjort det muligt for udviklere at skrive skalerbare JS-kodebaser med lave vedligeholdelsesomkostninger. Hertil kommer, at backend som serviceprodukter som Firebase leverer alle de nødvendige muligheder for en mobil backend med en bootstrap-omkostning på nul dollars: database, opbevaring, push-meddelelser, middleware og analyse. Innovationer inden for disse produkter er hurtige og betydelige: At skrive en React-app i dag er meget enklere, end det plejede at være, da jeg først kom i gang. Kirsebær på toppen af ​​kagen? Samfundet og værktøjer omkring disse teknologier er fantastiske. Svært at forestille sig et bedre tidspunkt og sted at skrive software.

Enkel kilde til sandhed

Når det drejer sig om at gøre din appudvikling omkostningseffektiv, er den mest oversettede teknologi sandsynligvis statisk indtastning. Hvis du ikke har nogen erfaring med det, kan det være hurtigere at prototype noget uden det. Så snart du faktisk begynder at bygge noget, har du absolut brug for dem: Jo mere pres du lægger på typen checker, jo bedre.

Til atletisk flow designede jeg datamodellen for appen ved hjælp af Firebase Bolt Language. Definitionsfilen bruges til at generere databasesikkerhedsregler og validering. Det bruges også til at generere TypeScript-koden, der bruges både til React Native-siden og middleware.

En enkelt definition-fil bruges til at holde alle dele af systemet konsistente.

At holde en enkelt sandhedskilde forhindrer, at dele af appen udvikler sig separat: Firebase kan ikke have en typedefinition, der er forskellig fra React Native og vice versa. Din datamodel kan refaktorificeres hurtigt og med tillid: Typecheckeren giver dig besked, hvis du har begået en fejl.

Der er to typer checkers til rådighed for JavaScript: TypeScript og Flow. Jeg brugte TypeScript simpelthen fordi jeg allerede havde erfaring med det. Hvis du er ny i begge typer systemer, kan jeg anbefale Flow, da det fungerer ud af boksen med create-react-native-app. Jeg har dog ikke meget erfaring med det endnu, så pas på dette råd.

Kedelpladen

Brug create-react-native-app til at startestrap dit projekt. Det giver dig mulighed for at køre en "Hello World" på din iOS / Android-enhed på få minutter. Det genererede projekt bruger ekspo. Dette betyder, at du ikke behøver at installere XCode eller Android Studio for at udvikle din app. Du kan teste den på en iOS-enhed uden at købe en udviklerkonto fra Apple. Udviklingsappen kan deles meget let til betatestere via et link eller QR-kode. Når du går videre i udviklingen af ​​din app, kan du muligvis "løsne" projektet for at få din egen indbyggede opsætning. Dette er nyttigt, hvis du f.eks. Skal bruge brugerdefineret indbygget kode.

Livscyklus for et Expo-projekt

Expo dækker imidlertid en masse sager om mobilbrug, og det er muligt at offentliggøre en fuldgyldig app i Apple App Store og Google Play Store uden at "løsne".

Sidst, men ikke mindst, giver expo dig mulighed for at opdatere din app øjeblikkeligt uden nogen app store-opdatering på samme måde som opdatering af en HTML-side. Hvis dit projekt er "løsrevet", kan du bruge Microsoft CodePush for at opnå den samme effekt. Sidste uge underrettede en ven mig om en skrivefejl i appen til atletisk flow. Jeg skubbede korrektionen til master og mit kontinuerlige integrationssystem skubbede gennemsigtigt opdateringen til alle brugere. Disse typer af sømløse opdateringer har altid eksisteret på Internettet, og de er nu mulige i mobile apps. Generelt synes jeg, at disse nye fremgangsmåder inden for mobiludvikling er ganske forstyrrende.

Uden for kassen giver create-react-native-app kedelpladen til at skrive enheds- og komponenttest. Til ende-til-ende-test er der endnu ingen de facto standard tilgængelig. Appium har en vis popularitet, og et nyt projekt ved navn Detox synes at være meget lovende (iOS kun i øjeblikket).

Social først

Mange apps er bygget op omkring et socialt lag. Sociale lag giver brugeren utrolige spændende oplevelser. Integrationer med eksisterende platforme som Facebook eller Instagram er dog meget begrænsede. Bortset fra login og delt funktionalitet, er der ikke meget, der sker. Dette giver udviklere ikke meget andet valg end at opfinde hjulet på mange tilfælde af social brug af deres app. Brug-tilfælde inkluderer tilhængere, feeds, likes og kommentarer. Disse er ikke trivielle at gennemføre. For eksempel kan noget så simpelt som at rulle gennem en liste over billeder faktisk være kompliceret at implementere. Dertil kommer, at dine brugere har ekstremt høje forventninger. Facebook, Instagram og andre sociale apps sætter en ekstremt stærk benchmark, som du usandsynligt vil bestå. Der ser ud til at være et stærkt behov for en "Stripe af sociale medier". Platformer som Facebook og Instagram tilbyder kun lidt for udviklere.

En ny daggry

Med sin "lære en gang skriv hvor som helst" -tilgang fra React Native, kan webudviklingsfærdigheder udnyttes til at opbygge en virkelig oprindelig app fra kedelplade til app-udgivelse. Og det kan gøres uden at røre ved XCode eller Android Studio. Modellen til at opdatere din app er nu lige så gennemsigtig som opdateringer på nettet. Ved at bruge en type checker kan du skrive en meget vedligeholdelig codebase og dramatisk reducere dine udviklingsomkostninger. Endelig giver backend som Service-produkter som Firebase alle de nødvendige muligheder for mobilinfrastruktur med en bootstrap-omkostning på nul dollars. Det er en ny dag, det er en ny daggry for mobiludvikling.

Jeg førte en journal om min rejse gennem React Native udvikling via flere historier. Nogle af de komponenter, jeg har bygget, er åbne, andre pakker jeg i øjeblikket som nøglefærdige løsninger til mobile projekter.