Dr. Web Logo. Untertext: Seit 1997.
  • Beste Agenturen
  • Agentur-Standorte von A bis Z 🌇
  • Magazin
  • Newsletter 📩
  • Login
  • Agentur bewerben ✅
  • Kontakt
  • Werben 🎉
  • Sponsored Post
  • Jobs
Menü
  • Beste Agenturen
  • Agentur-Standorte von A bis Z 🌇
  • Magazin
  • Newsletter 📩
  • Login
  • Agentur bewerben ✅
  • Kontakt
  • Werben 🎉
  • Sponsored Post
  • Jobs
  • Werben
  • Gastbeitrag
  • Sponsored Post
  • Kontakt
  • Login
  • Newsletter
Suche
  • Beste Agenturen
  • Agentur-Standorte
      Beste Agenturen Augsburg Altstadt von oben.

      Augsburg

      Blick auf die Mittlere Brücke in Basel bei Sonnenaufgang.

      Basel

      Berlin bei Nacht, Blick von oben Richtung Fernsehturm.

      Berlin

      Das Ruhrstadion in Bochum von oben, bei Sonnenuntergang.

      Bochum

      Bonn von oben, mit Blick auf den Rhein.

      Bonn

      Dortmund von oben Panoramafoto.

      Dortmund

      Blick auf die Elbufer-Promenade Dresdens sowie Frauenkirche und Zwinger.

      Dresden

      Duisburg Innenhafen bei Sonnenuntergang.

      Duisburg

      Düsseldorf von oben mit Blick auf den Fernsehturm.

      Düsseldorf

      Die Skyline von Essen von oben.

      Essen

      Blick von oben auf das Bankenviertel in Frankfurt am Main.

      Frankfurt am Main

      Freiburg Innenstadt vom Münster aus fotografiert mit Blick Richtung Schlossberg und Sonnenuntergang..

      Freiburg im Breisgau

      Hamburg bei Nacht, Blick auf die Speicherstadt.

      Hamburg

      Blick auf das Neue Rathaus, Hannover.

      Hannover

      Agenturen in Innsbruck von oben mit Blick auf die Alpen.

      Innsbruck

      Karlsruhe von oben

      Karlsruhe

      Sonnenuntergang in Köln mit Blick auf den Dom. Im Vordergrund die Hohenzollernbrücke.

      Köln

      Leipzig Innenstadt bei Sonnenuntergang und von oben.

      Leipzig

      München bei Fön mit Blick in die bayerischen Alpen.

      München

      Nürnberg Altstadt Stadtmauer von oben

      Nürnberg

      Blick auf das Flussufer der Innenstadt von Regensburg bei Nacht.

      Regensburg

      Agenturen Salzburg: Blick auf die Altstadt und die Hohensalzburg.

      Salzburg

      Stuttgart von oben.

      Stuttgart

      Wien von oben. Blick auf den Stephansdom.

      Wien

      Zürich von oben.

      Zürich

  • Magazin
    • Content Marketing
    • CSS
    • E-Commerce
    • E-Mail-Marketing
    • Freelancer
    • Fotografie
    • HTML
    • Online-Marketing
    • Responsive Design
    • SEO
    • UX Design
    • Webdesign
    • Website erstellen
    • WordPress
    • Dr. Web Autoren
  • Jobs
Menü
  • Magazin
    • Content Marketing
    • CSS
    • E-Commerce
    • E-Mail-Marketing
    • Freelancer
    • Fotografie
    • HTML
    • Online-Marketing
    • Responsive Design
    • SEO
    • UX Design
    • Webdesign
    • Website erstellen
    • WordPress
    • Dr. Web Autoren
  • Jobs
