Dr. Web Digital Experts-Logo
  • CSS
  • SEO
  • Tools
  • Webseiten erstellen
  • Webdesign
  • WordPress
  • × 🍔 vertilgen
  • ☰ Menu
Hier das Dr. Web Icon-Set herunterladen.

Focality: Ein Blick hinter die Kulissen einer Produktivitäts-App

Moderne Frameworks ermöglichen die App-Entwicklung mit Web-Technologien. Ein Erfahrungsbericht aus der Entwicklung von Focality, einer App für die intuitive Planung persönlicher Ziele und Selbstreflexion.
Lade Dir jetzt das Icon-Set kostenlos herunter

Übersicht

Was ist Focality?

Gehörst Du auch zu den Personen, die ständig endlose Aufgabenlisten abarbeiten und dabei regelmäßig die eigenen Ziele aus den Augen verlieren? Hast Du das Gefühl, dass Du oft eher an den dringendsten anstatt an den wichtigsten Dingen arbeitest? Du möchtest lieber aktiv daran arbeiten Dich zu verbessern, als Dich immer wieder über die gleichen Fehler zu ärgern? Focality kann Dir dabei helfen.

Focality: Prüfe Deinen Plan
Checkliste zur Planungsansicht

Focality ist eine App zum Planen, Reflektieren und Optimieren. Sie hilft die eigenen Ziele im Blick zu halten und das Leben bewusster zu gestalten. Kern ist ein mehrdimensionaler Planer. Im ersten Schritt legst Du fest, was Du dieses Jahr erreichen möchtest. Dann diesen Monat, diese Woche, diesen Tag. Am Ende von jedem Zeitraum blickst Du zurück und kannst so Strategien entwickeln, wie es beim nächsten Mal noch besser laufen kann. Statistische Auswertungen ermöglichen weitere Erkenntnisse. Wenn Du mehr als 7h / Tag verplanst, sinkt Deine Umsetzungsquote? Vielleicht solltest Du mehr Puffer einplanen. Bei einem Ziel verfehlst Du Deine Vorhaben überdurchschnittlich oft? Hinterfrage Deine Motivation und/oder Prioritäten.

Hinter Focality steht kein Team, sondern ich als Einzelperson. Ich entwickele die App neben meiner Stelle als Konzepter in einer Internetagentur. Dementsprechend muss ich sehr gut überlegen, wie ich die begrenzte Zeit am effizientesten einsetze.

Die Technik

Im Kern ist Focality eine Web-App. Mit Hilfe von Capacitor wird diese in einen nativen Rahmen für iOS und Android gepackt. So kann sie über den App Store bzw. Play Store verbreitet werden.

Die App selbst ist mit React und Material UI umgesetzt. Letzteres ist eine UI-Bibliothek, die Googles Material Design umsetzt. Sie bietet viele einfach einsetzbare Komponenten, sodass man mit etwas visuellem Gespür eine ansehnliche App erstellen kann, auch wenn man selbst vielleicht kein Designer ist.

Capacitor wiederum ist ein Werkzeug, was diese Web-App in einen nativen App-Container verpackt. Man kann es mit jedem Framework verwenden, nicht nur mit React. An der App selbst sind wenige bis gar keine Anpassungen notwendig – je nachdem, welche Funktionen man nutzen möchte. Capacitor bietet JavaScript-Schnittstellen für diverse native Funktionen. So kann man z.B. auf die Kamera und das Dateisystem zugreifen oder Benachrichtigungen erstellen.

Das Backend besteht vollständig aus Serverless-Technologien: AWS Cognito für die Benutzerverwaltung und AWS AppSync für die Datenhaltung. Das Spannende dabei ist, dass man als Entwickler eigentlich überhaupt kein Backend entwickeln muss.

Verschiedene Ansichten in der App Focality
Planungs-, Reflexions- und Zielansicht

Für AppSync definiert man lediglich das gewünschte Datenschema. Das Tool generiert daraus eine vollständige GraphQL-API, die bei AWS gehostet wird. Die Daten werden in DynamoDB abgelegt, einer NoSQL-Datenbank. Darum muss man sich jedoch nicht kümmern, AppSync legt automatisch die Datenbank an und kümmert sich um den Zugriff. Als Entwickler nutzt man einfach nur die bereitgestellte API, um seine Daten zu speichern und abzurufen.

Ähnlich dazu generiert Cognito anhand weniger Parameter eine komplette Benutzerverwaltung inklusive typischer Abläufe wie das Zurücksetzen oder Ändern von Passwörtern. Auch das Login über Drittanbieter wie Facebook oder Google wird unterstützt.

Focality: Du hast 9 Tage geplant
Auswertungen

Erfahrungen

Web-Technologien sind der nativen App-Entwicklung inzwischen ebenbürtig. Und die Vorteile sind massiv. Man kann fast ohne Zusatzaufwand für mehrere Plattformen entwickeln. Für mich wäre es zeitlich schlicht nicht möglich gewesen, für mehr als eine Plattform nativ zu entwickeln. Zudem kann man auf das gigantische Ökosystem der Web-Entwicklung zurückgreifen, das für fast jedes Szenario eine passende Bibliothek bietet. Es gibt nur noch wenige Gründe, die für eine native Entwicklung sprechen – bei einer App wie Focality eigentlich keinen.

Auch AWS AppSync und Cognito haben sich im Großen und Ganzen bewährt. Man spart unheimlich viel Zeit, wenn das Backend aus dem Datenschema generiert wird.

