בנה לוגר פעילות אישי: 6 שלבים

2024 מְחַבֵּר: John Day | [email protected]. שונה לאחרונה: 2024-01-30 09:11

חבר שלי מלונדון, פול, רצה למצוא דרך לעקוב אחר האוכל, הפעילות והמיקום שלו בלוח מחוונים יחיד. אז הוא העלה את הרעיון ליצור טופס אינטרנט פשוט שישלח נתונים ללוח מחוונים. הוא היה מכניס את טופס האינטרנט ואת לוח המחוונים לדף אינטרנט ורשום את פעילותו תוך כדי תנועה. משם נוצר כונן הפעילויות! הקוד במדריך זה כולו פול, למעט כמה שינויים קלים בצבע, התאמה אישית של לוח המחוונים והסלנג (תרגום בריטי לאמריקאי שנעשה על ידי).

לפרויקט זה אנו הולכים להשתמש ב:

• קוד פן
• מצב התחלתי
• Netlify

אנו יוצרים מעקב אחר פעילויות אישיות אך בעקבות הדרכה וקוד זה תוכלו להפוך את זה לטופס אינטרנט ומעקב אחר כל דבר שתרצו! בואו נתחיל!

שלב 1: CodePen

CodePen היא סביבת פיתוח. זה מאפשר לך לכתוב את הקוד שלך בדפדפן ולראות את התוצאות שלו תוך כדי. יש לנו קוד ב- HTML, CSS ו- JavaScript ליצירת טופס אינטרנט עם נפתחים, תיבות טקסט ומיקום גיאוגרפי. אתה יכול להירשם בחינם כשהתנאי היחיד הוא שאתה לא יכול להפוך את הקוד שלך לפרטי, אליו נעסוק בהמשך.

ראשית, הירשם ל- CodePen. לאחר שתעשה זאת תוכל לזייף את הפרויקט שלי עם כל הקוד שכבר נוצר. פעולה זו תיצור עותק של הקוד בלוח המחוונים שלך. תראה HTML בצד שמאל, CSS במרכז, ו- JavaScript מימין. אם אתה מומחה בכל אלה, שכח לקרוא את השאר וערוך שינויים כרצונך! אם אתה חדש יותר בשפות אלה, להלן כמה הצעות לשינויים שתוכל לבצע בקלות.

HTML

פיסת קוד זו היא הפורמט לכל הנפתחים והתיבות. כאן תוכל לשנות את סוג הדברים שאתה עוקב אחריהם ומפרט אותם ברשימה הנפתחת. בתפריט הנפתח תרגיל, אתה יכול לשנות את סוגי הפעילויות (כרגע משקולות, ריצה, יוגה והתעמלות). אתה יכול להוסיף משהו לרשימה בעקבות הפורמט או להוסיף אפשרויות נוספות. אותם דברים לגבי סוג בשר, גודל וסוג קפה וגודל בירה. בתיבת הטקסט ג'אנק אתה יכול לשנות את מילות מציין המיקום (כרגע צ'יפס, שוקולד וכו '). אותו הדבר ניתן לעשות לגבי משקל (ק ג), פעילות גופנית (דקות) ובירה (אחוזי אחוז).

אתה יכול גם להשתמש במתאר זה ולשנות לחלוטין את הכותרות, האפשרויות הנפתחות ומצייני המיקום כדי להפוך את האינטרנט הזה לטופס שאתה רוצה.

CSS

פיסת קוד זו קובעת את צבע הרקע, יישור הטקסט ויישור העמודות. אם אתה רוצה לשנות את הרקע מ ורוד מבחיל למשהו נעים יותר פשוט השתמש בורר צבעים מקוון כדי למצוא את ערך הצבע הנכון. ניתן ליישר את הטקסט או העמודות ימינה, שמאלה או מרכזית.

JavaScript

פיסת קוד זו מפעילה את לחצן המיקום הגיאוגרפי ואת כפתור השליחה. אין הרבה כאן אני ממליץ לשנות.

יְצוּא

לאחר שהגדרת הכל לטעמך, לחץ על כפתור הייצוא בפינה השמאלית התחתונה ובחר ייצוא כ- zip. פעולה זו תוריד את הקוד לקובץ zip ותראה אותו בתיקיית ההורדות שלך.

שלב 2: מצב ראשוני

מצב ראשוני יאפשר לנו ליצור לוח מחוונים מותאם אישית של הפעילות שאנו עוקבים אחריה. אתה יכול להירשם לניסיון חינם למשך 14 יום. לאחר מכן זה בחינם לסטודנטים עם כתובת דוא ל edu או $ 9.99 לחודש עבור התוכנית האישית.

לאחר שנכנסת או נרשמת עבור למדף הדלי שלך וצור דלי זרם נתונים חדש על ידי לחיצה על כפתור צור דלי זרם (+ענן). אתה יכול לערוך את השם למה שאתה אוהב או לשנות אותו מאוחר יותר, בחרתי במעקב אחר פעילויות אישיות. אם תסמן את התיבה Light Theme תיתן ללוח המחוונים רקע לבן. לחץ על בוצע ודלי הזרם שלך ייווצר.

נצטרך מידע מהגדרות הדלי מאוחר יותר בכדי להכניס את קוד ה- HTML (API Endpoint & iframe הטמעה).

שלב 3: קוד Visual Studio

