Om du är här kanske du undrar”Hur kan React Native och Expo hjälpa mig att bygga min nästa mobilapplikation snabbare?”.
Som praktikanter på Imaginärt moln, vi föreslogs att utveckla en applikation som på något sätt var användbar för den situation som världen för närvarande står inför, Coronavirus-pandemin. På grund av denna situation måste vi anta nya förfaranden om hur vi hanterar gemensamma utrymmen i företaget. Eftersom vi nu har begränsningar i hur många personer som kan vara i samma rum beroende på dess storlek, måste vi minska spridningen av viruset genom att gruppera personer som delar samma arbetsområde.
Det är också vår avsikt för denna applikation att öka medvetenheten genom att visa några varningsmeddelanden och att spåra tillgängligheten för ett rum utan att besöka det.
Som ett resultat av dessa begränsningar, vårt mål var att lösa detta problem genom att utveckla en app med dessa React Native och Expo. Vi var inte bekanta med något av dessa, som du kanske inte är, så oroa dig inte, med lite läsning och övning förstår du hur de fungerar och varför de är ett bra val när det gäller utveckling av mobilappar. Det är därför vi tycker att det är viktigt att dela med oss av vår resa och några lärdomar från vår erfarenhet.
Det här inlägget kan hjälpa dig att öka ditt nästa projekt, och vi hoppas att detta kan upplysa dina nästa steg och vilka fördelar det ger. I det här blogginlägget kommer vi att prata om dessa två ramverk, hur de är relaterade och varför detta kan spara lite tid, även om du inte är bekant med mobilutveckling. Men låt oss börja med själva grunderna i dessa tekniker.
React Native är ett ramverk med öppen källkod för att bygga inbyggda appar med React skapad av Facebook och släpptes 2015. Det låter dig använda inbyggda UI-kontroller och ha full tillgång till den inbyggda plattformen som tillhandahålls från ett JavaScript-bibliotek. React Native gör det enkelt att samtidigt utveckla för både Android och iOS eftersom koden kan delas över plattformar.
Dessutom kombinerar detta ramverk användarupplevelsen av de inbyggda plattformarna med utvecklarens kunskap om att bygga med React på webben, vilket stöder det önskade tillvägagångssättet för ”Lär dig en gång, skriv överallt”.
Expo är ett ramverk och en plattform för universella React-applikationer. Det tillhandahåller en uppsättning verktyg och tjänster som förenklar utvecklingen och testningen av React Native-appar, erbjudande/ger möjlighet att köra koden på din telefon enkelt. Utöver det, Expo ger ett mer robust och utvecklarvänligt arbetsflöde.
Att ställa in utvecklingsmiljön kan variera beroende på vilken erfarenhet du har med mobilutveckling, men det är inte ett problem.
Om du är ny inom utveckling av mobilappar, det enklaste sättet att komma igång är med Expo CLI.
Om du redan är bekant med utveckling av mobilappar, du kanske vill använda React Native CLI.
Vi kommer att täcka installationen för nya mobilutvecklare, för även om du är bekant med mobilutveckling är Expo ett riktigt trevligt ramverk att använda och lätt att lära sig.
Det finns två verktyg som du behöver för att utveckla appar med Expo: Ett lokalt utvecklingsverktyg och en mobilklient för att öppna din app.
Som ett lokalt utvecklingsverktyg använder vi Expo CLI. Förutom kommandoradsgränssnittet (CLI) har det också ett webbaserat grafiskt användargränssnitt (GUI) som dyker upp i din webbläsare när du startar ditt projekt.
Du kommer att behöva Node.js för att installera Expo CLI. Efter installationen av Node.js kan du nu installera Expo CLI genom att köra följande kommando: npm installera -g expo-cli
Nu, när du har följt alla steg, som vi redan har täckt på den här bloggen, är allt du behöver göra att köra följande kommando, med ett projekt som heter till exempel ”MyProject”: Expo Init MyProject
Du måste undra varför du ska använda React Native. Vi kommer att prata om några fördelar när vi använder detta ramverk.
Enligt Google Trends, som vi kan se från diagrammet ovan, har undersökningar relaterade till React Native ökat, vilket visar det växande intresset och efterfrågan på denna teknik.
Enligt undersökningen Stack Overflow 2019 var React Native dessutom det sjätte mest populära ramverket bland utvecklare. Också, antalet frågor om Stack Overflow relaterade till React Native har ökat sedan det släpptes.
Enligt vår erfarenhet gör Expo saker riktigt enkla när man pratar om att köra och felsöka. Du kan köra din app för testning utan ansträngning eller kontrollera några fel, och till och med felsöka din app. Detta är, säkert, en av anledningarna till att Expo: s popularitet har ökat som vi kan se från diagrammet nedan.
När installationen är klar, om du vill köra din app för att se hur dina framsteg går, är allt du behöver göra att köra följande kommando: npm start. Därefter dyker ett fönster upp i din webbläsare. Du kan testa det på simulatorer, både för Android och iOS, men du kan också köra i din egen enhet, du behöver bara installera Expo-klientappen och skanna QR-koden du ser i terminalen eller i Expo Dev Tools. Observera att Expo inte bara är ett ramverk utan också en plattform där du kan hitta mycket användbar dokumentation, handledning, exempel från samhället och till och med bli en bidragsgivare på GitHub.
Du kanske undrar om det är möjligt att fortsätta ditt projekt utan att använda Expo på det. Ja, det är det. Om du har en dålig upplevelse av att utveckla din app med Explo CLI, du kan enkelt lämna den och flytta till ett React Native-projekt.
Vad är det här med React Native nake-projektet? Helt enkelt kommer ditt projekt att innehålla mapparna/katalogerna relaterade till operativsystemen (iOS och Android), så att du kan skapa dina egna inbyggda byggnader. Så, till exempel, om du vet att du så småningom kommer att behöva inkludera din egen ursprungliga kod i projektet, kan du mata ut expo som kör kommandot npm kör mata ut på konsolen.
När vi tänker på processen att bygga en mobilapp kan vi tänka på det som en komplex process. Av denna anledning försöker Expo förenkla och påskynda hela processen. I officiell dokumentation, förklarar de i detalj alla steg du måste följa och ger dig till och med möjlighet att automatiskt generera nyckellagret och referenser som behövs för applikationen.
Med nyckellagret kan du lagra kryptografiska nycklar i en behållare för att göra det svårare att extrahera från enheten. När nycklarna är i nyckellagret kan de användas för kryptografiska operationer där nyckelmaterialet förblir icke-exporterbart. Dessutom erbjuder det möjligheter att begränsa när och hur nycklar kan användas, till exempel att begränsa nycklar som endast ska användas i vissa kryptografiska lägen. Så du behöver inte oroa dig för alla dessa detaljer, eftersom Expo automatiserar processen för att signera din app för iOS och Android.
Vi hade vår första kontakt med dessa ramverk så snart vi började vår praktik på Imaginary Cloud. Här började vi arbeta med React Native och Expo som en del av att utveckla en mobilapplikation för ett internt projekt.
I början var det svårt att förstå hur man skulle arbeta med dessa tekniker eftersom vi precis började. Det var en ny värld för oss. Den tillgängliga dokumentationen, liksom hjälp från våra kollegor, var dock mycket viktiga aspekter i utvecklingen av detta projekt. Det är helt normalt om det finns några tvivel eller frågor angående dessa ramar i ett tidigt skede. Under utvecklingen försvinner dessa tvivel för att ge plats för kunskap och erfarenhet. Användningen av vissa React Native-bibliotek samt några förbyggda komponenter, sparade oss inte bara lite tid, men gjorde det också lättare för oss att göra arbetet.
Trots att React Native hjälpte oss att återanvända kod för Android och iOS fanns det vissa detaljer som vi var tvungna att ta hänsyn till på grund av skillnaderna mellan OS. Till exempel kan egenskapen linjehöjd för vissa teckensnitt inte vara densamma för båda plattformarna, annars skulle användarna märka olika stilar från iOS-appen och Android-appen.
Ett av de mest utmanande problemen vi mötte var hur man laddar teckensnitt i vår app. Vi försökte många olika tutorials, vi sökte mycket och vi förlorade lite tid på att försöka använda ett anpassat teckensnitt, men det slutliga resultatet var värt ansträngningen.
En annan av svårigheterna kom från användningen av förbyggda komponenter. React Native är känsligt för paket och deras versioner, och det är nödvändigt att komma ihåg att vissa saker fungerar i React Native men ännu inte stöds av Expo, så det är nödvändigt att leta efter andra lösningar.
Till exempel använde vi ett förbyggt väljarval men dess senaste version var inte kompatibel med Expo, mer exakt på Android, så vi behövde nedgradera den. Inte allt är lätt. Ibland måste du hitta ett annat sätt att nå dina mål. Ändå, som du antagligen märkte, kan React Native och Expo förenkla många saker och hjälpa dig att spara lite tid.
Sammantaget var vår resa med detta projekt mycket positiv. Eftersom det var vår första erfarenhet/tid att arbeta med React Native och Expo kände vi vissa svårigheter i början men när vi började veta mer om dessa tekniker blev det enklare och naturligt.
Vi lärde oss att det är möjligt att enkelt köra en applikation på vår egen enhet och att se ändringarna på koden nästan omedelbart, vilket slutade med att motivera den komfort vi kände när vi använde React Native med Expo. Dessutom hjälpte de olika API:erna de erbjuder oss att nå längre på våra mål. Expo-Notifications var till exempel användbara för oss och tillhandahöll viktiga funktioner i omfattningen av aviseringar.
Sammanfattningsvis ökade vår kunskap och det var ett mycket berikande projekt om hur man utvecklar en mobilapplikation med hjälp av dessa ramverk. Vi insåg dess fördelar och tillät oss att nå våra ursprungliga mål.
Vid Imaginärt moln vi arbetar inte bara med React Native, men med en bred teknisk stack. Om du behöver hjälp med att bygga en skalbar mobilapp väntar vi på dig! Skicka oss en rad här!
Hittade den här artikeln användbar? Du kanske gillar dessa också!
Webbutvecklare. Passionerad om serier och musik. Fotbollsentusiast. En drömmare som hoppas att en dag markera världen med något han har utvecklat.
Människor som läste det här inlägget tyckte också att dessa var intressanta:
.webp)
.webp)
.webp)
.webp)
.webp)
.webp)
.webp)
.webp)
.webp)
