بناء مسجل نشاط شخصي: 6 خطوات

2024 مؤلف: John Day | [email protected]. آخر تعديل: 2024-01-30 07:36

أراد صديقي بول من لندن إيجاد طريقة لتتبع طعامه ونشاطه وموقعه في لوحة تحكم واحدة. هذا عندما توصل إلى فكرة إنشاء نموذج ويب بسيط يرسل البيانات إلى لوحة القيادة. كان يضع نموذج الويب ولوحة المعلومات في صفحة ويب ويسجل أنشطته أثناء التنقل. من هناك تم إنشاء مسجل النشاط! الكود في هذا البرنامج التعليمي هو كل شيء Paul ، باستثناء بعض التغييرات الطفيفة في اللون وتخصيص لوحة القيادة واللغة العامية (الترجمة البريطانية إلى الأمريكية التي قمت بها).

لهذا المشروع سوف نستخدم:

• كود
• الحالة الأولية
• نيتليفاي

نقوم بإنشاء متتبع نشاط شخصي ولكن باتباع هذا البرنامج التعليمي والرمز يمكنك تحويله إلى نموذج ويب ومتعقب لأي شيء تريده! هيا بنا نبدأ!

الخطوة 1: CodePen

CodePen هي بيئة تطوير. يسمح لك بكتابة التعليمات البرمجية الخاصة بك في المتصفح والاطلاع على نتائجها كما تذهب. لدينا كود في HTML و CSS و JavaScript لإنشاء نموذج ويب مع القوائم المنسدلة ومربعات النص والموقع الجغرافي. يمكنك التسجيل مجانًا بشرط وحيد هو أنه لا يمكنك جعل الرمز الخاص بك خاصًا ، والذي سنتناوله لاحقًا.

أولاً ، قم بالتسجيل في CodePen. بمجرد القيام بذلك ، يمكنك شوكة مشروعي بكل الكود الذي تم إنشاؤه بالفعل. سيؤدي هذا إلى إنشاء نسخة من الرمز في لوحة المعلومات الخاصة بك. سترى HTML على اليسار ، و CSS في المنتصف ، وجافا سكريبت على اليمين. إذا كنت خبيرًا في كل هذه الأمور ، فعليك أن تنسى قراءة الباقي وإجراء التغييرات كما تريد! إذا كنت حديث العهد بهذه اللغات ، فلدي بعض الاقتراحات أدناه حول التغييرات التي يمكنك إجراؤها بسهولة.

لغة البرمجة

هذا الجزء من التعليمات البرمجية هو التنسيق لجميع القوائم المنسدلة والمربعات. يمكنك هنا تغيير نوع الأشياء التي تتبعها والقوائم في القوائم المنسدلة. في القائمة المنسدلة "التمرين" ، يمكنك تغيير أنواع النشاط (حاليًا الأوزان والجري واليوجا وأمراض القلب). يمكنك إضافة شيء إلى القائمة باتباع التنسيق أو إضافة المزيد من الخيارات. الشيء نفسه ينطبق على نوع اللحوم ، وحجم القهوة ونوعها ، وحجم البيرة. في مربع النص غير الهام ، يمكنك تغيير كلمات العنصر النائب (حاليًا رقائق وشوكولاتة وما إلى ذلك). يمكن فعل الشيء نفسه بالنسبة للوزن (رطل) والتمرين (بالدقائق) والبيرة (أبف٪).

يمكنك أيضًا استخدام هذا المخطط التفصيلي وتغيير العناوين وخيارات القائمة المنسدلة والعناصر النائبة تمامًا لجعل نموذج الويب هذا أي نوع من أدوات التتبع التي تريدها.

CSS

يعيّن جزء التعليمات البرمجية هذا لون الخلفية ومحاذاة النص ومحاذاة العمود. إذا كنت ترغب في تغيير الخلفية من اللون الوردي المزعج إلى شيء أكثر إمتاعًا ، فما عليك سوى استخدام منتقي الألوان عبر الإنترنت للعثور على قيمة اللون المناسبة. يمكنك محاذاة النص أو الأعمدة إلى اليمين أو اليسار أو الوسط.