Agentur eintragen →
Dr. Web Logo. Untertext: Seit 1997.
  • Beste Agenturen
  • Agentur-Standorte
      Beste Agenturen Augsburg Altstadt von oben.

      Augsburg

      Blick auf die Mittlere Brücke in Basel bei Sonnenaufgang.

      Basel

      Berlin bei Nacht, Blick von oben Richtung Fernsehturm.

      Berlin

      Das Ruhrstadion in Bochum von oben, bei Sonnenuntergang.

      Bochum

      Bonn von oben, mit Blick auf den Rhein.

      Bonn

      Dortmund von oben Panoramafoto.

      Dortmund

      Blick auf die Elbufer-Promenade Dresdens sowie Frauenkirche und Zwinger.

      Dresden

      Duisburg Innenhafen bei Sonnenuntergang.

      Duisburg

      Düsseldorf von oben mit Blick auf den Fernsehturm.

      Düsseldorf

      Die Skyline von Essen von oben.

      Essen

      Blick von oben auf das Bankenviertel in Frankfurt am Main.

      Frankfurt am Main

      Freiburg Innenstadt vom Münster aus fotografiert mit Blick Richtung Schlossberg und Sonnenuntergang..

      Freiburg im Breisgau

      Hamburg bei Nacht, Blick auf die Speicherstadt.

      Hamburg

      Blick auf das Neue Rathaus, Hannover.

      Hannover

      Agenturen in Innsbruck von oben mit Blick auf die Alpen.

      Innsbruck

      Karlsruhe von oben

      Karlsruhe

      Sonnenuntergang in Köln mit Blick auf den Dom. Im Vordergrund die Hohenzollernbrücke.

      Köln

      Leipzig Innenstadt bei Sonnenuntergang und von oben.

      Leipzig

      München bei Fön mit Blick in die bayerischen Alpen.

      München

      Nürnberg Altstadt Stadtmauer von oben

      Nürnberg

      Blick auf das Flussufer der Innenstadt von Regensburg bei Nacht.

      Regensburg

      Agenturen Salzburg: Blick auf die Altstadt und die Hohensalzburg.

      Salzburg

      Stuttgart von oben.

      Stuttgart

      Wien von oben. Blick auf den Stephansdom.

      Wien

      Zürich von oben.

      Zürich

Agentur eintragen →
Dr. Web » Tools » Focality: Ein Blick hinter die Kulissen einer Produktivitäts-App

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.

Sozial sein
Share on facebook
Share on twitter
Share on linkedin
Share on xing
Share on whatsapp
Share on email
  • 2 Kommentare
Lesedauer: 4 Minuten
  • von Florian Sander
  • 11. November 2020
Bookmarke mich
Share on pocket

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.

Wie hilfreich war dieser Beitrag?

Klicke auf die Sterne um zu bewerten!

Durchschnittliche Bewertung 0 / 5. Anzahl Bewertungen: 0

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.

Agenturpartner

Khoa Nguyen – Online Marketing Beratung & SEA / Social Ads / SEO Freelancer

München

NETZhelfer GmbH

Ostfildern

UnitedAds

Starnberg

Evergreen Media

Innsbruck

Jocado

Leipzig

Alle Agenturpartner

Jobs

Elektroinstallateur – Rechenzentrum

Karlsruhe

Webtexter für SEO Agentur

Salzburg (Österreich)

SEA Manager in München

München

Sprachtalente

Volkach oder Würzburg

Copywriter – Vollzeit

Remote

Zum richtigen Job

Newsletter

Tipps, Tricks, Ratgeber. Unser Newsletter: Jeden Dienstag frisch gedruckt in Deinem Mail-Postfach.

Lust auf mehr? Wir empfehlen folgende Artikel:

SEO Tools im Test: Das kann die OSG Performance Suite

Jedes SEO-Tool hat seine Berechtigung, Stärken und Schwächen. Manche Tools decken nur einen kleinen Bereich ab, andere verfolgen den All-in-One-Anspruch. Die OSG Performance Suite ist sehr umfangreich, wie unser Test ergab. Doch schau selbst:

 →   

Die 10 besten HTML-Editoren für Webentwickler

HTML-Editoren sind das vielleicht wichtigste Werkzeug für Webentwickler, denn HTML ist die Basis aller Webseiten. Wir haben für dich 9 HTML-Editoren ausgewählt und getestet:

 →   

10 phantastische Photoshop-Alternativen, fast alle kostenlos

Adobe Photoshop ist der Platzhirsch, doch es gibt kostenlose Photoshop-Alternativen, die je nach Bedarf dem großen Bruder in nichts nachstehen. Zeit zu wechseln?

 →   

