Hvis du er her, undrer du dig måske“Hvordan kan React Native og Expo hjælpe mig med at opbygge min næste mobilapplikation hurtigere?“.
Som praktikanter hos Imaginær sky, blev vi foreslået at udvikle en applikation, der på en eller anden måde var nyttig i den situation, som verden i øjeblikket står over for, Coronavirus-pandemien. På grund af denne situation er vi nødt til at vedtage nye procedurer om, hvordan vi forvalter fællesarealer i virksomheden. Da vi nu har begrænsninger i, hvor mange mennesker der kan være i samme rum i henhold til dets størrelse, er vi nødt til at reducere spredningen af virussen ved at gruppere mennesker, der deler det samme arbejdsområde.
Det er også vores hensigt for denne applikation at øge bevidstheden ved at vise nogle advarselsmeddelelser og spore tilgængeligheden af et rum uden at besøge det.
Som et resultat af disse begrænsninger var vores mål at løse dette problem ved at udvikle en app ved hjælp af disse React Native og Expo. Vi var ikke bekendt med nogen af disse, som du måske ikke er, så rolig, med lidt læsning og øvelse forstår du, hvordan de fungerer, og hvorfor de er et godt valg, når det kommer til udvikling af mobilapps. Derfor synes vi, det er vigtigt at dele vores rejse og nogle erfaringer fra vores erfaring.
Dette indlæg kan hjælpe dig med at optrappe dit næste projekt, og vi håber, at dette kan oplyse dine næste trin, og hvilke fordele det medfører. I dette blogindlæg vil vi tale om disse to rammer, hvordan de hænger sammen, og hvorfor dette kan spare dig lidt tid, selvom du ikke er bekendt med mobiludvikling. Men lad os starte med det grundlæggende i disse teknologier.
React Native er en open source-ramme til opbygning af native apps med React oprettet af Facebook og udgivet i 2015. Det giver dig mulighed for at bruge native UI-kontroller og have fuld adgang til den oprindelige platform, der leveres fra komforten i et JavaScript-bibliotek. React Native gør det nemt at udvikle samtidig til både Android og iOS, da koden kan deles på tværs af platforme.
Plus, denne ramme kombinerer brugeroplevelsen af de oprindelige platforme med udviklerens viden om at bygge med React på nettet, hvilket understøtter den ønskede tilgang til „Lær én gang, skriv overalt“.
Expo er en ramme og en platform til universelle React-applikationer. Det leverer et sæt værktøjer og tjenester, der forenkler udvikling og test af React Native apps, hvilket giver mulighed for nemt at køre koden på din telefon. Udover det giver Expo en mere robust og udviklervenlig arbejdsgang.
Opsætning af udviklingsmiljøet kan være anderledes afhængigt af den erfaring, du har med mobiludvikling, men det er ikke et problem.
Hvis du er ny inden for udvikling af mobilapps, den nemmeste måde at komme i gang er med Expo CLI.
Hvis du allerede er bekendt med udvikling af mobilapps, kan det være en god idé at bruge React Native CLI.
Vi vil dække opsætningen for nye mobiludviklere, for selvom du er bekendt med mobiludvikling, er Expo en rigtig god ramme at bruge og let at lære.
Der er to værktøjer, som du skal bruge til at udvikle apps med Expo: Lokalt udviklingsværktøj og en mobilklient til at åbne din app.
Som et lokalt udviklingsværktøj bruger vi Expo CLI. Ud over kommandolinjegrænsefladen (CLI) har den også en webbaseret grafisk brugergrænseflade (GUI), der dukker op i din webbrowser, når du starter dit projekt.
Du får brug for Node.js for at installere Expo CLI. Efter installation af Node.js kan du nu installere Expo CLI ved at køre følgende kommando: npm installation -g expo-cli
Når du har fulgt alle de trin, som vi allerede har dækket på denne blog, er alt hvad du skal gøre at køre følgende kommando med et projekt kaldet for eksempel „MyProject“: Expo Init MyProject
Du må undre dig over, hvorfor du skal bruge React Native. Vi vil tale om nogle fordele, når vi bruger denne ramme.
Ifølge Google Trends, som vi kan se fra diagrammet ovenfor, er undersøgelser relateret til React Native steget, hvilket viser den voksende interesse og efterspørgsel efter denne teknologi.
Desuden var React Native ifølge Stack Overflow 2019-undersøgelsen den 6. mest populære ramme blandt udviklere. Antallet af spørgsmål om Stack Overflow relateret til React Native er også steget siden udgivelsen.
Ifølge vores erfaring gør Expo tingene virkelig enkle, når vi taler om at køre og debugge. Du kan køre din app til test uden nogen indsats eller kontrollere nogle fejl, og endda debugge din app. Dette er helt sikkert en af grundene til, at Expo's popularitet er steget, som vi kan se fra nedenstående diagram.
Når opsætningen er afsluttet, hvis du vil køre din app for at se, hvordan dine fremskridt går, er alt hvad du skal gøre at køre følgende kommando: npm start. Derefter vises et vindue i din webbrowser. Du kan teste det på simulatorer, både til Android og iOS, men du kan også køre på din egen enhed, du skal bare installere Expo-klientappen og scanne den QR-kode, du ser i terminalen eller i Expo Dev Tools. Bemærk, at Expo ikke kun er en ramme, men også en platform, hvor du kan finde en masse nyttig dokumentation, tutorials, eksempler fra samfundet og endda blive en bidragyder på GitHub.
Du spekulerer måske på, om det er muligt at fortsætte dit projekt uden at bruge Expo på det. Ja, det er det. Hvis du har en dårlig oplevelse med at udvikle din app ved hjælp af Explo CLI, kan du nemt forlade den og flytte til et React Native-bare projekt.
Hvad er dette med React Native bare projektet? Simpelthen vil dit projekt omfatte mappere/mapper relateret til operativsystemerne (iOS og Android), hvilket giver dig mulighed for at oprette dine egne native builds. Så hvis du for eksempel ved, at du i sidste ende bliver nødt til at inkludere din egen oprindelige kode i projektet, kan du skubbe expo ud, der kører kommandoen npm run skub ud på konsollen.
Når vi tænker på processen med at opbygge en mobilapp, kan vi tænke på det som en kompleks proces. Af denne grund forsøger Expo at forenkle og fremskynde hele processen. I officiel dokumentation, forklarer de detaljeret alle de trin, du skal følge, og giver dig endda muligheden for automatisk at generere nøglelager og legitimationsoplysninger, der er nødvendige for applikationen.
Nøglebutikken giver dig mulighed for at gemme kryptografiske nøgler i en beholder for at gøre det vanskeligere at udtrække fra enheden. Når nøglerne er i nøglelageret, kan de bruges til kryptografiske operationer, hvor nøglematerialet forbliver ikke-eksporterbart. Desuden tilbyder det faciliteter til at begrænse, hvornår og hvordan nøgler kan bruges, såsom begrænsning af nøgler, der kun skal bruges i visse kryptografiske tilstande. Så du behøver ikke bekymre dig om alle disse detaljer, da Expo automatiserer processen med at underskrive din app til iOS og Android.
Vi havde vores første kontakt med disse rammer, så snart vi startede vores praktikplads hos Imaginary Cloud. Her begyndte vi at arbejde med React Native og Expo som en del af udviklingen af en mobilapplikation til et internt projekt.
I starten var det svært at forstå, hvordan man arbejder med disse teknologier, da vi lige var begyndt. Det var en ny verden for os. Den tilgængelige dokumentation samt hjælp fra vores kolleger var imidlertid meget vigtige aspekter i udviklingen af dette projekt. Det er helt normalt, hvis der er tvivl eller spørgsmål vedrørende disse rammer på et tidligt tidspunkt. Under udviklingen forsvinder disse tvivl for at give plads til viden og erfaring. Brugen af nogle React Native-biblioteker samt nogle forudbyggede komponenter, sparede os ikke kun lidt tid, men gjorde det også lettere for os at udføre arbejdet.
På trods af at React Native hjalp os med at genbruge kode til Android og iOS, var der visse detaljer, som vi måtte tage højde for på grund af forskellene mellem OS. For eksempel kunne linjehøjdeegenskaben for nogle skrifttyper ikke være den samme for begge platforme, ellers ville brugerne bemærke forskellige stilarter fra iOS-appen og Android-appen.
Et af de mest udfordrende problemer, vi stod over for, var, hvordan man indlæser skrifttyper i vores app. Vi prøvede mange forskellige tutorials, vi søgte meget, og vi mistede lidt tid på at prøve at bruge en brugerdefineret skrifttype, men det endelige resultat var besværet værd.
En anden af vanskelighederne kom fra brugen af forudbyggede komponenter. React Native er følsom over for pakker og deres versioner, og det er nødvendigt at huske på, at nogle ting fungerer i React Native, men endnu ikke understøttes af Expo, så det er nødvendigt at kigge efter andre løsninger.
For eksempel brugte vi et forudbygget vælgervalg, men dens seneste version var ikke kompatibel med Expo, mere præcist på Android, så vi var nødt til at nedgradere den. Ikke alt er let. Nogle gange er du nødt til at finde en anden måde at nå dine mål på. Ikke desto mindre, som du sikkert har bemærket, kan React Native og Expo forenkle mange ting og hjælpe dig med at spare lidt tid.
Samlet set var vores rejse med dette projekt meget positiv. Da det var vores første oplevelse/tid med at arbejde med React Native og Expo, følte vi nogle vanskeligheder i starten, men da vi begyndte at vide mere om disse teknologier, blev det lettere og naturligt.
Vi lærte, at det er muligt nemt at køre en applikation på vores egen enhed og se ændringerne på koden næsten øjeblikkeligt, hvilket endte med at retfærdiggøre den komfort, vi følte, da vi brugte React Native med Expo. Derudover hjalp de mange API'er, de tilbyder, os med at nå videre på vores mål. For eksempel var Expo-Notifications nyttige for os og leverede væsentlige funktioner i omfanget af meddelelser.
Afslutningsvis steg vores viden, og det var et meget berigende projekt om, hvordan man udvikler en mobilapplikation ved hjælp af disse rammer. Vi indså dens fordele og tillod os at nå vores oprindelige mål.
Ved Imaginær sky vi arbejder ikke kun med React Native, men med en bred teknisk stak. Hvis du har brug for hjælp til at opbygge en skalerbar mobilapp, venter vi på dig! Send os en linje her!
Fandt du denne artikel nyttig? Du kan måske også lide disse!
Webudvikler. Lidenskabelig for serier og musik. Fodboldentusiast. En drømmer, der håber en dag at markere verden med noget, han har udviklet.
People who read this post, also found these interesting:
.webp)
.webp)
.webp)
.webp)
.webp)
.webp)
.webp)
.webp)