جافا سكريبت

يعمل هذا الجزء من الكود على زر تحديد الموقع الجغرافي وزر الإرسال. لا يوجد الكثير هنا أوصي بتغييره.

يصدر

بمجرد تعيين كل شيء حسب رغبتك ، انقر فوق الزر تصدير في أسفل اليمين وحدد تصدير بتنسيق zip. سيؤدي هذا إلى تنزيل الرمز في ملف مضغوط وسترى في مجلد التنزيلات.

الخطوة 2: الحالة الأولية

ستسمح لنا الحالة الأولية بإنشاء لوحة تحكم مخصصة للنشاط الذي نتتبعه. يمكنك التسجيل للحصول على نسخة تجريبية مجانية لمدة 14 يومًا. بعد ذلك ، يكون مجانيًا للطلاب الذين لديهم عنوان بريد إلكتروني تعليمي أو 9.99 دولارًا أمريكيًا شهريًا للخطة الفردية.

بمجرد تسجيل الدخول أو التسجيل ، انتقل إلى رف الجرافة الخاص بك وأنشئ دلوًا جديدًا لتدفق البيانات بالنقر فوق الزر إنشاء دلو التدفق (+ سحابة). يمكنك تعديل الاسم إلى ما تريد أو تغييره لاحقًا ، اخترت Personal Activity Tracker. إذا قمت بتحديد مربع Light Theme ، فستعطي لوحة القيادة خلفية بيضاء. انقر فوق "تم" وسيتم إنشاء دلو التدفق الخاص بك.

سنحتاج إلى معلومات من إعدادات الحاوية لاحقًا لوضعها في كود HTML (نقطة نهاية API & iframe embed).

الخطوة 3: رمز الاستوديو المرئي

نظرًا لأنني أستخدم الإصدار المجاني من CodePen ، فإن كل الكود الخاص بي أصبح عامًا. لهذا السبب ، لا أرغب في تضمين نقاط نهاية API و iframe في الكود لأنك تحتاج إلى الحفاظ على خصوصية مفاتيح الوصول الأولية. سيسمح لي Visual Studio Code بتحرير الكود الخاص بي محليًا من الملف المضغوط الذي قمت بتنزيله من CodePen. يمكنك تنزيل أحدث إصدار مجانًا من موقع الويب الخاص بهم.

قم بفك ضغط ملفات التعليمات البرمجية الخاصة بك وافتح هذا المجلد في Visual Studio Code. من هنا يمكنك تحرير كود HTML. في الجزء العلوي من الملف ، سترى "ENTER API ENDPOINTS HERE". يمكنك العثور على نقطة نهاية واجهة برمجة التطبيقات بالانتقال إلى الحاوية التي أنشأتها في الحالة الأولية ، والنقر فوق الإعدادات وضمن علامة التبويب البيانات سترى نقطة نهاية واجهة برمجة التطبيقات. انسخ هذا والصقه في كود HTML. في الجزء السفلي من رمز HTML ، سترى "ENTER EMBED SHARE HERE". انتقل مرة أخرى إلى الحاوية الخاصة بك في الحالة الأولية ، وانتقل إلى الإعدادات وعلامة التبويب المشاركة. انقر فوق مربع المشاركة علنًا وسترى مشاركة عن طريق التضمين. انسخ عنوان URL فقط في مربع مشاركة التضمين (سيبدو مثل "https://iot.app.initialstate.com/embed/#/tiles/xxxxxx"). الصق ذلك في علامات الاقتباس. احفظ الملف ونحن جاهزون لإنشاء صفحة الويب الخاصة بنا.

الخطوة 4: Netlify

