ثبت‌نام اولیه


در این سوال از شما می‌خواهیم یک فرم ثبت‌نام اولیه برای داوطلبان اردوی دانشجویی طراحی کنید. از این فرم برای تخمین استقبال دانشجویان از برنامه اردو استفاده خواهد‌شد. فایل پروژه اولیه را از اینجا دانلود کنید.

شکل کلی پروژه نهایی بصورت زیر خواهد بود (نیازی به پیاده‌‌سازی کادر‌های سبز رنگ نیست):

لیست وظایف:🔗

  • پیاده‌سازی تمامی اجزای فرم
  • امکان تایپ اسم و تغییر وضعیت
  • امکان ثبت اطلاعات فرم

جزئیات پیاده‌سازی وظایف🔗

پیاده‌سازی اجزای فرم: این بخش شامل پیاده‌سازی موارد زیر می‌باشد که هرمورد دارای امتیاز مخصوص به خود است:

  • نمایش چهار متن زیر:
    • تیتر فرم (Please enter your information)
    • عنوان محل وارد کردن نام (Full name)
    • عنوان فیلد جنسیت (Gender)
    • عنوان جنسیت انتخاب شده (male یا female)
  • اضافه کردن محل وارد کردن نام به فرم
  • اضافه کردن یک switch
  • اضافه کردن دکمه با متن نمایش داده شده در شکل

تایپ اسم و تغییر وضعیت: محلی که برای واردکردن نام درنظر می‌گیرید باید امکان تایپ کردن و دریافت متن را داشته باشد. همچنین دکمه switch باید حالت اولیه خاموش داشته باشد و در فرم، جنسیت male انتخاب شده باشد (شکل سمت چپ). با لمس این switch و تغییر وضعیت آن به حالت فعال، جنسیت به female تغییر می‌کند (شکل وسط) و با تغییر وضعیت دوباره، جنسیت نمایش داده‌شده در فرم به حالت اول برمی‌گردد.

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

نمونه اطلاعات وارد شده در فرم و قالب ارسالی آن‌ها:

{"fullName":"Jane Smith", "gender":"1"}
Plain text
{"fullName":"Sam Smith", "gender":"0"}
Plain text

نمونه درخواست ارسالی به سرور از طریق مرورگر (فرض کنید آدرس سرور www.yourURL.com است):

http://www.yourURL.com?info={"fullName":"Sam Smith", "gender":"0"}
Plain text

پس از دریافت اطلاعات توسط سرور، یک کد پیگیری در مرورگر نمایش داده می‌شود. (صرفا جهت اطلاع)

نکات حیاتی:🔗

  • برای جلوگیری از بروز خطای حجم فایل ارسالی، فقط پوشه src و محتویات آن را در فایل zip ارسالی قرار دهید. (خود پوشه src را حتما ارسال کنید)
  • تایپ کردن دقیق متن‌های خواسته شده و مطابقت کامل آن‌ها با شکل‌های داده شده در صورت سوال از اهمیت بالایی برخوردار است. بنابراین توصیه می‌کنیم به جای تایپ کردن این رشته‌ها بصورت دستی، از آدرس‌دهی به مواردی که در فایل strings.json وجود دارند استفاده کنید.
  • برای تکمیل خواسته‌های پروژه، component تعریف شده در فایل ```Root.jsموجود در پوشهsrcرا بعنوانcomponentریشه‌ای درنظر بگیرید و تغییری در فایل‌index.js`` موجود در ریشه پروژه اولیه ایجاد نکنید.
  • ارسال‌های شما توسط داور آنلاین امتیازدهی می‌شود و برای انجام کار‌هایی که در صورت سوال گفته نشده، (مثلا اضافه کردن style) امتیاز اضافه‌ای درنظر گرفته نمی‌شود.
  • آدرس سرور که برای ثبت اطلاعات استفاده می‌شود را حتما از فیلد targetURL موجود در فایل strings.json بخوانید.
  • دقت کنید آدرس موجود در ```targetURL`` فاقد پارامترهای ارسالی است و این پارامتر‌ها باید توسط شما اضافه شود. بعنوان مثال:

آدرس نمونه موجود در targetURL:

wwww.google.com
Plain text

نمونه ارسال اطلاعات توسط مرورگر:

http://wwww.google.com?info={"fullName":"Sam Smith", "gender":"0"}
Plain text

ساختار بخشی از فایل پایه بصورت زیر است. می‌توانید فایل‌ها و فولدرهای موردنیاز خود را به پوشه 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
Plain text
ارسال پاسخ برای این سؤال
در حال حاضر شما دسترسی ندارید.