Es gibt aber auch Schattenseiten. Wenn ein Szenario von den Werkzeugen so nicht mitgedacht wurde, stößt man schnell an Grenzen. Beispielsweise wäre Focality theoretisch auch offline-fähig – wenn das AWS Framework nicht nach 30 Minuten auf ein frisches Access-Token bestehen würde. Langfristig werden solche Einschränkungen vielleicht doch noch ein individuelles Backend notwendig machen. Aber um ein Konzept schnell zu testen und an den Start zu bringen ist AppSync super.

Deine Meinung ist gefragt

Auch, wenn die Technik viele spannende Herausforderungen bietet, liegen die wahren Herausforderungen jedoch erwartungsgemäß an anderer Stelle. Der Markt für Kalender-Apps, To-do-Apps und Produktivitätssoftware ist heiß umkämpft und hoffnungslos überlaufen. Das macht es schwer, mit den ersten Nutzern ins Gespräch zu kommen. Ein intensiver Austausch ist jedoch unerlässlich, um ein Produkt von einer ersten Version zu etwas wirklich Erfolgreichem zu führen.

Daher ein Aufruf: Spricht Dich das Konzept an? Dann teste Focality und berichte, was Du davon hältst. Ganz besonders hilfreich wäre ein kurzes Gespräch. Als Dank gibt es 6 Monate die Pro-Version von Focality kostenlos.

Florian Sander

Florian Sander

konzipiert, entwickelt, implementiert und betreibt Software-Produkte seit über 20 Jahren. Sein neuestes Projekt ist Focality, eine App, die hilft, Dein Leben bewusst zu gestalten und Deine Ziele zu erreichen.

2 Antworten

  1. Avatar Dirk Helbert sagt:
    11. November 2020 um 9:11 Uhr

    Hi,

    die App habe ich mir jetzt nur oberflächlich angeschaut. Die Idee finde ich gut und ich werde sie auf jeden Fall ausprobieren. Danke schon mal dafür.

    Warum hast du auf eine Container Lösung gesetzt und nicht auf ReactNative?

    Viele Grüße
    Dirk

    Antworten
    1. Avatar Florian Sander sagt:
      11. November 2020 um 10:30 Uhr

      Danke! 🙂

      Gegen ReactNative hat vor allem gesprochen, dass das Web als Plattform nur experimentell unterstützt wird. Und ich wollte Focality auch fürs Web anbieten.

      Außerdem kann ich dadurch, dass Focality eine Web-App ist, das gesamte Spektrum der Web-Technologien nutzen. z.B. die grandiose UI-Bibliothek Material UI. Das Web-Ökosystem hat einfach unglaublich viel zu bieten.

      Antworten

Schreibe einen Kommentar Antworten abbrechen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Passende Beiträge

Hantha - Web-Design
Tools

Wie erfolgreiche Agenturen die Zusammenarbeit mit Kunden verbessern

Kennen Sie das? Sie arbeiten an einem Webprojekt und haben schon so viele E-Mails mit Anmerkungen, Design-Kritik und Fragen hin- und hergeschickt, dass der Überblick abhanden gekommen ist.

Weiterlesen »
Kunden gewinnen und Aufträge akquirieren — diese Projektbörsen helfen dir dabei - Eine Tasse Kaffee auf einem Tisch - Cafe
Tools

Die 13 besten HTML Editoren für Webentwickler (Update)

HTML Editoren sind ein Werkzeug für Webentwickler, denn HTML ist die Grundlage des Internets. Wir haben 13 HTML Editoren ausgewählt und getestet. Viel Spaß.

Weiterlesen »
Ein häusliches Büro mit Computer-Arbeitsplatz und Blick aus dem Fenster.
Tools

Organisiert ins Social Distancing: Die besten Tools fürs Home Office

Gerade ist das Thema Heimarbeit branchenübergreifend präsent wie nie. Aber auch unabhängig von Kontaktsperren in Zeiten des Coronavirus stellt einen das Home-Office für die Eigenorganisation und für die Kommunikation mit den lieben Kollegen vor ganz andere Herausforderungen als im Büro.

Weiterlesen »
Lade Dir jetzt das Icon-Set kostenlos herunter

  • Agentur
  • CSS
  • Datenschutzhinweise
  • Impressum
  • SEO
  • Webdesign
  • Websites
  • WordPress
  • Nach oben ↑
Menü
  • Agentur
  • CSS
  • Datenschutzhinweise
  • Impressum
  • SEO
  • Webdesign
  • Websites
  • WordPress
  • Nach oben ↑
Wir verwenden Cookies, um Besucherzahlen zu messen. Mehr dazu in unserer Datenschutzerklärung. Einverstanden? EinstellungenIch stimme zu
Cookie-Einstellungen

Privacy Overview

This website uses cookies to improve your experience while you navigate through the website. Out of these cookies, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website. These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. But opting out of some of these cookies may have an effect on your browsing experience.
Notwendige
immer aktiv

Necessary cookies are absolutely essential for the website to function properly. This category only includes cookies that ensures basic functionalities and security features of the website. These cookies do not store any personal information.

Nicht notwendige

Any cookies that may not be particularly necessary for the website to function and is used specifically to collect user personal data via analytics, ads, other embedded contents are termed as non-necessary cookies. It is mandatory to procure user consent prior to running these cookies on your website.