Erstellen Sie einen persönlichen Aktivitätslogger - Gunook

2024 Autor: John Day | [email protected]. Zuletzt bearbeitet: 2024-01-30 07:15

Mein Freund aus London, Paul, wollte eine Möglichkeit finden, sein Essen, seine Aktivitäten und seinen Standort in einem einzigen Dashboard zu verfolgen. Dabei kam ihm die Idee, ein einfaches Webformular zu erstellen, das Daten an ein Dashboard sendet. Er würde sowohl das Webformular als auch das Dashboard in eine Webseite einfügen und seine Aktivitäten unterwegs protokollieren. Von dort wurde der Aktivitätslogger erstellt! Der Code in diesem Tutorial ist ausschließlich Paul, mit Ausnahme einiger geringfügiger Änderungen in Farbe, Dashboard-Anpassung und Slang (von mir erstellte Übersetzung von britisch ins amerikanische).

Für dieses Projekt verwenden wir:

• CodePen
• Ausgangszustand
• Netlify

Wir erstellen einen persönlichen Aktivitätstracker, aber nach diesem Tutorial und Code können Sie daraus ein Webformular und einen Tracker für alles machen, was Sie wollen! Lass uns anfangen!

Schritt 1: CodePen

CodePen ist eine Entwicklungsumgebung. Es ermöglicht Ihnen, Ihren Code im Browser zu schreiben und die Ergebnisse dabei zu sehen. Wir haben Code in HTML, CSS und JavaScript, um ein Webformular mit Dropdown-Menüs, Textfeldern und Geolokalisierung zu erstellen. Sie können sich kostenlos anmelden, mit der einzigen Bedingung, dass Sie Ihren Code nicht privat machen können, worauf wir später eingehen werden.

Melden Sie sich zuerst für CodePen an. Sobald Sie dies getan haben, können Sie mein Projekt mit dem gesamten bereits erstellten Code verzweigen. Dadurch wird eine Kopie des Codes in Ihrem eigenen Dashboard erstellt. Links sehen Sie HTML, in der Mitte CSS und rechts JavaScript. Wenn Sie ein Experte in all diesen Fragen sind, vergessen Sie den Rest zu lesen und nehmen Sie nach Belieben Änderungen vor! Wenn Sie diese Sprachen noch nicht kennen, habe ich unten einige Vorschläge zu Änderungen, die Sie leicht vornehmen können.

HTML

Dieser Code ist das Format für alle Dropdown-Listen und Felder. Hier können Sie die Art der Dinge ändern, die Sie verfolgen und in den Dropdown-Listen auflisten. Im Dropdown-Menü Training können Sie die Aktivitätsarten ändern (derzeit Gewichte, Laufen, Yoga und Cardio). Sie können der Liste nach dem Format etwas hinzufügen oder weitere Optionen hinzufügen. Das gleiche gilt für Fleischsorte, Kaffeegröße und -sorte und Biergröße. Im Textfeld Junk können Sie die Platzhalterwörter (derzeit Chips, Schokolade usw.) ändern. Das gleiche kann für Gewicht (lbs), Training (Minuten) und Bier (Volumen%) durchgeführt werden.

Sie können diese Gliederung auch verwenden und die Titel, Dropdown-Optionen und Platzhalter vollständig ändern, um dieses Webformular zu einer beliebigen Art von Tracker zu machen.

CSS

Dieser Codeabschnitt legt die Hintergrundfarbe, Textausrichtung und Spaltenausrichtung fest. Wenn Sie den Hintergrund von ekelerregendem Rosa in etwas angenehmeres ändern möchten, verwenden Sie einfach einen Online-Farbwähler, um den richtigen Farbwert zu finden. Sie können den Text oder die Spalten rechts, links oder zentriert ausrichten.

JavaScript

Dieser Code funktioniert mit der Geolocation-Schaltfläche und der Senden-Schaltfläche. Hier gibt es nicht viel, was ich zum Wechseln empfehlen würde.

Export

Wenn Sie alles nach Ihren Wünschen eingerichtet haben, klicken Sie unten rechts auf die Schaltfläche Exportieren und wählen Sie als.zip exportieren. Dadurch wird der Code in eine ZIP-Datei heruntergeladen und in Ihrem Download-Ordner angezeigt.

Schritt 2: Ausgangszustand

Der Anfangszustand ermöglicht es uns, ein benutzerdefiniertes Dashboard der von uns verfolgten Aktivität zu erstellen. Sie können sich für eine 14-tägige kostenlose Testversion anmelden. Danach ist es kostenlos für Studenten mit einer edu-E-Mail-Adresse oder 9,99 USD pro Monat für den Individualplan.

Nachdem Sie sich angemeldet oder registriert haben, gehen Sie zu Ihrem Bucket-Shelf und erstellen Sie einen neuen Datenstream-Bucket, indem Sie auf die Schaltfläche Stream-Bucket erstellen (+Cloud) klicken. Sie können den Namen nach Belieben bearbeiten oder später ändern. Ich habe mich für Personal Activity Tracker entschieden. Wenn Sie das Kontrollkästchen Light Theme aktivieren, erhalten Sie einen weißen Hintergrund für das Dashboard. Klicken Sie auf Fertig und Ihr Stream-Bucket wird erstellt.

Wir benötigen später Informationen aus den Bucket-Einstellungen, um sie in den HTML-Code (API-Endpunkt & iframe-Einbettung) einzufügen.

Schritt 3: Visual Studio-Code

