یک فعالیت ثبت کننده فعالیت شخصی بسازید: 6 مرحله

2024 نویسنده: John Day | [email protected]. آخرین اصلاح شده: 2024-01-30 08:51

دوست من از لندن ، پل ، می خواست راهی برای ردیابی غذا ، فعالیت و موقعیت مکانی خود در یک داشبورد پیدا کند. در آن زمان بود که او به فکر ایجاد یک فرم وب ساده که داده ها را به داشبورد ارسال می کرد ، افتاد. او هم فرم وب و هم داشبورد را در صفحه وب قرار می داد و فعالیت های خود را در حال حرکت ثبت می کرد. از آنجا فعالیت ثبت کننده ایجاد شد! کد موجود در این آموزش به جز برخی تغییرات جزئی در رنگ ، سفارشی سازی داشبورد و عامیانه (ترجمه بریتانیایی به آمریکایی توسط من) ، همه Paul است.

برای این پروژه ما قصد داریم از موارد زیر استفاده کنیم:

• CodePen
• حالت اولیه
• Netlify

ما یک ردیاب فعالیت شخصی ایجاد می کنیم اما با دنبال کردن این آموزش و کد می توانید آن را به صورت وب و ردیاب برای هر چیزی که می خواهید ایجاد کنید! بیایید شروع کنیم!

مرحله 1: CodePen

CodePen محیط توسعه است. این به شما امکان می دهد کد خود را در مرورگر بنویسید و نتایج آن را در حین حرکت مشاهده کنید. ما در HTML ، CSS و جاوا اسکریپت کد داریم تا یک فرم وب با کشویی ، کادرهای متنی و موقعیت مکانی ایجاد کنیم. شما می توانید به صورت رایگان ثبت نام کنید با این شرط که نمی توانید کد خود را خصوصی کنید ، که بعداً به آن خواهیم پرداخت.

ابتدا برای CodePen ثبت نام کنید. هنگامی که این کار را انجام دادید می توانید پروژه من را با تمام کدهای ایجاد شده فورک کنید. این یک کپی از کد را در داشبورد خود ایجاد می کند. HTML را در سمت چپ ، CSS را در مرکز و JavaScript را در سمت راست مشاهده خواهید کرد. اگر در همه این موارد متخصص هستید ، خواندن بقیه را فراموش کرده و هر طور که دوست دارید تغییر دهید! اگر با این زبانها جدیدتر هستید ، در زیر تعدادی از پیشنهاداتی را که می توانید به راحتی ایجاد کنید ، دارم.

HTML

این قطعه کد قالب همه بازشوها و کادرها است. در اینجا است که می توانید نوع مواردی را که در فهرست کشویی ردیابی و لیست می کنید تغییر دهید. در کرکره Exercise ، می توانید انواع فعالیت ها (در حال حاضر وزنه ، دویدن ، یوگا و کاردیو) را تغییر دهید. می توانید مطابق قالب چیزی را به لیست اضافه کنید یا گزینه های بیشتری اضافه کنید. موارد مشابه در مورد نوع گوشت ، اندازه و نوع قهوه و اندازه آبجو صادق است. در کادر متنی Junk می توانید کلمات متغیر (در حال حاضر چیپس ، شکلات و غیره) را تغییر دهید. همین کار را می توان برای وزن (lbs) ، ورزش (دقیقه) و آبجو (abv)) انجام داد.

همچنین می توانید از این طرح کلی استفاده کرده و عناوین ، گزینه های کشویی و متغیرهایی را به طور کامل تغییر دهید تا این وب از هر نوع ردیابی که می خواهید تشکیل دهد.

CSS

این قطعه کد رنگ پس زمینه ، تراز متن و تراز ستون را تنظیم می کند. اگر می خواهید زمینه را از حالت تهوع صورتی به چیزی دلپذیرتر تغییر دهید ، فقط از یک انتخاب کننده رنگ آنلاین برای پیدا کردن ارزش رنگ مناسب استفاده کنید. می توانید متن یا ستون ها را در راست ، چپ یا مرکز تراز کنید.

