همه‌ی ما می‌دانیم که گاهی اوقات، یافتن ایده‌های جدید و کاربردی به منظور بهبود یا یادگیری یک زبان و فریمورک جدید برنامه نویسی، می‌تواند دشوار باشد.در مقاله قبلی درباره ایده‌های ساخت برنامه برای افرادی که در سطح متوسط قرار دارند، صحبت کردم؛ در این پست یعنی در آخرین بخش از این مقاله برای شما توسعه‌دهندگان حرفه‌ای، ایده‌هایی را شرح می‌دهم تا از آن در جهت یادگیری و ارتقا مهارتتان استفاده کنید.
۱۱.برنامه شمارش کالری
سالم و سلامت ماندن به ترکیبی از تعادل ذهنی، ورزش و تغذیه نیاز دارد. هدف از برنامه کالری شمار، کمک به کاربر برای شمارش کالری غذاهای مختلف است. این برنامه براساس نتیجه جستجوی کاربر برای یک نوع غذا، تعداد کالری آن را مشخص می‌کند. داده‌های خام MyPyramid Food Department وزارت کشاورزی ایالات متحده برای تعیین مقدار کالری مورد استفاده قرار می‌گیرد.
کالری شمار، همچنین در زمینه تبدیل داده‌های خام به فرمی که جستجوی آن را آسان تر کند ،به تجربه شما اضافه می‌کند. در این حالت، فایل MyPyramid Food Raw Data که یک صفحه گسترده MS Excel است، باید بارگیری و تبدیل به یک فایل JSON شود که بارگیری و جستجو در زمان اجرا را آسان‌تر خواهد کرد. (تذکر: به فرمت پرونده CSV نگاهی بیندازید).
داستان‌های کاربر (user stories )
- توسعه‌دهنده یک پرونده JSON ایجاد می‌کند که شامل موارد غذایی است که مورد جستجو قرار می‌گیرند. با شروع برنامه، بارگیری می‌شود.
- کاربر می‌تواند یک پنل حاوی توضیحات مواد غذایی، دکمه "جستجو" و دکمه "پاک کردن" را مشاهده کند.
- کاربر می‌تواند بر روی دکمه "جستجو" کلیک کند، تا غذایی که می‌خواهد را جستجو کند.
- اگر کلمه‌ای که کاربر جستجو می‌کند موجود نباشد، کاربر پیام هشدار دریافت کند.
- اگر کاربر هیچ کلمه‌ای در سرچ باکس وارد نکند و روی جستجو کلیک کند، پیام هشدار دریافت کند.
- کاربر می‌تواند لیستی از ویژگی‌های آن ماده غذایی، پروتئین و مقدار کالری را در یک صفحه، یعنی در قالب نتایج که این صفحه قابل پیمایش نیز می‌باشد مشاهده کند؛ همچنین محدود به ۲۵ مورد می‌باشد.
- کاربر می‌تواند بر روی دکمه "پاک کردن" کلیک کند تا موارد جستجو شده و لیست نتایج را پاک کند.
ویژگی‌های بیشتر - کاربر می‌تواند بیش از ۲۵ مورد را از طریق جستجو و با کلیک بر روی دکمه (نماد) پایین، برای افزودن موارد بیشتر به آن ماده غذایی در لیست نتایج، مشاهده کند.
- کاربر می‌تواند تعدادی مواد غذایی دیگر در مجاورت لیست نتایج را مشاهده کند.
لینک‌ها و منابع مفید
نمونه پرو‌ژه‌ها
۱۲. برنامه چت
رابط چت در زمان واقعی، که در آن چندین کاربر با ارسال پیام می‌توانند با یکدیگر در تعامل باشند.
به عنوان MVP (محصول اولیه) می‌توانید بر روی ساخت رابط گپ تمرکز کنید. قابلیت زمان واقعی می‌تواند بعداً اضافه شود.
داستان‌های کاربر (user stories)
- از کاربر خواسته شود هنگام ورود به برنامه چت ، نام کاربری خود را وارد کند.
- نام کاربری در برنامه ذخیره می‌شود.
- کاربر یک فیلد ورودی را مشاهده می‌کند که در آن می‌تواند یک پیام جدید تایپ کند.
- با فشردن کلید enter یا با کلیک بر روی دکمه ارسال متن در کادر گپ، پیام در کنار نام کاربری نمایش داده می شود (به‌عنوان مثال : علی: سلام، چطوری؟)
ویژگی‌های بیشتر
- این پیام‌ها برای همه کاربرانی که در برنامه چت هستند (با استفاده از WebSockets) قابل مشاهده خواهد بود.
- هنگامی که یک کاربر جدید به چت می‌پیوندد، پیامی برای کلیه کاربران موجود نمایش داده می‌شود.
- پیام‌ها در یک پایگاه داده ذخیره می‌شوند.
- کاربر می‌تواند تصاویر، فیلم‌ها و پیوندهایی را ارسال کند.
- کاربر می‌تواند ایموجی را انتخاب و ارسال کند.
- کاربران می‌توانند به صورت خصوصی گپ بزنند.
- کاربران می‌توانند به کانا‌ل‌هايی که دوست دارد بپیوندند.
لینک‌ها و منابع مفید
- Socket.io
- نحوه ساخت یک برنامه چت React.js در 10 دقیقه – مقاله
- یک برنامه چت مانند Slack - React / JavaScript Tutorial - Youtube بسازید
- برنامه چت Socket.io با استفاده از Websockets - آموزش یوتیوب
نمونه پرو‌ژه‌ها
۱۳.GitHub Timeline
APIها و نمایش گرافیکی اطلاعات از ویژگی‌های بارز برنامه‌های وب مدرن است.
GitHub Timeline این دو را با هم ترکیب می‌کند تا یک تاریخچه تصویری از فعالیت گیت‌هاب کاربران ایجاد کند.
هدف از GitHub Timeline پذیرش یک نام کاربری گیت‌هاب و تولید یک جدول زمانی است؛ که حاوی هر repo و حاشیه نویسی با نام‌های repo، تاریخ ایجاد شده و توضیحات آنها باشد. جدول زمانی بایدیکی باشد، که می‌تواند با یک کارفرمای آینده‌دار به اشتراک گذاشته شود. این باید به راحتی خوانده شود و استفاده موثر از رنگ و تایپوگرافی در آن اهمیت دارد. فقط reposهای عمومی گیت‌هاب نمایش داده می‌شوند.
داستان‌های کاربر (user stories)
- کاربر می‌تواند یک نام کاربری گیت‌هاب را وارد کند.
- کاربر می‌تواند بر روی دکمه "Generate" کلیک کند تا timeline کاربران تعیین شده را ایجاد و نمایش دهد.
- اگرکاربر، نام کاربری معتبر GitHub وارد نکند، کاربر یک پیام هشداردهنده را مشاهده کند.
ویژگی‌های بیشتر
- کاربر می‌تواند خلاصه‌ای از تعداد reposهای شمارش شده که در سال ایجاد شده را ببیند.
لینک‌ها و منابع مفید
GitHub دو API را که ممکن است از آنها استفاده کنید برای دسترسی به داده‌های repo ارائه میدهد. همچنین ممکن است برای دسترسی به API GitHub از یک پکیج NPM استفاده کنید.
مستندات مربوط به API GitHub را می توانید در اینجا مشاهده کنید:
کد نمونه ای که نحوه استفاده از API GitHub را نشان میدهد عبارتند از:
می توانید از این دستور CURL برای دیدن JSON برگشت داده شده توسط V3 REST API برای reposهای خود استفاده کنید:
curl -u "user-id" https://api.github.com/users/user-id/repos
نمونه پرو‌ژه‌ها
۱۴. بُر زدن کارت (Shuffle Card Deck)
به‌عنوان یک توسعه‌دهنده وب از شما خواسته می‌شود برنامه‌های ابتکاری را ارائه دهید که مشکلات دنیای واقعی را برای افراد واقعی حل کند. اما چیزی که به سرعت یاد خواهید گرفت این است که مهم نیست چند ویژگی فوق‌العاده در یک برنامه کاربردی، به کار برده‌اید، در صورت عدم اجرای برنامه، از آن استفاده نمی‌کند. به عبارت دیگر، بین نحوه عملکرد یک برنامه و اینکه آیا کاربران آن‌را قابل استفاده می‌دانند یا نه، ارتباط مستقیمی وجود دارد.
هدف از برنامه Shuffle Card Deck یافتن سریع‌ترین تکنیک برای جابجایی یک دسته کارت است؛ اما، مهم‌تر از آن، تجربه اندازه‌گیری و ارزیابی عملکرد برنامه را در اختیار شما قرار میدهد.
وظیفه شما اجرای الگوریتم ارزیابی عملکرد، generator عدد شبه تصادفی Xorshift و همچنین الگوریتم WELL512a.c در صورت انتخاب گزینه (موارد بیشتر ) است.
داستان‌های کاربر (user stories)
- کاربر در یک پنل، یک تکست باکس را مشاهده می‌کند که می‌تواند تعداد دورها را وارد کند؛ و سه باکس زمان شروع، زمان پایان و زمان کل تست و دو دکمه‌ی - "JS Random" ، "Xorshift".
- کاربر می‌تواند یک عدد از 1 تا 10،000 را وارد کند تا تعداد دفعات (یا دور) اعداد تصادفی انتخاب شده را مشخص کند.
- کاربر می‌تواند روی یکی از سه دکمه را برای شروع ارزیابی الگوریتم اعداد تصادفی انتخاب شده کلیک کند. الگوریتم اعداد تصادفی برای تعداد دورهای وارد شده توسط کاربر بالا اجرا خواهد شد.
- اگر تعداد دورها وارد نشده باشد، کاربر اگر در محدوده 1 تا 10،000 نباشد، یا اگر عدد صحیحی نباشد، کاربر یک پیام هشداردهنده را مشاهده کند.
- کاربر می‌تواند یک جدول خروجی را مشاهده کند که در آن نتایج هر الگوریتم نمایش داده می‌شود - نام الگوریتم، زمان شروع، زمان به پایان رسیده و زمان کل.
- اگر تعداد دور، قبل از اجرای هر سه تست تغییر کرده باشد، کاربر یک دیالوگ هشداردهنده با دکمه "cancel" و "OK" مشاهده کند.
- کاربر می‌تواند بر روی دکمه "cancel" در دیالوگ هشدار کلیک کند تا دیالوگ بسته شود و تغییری انجام نگیرد.
- کاربر می‌تواند بر روی دکمه "OK" در دیالوگ هشدار کلیک کنید تا ناحیه خروجی را پاک کرده و دیالوگ هشدار را هم ببندد.
ویژگی‌های بیشتر
- کاربر می‌تواند یک دکمه الگوریتم سوم - "WELL512a.c" را ببیند.
- توسعه‌دهنده باید خروجی را بررسی کند و مشخص کند که چرا سریع‌ترین الگوریتم سریع‌تر از کندترین الگوریتم است.
لینک‌ها و منابع مفید
- تولید شماره تصادفی (ویکی پدیا)
- Math.random (MDN)
- Xorshift (ویکی پدیا)
- WELL512a.c
- console.time (MDN)
- استفاده از ویژگیAudit در Chrome DevTools برای اندازه گیری و بهینه سازی عملکرد (قسمت 1)
- استفاده از ویژگی Audit در Chrome DevTools برای اندازه گیری و بهینه سازی عملکرد (قسمت 2)
۱۵. برنامه نظر سنجی( Survey)
نظرسنجی‌ها بخش مهمی از جعبه ابزار برنامه‌نویسان هستند. آنها برای گرفتن بازخورد از کاربران در مورد موضوعات مختلف از جمله رضایت از برنامه، نیازهای آتی، مشکلات، اولویت ها و ... مفید هستند.
کاربران این برنامه به دو نقش مجزا تقسیم می‌شوند که هرکدام نیازهای متفاوتی دارند:
- هماهنگ كنندگان این برنامه، نظرسنجی‌ها را تعریف می‌کنند. این یک عملکرد اداری است که در دسترس کاربران عادی نیست.
- پاسخ دهندگان این برنامه، نظرسنجی‌ها را کامل کرده و نتایج را مشاهده می‌کنند. آنها هیچ مزیت اداری در برنامه ندارند.
داستان‌های کاربر (user stories) - عمومی
- هماهنگ كنندگان نظرسنجی و پاسخ‌دهندگان نظرسنجی می‌توانند نظرسنجی‌ها و نتایج نظرسنجی را از یك وبسایت تعریف و اجرا كنند.
- هماهنگ کنندگان نظرسنجی می توانند برای دسترسی به عملکردهای اداری، مانند تعریف نظرسنجی، به برنامه وارد شوند.
تعریف یک نظرسنجی
- هماهنگ كننده نظرسنجی می‌تواند یک نظرسنجی حاوی ۱ تا ۱۰ سؤال چند گزینه‌ای تعریف كند.
- هماهنگ کننده نظرسنجی می‌تواند ۱-۵ انتخاب منحصر به فرد متقابل برای هر سوال تعریف کند.
- هماهنگ کننده نظرسنجی می‌تواند عنوانی را برای نظرسنجی وارد کند.
- هماهنگ كننده نظرسنجی می‌تواند برای بازگشت به صفحه اصلی بدون ذخیره نظرسنجی، روی دکمه "لغو" كلیك كند.
- هماهنگ کننده نظرسنجی می‌تواندروی دکمه "ذخیره" برای ذخیره نظرسنجی کلیک کند.
انجام یک نظرسنجی
- هماهنگ كننده نظرسنجی می‌تواند با انتخاب نظرسنجی از لیستی از نظرسنجی‌هایی كه قبلاً تعریف شده است، نظرسنجی را باز كند.
- پاسخ دهنده نظرسنجی می‌تواند با انتخاب آن از لیست نظرسنجی‌ها، نظرسنجی را انجام دهد.
- پاسخ دهنده می‌تواند پاسخ سؤالات نظرسنجی را با کلیک روی کادر انتخاب کند.
- پاسخ دهندگان نظرسنجی می‌توانند بر روی دکمه "لغو" کلیک کنند تا بدون ارسال نظرسنجی، به صفحه اصلی بازگردند.
- پاسخ دهندگان نظرسنجی می‌توانند با کلیک بر روی دکمه "ارسال" پاسخ خود را ارسال کنند.
- در صورتی که پاسخ دهنده نظر سنجی را کامل نکرده بود و روی دکمه‌ی "ارسال" کلیک کند، پیام خطایی را مشاهده می‌کند.
مشاهده نتایج نظرسنجی
- هماهنگ كنندگان نظرسنجی و پاسخ دهندگان نظرسنجی می‌توانند نظرسنجی را برای نمایش از لیست نظرسنجی‌ها انتخاب كنند.
- هماهنگ كنندگان نظرسنجی و پاسخ دهندگان نظرسنجی می‌توانند نتایج نظرسنجی را به صورت جدول مشاهده کنند كه تعداد پاسخ‌های مربوط به هر یك از سوالات را نشان میدهد.
ویژگی‌های بیشتر
- پاسخ دهندگان نظرسنجی می‌توانند یک حساب منحصر به فرد در برنامه ایجاد کنند.
- پاسخ دهندگان نظرسنجی می‌توانند به برنامه وارد شوند.
- پاسخ دهندگان نظرسنجی نمی‌توانند بیش از یک بار یک نظرسنجی را انجام دهند.
- هماهنگ کنندگان نظرسنجی و پاسخ دهندگان نظرسنجی می‌توانند نمایش های گرافیکی نتایج نظرسنجی را مشاهده کنند (به عنوان مثال نمودارهای پای، ستون ، و ... ).
لینک‌ها و منابع مفید
کتابخانه هایی برای بررسی ساختمان یک نظر سنجی:
برخی از سرویس‌های نظر سنجی تجاری عبارتند از:
نمونه پرو‌ژه‌ها
کلام آخر
اکنون شما ۱۵ ایده برنامه دارید که می توانید از آنها استفاده کنید؛ امیدوارم که مورد استفادتون قرار بگیره. از وقتی که برای مطالعه گذاشتید ممنونم.
دیدگاه و پرسش
در حال دریافت نظرات از سرور، لطفا منتظر بمانید
در حال دریافت نظرات از سرور، لطفا منتظر بمانید