En lille app med et godt formål. Det er den bedste måde at beskrive SnapTrash, et af vores seneste projekter og et af de første, vi udvikler, siden vi har lavet skift fra Ruby on Rails til en fuld JavaScript-stak. Her lærer du denne iOS-app at kende såvel som udviklingsprocessen på basis af dens første version, der snart vil være tilgængelig i App Store.
SnapTrash er en iOS-app, der giver dig mulighed for at rapportere plastikaffald, der kan findes på strande ved kun at bruge din telefons kamera og
GPS. Hvert foto uploades til en database, der er tilgængelig fra appen og indeholder fotoplaceringen, dets koordinater og brugernavnet på uploaderen.
Denne database vil blive brugt til at organisere regelmæssige plastsamlinger, hvilket hjælper med at holde strandene rene og havet plastfrit. Dens relevans er lige så stor som dens formål, da otte millioner tons plastik kommer ind i havet hvert år og er ansvarlig for døden af flere marine dyrelivsarter, der indtager det dagligt.
Brugeren vil være i stand til at få et globalt overblik over alle rapporterede fotos på et kort, der er integreret i appen gennem et sæt intuitive ikoner. Selvom appens hovedmål er at organisere samlinger af store mængder plast, opfordres brugeren også til selv at handle, når det er muligt.
Designudfordringen med SnapTrash var at gøre det så enkelt og intuitivt som muligt uden at spilde for meget tid på detaljer, der ikke ville tilføje nogen værdi til det. Af denne grund er grænsefladen så enkel og ren som muligt, hvilket gør det meget nemt at opnå de ønskede opgaver. Efter login tager det kun et par klik at rapportere ethvert foto, noget der er så simpelt som at dele medier på Instagram eller Snapchat.
Affaldsposer på kortet repræsenterer et galleri med fotos på et givet sted, og hvis du zoomer det, vil du se dem spredt ud i hvert enkelt foto. De resterende ikoner og knapper tager ikke meget plads på skærmen og er designet til at holde brugerens opmærksomhed på SnapTrashs hovedformål: at holde havet plastfrit.
Fra starten var min opgave at bygge en mobilapp, hvor brugerne kunne logge ind via Facebook og tage billeder af plastik og offentliggøre dem på et kort. På det tidspunkt eksperimenterede jeg stadig med Strapie (Du kan finde det gennemgået her) og det syntes at være egnet til denne opgave. For at udvikle selve appen gik jeg med React Native.
For at kunne holde billederne synlige i appen, var jeg nødt til at finde en måde at gemme dem på en server sammen med alle de relevante oplysninger om hver enkelt. På dette tidspunkt er serversiden ikke synlig for brugerne generelt og fungerer kun som datalagring.
For at opnå dette virkede Strapi som et godt værktøj til jobbet med kun en begrænsning: det er rettet mod udvikling af webapps. Derfor fungerer SDK'en ikke fuldt ud i React Native, og lader dig heller ikke bruge SDK'en til indbygget Facebook-login. Under alle omstændigheder er Strapi Facebook-login nu brudt, da Facebook gjorde HTTPS-tilbagekald obligatorisk, og Strapi kun genererer tilbagekaldelseswebadresser med HTTP.
Til sidst uploades billedfilerne til Strapi-serveren gennem /upload endepunktet, og fotomodellen refererer til den fil. Derudover gemmer den placeringen, hvor billedet blev taget, og loginoplysningerne fra Facebook (token, bruger-e-mail og brugernavn). Det var alt, hvad jeg havde brug for fra serversiden.
Med hensyn til selve appen var min første opgave simpelthen at vise et kort, hvilket lød let nok. Men hvis du går bare med React Native CLI-værktøjet, har du store problemer. Instruktionerne til opsætning af react-native-maps er uforståelige for nogen, der ikke har erfaring med at udvikle til Native. Heldigvis, den Tænd CLI har et plugin, der gør det meget nemt at tilføje kort til din app.
For at få billedets placering var jeg nødt til at spore brugerens aktuelle placering, hvilket måske er lettere sagt end gjort i betragtning af den tilgængelige dokumentation. Her du finder dårlig dokumentation om, hvordan du gør det. Men i begge tilfælde får de det til at virke meget mere intuitivt, end det faktisk er.
Efter at jeg fik kortet i gang, havde jeg et par flere problemer, som jeg var nødt til at løse for at have SnapTrash klar til test:
I stedet for:
Løsningen er at skubbe positionen: absolut visning uden for Touchable:
At finde de bedste løsninger på disse problemer var en af de bedste dele af udviklingen af SnapTrash, da jeg kunne forstå præcis, hvorfor det var afgørende at få alt til at køre så glat som muligt. Brugeroplevelsen bør ikke ødelægges af mindre problemer, der ville distancere appen fra dens mål.
SnapTrash var et fantastisk projekt at arbejde på, og det er en app med et meget vigtigt formål, da det løser et af de mest alvorlige problemer, som vi står over for i øjeblikket på globalt plan. Med hensyn til udviklingen var det spændende at arbejde med et par nye værktøjer, da dette var en af de første mobilapp-udviklinger, jeg har lavet. Følgende er de vigtigste takeaways, som jeg har holdt fra dette projekt.
Alt i alt er disse problemer langt bagud nu, og SnapTrash frigives snart. Oplevelsen af at udvikle det var fantastisk, men jeg er overbevist om, at resultatet bliver endnu større.
Hvis du leder efter hjælp til udvikling af mobil- eller webapps, ser vores team frem til at møde dig! Send os en linje her!
Fandt du denne artikel nyttig? Du kan måske også lide disse!
Full-stack udvikler, vært for frokostafstemninger og stolt af at have en meget specifik og sjælden sans for humor, der misforstås. Og det er mine frokostafstemninger som regel også.
People who read this post, also found these interesting:
.webp)
.webp)
.webp)
.webp)
.webp)
.webp)
.webp)
.webp)