Da ich die kostenlose Version von CodePen verwende, ist mein gesamter Code öffentlich. Aus diesem Grund möchte ich meine API-Endpunkte und den iframe nicht in den Code einbetten, da Sie Ihre Zugriffsschlüssel für den Anfangszustand privat halten müssen. Visual Studio Code ermöglicht es mir, meinen Code lokal aus der ZIP-Datei zu bearbeiten, die ich von CodePen heruntergeladen habe. Sie können die neueste Version kostenlos von ihrer Website herunterladen.

Entpacken Sie Ihre Codedateien und öffnen Sie diesen Ordner in Visual Studio Code. Von hier aus können Sie dann den HTML-Code bearbeiten. Oben in der Datei sehen Sie „API-ENDPUNKTE HIER EINGEBEN“. Sie finden den API-Endpunkt, indem Sie zu dem Bucket gehen, den Sie im Initial State erstellt haben, auf Einstellungen klicken und auf der Registerkarte Daten sehen Sie API-Endpunkt. Kopieren Sie diese und fügen Sie sie in den HTML-Code ein. Unten im HTML-Code sehen Sie "ENTER EMBED SHARE HERE". Gehen Sie erneut zu Ihrem Bucket im Initial State, gehen Sie zu den Einstellungen und zur Registerkarte Sharing. Klicken Sie auf das Feld „Öffentlich teilen“und Sie sehen „Nach Einbetten teilen“. Kopieren Sie nur die URL in das Feld zum Einbetten der Freigabe (sie sieht etwa so aus wie "https://iot.app.initialstate.com/embed/#/tiles/xxxxxx"). Fügen Sie das in die Anführungszeichen ein. Speichern Sie die Datei und wir können unsere Webseite erstellen.

Schritt 4: Netlify

Netlify ist eine All-in-One-Plattform, mit der Sie ein Webprojekt erstellen, bereitstellen und verwalten können. Sie können sich kostenlos anmelden, also tun Sie das. Sobald Sie sich angemeldet haben, sehen Sie auf Ihrer Hauptseite ein Feld mit der Aufschrift „Möchten Sie eine neue Site bereitstellen, ohne eine Verbindung zu Git herzustellen? Ziehen Sie Ihre Ordner-Site hierher und legen Sie sie dort ab.“Ziehen Sie also Ihren aktualisierten CodePen-Dateiordner dorthin und legen Sie ihn ab. Von dort wird Ihr Code bereitgestellt und ein Link zu Ihrer neuen Webseite erstellt. Klicken Sie auf den Link und Sie sehen Ihr Webformular und Ihr Dashboard.

Sie müssen einige Daten übermitteln, damit Ihre Kacheln angezeigt werden. Füllen Sie also Ihr Webformular aus und klicken Sie auf Senden. Sobald Sie dies getan haben, gehen Sie in Ihr Initial State-Dashboard. Von hier aus können wir Kacheltypen ändern, Kacheln in der Größe ändern, das Layout verschieben, die Datenfarben so anpassen, dass sie für die Augen angenehmer sind, und einige Echtzeit-Ausdrücke hinzufügen, um Emojis zuzuordnen. Sie haben zwei Möglichkeiten, Ihr Dashboard an die Einbettungsgröße anzupassen: Passen Sie Ihre Tiles an die Größe an oder passen Sie die Einbettungsgröße im Code an.

Schritt 5: Passen Sie Ihr Dashboard an

Gauge-Diagramme

Ich habe zwei Arten von Messgeräten in meinem Dashboard verwendet: Bogen und Flüssigkeit. Um den Kacheltyp zu ändern, klicken Sie mit der rechten Maustaste auf die Kachel und wählen Sie Kachel bearbeiten. Dies öffnet den Kachel-Konfigurator. Für die Biergröße habe ich Gauge Chart als Kacheltyp und Liquid als Gauge Style gewählt. Ich habe auch den Titel, die Signalschlüsselfarbe und die Mindest-/Höchstwerte geändert. Für das Weight & Beer ABV habe ich den Bogenmaßstil verwendet.

Karte zu Emojis

Ich habe den Übungstyp und den Fleischtyp Emojis mithilfe von Echtzeitausdrücken zugeordnet, sodass je nachdem, welches Element ich aus der Dropdown-Liste ausgewählt habe, ein bestimmtes Emoji angezeigt wird. Sie können den Code sehen, den ich auf den Fotos verwendet habe. Sie können Emojis auf einem Mac hinzufügen, indem Sie Strg+Befehl+Leertaste oder unter Windows von dieser Website aus eingeben.

Emojis im Webformular senden

Für Dinge wie Junk schicke ich gerne Emojis direkt an mein Dashboard. Ich kopiere das Emoji und füge es in das Textfeld des Webformulars ein und klicke auf Senden, dann wird das Emoji in meinem Dashboard angezeigt!

Es braucht viel herumprobieren, um das perfekte Dashboard anzupassen, und die Optionen sind endlos.

Hintergrundbild

Sie können Ihrem Dashboard ein Hintergrundbild hinzufügen, um Ihren Daten mehr Persönlichkeit oder Kontext zu verleihen.

Schritt 6: Fazit

Während Paul dies als Aktivitätstracker baute, bot er andere Ideen an, wie dies mit einigen geringfügigen Änderungen verwendet werden könnte:

• Bestes Kaffee/Bier/Restaurant in der Stadt Tracker
• Wo sind meine Freunde oder Kinder gerade und was machen sie? Tracker
• Interaktive Golf Scorecard - Scores & Courses Tracker
• Paragliding Flight Logger - (Paul hat viel coolere Hobbys als ich)

Jetzt können Sie alles und alles verfolgen. Dieser Code stellt die Shell für jede Art von Webformular bereit, das Sie erstellen möchten. Also spielen Sie herum und werden Sie kreativ und zeigen Sie mir, was Sie haben! Und natürlich ein Hoch auf Paul, dass er mitgeholfen hat, dies zu schaffen!