Construire un enregistreur d'activité personnel : 6 étapes

2024 Auteur: John Day | [email protected]. Dernière modifié: 2024-01-30 09:05

Mon ami de Londres, Paul, voulait trouver un moyen de suivre sa nourriture, son activité et son emplacement dans un seul tableau de bord. C'est alors qu'il a eu l'idée de créer un formulaire Web simple qui enverrait des données à un tableau de bord. Il mettrait à la fois le formulaire Web et le tableau de bord dans une page Web et consignerait ses activités en déplacement. À partir de là, l'enregistreur d'activité a été créé ! Le code de ce didacticiel est tout Paul, à l'exception de quelques légers changements de couleur, de personnalisation du tableau de bord et d'argot (traduction du britannique vers l'américain effectuée par mes soins).

Pour ce projet, nous allons utiliser:

• Stylo de code
• Etat initial
• Netlify

Nous créons un tracker d'activité personnel, mais en suivant ce tutoriel et ce code, vous pouvez en faire un formulaire Web et un tracker pour tout ce que vous voulez ! Commençons!

Étape 1: CodePen

CodePen est un environnement de développement. Il vous permet d'écrire votre code dans le navigateur et d'en voir les résultats au fur et à mesure. Nous avons du code en HTML, CSS et JavaScript pour créer un formulaire Web avec des listes déroulantes, des zones de texte et une géolocalisation. Vous pouvez vous inscrire gratuitement à la seule condition que vous ne puissiez pas rendre votre code privé, ce que nous aborderons plus tard.

Tout d'abord, inscrivez-vous à CodePen. Une fois cela fait, vous pouvez Fork mon projet avec tout le code déjà créé. Cela créera une copie du code dans votre propre tableau de bord. Vous verrez HTML à gauche, CSS au centre et JavaScript à droite. Si vous êtes un expert dans tout cela, oubliez de lire le reste et apportez les modifications que vous voulez ! Si vous êtes nouveau dans ces langues, j'ai quelques suggestions ci-dessous sur les modifications que vous pouvez facilement apporter.

HTML

Ce morceau de code est le format de toutes les listes déroulantes et boîtes. C'est ici que vous pouvez modifier le type de choses que vous suivez et les listes dans les listes déroulantes. Dans la liste déroulante Exercice, vous pouvez modifier les types d'activité (actuellement Poids, Course, Yoga et Cardio). Vous pouvez ajouter quelque chose à la liste en suivant le format ou ajouter plus d'options. Il en va de même pour le type de viande, la taille et le type de café et la taille de bière. Dans la zone de texte indésirable, vous pouvez modifier les mots réservés (actuellement chips, chocolat, etc.). La même chose peut être faite pour le poids (lb), l'exercice (minutes) et la bière (abv %).

Vous pouvez également utiliser ce plan et modifier complètement les titres, les options déroulantes et les espaces réservés pour faire de ce formulaire Web le type de suivi de votre choix.

CSS

Ce morceau de code définit la couleur d'arrière-plan, l'alignement du texte et l'alignement des colonnes. Si vous souhaitez changer l'arrière-plan d'un rose nauséabond à quelque chose de plus agréable, utilisez simplement un sélecteur de couleurs en ligne pour trouver la bonne valeur de couleur. Vous pouvez aligner le texte ou les colonnes à droite, à gauche ou au centre.

JavaScript

Ce morceau de code fait fonctionner le bouton de géolocalisation et le bouton de soumission. Il n'y a pas grand-chose ici que je recommanderais de changer.

Exportation

Une fois que vous avez tout réglé à votre guise, cliquez sur le bouton d'exportation en bas à droite et sélectionnez exporter au format.zip. Cela téléchargera le code dans un fichier zip et vous le verrez dans votre dossier de téléchargements.

Étape 2: État initial

L'état initial nous permettra de créer un tableau de bord personnalisé de l'activité que nous suivons. Vous pouvez vous inscrire pour un essai gratuit de 14 jours. Après cela, il est gratuit pour les étudiants avec une adresse e-mail edu ou 9,99 $ par mois pour le plan individuel.

Une fois que vous vous êtes connecté ou inscrit, accédez à votre étagère de compartiments et créez un nouveau compartiment de flux de données en cliquant sur le bouton Créer un compartiment de flux (+cloud). Vous pouvez modifier le nom à votre guise ou le changer plus tard, j'ai choisi Personal Activity Tracker. Si vous cochez la case Thème clair, vous donnerez au tableau de bord un fond blanc. Cliquez sur Terminé et votre bucket de flux sera créé.

Nous aurons besoin des informations des paramètres du bucket plus tard pour les intégrer dans le code HTML (API Endpoint & iframe embed).

Étape 3: Code Visual Studio

Depuis que j'utilise la version gratuite de CodePen, tout mon code est public. Pour cette raison, je ne souhaite pas intégrer mes points de terminaison d'API et mon iframe dans le code, car vous devez garder vos clés d'accès à l'état initial privées. Visual Studio Code me permettra de modifier mon code localement à partir du fichier zip que j'ai téléchargé depuis CodePen. Vous pouvez télécharger gratuitement la dernière version sur leur site Web.