Netlify عبارة عن نظام أساسي متعدد الإمكانات يتيح لك إنشاء مشروع ويب ونشره وإدارته. يمكنك التسجيل مجانا حتى تفعل ذلك. بمجرد التسجيل ، سترى على صفحتك الرئيسية مربعًا يقول "هل تريد نشر موقع جديد دون الاتصال بـ Git؟ اسحب موقع المجلد الخاص بك وأفلته هنا." لذا اسحب مجلد ملف CodePen المحدث هناك وقم بإفلاته. ومن هناك سيتم نشر الكود الخاص بك وإنشاء ارتباط إلى صفحة الويب الجديدة الخاصة بك. انقر فوق الارتباط وسترى نموذج الويب الخاص بك ولوحة المعلومات.

تحتاج إلى إرسال بعض البيانات لإظهار البلاط الخاص بك. لذا املأ نموذج الويب الخاص بك واضغط على إرسال. بمجرد القيام بذلك ، انتقل إلى لوحة معلومات الحالة الأولية. من هنا يمكننا تغيير أنواع المربعات ، وتغيير حجم المربعات ، وتحريك التخطيط ، وضبط ألوان البيانات لتكون أكثر إمتاعًا للعيون ، وإضافة بعض التعبيرات في الوقت الفعلي لتعيينها إلى الرموز التعبيرية. لديك خياران لجعل لوحة القيادة تتلاءم مع حجم التضمين: اضبط البلاط لتلائم أو اضبط حجم التضمين في الكود.

الخطوة 5: تخصيص لوحة القيادة الخاصة بك

قياس الرسوم البيانية

لقد استخدمت نوعين من أجهزة القياس في لوحة القيادة الخاصة بي: القوس والسائل. لتغيير نوع Tile ، انقر بزر الماوس الأيمن على Tile وحدد Edit Tile. سيؤدي هذا إلى فتح مُكوِّن البلاط. بالنسبة إلى حجم البيرة ، اخترت مخطط القياس كنوع البلاط والسائل كنمط المقياس. لقد غيرت العنوان ولون مفتاح الإشارة والقيم الدنيا / القصوى أيضًا. بالنسبة إلى الوزن والبيرة ABV ، استخدمت أسلوب مقياس القوس.

الخريطة إلى Emojis

لقد قمت بتعيين نوع التمرين ونوع اللحوم إلى الرموز التعبيرية باستخدام تعبيرات الوقت الفعلي ، لذا بناءً على العنصر الذي حددته من القائمة المنسدلة ، سيظهر رمز تعبيري محدد. يمكنك رؤية الكود الذي استخدمته في الصور. يمكنك إضافة رموز تعبيرية على جهاز Mac عن طريق الضغط على control + command + spacebar أو على Windows من موقع الويب هذا.

إرسال الرموز التعبيرية في نموذج الويب

بالنسبة لأشياء مثل البريد غير الهام ، أود إرسال الرموز التعبيرية مباشرة إلى لوحة التحكم الخاصة بي. أقوم بنسخ ولصق الرموز التعبيرية في مربع نص نموذج الويب والنقر فوق إرسال ، ثم يظهر الرمز التعبيري في لوحة المعلومات الخاصة بي!

يتطلب الأمر الكثير من اللعب لتخصيص لوحة القيادة المثالية والخيارات لا حصر لها.

الصورة الخلفية

يمكنك إضافة صورة خلفية إلى لوحة المعلومات لمنحك المزيد من البيانات الشخصية أو السياق.

الخطوة السادسة: الخاتمة

بينما قام بول ببناء هذا كمتعقب للنشاط ، فقد قدم أفكارًا أخرى حول كيفية استخدام هذا مع بعض التغييرات الطفيفة:

• أفضل قهوة / بيرة / مطعم في Town Tracker
• أين أصدقائي أو أطفالي الآن وماذا يفعلون؟ تعقب
• بطاقة النتائج التفاعلية للجولف - النتائج والدورات تعقب
• مسجل الطيران بالمظلات - (لدى بول هوايات أكثر برودة مني)

الآن يمكنك تتبع أي شيء وكل شيء. يوفر هذا الرمز الغلاف لأي نوع من نماذج الويب التي تريد إنشاءها. لذا العب حولها وكن مبدعًا وأظهر لي ما حصلت عليه! ومن الواضح ، تحياتي لبول لمساعدته في إنشاء هذا!