جاوا اسکریپت

این قطعه کد روی دکمه موقعیت مکانی و ارسال کار می کند. در اینجا چیز زیادی وجود ندارد که توصیه می کنم تغییر دهید.

صادرات

وقتی همه چیز را مطابق میل خود تنظیم کردید ، روی دکمه صادرات در پایین سمت راست کلیک کنید و صادرات را به عنوان.zip انتخاب کنید. این کد را در یک فایل زیپ بارگیری می کند و آن را در پوشه بارگیری خود مشاهده می کنید.

مرحله 2: حالت اولیه

حالت اولیه به ما امکان می دهد داشبورد سفارشی از فعالیتهایی را که دنبال می کنیم ایجاد کنیم. می توانید برای یک دوره آزمایشی 14 روزه رایگان ثبت نام کنید. پس از آن برای دانش آموزان با آدرس ایمیل edu یا 9.99 دلار در ماه برای برنامه فردی رایگان است.

پس از ثبت نام یا ثبت نام به قفسه سطل خود رفته و با کلیک روی دکمه ایجاد سطل جریان (+ابر) یک سطل جریان داده جدید ایجاد کنید. می توانید نام را به هر چیزی که دوست دارید ویرایش کنید یا بعداً تغییر دهید ، من Personal Activity Tracker را انتخاب کردم. اگر کادر Light Light را علامت بزنید ، به داشبورد یک پس زمینه سفید می دهید. روی انجام کلیک کنید و سطل جریان شما ایجاد می شود.

بعداً به اطلاعاتی از تنظیمات سطل نیاز داریم تا در کد HTML قرار دهیم (API Endpoint & iframe embed).

مرحله 3: کد ویژوال استودیو

از آنجا که من از نسخه رایگان CodePen استفاده می کنم ، همه کد من عمومی است. به همین دلیل ، من نمی خواهم نقاط پایانی API و iframe خود را در کد قرار دهم زیرا شما باید کلیدهای دسترسی اولیه خود را خصوصی نگه دارید. Visual Studio Code به من امکان می دهد کد خود را به صورت محلی از فایل فشرده ای که از CodePen بارگیری کرده ام ویرایش کنم. می توانید آخرین نسخه را به صورت رایگان از وب سایت آنها بارگیری کنید.

فایل های کد خود را از حالت فشرده خارج کرده و آن پوشه را در Visual Studio Code باز کنید. از اینجا می توانید کد HTML را ویرایش کنید. در بالای فایل "ENTER API ENDPOINTS HERE" را مشاهده می کنید. با رفتن به سطلی که در حالت اولیه ایجاد کرده اید ، می توانید API Endpoint را بیابید ، روی تنظیمات کلیک کنید و در زبانه Data ، API Endpoint را مشاهده خواهید کرد. این را کپی کرده و در کد HTML قرار دهید. در پایین کد HTML "ENTER EMBED SHARE HERE" را مشاهده خواهید کرد. دوباره به سطل خود در حالت اولیه بروید ، به تنظیمات و تب Sharing بروید. روی کادر اشتراک گذاری عمومی کلیک کنید و Share by Embed را مشاهده خواهید کرد. فقط URL را در جعبه اشتراک گذاری جاسازی کنید (مانند "https://iot.app.initialstate.com/embed/#/tiles/xxxxxx"). آن را در علامت نقل قول بچسبانید. فایل را ذخیره کنید و ما آماده ایجاد صفحه وب خود هستیم.

مرحله 4: Netlify

Netlify یک پلت فرم همه کاره است که به شما امکان می دهد یک پروژه وب بسازید ، استقرار و مدیریت کنید. می توانید به صورت رایگان ثبت نام کنید بنابراین این کار را انجام دهید. پس از ثبت نام ، در صفحه اصلی خود کادری را می بینید که می گوید: "می خواهید بدون اتصال به Git یک سایت جدید مستقر کنید؟ سایت پوشه خود را اینجا بکشید و رها کنید." بنابراین پوشه فایل به روز شده CodePen خود را به آنجا بکشید و آن را رها کنید. از آنجا کد شما مستقر شده و پیوندی به صفحه وب جدید شما ایجاد می شود. روی پیوند کلیک کنید تا فرم وب و داشبورد خود را مشاهده کنید.

