همه‌ی ما می‌دانیم که گاهی اوقات، یافتن ایده‌های جدید و کاربردی به منظور بهبود یا یادگیری یک زبان و فریمورک جدید برنامه نویسی، می‌تواند دشوار باشد.از همین رو، در این مقاله به ۱۵ ایده برای ساخت برنامه می‌پردازیم، که :
برای بهبود مهارت کدنویسی شما عالی است
برای تست فن‌آوری‌های جدید بسیار کاربردی است
برای اینکه به نمونه کارهایتان اضافه کنید و کارفرما/مشتری بعدی را تحت تأثیر قرار دهید، فوق‌العاده است
آسان به جهت تکمیل و قابل گسترش و توسعه با ویژگی‌های جدید
برای یادگیری یک زبان یا فریمورک جدید نیز قابل استفاده و مفید می‌باشد
و مهم‌تر از آن، در هر ایده‌ی ساخت برنامه :هدف برنامه را به وضوح شرح داده.
لیستی از user stories (داستان کاربر – ویژگی‌ها و عملکردهایی که کاربر از ما می‌خواهد) در آن وجود دارد.
لیستی از ویژگی‌های اضافی و بیشتر، که به صورت آپشن می‌باشد(داشتن آنها خوب است) را داراست.
تمام منابع و لینک‌هایی که به شما کمک می‌کند تا آنچه را که برای تکمیل پروژه مورد نیاز است، پیدا کنید، را دارد.
همچنین این ایده‌ها را بر اساس دانش و تجربه مورد نیاز برای تکمیل آنها، به سه سطح تقسیم کردیم؛ این سطح‌ها عبارتند از : مبتدی، متوسط، پیشرفته.
در این مقاله ۵ ایده از هر سطح پیدا خواهید کرد ( در این جا به سطح مبتدی پرداختیم).
۱. تایمر شمارش معکوس
همه‌ی ما اتفاقات مهمی در زندگی داریم، تولدها، سالگردها و تعطیلات که منتظر آن هستیم؛ خوب نیست برنامه‌ای داشته باشید که ماه‌ها، روزها، ساعت‌ها، دقیقه‌ها و ثانیه‌ها را برای یک رویداد حساب کند؟ تایمر شمارش معکوس همان برنامه است!
هدف از تایمر شمارش معکوس، ارائه‌ی یک نمایش مداوم از کاهش ماه‌ها، روزها، ساعت‌ها، دقیقه‌ها و ثانیه‌ها برای کاربری است که در آن رویداد است.
محدودیت‌ها
- فقط از توابع داخلی زبان برای محاسبات خود استفاده کنید، تا اینکه به کتابخانه یا پکیجی مثل MomentJS تکیه کنید؛ البته بر فرض اینکه زبان مورد نظر شما دارای عمل‌کرد‌های مناسبی برای دستکاری تاریخ و زمان است.
- شما نباید از هیچ code generator مانند سایت Counting Down To استفاده کنید؛ بلکه باید آن برنامه‌ای که خودتان می‌خواهید پیاده‌سازی کنید را توسعه دهید.
داستان‌های کاربر (user stories)
- کاربر می‌تواند یک باکس ورودی که شامل فیلد نام رویداد، فیلد تاریخ، یک optional time و یک دکمه‌ی start را مشاهده کند.
- کاربر می‌تواند با وارد کردن نام رویداد مورد نظرش، تاریخی که قرار است در آن برگزار شود و یک زمان دلخواه برای آن رویداد تعریف کند.
- اگر فیلد نام رویداد خالی باشد، کاربر پیغام هشدار دریافت می‌کند.
- اگر تاریخ یا زمان رویداد اشتباه وارد شده باشد،کاربر یک پیغام هشدار دریافت می‌کند.
- کاربر می‌تواند روی دکمه‌ی start کلیک کند تا تایمر شمارش معکوس شروع به نمایش روزها، ساعت‌ها، دقیقه‌ها و ثانیه‌هایی که تا زمان وقوع آن رویداد مانده را نمایش دهد.
- کاربر می‌تواند المنت‌های موجود در تایمر را که به صورت خودکار کاهش پیدا می‌کند تماشا کند؛ به عنوان مثال، هنگامی که شمارش ثانیه‌های باقیمانده به صفر می‌رسد، شمارش دقیقه‌ی باقیمانده یکی کاهش می‌یابد و ثانیه‌ها از ۵۹ شروع به شمارش معکوس می‌کند.
ویژگی‌های بیشتر
- کاربر می‌تواند رویداد را طوری حفظ کند که یک‌سره در session ها ادامه‌پیدا کند.
- کاربر می‌تواند هنگام رسیدن به رویداد، یک پیغام دریافت کند.
- کاربر می‌تواند بیش از یک رویداد را مشخص کند.
- کاربر می‌تواند تایمر شمارش معکوس را برای هر رویدادی که تعریف شده، ببیند.
لینک‌ها و منابع مفید
- عکس‌های تایمر شمارش معکوس مبتنی بر tube های آنالوگ را می‌توانید در اینجا مشاهد کنید.
- clearInterval MDN
- setInterval MDN
- Date MDN
نمونه پروژهها
Flip Image .۲
برای توسعه‌دهنگان وب مهم است که اصول دستکاری تصاویر را بدانند، چراکه برنامه‌های غنی وب، متکی به تصاویر هستند تا به رابط کاربری و تجربه‌کاربر (UI/UX) ارزش بدهند.
Flip Image یک جنبه از دستکاری تصویر را بررسی می‌کند – چرخش تصویر. این برنامه یک صفحه مربع حاوی یک تصویر در یک ماتریس ۲×۲ را نشان می‌دهد. با استفاده از مجموعه‌ای از فلش‌های بالا، پایین، چپ و راست. در کنار هر یک از تصاویر، کاربر می‌تواند آنها را به صورت عمومی یا افقی بچرخاند.
برای اجرای این برنامه فقط باید از JavaScrip / HTML / Css استفاده کنید. استفاده از پکیج‌ها وکتابخانه‌های تصویر مجاز نیست.
داستان‌های کاربر (user stories)
- کاربر می‌تواند یک صفحه حاوی یک تصویر که در یک ماتریس ۲×۲ تکرار شده را مشاهده کند.
- کاربر می‌تواند با استفاده از مجموعه‌ای از فلش‌های بالا، پایین، چپ و راست در کنار تصویر، هر یک از تصاویر را به صورت عمودی یا افقی بچرخاند.
ویژگی‌های بیشتر
- کاربر می‌تواند با وارد کردن URL یک تصویر متفاوت، در قسمت ورودی، تصویر پیش‌فرض را تعیین کند یا تغییر دهد.
- کاربر می‌تواند با کلیک روی دکمه Display در کنار فیلد ورودی، تصویر جدید را نمایش دهد.
- در صورت عدم یافتن URL جدید، کاربر با پیغام خطا مواجه شود.
لینک‌ها و منابع مفید
نمونه پروژهها
۳ . برنامه یادداشت‌ها
یادداشت‌هایی را برای اهداف بعدی خود، ایجاد و ذخیره کنید.
داستان‌های کاربر (user stories)
- کاربر می‌تواند یک یادداشت ایجاد کند.
- کاربر می‌تواند یک یادداشت را ویرایش کند.
- کاربر می‌تواند یک یادداشت را حذف کند.
- با بستن پنجره مرورگر، یادداشت‌ها ذخیره می‌شوند و هنگام بازگشت کاربر، داده‌ها بازیابی می‌شوند.
ویژگی‌های بیشتر
- کاربر می‌تواند یک یادداشت را در قالب MarkDown ایجاد و ویرایش کند؛ با ذخیره آن، MarkDown را به HTML تبدیل می‌کند.
- کاربر می‌تواند تاریخ ایجاد یادداشت را ببیند.
لینک‌ها و منابع مفید
نمونه پروژهها
- MarkDown Notes با انگولار در codepen
- MarkDown Notes با ری‌اکت
- MarkDown Notes با انگولار ۷ و بوت‌استرپ ۴
۴ . دستورالعمل (Recipe)
شاید هنوز این یکی را درک نکرده باشید، اما دستورالعمل‌ها چیزی نیست به جز الگوریتم‌های آشپزی؛ مانند برنامه‌ها، دستورالعمل‌ها یک سری مراحل ضروری هستند که اگر به درستی دنبال شوند،نتیجه یک غذای خوشمزه خواهد بود.
هدف از برنامه Recipe کمک به کاربر است تا دستورالعمل‌ها را به روشی مدیریت کند که درک کردن و دنبال کردن آنها را آسان کند.
محدودیت‌ها
- برای نسخه‌ی اولیه برنامه، داده‌های Recipe ممکن است به عنوان یک Json رمزگذاری شود. پس از اجرای نسخه‌ی اولیه این برنامه، می‌توانید برای حفظ Recipe ها در یک فایل یا پایگاه داده آن را گسترش دهید.
داستان‌های کاربر (user stories)
- کاربر می‌تواند لیستی از دستورالعمل غذاها را مشاهده کند.
- کاربر می‌تواند روی یک دستور غذایی کلیک کند و سپس کارت دستورالعمل آن، که شامل دستور غذا، نوع غذا(صبحانه، نهار،شام و یا میان وعده)، تعداد افرادی که می‌توانند با آن پذیرایی شوند، سطح دشواری (مبتدی، متوسط، پیشرفته)، لیست مواد تشکیل دهنده(از جمله مقدار آنها) و مراحل آماده‌سازی را مشاهده کند.
- کاربر می‌تواند برای جایگزینی کارت فعلی با دستورالعمل جدید، بر روی عنوان دستور جدید کلیک کند.
ویژگی‌های بیشتر
- کاربر می‌تواند عکسی از نتیجه‌ی غذا را مشاهده کند که غذا چگونه به نظر می‌رسد.
- کاربر می‌تواند یک دستور غذا را جستجو کند، نه در لیست دستورات غذایی و با وارد کردن نام غذا داخل یک سرچ باکس و کلیک کردن روی دکمه‌ی سرچ؛ بلکه از هر Recipe API اپن سورس که ممکن است به عنوان منبعی برای دستورات غذایی استفاده شود، استفاده کند (در پایین MealDB را مشاهده کنید).
- کاربر می‌تواند لیستی از دستورات که در موارد جستجو موجود باشد را ببیند.
- کاربر می‌تواند با کلیک کردن روی نام یک دستور،کارت مربوط به آن دستور را نمایش دهد.
- در صورتی‌که کاربر دستوری را مشاهده نکرد، یک پیغام هشدار دهنده را مشاهده کند.
- کاربر می‌تواند بر روی دکمه ذخیره که در کارت‌های دستورات وجود دارد، کلیک کند و از دستوراتی که در API وجود دارد، یک کپی در برنامه یا دیتابیس ذخیره کند.
لینک‌ها و منابع مفید
نمونه پروژهها
۵.برنامه مسابقه
دانش خود را با پاسخ دادن به سؤالات در برنامه مسابقه، امتحان و آزمایش کنید.
به عنوان یک توسعه‌دهنده، می‌توانید یک برنامه مسابقه برای آزمایش مهارت‌های برنامه نویسی سایر توسعه‌دهندگان ایجاد کنید. (HTML ، CSS ، JavaScript ، پایتون ، PHP ، و غیره ...).
داستان‌های کاربر (user stories)
- کاربر می‌تواند مسابقه را با فشار دادن یک دکمه شروع کند.
- کاربر می‌تواند یک سؤال را با ۴ پاسخ ممکن مشاهده کند.
- پس از انتخاب پاسخ، سؤال بعدی را به کاربر نمایش دهید. این کار را تا پایان مسابقه انجام دهید.
- در پایان، کاربر می‌تواند آمار زیر را مشاهده کند :
- میزان زمانی که کاربر مسابقه را به پایان رسانده.
- به چند سوال، درست پاسخ داده.
- پیامی که نشان می‌دهد، آیا او مسابقه را برنده شده یا شکست خورده است.
ویژگی‌های بیشتر
- کاربر می‌تواند نتیجه مسابقه را در رسانه‌های اجتماعی به اشتراک بگذارد.
- اضافه کردن آزمون‌های چندگانه به برنامه، کاربر می تواند یکی را انتخاب کند.
- کاربر می‌تواند یک حساب کاربری ایجاد کند و تمام نمرات را در داشبورد خود ذخیره کند.
- کاربر می تواند چندین بار مسابقه را تکمیل کند.
لینک‌ها و منابع مفید
نمونه پروژهها
ادامه‌ی این پست (بخش دوم) در مقاله‌ی دیگری منتشر می‌شود.
دیدگاه و پرسش
در حال دریافت نظرات از سرور، لطفا منتظر بمانید
در حال دریافت نظرات از سرور، لطفا منتظر بمانید