در این سوال از شما می‌خواهیم یک فرم ثبت‌نام اولیه برای داوطلبان اردوی دانشجویی طراحی کنید. از این فرم برای تخمین استقبال دانشجویان از برنامه اردو استفاده خواهد‌شد.
فایل پروژه اولیه را از [ اینجا ](https://blog.quera.ir/wp-content/uploads/2018/10/registrationForm-contestant.zip) دانلود کنید.
شکل کلی پروژه نهایی بصورت زیر خواهد بود (نیازی به پیادهسازی کادر‌های سبز رنگ نیست):
## لیست وظایف:
+ پیادهسازی تمامی اجزای فرم
+ امکان تایپ اسم و تغییر وضعیت
+ امکان ثبت اطلاعات فرم
## جزئیات پیادهسازی وظایف
**پیادهسازی اجزای فرم:** این بخش شامل پیادهسازی موارد زیر می‌باشد که هرمورد دارای امتیاز مخصوص به خود است:
+ نمایش چهار متن زیر:
+ تیتر فرم (``Please enter your information``)
+ عنوان محل وارد کردن نام (``Full name``)
+ عنوان فیلد جنسیت (``Gender``)
+ عنوان جنسیت انتخاب شده (``male`` یا ``female``)
+ اضافه کردن محل وارد کردن نام به فرم
+ اضافه کردن یک ``switch``
+ اضافه کردن دکمه با متن نمایش داده شده در شکل
**تایپ اسم و تغییر وضعیت:** محلی که برای واردکردن نام درنظر می‌گیرید باید امکان تایپ کردن و دریافت متن را داشته باشد. همچنین دکمه ``switch`` باید حالت اولیه خاموش داشته باشد و در فرم، جنسیت ``male`` انتخاب شده باشد (شکل سمت چپ). با لمس این ``switch`` و تغییر وضعیت آن به حالت فعال، جنسیت به ``female`` تغییر می‌کند (شکل وسط) و با تغییر وضعیت دوباره، جنسیت نمایش داده‌شده در فرم به حالت اول برمی‌گردد.
**ثبت اطلاعات فرم:** با لمس دکمه با متن ``submit``، برنامه وارد مرورگر می‌شود و اطلاعات درج شده در فرم در قالب زیر به سرور ارسال می‌شوند و کدپیگیری ثبت‌نام، در مرورگر نمایش داده می‌شود.
نمونه اطلاعات وارد شده در فرم و قالب ارسالی آن‌ها:
```
{"fullName":"Jane Smith", "gender":"1"}
```
```
{"fullName":"Sam Smith", "gender":"0"}
```
نمونه درخواست ارسالی به سرور **از طریق مرورگر** (فرض کنید آدرس سرور ```www.yourURL.com``` است):
```
http://www.yourURL.com?info={"fullName":"Sam Smith", "gender":"0"}
```
پس از دریافت اطلاعات توسط سرور، یک کد پیگیری در مرورگر نمایش داده می‌شود. (صرفا جهت اطلاع)
## نکات حیاتی:
+ برای جلوگیری از بروز خطای حجم فایل ارسالی، فقط پوشه ``src`` و محتویات آن را در فایل ``zip`` ارسالی قرار دهید. (خود پوشه ``src`` را **حتما** ارسال کنید)
+ تایپ کردن دقیق متن‌های خواسته شده و مطابقت کامل آن‌ها با شکل‌های داده شده در صورت سوال از اهمیت بالایی برخوردار است. بنابراین توصیه می‌کنیم به جای تایپ کردن این رشته‌ها بصورت دستی، از آدرس‌دهی به مواردی که در فایل ```strings.json``` وجود دارند استفاده کنید.
+ برای تکمیل خواسته‌های پروژه، ```component``` تعریف شده در فایل ```Root.js`` موجود در پوشه ``src`` را بعنوان ``component`` ریشه‌ای درنظر بگیرید و تغییری در فایل ``index.js`` موجود در ریشه پروژه اولیه ایجاد نکنید.
+ ارسال‌های شما توسط داور آنلاین امتیازدهی می‌شود و برای انجام کار‌هایی که در صورت سوال گفته نشده، **(مثلا اضافه کردن ``style``)** امتیاز اضافه‌ای درنظر گرفته نمی‌شود.
+ آدرس سرور که برای ثبت اطلاعات استفاده می‌شود را **حتما** از فیلد ```targetURL``` موجود در فایل ``strings.json`` بخوانید.
+ دقت کنید آدرس موجود در ```targetURL`` فاقد پارامترهای ارسالی است و این پارامتر‌ها باید توسط شما اضافه شود. بعنوان مثال:
آدرس نمونه موجود در ```targetURL```:
```
wwww.google.com
```
نمونه ارسال اطلاعات توسط مرورگر:
```
http://wwww.google.com?info={"fullName":"Sam Smith", "gender":"0"}
```
ساختار بخشی از فایل پایه بصورت زیر است. می‌توانید فایل‌ها و فولدرهای موردنیاز خود را به پوشه ```src``` اضافه کنید. همچنین مجازید **فقط** به فایل‌هایی که با علامت (---->) مشخص شده‌اند کد‌های خودتان را اضافه کنید (اما مجاز به تغییر یا حذف کد‌های موجود در این فایل‌ها نیستید). درنهایت پوشه `src` را همراه با محتویات آن، در قالب یک فایل فشرده ارسال کنید.
```
F:.
│ .babelrc
│ .buckconfig
│ .flowconfig
│ .gitattributes
│ .gitignore
│ .watchmanconfig
│ app.json
│ index.js
│ package.json
│ strings.json
│ yarn.lock
│
├───android
├───ios
├───src
│ Root.js <-----
│
└───__tests__
App.js
```