برای نمایش کاشی های خود باید برخی از داده ها را ارسال کنید. بنابراین فرم وب خود را پر کرده و ارسال را فشار دهید. پس از انجام این کار به داشبورد حالت اولیه خود بروید. از اینجا می توانیم انواع کاشی ها را تغییر دهیم ، اندازه کاشی ها را تغییر دهیم ، طرح را جابجا کنیم ، رنگ های داده را طوری تنظیم کنیم که برای چشم ها خوشایندتر باشد و برخی از عبارات زمان واقعی را به نقشه به ایموجی ها اضافه کنیم. شما دو گزینه برای مطابقت داشبورد با اندازه جاسازی دارید: کاشی های خود را متناسب با اندازه جاسازی شده در کد تنظیم کنید.

مرحله 5: داشبورد خود را سفارشی کنید

نمودارهای گاج

من از دو نوع سنج در داشبورد خود استفاده کردم: قوس و مایع. برای تغییر نوع کاشی روی Tile راست کلیک کرده و Edit Tile را انتخاب کنید. با این کار تنظیم کننده Tile باز می شود. برای اندازه آبجو ، من Gauge Chart را به عنوان نوع کاشی و Liquid را به عنوان Gauge Style انتخاب کردم. عنوان ، رنگ کلید سیگنال و حداقل/حداکثر مقادیر را نیز تغییر دادم. برای Weight & Beer ABV از سبک طاق سنج استفاده کردم.

نقشه به Emojis

من نوع تمرین و نوع گوشت را روی ایموجی ها با استفاده از عبارت های زمان واقعی ترسیم کردم ، بنابراین بسته به اینکه کدام مورد را از لیست کشویی انتخاب کرده ام ، یک ایموجی خاص ظاهر می شود. شما می توانید کدی را که در عکس استفاده کرده اید مشاهده کنید. می توانید ایموجی ها را در Mac با فشار دادن کلید+فرمان+فاصله یا در Windows از این وب سایت اضافه کنید.

ایموجی ها را در قالب وب ارسال کنید

برای مواردی مانند Junk ، دوست دارم ایموجی ها را مستقیماً به داشبورد خود ارسال کنم. من ایموجی را در کادر متن فرم وب کپی و جایگذاری می کنم و روی ارسال کلیک می کنم سپس ایموجی در داشبورد من ظاهر می شود!

برای سفارشی کردن داشبورد کامل بازی زیاد لازم است و گزینه ها بی پایان هستند.

تصویر پس زمینه

می توانید یک تصویر پس زمینه به داشبورد خود اضافه کنید تا به داده ها شخصیت یا زمینه بیشتری بدهید.

مرحله 6: نتیجه گیری

در حالی که پل این را به عنوان یک ردیاب فعالیت ایجاد کرد ، ایده های دیگری در مورد نحوه استفاده از آن با برخی تغییرات جزئی ارائه داد:

• بهترین قهوه/آبجو/رستوران در Town Tracker
• دوستان یا بچه های من در حال حاضر کجا هستند و چه کار می کنند؟ ردیاب
• کارت امتیازی گلف تعاملی - ردیاب نمرات و دوره ها
• Paragliding Flight Logger - (پل سرگرمی های جالب تری نسبت به من دارد)

اکنون می توانید همه چیز و همه چیز را ردیابی کنید. این کد پوسته را برای هر نوع فرم وب که می خواهید ایجاد کنید ، ارائه می دهد. بنابراین بازی کنید و خلاق باشید و آنچه را که دارید به من نشان دهید! و بدیهی است که به پل کمک می کنید تا به ایجاد آن کمک کند!