5. پروژه اول : ساخت تایمر (اپیزود یک)

خب تا الان مطالب خوبی یاد گرفتیم درباره ری اکت و به نظرم وقتش هست تا اولین پروژه واقعیمون رو استارت کنیم تا با چالش هایی که تا الان کاری نداشتیم بهشون رو به رو بشیم. تا حالا فقط برنامه نویس بودید. الان وقت اینه مثل یک توسعه دهنده رفتار کنید.

یک Programmer فقط به کد کار داره و با توابع سر و کله میزنه. اما یک Developer به شکل ظاهری برنامه ، راحتی کار باهاش و پیاده سازی عملی کد برای قابل استفاده بودن توسط کابرنهایی هم توجه میکنه.

اپیزود اول زیاد کاری به کد نداریم و می خواهیم پروژه رو تعریف کنیم برای خودمون. اگر قصد دارید به متد من کد زدن رو دنبال کنید ، به این مراحل هم توجه کنید ، چون برنامه ریزی درست قبل از کد نویسی بسیار در انجام مراحل کدنویسی کار ما رو راحت می کنه.

1. تعریف کردن پروژه :

یک تایمر باید بنویسیم که از 0 شروع کنه به شمردن و هر یک ثانیه یک واحد بهش اضافه بشه. برنامه نیاز به سه کلید Start و Stop و Reset داره.

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

2. طراحی UI :

یک طرح اولیه از قسمت های ظاهری برنامه ای که می خواید طراحی کنید روی کاغذ بکشید تا بدونید قراره در نهایت چی داشته باشید توی برنامه . یه همچین چیزی:

3. مشخص کردن Component ها:

یک شمارنده ، یک دکمه استارت ، یک دکمه استاپ ، یک دکمه ریست

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

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

اگر قرار باشه شما یه هفته کد بزنید بشه 1000 خط و بعد دکمه ران رو بزنید و با کوله باری Error روبرو بشید که نتیجه نمیگیرد اصلا. راه حل بهتر اینه که پروژه به فاز های کوچیکتر بشکونید( به قول استاد جزایری : + یک فیل رو چطوری میخورن؟ - لقمه لقمه) ( به فازهایی که در آخر فاز یک برنامه داشته باشید که بخش هایی از برنامه اصلی رو به درستی اجرا کنه). برای این پروژه من این فاز ها رو در نظر گرفتم:

فاز یک : یا تایمر ساده که با اجرا شدن برنامه شروع به شمردن میکنه (در این مرحله CSS هم باید درست کنی)
فاز دو: اضافه کردن دکمه Reset
فاز سه : اضافه کردن دکمه Stop
فاز چهار : اضافه کردن دکمه Start

5. حالا وقتش رسیده شروع به نوشتن کد کنید. :)