מכיוון שאני משתמש בגרסה החינמית של CodePen כל הקוד שלי ציבורי. מסיבה זו, אינני רוצה להכניס את נקודות הקצה של ה- API ואת ה- iframe שלי לקוד מכיוון שעליך לשמור על מפתחות הגישה למדינה הראשונית שלך פרטיים. קוד Visual Studio יאפשר לי לערוך את הקוד שלי באופן מקומי מקובץ ה- zip שהורדתי מ- CodePen. אתה יכול להוריד את הגרסה האחרונה בחינם מהאתר שלהם.

פתח את קובצי הקוד שלך ופתח את התיקייה הזו ב- Visual Studio Code. מכאן תוכל לערוך את קוד ה- HTML. לראש הקובץ תראה "ENTER API ENDPOINTS HERE". תוכל למצוא את נקודת הקצה של ה- API על ידי מעבר לדלי שיצרת על מצב ראשוני, לחץ על הגדרות ותחת הכרטיסייה נתונים תראה נקודת קצה API. העתק והדבק אותו בקוד ה- HTML. בתחתית קוד ה- HTML תראה "היכנס להטמיע שיתוף כאן". שוב לך לדלי שלך במצב התחלתי, עבור אל ההגדרות ולכרטיסייה שיתוף. לחץ על התיבה שתף באופן ציבורי ותראה שיתוף לפי הטמעה. העתק רק את כתובת האתר בתיבת השיתוף הטמע (היא תיראה בערך כמו "https://iot.app.initialstate.com/embed/#/tiles/xxxxxx"). הדבק את זה במרכאות. שמור את הקובץ ואנו מוכנים ליצור את דף האינטרנט שלנו.

שלב 4: Netlify

Netlify היא פלטפורמה מסוג All-in-One המאפשרת לך לבנות, לפרוס ולנהל פרויקט אינטרנט. אתה יכול להירשם בחינם אז עשה זאת. לאחר שנרשמת, בדף הראשי שלך תראה תיבה שאומרת "רוצה לפרוס אתר חדש מבלי להתחבר ל- Git? גרור ושחרר את אתר התיקיות שלך לכאן". אז גרור לשם את תיקיית הקבצים המעודכנת של CodePen ושחרר אותה. משם הוא יפרס את הקוד שלך וייצור קישור לדף האינטרנט החדש שלך. לחץ על הקישור ותראה את טופס האינטרנט ולוח המחוונים שלך.

עליך לשלוח כמה נתונים כדי שהאריחים שלך יופיעו. אז מלא את טופס האינטרנט שלך ולחץ על שלח. ברגע שאתה עושה את זה נכנס ללוח המחוונים של המצב הראשוני שלך. מכאן נוכל לשנות את סוגי האריחים, לשנות את גודל האריחים, להזיז את הפריסה, לשנות את צבעי הנתונים כך שיהיו נעימים יותר לעיניים, ולהוסיף כמה ביטויים בזמן אמת למפה לאמוג'ים. יש לך שתי אפשרויות להתאים את לוח המחוונים שלך לגודל ההטמעה: התאם את האריחים כך שיתאימו או התאם את גודל ההטמעה בקוד.

שלב 5: התאם אישית את לוח המחוונים שלך

גרפי מד

השתמשתי בשני סוגי מדידים בלוח המחוונים שלי: קשת ונוזל. כדי לשנות את סוג האריח לחץ באמצעות לחצן העכבר הימני על האריח ובחר ערוך אריח. פעולה זו תפתח את מגדר האריחים. עבור גודל הבירה בחרתי תרשים מד כסוג האריח ונוזל כסגנון מד. שיניתי גם את הכותרת, צבע מפתח האות וערכי המינימום/המקסימלי. עבור ה- Weight & Beer ABV השתמשתי בסגנון מד הקשת.

מפה לאמוג'ים

מיפיתי את סוג התרגיל וסוג הבשר לאימוג'ים באמצעות ביטויים בזמן אמת כך שתלוי איזה פריט בחרתי מהרשימה הנפתחת, יופיע אמוג'י ספציפי. אתה יכול לראות את הקוד שהשתמשתי בתמונות. אתה יכול להוסיף אמוג'ים ב- Mac על ידי הקשה על control+command+מקש רווח או ב- Windows מאתר זה.

שלח אמוג'ים בטופס אינטרנט

לדברים כמו ג'אנק אני אוהב לשלוח אמוג'ים ישירות ללוח המחוונים שלי. אני מעתיק ומדביק את האמוג'י בתיבת הטקסט של טופס האינטרנט ולוחץ על שלח ואז האימוג'י יופיע בלוח המחוונים שלי!

נדרש הרבה משחק כדי להתאים אישית את לוח המחוונים המושלם והאפשרויות הן אינסופיות.

תמונת רקע

אתה יכול להוסיף תמונת רקע ללוח המחוונים שלך כדי לתת לך נתונים יותר אישיות או הקשר.

שלב 6: מסקנה

בעוד פול בנה את זה כמעקב אחר פעילויות, הוא אכן הציע רעיונות אחרים כיצד ניתן להשתמש בזה עם כמה שינויים קטנים:

• הקפה/בירה/המסעדה הטובה ביותר בעיר העוקב
• איפה החברים או הילדים שלי כרגע ומה הם עושים? גַשָׁשׁ
• כרטיס גולף אינטראקטיבי - עוקב אחר ציונים וקורסים
• כונן טיסה במצנחי רחיפה - (לפול יש תחביבים מגניבים בהרבה ממני)

עכשיו אתה יכול לעקוב אחר הכל והכל. קוד זה מספק את המעטפת לכל סוג של טופס אינטרנט שתרצה ליצור. אז תשחק ותהיה יצירתי ותראה לי מה יש לך! וכמובן, כל הכבוד לפול על שעזר ליצור את זה!