2 Antworten zu „Focality: Ein Blick hinter die Kulissen einer Produktivitäts-App“
— was ist Deine Meinung?

  1. 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. 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

Dr. Web Logo weiss.

Pionier für Digitale Transformation. Seit 1997. ✅  Wissen, Tipps, Ratgeber, Dienstleister: Wir bringen wir die digitale Transformation von Unternehmen praxisnah voran.

Share on facebook
Share on twitter
Share on linkedin
Share on xing
Share on whatsapp
Share on email

Wissen finden

  • Dr. Web Autoren
  • Amazon SEO
  • Content Marketing
  • CMS
  • CSS
  • Digitalisierung
  • E-Commerce
  • Freelancer
  • Jobs & Karriere
  • Online-Marketing
  • SEO
  • UX Design
  • Webdesign
  • Website erstellen
  • WordPress
  • WooCommerce
Menü
  • Dr. Web Autoren
  • Amazon SEO
  • Content Marketing
  • CMS
  • CSS
  • Digitalisierung
  • E-Commerce
  • Freelancer
  • Jobs & Karriere
  • Online-Marketing
  • SEO
  • UX Design
  • Webdesign
  • Website erstellen
  • WordPress
  • WooCommerce

Rechtliches

  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Nach oben ↑
Menü
  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Nach oben ↑

Für Agenturen & Unternehmer

  • Als Agentur eintragen
  • Beste Agenturen finden
  • Städte: von A bis Z.
  • Agenturen in Augsburg
  • Agenturen in Basel
  • Agenturen in Berlin
  • Agenturen in Bochum
  • Agenturen in Bonn
  • Agenturen in Bremen
  • Agenturen in Dortmund
  • Agenturen in Dresden
  • Agenturen in Duisburg
  • Agenturen in Düsseldorf
  • Agenturen in Essen
  • Agenturen in Frankfurt am Main
  • Agenturen in Freiburg
  • Agenturen in Hamburg
  • Agenturen in Hannover
  • Agenturen in Innsbruck
  • Agenturen in Karlsruhe
  • Agenturen in Köln
  • Agenturen in Leipzig
  • Agenturen in München
  • Agenturen in Münster
  • Agenturen in Nürnberg
  • Agenturen in Offenbach am Main
  • Agenturen in Regensburg
  • Agenturen in Salzburg
  • Agenturen in Stuttgart
  • Agenturen in Wien
  • Agenturen in Zürich
  • Digitalagentur finden
  • Webdesign-Agentur finden
  • Werbeagentur finden
Menü
  • Als Agentur eintragen
  • Beste Agenturen finden
  • Städte: von A bis Z.
  • Agenturen in Augsburg
  • Agenturen in Basel
  • Agenturen in Berlin
  • Agenturen in Bochum
  • Agenturen in Bonn
  • Agenturen in Bremen
  • Agenturen in Dortmund
  • Agenturen in Dresden
  • Agenturen in Duisburg
  • Agenturen in Düsseldorf
  • Agenturen in Essen
  • Agenturen in Frankfurt am Main
  • Agenturen in Freiburg
  • Agenturen in Hamburg
  • Agenturen in Hannover
  • Agenturen in Innsbruck
  • Agenturen in Karlsruhe
  • Agenturen in Köln
  • Agenturen in Leipzig
  • Agenturen in München
  • Agenturen in Münster
  • Agenturen in Nürnberg
  • Agenturen in Offenbach am Main
  • Agenturen in Regensburg
  • Agenturen in Salzburg
  • Agenturen in Stuttgart
  • Agenturen in Wien
  • Agenturen in Zürich
  • Digitalagentur finden
  • Webdesign-Agentur finden
  • Werbeagentur finden
Das große Dr. Web Icon-Set: 970+ Icons, im SVG-Format​

Lade Dir jetzt das Icon-Set
kostenlos herunter ↓

Über 970 Dr. Web-Icons, kostenlos.
Danke nein, ist nichts für mich.
Invalid email address
Vielen Dank! Bitte schau noch in Dein Postfach und bestätige die Anmeldung.