01Build
پروژه را آماده کنید.
از AI project، قالب، پروژه خالی، Git یا ZIP شروع کنید.
FAIBERWORKSPACE
همان فروشگاه. هر روز، بهتر.
کد موجودتان را بیاورید یا از یک قالب شروع کنید. در محیط فایبر ظاهر را تغییر دهید، رفتار محصول را بسازید و نتیجه را پیش از انتشار بررسی کنید.
شما هر مرحله را می‌بینید و تصمیم می‌گیرید.
khaneh-store / Cart.tsx
// Your store. Your source.
function CartSummary({ items }) {
const total = items.reduce(
(sum, item) =>
sum + item.price * item.quantity, 0
);
return <OrderSummary total={total} />;
}کنترل در هر قدمفایل‌ها، تغییرات و نتیجه بررسی‌ها
02Preview
محصول را ببینید و اصلاح کنید.
ظاهر و رفتار را بررسی کنید و تغییر بعدی را در همان پروژه بخواهید.
03Deploy
با تنظیمات مشخص منتشر کنید.
پیش از تأیید انتشار، سرویس‌ها، منابع و هزینه میزبانی را مرور کنید.
یک مثال کاربردی، از ورود پروژه تا انتشار
سناریوی تعاملی · داده نمونهفروشگاه شما؛ قدم بعدی در فایبر.
صاحب «خانه‌نو» هستید؛ یک فروشگاه لوازم خانه. مرحله‌ها را انتخاب کنید و ببینید در هر بخش چه کاری انجام می‌دهید.
NEW PROJECT
از کجا شروع می‌کنید؟
نام پروژهkhaneh-store
روش شروعOnline shop
محل نگهداریFaiber cloud / Faiber Worker
فروشگاه روی سرویس دیگری است؟ کد قابل‌انتقال یا API سازگار لازم دارید؛ واردکردن نشانی سایت به‌تنهایی کافی نیست.
main React + TypeScriptبازسازی آموزشی مسیر کار؛ نمای دقیق هر نسخه ممکن است متفاوت باشد.
مرحله 1 از ۸ · Projects
فروشگاهتان را وارد فایبر کنید.
در Projects روی New project بزنید. برای این مثال، Template و سپس Online shop را انتخاب کنید؛ نام پروژه را بنویسید، محل اجرا را بررسی کنید و Prepare project را بزنید. مسیرهای AI project، Blank، Git repository و Upload ZIP هم برای شروع‌های دیگر وجود دارند.
از هر مرحله می‌توانید شروع کنید.
راهنمای کامل مثال
تمام مسیر را یکجا مرور کنید.
نمونه ما فروشگاه «خانه‌نو» است. در هر مرحله، محل انجام کار، درخواست پیشنهادی و چیزی که باید بررسی کنید مشخص است.
01فروشگاهتان را وارد فایبر کنید.Projects+
Projects → New project → Template
در Projects روی New project بزنید. برای این مثال، Template و سپس Online shop را انتخاب کنید؛ نام پروژه را بنویسید، محل اجرا را بررسی کنید و Prepare project را بزنید. مسیرهای AI project، Blank، Git repository و Upload ZIP هم برای شروع‌های دیگر وجود دارند.
فروشگاه لوازم خانه من «خانه‌نو» نام دارد. از قالب Online shop شروع می‌کنم. پس از آماده‌شدن، ساختار پروژه را بررسی کن و بگو صفحه اصلی، کالاها، سبد و ورود مشتری در چه وضعیتی هستند.
قبل از ادامه: برای Cloud فضای کافی دارید؟ اگر آماده‌سازی متوقف شد، علت را بخوانید و پیش‌نویس را حفظ کنید. برای اجرای محلی، اتصال و سازگاری Faiber Worker را بررسی کنید.
02قبل از تغییر، مسیر کار را روشن کنید.Plan+
Project → IDE → Plan
پروژه را در IDE باز کنید و مدل در دسترس را انتخاب کنید. با Plan ساختار فعلی و ترتیب تغییرها را بررسی کنید. Plan فایل‌ها را تغییر نمی‌دهد؛ برای اجرا به Design یا Code بروید.
ساختار فروشگاه را بخوان. برای افزودن دسته‌بندی، سبد خرید و مدیریت کالا یک برنامه مرحله‌ای بنویس. فعلاً هیچ فایلی را تغییر نده.
قبل از ادامه: فروشگاه موجود چه Backend و درگاهی دارد؟ پیش از جایگزینی، مسیر فعلی را مشخص کنید.
03ظاهر فروشگاه را شبیه برند خودتان کنید.Design+
Project → IDE → Design
در Design صفحه را در Preview ببینید و تغییر مشخص بخواهید. مثلاً رنگ سبز زیتونی، کارت‌های خواناتر و چیدمان بهتر موبایل. تغییرها در فایل‌های خود پروژه انجام می‌شوند.
صفحه اصلی خانه‌نو را با رنگ سبز زیتونی و زمینه روشن طراحی کن. کارت کالا شامل تصویر، نام، قیمت و دکمه افزودن باشد. چیدمان فارسی و موبایل را هم بررسی کن.
قبل از ادامه: رنگ، تصویر، قیمت و دکمه خرید در عرض موبایل خوانا و قابل‌استفاده‌اند؟
04از یک صفحه زیبا به یک مسیر خرید برسید.Code+
Project → IDE → Code
از Code بخواهید رفتار محصول را پیاده‌سازی کند: دسته‌بندی، افزودن کالا، تغییر تعداد و محاسبه جمع سبد. نتیجه را با چند کالای مشخص امتحان کنید.
سبد خرید را پیاده‌سازی کن. افزودن دوباره یک کالا تعدادش را زیاد کند؛ حذف کالا، جمع مبلغ و حالت سبد خالی هم درست کار کنند. خطاها را واضح نمایش بده.
قبل از ادامه: جمع سبد درست است؟ کالای ناموجود قابل‌خرید نیست؟ قیمت نهایی روی سرور تأیید می‌شود؟
05ورود، داده‌ها و پرداخت را راه‌اندازی کنید.Services+
Project → Manage / Services
قالب Online shop سرویس‌های ورود، پیامک، داده و فرم، پرداخت و پروفایل مشتری را معرفی می‌کند. در Manage، درگاه زرین‌پال و ارائه‌دهنده SMS/OTP را تنظیم و تأیید کنید. تا تکمیل این تنظیمات، ورود پیامکی و پرداخت واقعی آماده نیستند.
اتصال داده‌های کالا و سفارش را بررسی کن. وضعیت Identity، Messenger، Profiles و Payments را مشخص کن و تنظیمات ناقص را نشان بده. هیچ کلید محرمانه‌ای در کد مرورگر قرار نده.
قبل از ادامه: قالب پرداخت و رسید را با ریال (IRR) محاسبه می‌کند. اگر قیمت را به تومان نشان می‌دهید، تبدیل واحد و مبلغ ارسالی به درگاه را دقیق بررسی کنید.
06کالای واقعی را با اطلاعات درست وارد کنید.Manage+
Project → Manage
پس از راه‌اندازی سرویس، از Manage اطلاعات محصول، دسته‌بندی و موجودی را مدیریت کنید. برای فروشگاه موجود، پیش از ورود یا انتقال داده، ساختار و دسترسی‌ها را بررسی کنید.
کالاهای فروشگاه را بر اساس دسته‌بندی و موجودی مرور کن. موارد بدون تصویر یا قیمت را فهرست کن و پیش از تغییر گروهی، تغییرهای پیشنهادی را نشان بده.
قبل از ادامه: داده‌ها آزمایشی‌اند یا واقعی؟ تغییر قیمت و موجودی را پیش از اعمال نهایی مرور کنید.
07خرید را مثل یک مشتری امتحان کنید.Review+
Project → Preview / Terminal / Git
از صفحه اصلی تا سبد و نتیجه پرداخت را مرور کنید. Lint و Build را اجرا کنید؛ سپس حالت‌های خطا، نمایش موبایل و تغییرات Git را جداگانه بررسی کنید.
مسیر خرید را بررسی کن: انتخاب دسته، افزودن و حذف کالا، سبد خالی و خطای پرداخت. Lint و Build را اجرا کن و نتیجه واقعی هر بررسی را همراه خطاهای باقی‌مانده گزارش بده.
قبل از ادامه: موفقیت Build به معنی موفقیت پرداخت نیست. پرداخت را با محیط آزمایشی درگاه هم بررسی کنید.
08نسخه بررسی‌شده را منتشر کنید.Deploy+
Project → Deployment → Domain
منابع و تنظیمات انتشار را مرور کنید و هزینه را ببینید. پس از تأیید، وضعیت Build، سرویس‌ها و لاگ‌ها را دنبال کنید. دامنه اختصاصی به تنظیم DNS نیاز دارد؛ سپس مسیر خرید را روی دامنه نهایی دوباره بررسی کنید.
تنظیمات انتشار، سرویس‌های فعال و برآورد هزینه را نشان بده. موارد ناقص و تنظیم DNS دامنه را مشخص کن؛ انتشار را پس از تأیید من شروع کن.
قبل از ادامه: دامنه و HTTPS درست‌اند؟ تنظیم پرداخت به دامنه نهایی اشاره می‌کند؟ برای تغییر بعدی، همان پروژه را ادامه دهید.
یک فروشگاه، یک پروژهظاهر، کد و کالاها.
ظاهر، کد و کالاها.
همه حول محصول شما.
برای تغییر رنگ دکمه تا پیگیری کالای فروشگاه، هر بخش جای مشخصی دارد. این سه نمای نمونه، ارتباط بین کارهای روزمره شما را نشان می‌دهند.
ProductCard.tsxگلدان سرامیکی مه
۶۸۰٬۰۰۰ تومان
استایل محصولLayout GridGap 24pxRadius 16pxColor Olive
درخواست شما
«تصویر را بزرگ‌تر کن و قیمت را نزدیک دکمه خرید بگذار.»
نتیجه هر تغییر را در Preview، فایل‌ها و بررسی‌های پروژه ببینید.مسیر کامل ساخت فروشگاه
تغییر بعدی را از همین پروژه شروع کنید.
در مرورگر کار کنید یا برای دسترسی به پوشه‌ها و ابزارهای محلی، Faiber App را دریافت کنید.