En liten app med ett bra syfte. Det är det bästa sättet att beskriva SnapTrash, ett av våra senaste projekt och ett av de första vi utvecklar sedan vi gjorde växla från Ruby on Rails till en fullständig JavaScript-stack. Här kommer du att lära känna den här iOS-appen, liksom utvecklingsprocessen på grundval av dess första version, som snart kommer att finnas tillgänglig i App Store.
SnapTrash är en iOS-app som låter dig rapportera plastskräp som kan hittas på stränder genom att bara använda telefonens kamera och
GPS. Varje foto laddas upp till en databas som är tillgänglig från appen och innehåller fotoplatsen, dess koordinater och användarnamnet för uppladdaren.
Denna databas kommer att användas för att organisera regelbundna plastsamlingar, vilket hjälper till att hålla stränderna rena och havet plastfritt. Dess relevans är lika stor som dess syfte, eftersom åtta miljoner ton plast kommer in i havet varje år och är ansvarig för döden av flera marina djurarter som äter det dagligen.
Användaren kommer att kunna få en global bild av alla rapporterade foton på en karta som är integrerad i appen genom en uppsättning intuitiva ikoner. Även om appens huvudmål är att organisera samlingar av stora mängder plast, uppmuntras användaren också att vidta åtgärder själv när det är möjligt.
Designutmaningen med SnapTrash var att göra det så enkelt och intuitivt som möjligt, utan att slösa för mycket tid på detaljer som inte skulle ge något värde till det. Av denna anledning är gränssnittet så enkelt och rent som möjligt, vilket gör det mycket enkelt att uppnå önskade uppgifter. Efter inloggningen tar det bara ett par klick för att rapportera ett foto, något som är så enkelt som att dela media på Instagram eller Snapchat.
Papperspåsar på kartan representerar ett galleri med foton på en viss plats och om du zoomar det ser du dem spridda i varje enskilt foto. De återstående ikonerna och knapparna tar inte mycket utrymme på skärmen och var utformade för att hålla användarens uppmärksamhet på SnapTrash: att hålla havet plastfritt.
Från början var min uppgift att bygga en mobilapp där användare kunde logga in via Facebook och ta bilder av plast och publicera dem på en karta. På den tiden experimenterade jag fortfarande med Strapie (Du kan hitta den granskad här) och det verkade passa för denna uppgift. För att utveckla själva appen gick jag med React Native.
För att kunna hålla bilderna synliga i appen var jag tvungen att hitta ett sätt att lagra dem på en server, tillsammans med all relevant information om var och en. I detta skede är serversidan inte synlig för användare i allmänhet och fungerar bara som en datalagring.
För att uppnå detta verkade Strapi vara ett bra verktyg för jobbet, med bara en begränsning: det är inriktat på utveckling av webbappar. Följaktligen fungerar SDK inte fullt ut i React Native, och låter dig inte använda SDK för inbyggd Facebook-inloggning. Hur som helst är Strapi Facebook-inloggningen nu trasig, eftersom Facebook gjorde HTTPS-återuppringning obligatorisk och Strapi bara genererar återuppringningsadresser med HTTP.
I slutändan laddas bildfilerna upp till Strapi-servern, via slutpunkten /upload, och fotomodellen refererar till den filen. Dessutom lagrar den platsen där fotot togs och inloggningsinformationen från Facebook (token, användares e-post och användarnamn). Det var allt jag behövde från serversidan.
När det gäller själva appen var min första uppgift helt enkelt att visa en karta, vilket lät tillräckligt enkelt. Men om du går nakna ben med React Native CLI-verktyget har du stora problem. Instruktionerna för att ställa in react-native-maps är obegripliga för någon som inte har erfarenhet av att utveckla för Native. Lyckligtvis, de Tänd CLI har ett plugin som gör det mycket enkelt att lägga till kartor i din app.
För att få bildens plats var jag tvungen att spåra användarens nuvarande plats, vilket kan vara lättare sagt än gjort, med tanke på tillgänglig dokumentation. Här du hittar dålig dokumentation om hur man gör det. Men i båda fallen får de det att verka mycket mer intuitivt än det faktiskt är.
Efter att jag fått kartan igång hade jag några fler problem som jag var tvungen att lösa för att ha SnapTrash redo för testning:
Istället för:
Lösningen är att skjuta positionen: absolut vy utanför Touchable:
Att hitta de bästa lösningarna för dessa problem var en av de bästa delarna av att utveckla SnapTrash, eftersom jag kunde förstå exakt varför det var avgörande att allt fungerade så smidigt som möjligt. Användarupplevelsen bör inte förstöras av mindre problem som skulle distansera appen från dess mål.
SnapTrash var ett bra projekt att arbeta med och det är en app med ett mycket viktigt syfte, eftersom det löser ett av de allvarligaste problemen som vi står inför för närvarande på global nivå. När det gäller utvecklingen var det spännande att arbeta med några nya verktyg, eftersom detta var en av de första mobilappsutvecklingarna som jag har gjort. Följande är de viktigaste takeaways som jag har hållit från det här projektet.
Sammantaget är dessa frågor långt efter nu och SnapTrash kommer snart att släppas. Erfarenheten av att utveckla den var fantastisk, men jag är övertygad om att resultatet kommer att bli ännu större.
Om du letar efter hjälp med mobil- eller webbapputveckling ser vårt team fram emot att träffa dig! Släpp oss en rad här!
Hittade den här artikeln användbar? Du kanske gillar dessa också!
Full-stack utvecklare, värd för lunchundersökningar och stolt över att ha ett mycket specifikt och sällsynt sinne för humor som missförstås. Och så är mina lunchomröstningar, vanligtvis.
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)