Décompressez vos fichiers de code et ouvrez ce dossier dans Visual Studio Code. De là, vous pouvez ensuite modifier le code HTML. Vers le haut du fichier, vous verrez « ENTER API ENDPOINTS HERE ». Vous pouvez trouver le point de terminaison de l'API en accédant au compartiment que vous avez créé sur État initial, cliquez sur Paramètres et sous l'onglet Données, vous verrez Point de terminaison de l'API. Copiez et collez ceci dans le code HTML. En bas du code HTML, vous verrez "ENTRER PARTAGER INTÉGRER ICI". Accédez à nouveau à votre compartiment dans l'état initial, accédez aux paramètres et à l'onglet Partage. Cliquez sur la case Partager publiquement et vous verrez Partager par intégration. Copiez uniquement l'URL dans la zone de partage d'intégration (elle ressemblera à "https://iot.app.initialstate.com/embed/#/tiles/xxxxxx"). Colle ça entre guillemets. Enregistrez le fichier et nous sommes prêts à créer notre page Web.

Étape 4: Netlify

Netlify est une plate-forme tout-en-un qui vous permet de créer, déployer et gérer un projet Web. Vous pouvez vous inscrire gratuitement alors faites-le. Une fois que vous êtes inscrit, sur votre page principale, vous verrez une boîte qui dit: « Vous voulez déployer un nouveau site sans vous connecter à Git ? Faites glisser et déposez votre site de dossiers ici. » Faites donc glisser votre dossier de fichiers CodePen mis à jour et déposez-le. À partir de là, il déploiera votre code et créera un lien vers votre nouvelle page Web. Cliquez sur le lien et vous verrez votre formulaire Web et votre tableau de bord.

Vous devez soumettre des données pour que vos tuiles s'affichent. Alors remplissez votre formulaire Web et cliquez sur Soumettre. Une fois cela fait, accédez à votre tableau de bord État initial. À partir de là, nous pouvons modifier les types de tuiles, redimensionner les tuiles, déplacer la mise en page, ajuster les couleurs des données pour qu'elles soient plus agréables pour les yeux et ajouter des expressions en temps réel à mapper aux emojis. Vous avez deux options pour adapter votre tableau de bord à la taille d'intégration: ajustez vos vignettes pour qu'elles s'adaptent ou ajustez la taille d'intégration dans le code.

Étape 5: Personnalisez votre tableau de bord

Graphiques de jauge

J'ai utilisé deux types de jauges dans mon tableau de bord: arc et liquide. Pour modifier le type de vignette, cliquez avec le bouton droit sur la vignette et sélectionnez Modifier la vignette. Cela ouvrira le configurateur Tile. Pour la taille de la bière, j'ai sélectionné Gauge Chart comme type de tuile et Liquid comme Gauge Style. J'ai également modifié le titre, la couleur de la clé de signal et les valeurs minimum/maximum. Pour le Weight & Beer ABV, j'ai utilisé le style de jauge en arc.

Carte des Emojis

J'ai mappé le type d'exercice et le type de viande aux emojis à l'aide d'expressions en temps réel. Ainsi, en fonction de l'élément que j'ai sélectionné dans la liste déroulante, un emoji spécifique s'afficherait. Vous pouvez voir le code que j'ai utilisé sur les photos. Vous pouvez ajouter des emojis sur un Mac en tapant contrôle+commande+barre d'espace ou sur Windows à partir de ce site Web.

Envoyer des emojis sous forme Web

Pour des choses comme Junk, j'aime envoyer des emojis directement sur mon tableau de bord. Je copie et colle l'emoji dans la zone de texte du formulaire Web et je clique sur soumettre, puis l'emoji s'affiche dans mon tableau de bord !

Il faut beaucoup de jeu pour personnaliser le tableau de bord parfait et les options sont infinies.

Image de fond

Vous pouvez ajouter une image d'arrière-plan à votre tableau de bord pour donner plus de personnalité ou de contexte aux données.

Étape 6: Conclusion

Alors que Paul l'a construit comme un tracker d'activité, il a proposé d'autres idées sur la façon dont cela pourrait être utilisé avec quelques modifications mineures:

• Meilleur café/bière/restaurant de la ville Tracker
• Où sont mes amis ou mes enfants en ce moment et que font-ils ? Traqueur
• Carte de score de golf interactive - Suivi des scores et des parcours
• Parapente Flight Logger - (Paul a des passe-temps beaucoup plus cool que moi)

Maintenant, vous pouvez suivre tout et n'importe quoi. Ce code fournit le shell pour tout type de formulaire Web que vous souhaitez créer. Alors jouez et soyez créatif et montrez-moi ce que vous avez ! Et évidemment, bravo à Paul pour avoir aidé à créer cela !