Eine kleine App mit einem großartigen Zweck. So lässt sich das am besten beschreiben SnapTrash, eines unserer neuesten Projekte und eines der ersten, die wir entwickeln, seit wir das Wechseln Sie von Ruby on Rails zu einem vollständigen JavaScript-Stack. Hier lernst du diese iOS-App sowie den Entwicklungsprozess auf der Grundlage ihrer ersten Version kennen, die bald im App Store verfügbar sein wird.
SnapTrash ist eine iOS-App, mit der Sie Plastikmüll melden können, der möglicherweise an Stränden gefunden wird, indem Sie nur die Kamera Ihres Telefons verwenden und
GPS. Jedes Foto wird in eine Datenbank hochgeladen, auf die über die App zugegriffen werden kann und die den Standort des Fotos, seine Koordinaten und den Benutzernamen des Uploaders enthält.
Diese Datenbank wird verwendet, um regelmäßige Plastiksammlungen zu organisieren und so dazu beizutragen, die Strände sauber und das Meer plastikfrei zu halten. Ihre Bedeutung ist ebenso groß wie ihr Zweck, da jedes Jahr acht Millionen Tonnen Plastik in den Ozean gelangen und für den Tod mehrerer Meerestierarten verantwortlich sind, die es täglich aufnehmen.
Der Benutzer kann sich auf einer Karte, die über eine Reihe intuitiver Symbole in die App integriert ist, einen globalen Überblick über alle gemeldeten Fotos verschaffen. Obwohl das Hauptziel der App darin besteht, Sammlungen großer Mengen an Plastik zu organisieren, wird der Benutzer auch ermutigt, selbst Maßnahmen zu ergreifen, wann immer dies möglich ist.
Die Designherausforderung bei SnapTrash bestand darin, es so einfach und intuitiv wie möglich zu gestalten, ohne zu viel Zeit mit Details zu verschwenden, die keinen Mehrwert bieten würden. Aus diesem Grund ist die Oberfläche so einfach und übersichtlich wie möglich, sodass die gewünschten Aufgaben sehr einfach ausgeführt werden können. Nach der Anmeldung sind nur ein paar Klicks erforderlich, um ein Foto zu melden. Dies ist so einfach wie das Teilen von Medien auf Instagram oder Snapchat.
Müllsäcke auf der Karte stellen eine Galerie mit Fotos an einem beliebigen Ort dar. Wenn Sie die Ansicht vergrößern, werden sie auf jedem einzelnen Foto verteilt. Die übrigen Symbole und Schaltflächen nehmen nicht viel Platz auf dem Bildschirm ein und wurden entworfen, um die Aufmerksamkeit des Benutzers auf den Hauptzweck von SnapTrash zu lenken: den Ozean plastikfrei zu halten.
Von Anfang an bestand meine Aufgabe darin, eine mobile App zu entwickeln, mit der sich Benutzer über Facebook anmelden und Fotos von Plastik machen und sie auf einer Karte veröffentlichen konnten. Zu der Zeit experimentierte ich noch mit Strapi (Sie können es rezensiert finden hier) und es schien für diese Aufgabe geeignet zu sein. Um die App selbst zu entwickeln, habe ich mich für Folgendes entschieden Reagieren Sie nativ.
Um die Fotos in der App sichtbar zu halten, musste ich einen Weg finden, sie zusammen mit allen relevanten Informationen zu den einzelnen Fotos auf einem Server zu speichern. Zu diesem Zeitpunkt ist die Serverseite für Benutzer im Allgemeinen nicht sichtbar und dient nur als Datenspeicher.
Um dies zu erreichen, schien Strapi ein gutes Tool für diesen Job zu sein, mit nur einer Einschränkung: Es ist auf die Entwicklung von Web-Apps ausgerichtet. Folglich funktioniert das SDK in React Native nicht vollständig und Sie können das SDK auch nicht für die native Facebook-Anmeldung verwenden. In jedem Fall ist das Strapi-Facebook-Login jetzt kaputt, da Facebook den HTTPS-Rückruf zur Pflicht gemacht hat und Strapi nur Callback-URLs mit HTTP generiert.
Am Ende werden die Bilddateien über den Endpunkt /upload auf den Strapi-Server hochgeladen, und das Fotomodell verweist auf diese Datei. Darüber hinaus werden der Ort, an dem das Foto aufgenommen wurde, und die Anmeldeinformationen von Facebook (Token, Benutzer-E-Mail und Benutzername) gespeichert. Das war alles, was ich von der Serverseite brauchte.
In Bezug auf die App selbst bestand meine erste Aufgabe darin, einfach eine Karte anzuzeigen, was einfach genug klang. Wenn Sie jedoch mit dem React Native CLI-Tool loslegen, werden Sie große Probleme haben. Die Anweisungen zum Einrichten von React-Native-Maps sind für jemanden, der keine Erfahrung in der Entwicklung für Native hat, unverständlich. Zum Glück ist der CLI entzünden hat ein Plugin, das es sehr einfach macht, Karten zu Ihrer App hinzuzufügen.
Um den Standort des Fotos zu ermitteln, musste ich den aktuellen Standort des Benutzers verfolgen, was angesichts der verfügbaren Dokumentation möglicherweise leichter gesagt als getan ist. Hier Sie werden schlechte Unterlagen dazu finden, wie das geht. In beiden Fällen lassen sie es jedoch viel intuitiver erscheinen, als es tatsächlich ist.
Nachdem ich die Map zum Laufen gebracht hatte, hatte ich noch ein paar Probleme, die ich lösen musste, um SnapTrash zum Testen bereit zu haben:
Anstatt:
Die Lösung besteht darin, die position:absolute Ansicht außerhalb von Touchable zu verschieben:
Die besten Lösungen für diese Probleme zu finden, war einer der besten Aspekte bei der Entwicklung von SnapTrash, da ich genau verstehen konnte, warum es so wichtig war, dass alles so reibungslos wie möglich lief. Das Nutzererlebnis sollte nicht durch kleinere Probleme ruiniert werden, die die App von ihren Zielen abhalten würden.
SnapTrash war ein großartiges Projekt, an dem man arbeiten konnte, und es ist eine App mit einem sehr wichtigen Zweck, da sie eines der schwerwiegendsten Probleme angeht, mit denen wir derzeit auf globaler Ebene konfrontiert sind. Was die Entwicklung anbelangt, so war es aufregend, mit ein paar neuen Tools zu arbeiten, da dies eine der ersten Entwicklungen für mobile Apps war, die ich gemacht habe. Im Folgenden sind die wichtigsten Erkenntnisse aufgeführt, die ich aus diesem Projekt mitgenommen habe.
Alles in allem sind diese Probleme jetzt weit zurückgeblieben und SnapTrash wird bald veröffentlicht. Die Erfahrung bei der Entwicklung war fantastisch, aber ich bin fest davon überzeugt, dass das Ergebnis noch besser sein wird.
Wenn Sie Hilfe bei der Entwicklung von mobilen oder Web-Apps suchen, freut sich unser Team auf Sie! Schreiben Sie uns eine Nachricht hier!
Fanden Sie diesen Artikel hilfreich? Diese könnten dir auch gefallen!
Full-Stack-Entwickler, Moderator von Lunch-Umfragen und stolz darauf, einen sehr spezifischen und seltenen Sinn für Humor zu haben, der missverstanden wird. Und das gilt in der Regel auch für meine Mittagsumfragen.
People who read this post, also found these interesting:
.webp)
.webp)
%20(2).webp)
