یک برنامه وب با Oats~i بسازید – راه اندازی برنامه Oats~i

به قسمت دوم مجموعه آموزش ساخت وب اپلیکیشن با Oats~i خوش آمدید. در قسمت اول، نصب Oats~i در محیط توسعه شما را بررسی کردیم. اگر آن یکی را از دست دادید، اینجا را بررسی کنید.

در این قسمت از مجموعه، نحوه راه اندازی یک برنامه Oats~i را بررسی خواهیم کرد. این همه مواردی را پوشش می دهد که می خواهید یک برنامه Oats~i را راه اندازی کنید و فریم ورک را در قسمت جلویی اجرا کنید.

به جای ساختن یک پروژه کامل از ابتدا، از پروژه آغازگر داخلی که با Oats~i ارائه می شود، استفاده می کنیم، زمانی که آن را با استفاده از Oats~i تنظیم می کنید. ما قسمت‌های مهم کد لازم برای این آموزش را باز می‌کنیم و از آن برای توضیح نحوه بارگیری Oats~i هنگامی که به مشتری/مرورگر می‌رسد و شروع به اجرای برنامه وب شما می‌کند، استفاده می‌کنیم.

بیایید شیرجه بزنیم

یک پوشه جدید ایجاد کنید که می خواهید پروژه Oats~i starter را در آن نصب کنید و ترمینال را باز کنید. سپس اجرا کنید:

npx oats-i-cli

دستورات را دنبال کنید.

با این کار Oats~i و پروژه شروع همراه با آن در فهرست کاری فعلی شما نصب می شود.

در نهایت برای اجرای پروژه استارتر اجرا کنید

npm run dev

به آدرس ارائه شده در ترمینال (اغلب localhost:8080) بروید و پروژه شروع را در عمل ببینید. بین صفحات موجود به جلو و عقب پیمایش کنید تا Oats~i مدیریت مسیریابی و ساخت نماها را از طریق قطعات مشاهده کنید.

حالا بیایید به کدی برسیم که Oats~i را در کلاینت/مرورگر زنده می کند.

فایل index.js موجود در src -> app -> index -> scripts را باز کنید.

این فایل حاوی کدی است که Oats~i را برای پروژه شروع کننده همراه با cli شروع می کند. این کمابیش همان کدی است که برای شروع Oats~i در پروژه خود می‌نویسید.

بیایید آن را تجزیه کنیم.

ریشه برنامه

Oats~i معمولاً از ماژول appRoot از طریق متد ()appRoot.initApp مقداردهی اولیه می شود.

appRoot یک نمونه از کلاس AppRoot است که مقدار دهی اولیه یک برنامه وب Oats~i، پیمایش اصلی و بارگذاری نمای ریشه را در صورت ارائه الگوی آن مدیریت می کند.

متد initApp چندین آرگومان را می گیرد، از جمله نمونه ای از AppStateManager، MainRouter، شی AppRootView، یک مسیر پیش فرض، و گزینه های اضافی اختیاری که در حال حاضر به شما اجازه می دهد تا رفتار رهگیری لینک خارجی برنامه را تعریف کنید.

بیایید اینها را بشکنیم.

AppStateManager

مدیر وضعیت برنامه ماژولی است که مسئول مدیریت وضعیت های مسیر یک برنامه Oats~i است. در درجه اول، به Oats~i کمک می کند تا بفهمد آیا یک رویداد پاپ تاریخچه، کلیک روی دکمه جلو یا برگشت در مرورگر توسط کاربر است یا خیر.

این اطلاعات با استفاده از تاریخچه API واضح نیست.

داشتن این اطلاعات بسیار مهم است زیرا Oats~i حالت های قطعه را ذخیره می کند زیرا برنامه وب توسط کاربر هدایت می شود. بنابراین، اگر بخواهند به صفحه‌ای که قبلاً در آن بودند برگردند یا جلو بروند، قطعه (های) مسئول رندر و اجرای آن صفحات، وضعیت خود را «به خاطر می‌آورند» و اطلاعات درست را نشان می‌دهند و به‌طور خودکار به موقعیت مناسب پیمایش می‌شوند. کاربر در بود.

دانستن اینکه آیا رویداد پاپ یک حرکت رو به جلو یا عقب است، بازیابی اطلاعات وضعیت را دقیق می کند.

شما به سادگی یک نمونه از AppStateManager را با فراخوانی جدید و ارسال اطلاعات مسیریابی برنامه وب ایجاد می کنید.

در فایل index.js ما این کار را در خط انجام می دهیم:

const appStateManager = new AppStateManager(AppRoutingInfo);

ما قبلا AppRoutingInfo خود را در یک فایل جداگانه تعریف کرده‌ایم (در ادامه در این مورد بیشتر توضیح خواهیم داد).

روتر اصلی

روتر اصلی مسیریابی را در یک برنامه وب Oats~i انجام می دهد. شما یک نمونه روتر را با فراخوانی “جدید”، ارسال اطلاعات مسیریابی برنامه، نمونه مدیریت وضعیت برنامه، یک تماس برگشتی خطا، یک مسیر ریشه، و یک پاسخ تماس رضایت مسیر ایجاد می کنید.

قبلاً در مورد اطلاعات مسیریابی برنامه و مثال مدیر وضعیت برنامه صحبت کرده ایم، بنابراین بیایید در مورد سایر آرگومان هایی که به روتر اصلی ارسال می کنید صحبت کنیم.

خطا برگشت به تماس

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

مسیر ریشه

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

اکنون، اگر Oats~i را در وب‌سایت خود با یک آدرس خاص مانند /admin اجرا می‌کنید، شروع هر تماس مسیریابی یا اطلاعات مسیریابی با ریشه /admin ممکن است تکراری باشد. درعوض، می‌توانید این مورد را به‌عنوان مسیر اصلی در اختیار روتر اصلی قرار دهید و فقط بقیه مسیر خود را به تماس‌های مسیریابی یا اطلاعات مسیریابی خود اضافه کنید.

بنابراین، به جای /admin/create، با تنظیم مسیر root روی /admin، می توانید مسیر را به عنوان /create داشته باشید. با این حال، ویژگی های href در پیوندها باید کاملاً واجد شرایط باشند.

بازگشت به تماس رضایت مسیر

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

توجه: این با رضایت بخش متفاوت است که بعداً به آن خواهیم پرداخت.

شی AppRootView

شیء نمای اصلی برنامه از الگوی نمای ریشه و آرایه ای از اطلاعات ناوبری اصلی تشکیل شده است.

هر برنامه Oats~i نمای ریشه دارد. این بخش دائمی از نمای است که کاربر بدون در نظر گرفتن مسیری که در آن حرکت می کند همیشه آن را مشاهده خواهد کرد. نمای ریشه در یک تگ پیچیده شده است و معمولاً حاوی عناصری مانند نوار ناوبری و پاورقی شما است.

در اینجا یک مثال از home.sv.hbs در پروژه شروع Oats~i آورده شده است

توجه: همانطور که می توانید از پروژه شروع Oats~i استنباط کنید، تا زمانی که آن را در نشانه گذاری html منبع صفحه خود از سرور ارائه کرده باشید، می توانید از ارسال یک الگو برای نمای ریشه برنامه در متد initApp() صرف نظر کنید.

شی root view شما همچنین باید دارای یک تگ مشخص شده باشد، جایی که قطعات برنامه بارگذاری می شوند.

شی AppRootView همچنین یک آرایه اطلاعات ناوبری اصلی را می گیرد که حاوی لیستی از انتخابگرها و مسیرهای فعال آنها است که Oats~i از آن برای نشان دادن انتخابگر ناوبری فعال استفاده می کند.

در پروژه شروع Oats~i، مشخص کردن اطلاعات ناوبری اصلی این امکان را فراهم می‌آورد که سبک و ظاهر پیوندهای پیمایش را زمانی که روی آن کلیک می‌کنید و به url آن هدایت می‌کنید، به‌روزرسانی کنید.

Oats~i صفحه دیگ کلیک و به روز رسانی را برای پیوندها یا دکمه های ناوبری کنترل می کند. تنها کاری که باید انجام دهید این است که با استفاده از ویژگی 'navigation-state='active' به پیوندها یا دکمه هایی که بر اساس آنها به عنوان فعال علامت گذاری شده است، استایل دهید.

مسیر پیش فرض

مسیر پیش‌فرض مسیری است که Oats~i به‌طور پیش‌فرض، بارگذاری‌های صفحه را از نشانی اینترنتی که در اطلاعات مسیریابی برنامه شما مشخص نشده است، قرار می‌دهد. می‌توانید از این برای تنظیم رفتار پیش‌فرض برنامه وب استفاده کنید، به‌ویژه اگر ناشی از یک اقدام ورود به سیستم یا احراز هویت باشد.

به عنوان مثال، اگر کاربر از یک صفحه ورود به سیستم وارد شده و به صفحه مدیریت خود هدایت شده است، اما بارگذاری اولیه صفحه در “/admin” است، می توانید مسیر پیش فرض را به عنوان “/admin/dashboard” تعیین کنید.

Oats~i برنامه وب را هنگام بارگیری به /admin/dashboard تغییر مسیر می دهد و کاربر همیشه هر بار که از ورود به برنامه می آید به داشبورد خود دسترسی خواهد داشت.

اگر می‌خواهید این رفتار را به عنوان نمایه تغییر دهید، می‌توانید به سادگی مسیر پیش‌فرض در برنامه وب خود را به /admin/profile تغییر دهید و همه کاربرانی که وارد می‌شوند صفحه نمایه خود را به عنوان صفحه پیش‌فرض خواهند داشت.

گزینه های اضافی

Oats~i همچنین گزینه های اضافی اختیاری را در اختیار می گیرد، با اجرای فعلی به شما امکان می دهد پیوندهای خارجی را در برنامه وب خود رهگیری کنید. این به شما این امکان را می‌دهد تا در صورتی که می‌خواهید یک سیستم حفاظت از محتوا بسازید، به کاربران در مورد ناوبری آنها از سایت خود و نشانی اینترنتی که می‌خواهند به آن دسترسی داشته باشند هشدار دهید.

کد کامل برای راه اندازی برنامه Oats~i چیزی شبیه به این خواهد بود:

//sourced from index.js in the starter app
const appStateManager = new AppStateManager(AppRoutingInfo);
    appRoot.initApp(appStateManager, new MainRouter(AppRoutingInfo, appStateManager, (args) => {}, "", async (url) => {

        return {

            canAccess: true,
            fallbackRoute: "https://dev.to/"
        }
    }), { template: null, mainNavInfos: AppMainNavInfo }, "");

می‌توانید این کد را در تابعی قرار دهید که به‌طور خودکار هنگام بارگیری فایل index.js شما در مرورگر فراخوانی می‌شود تا برنامه وب به‌طور خودکار در بارگذاری صفحه شروع شود. در مورد پروژه شروع کننده، این تابع ()initApp است.

حالا دو مورد دیگر برای توضیح باقی مانده است.

اطلاعات مسیریابی برنامه

از کد راه‌اندازی، می‌توانید به این نکته اشاره کنید که ارائه اطلاعات مسیریابی برای یک برنامه وب Oats~i برای مقداردهی اولیه الزامی است. از مثال‌هایی که آورده‌ام، این اطلاعات را در جای دیگری تعریف می‌کنیم و سپس آن را در اسکریپت راه‌اندازی خود وارد می‌کنیم. تعریف اطلاعات مسیریابی خود در یک فایل جداگانه اجباری نیست، اما به نظر من این کار خوبی است، به خصوص زمانی که می خواهید مسیرهای بیشتری یا ناوبری اصلی را در برنامه وب خود اضافه کنید.

در اینجا نحوه تعریف اطلاعات مسیریابی برای یک برنامه وب Oats~i با استفاده از مثالی از پروژه آغازگر آمده است.

const AppRoutingInfo = RoutingInfoUtils.buildMainRoutingInfo([

    {
        route: "https://dev.to/",
        target: homeMainFragmentBuilder,
        nestedChildFragments: null
    },
    {
        route: "https://dev.to/about",
        target: aboutMainFragmentBuilder,
        nestedChildFragments: null
    }
], AppMainNavInfo);

می‌توانید اطلاعات مسیریابی را با هر نامی که می‌خواهید فراخوانی کنید، به شرطی که از روش RoutingInfoUtils.buildMainRoutingInfo() برای ساخت آن استفاده کنید.

این روش آرایه ای از اطلاعات مسیریابی را که هر اطلاعات در آن نگهداری می شود، برمی گرداند:

• مسیر: این مسیری است که اطلاعات برای آن معتبر است. شما نمی توانید یک مسیر را در اطلاعات مسیریابی خود تکرار کنید.
• هدف: این قطعه اصلی است که مسیر باید از آن شروع شود. Oats~i قطعات خود را از قطعه اصلی به قطعات کودک می سازد
• قطعات کودک تو در تو: اینها قطعات کودک هستند که باید به ترتیب برای مسیر ساخته شوند. این ترتیب معمولاً ساختار DOM را نشان می‌دهد، با قطعه‌ای که باید ابتدا در DOM ایجاد شود، قبل از اینکه فرزند تودرتو باشد یا قطعه فرزند در همان سطح با آن باشد.

می توانید متوجه شوید که AppMainNavInfo را نیز به متد buildMainRoutingInfo() منتقل می کنیم. این همان اطلاعاتی است که ما در اسکریپت شروع به مدیریت وضعیت برنامه و روش initApp دادیم. بیایید به آن نگاه کنیم.

اطلاعات ناو اصلی برنامه

یک برنامه وب خوب نیاز به ناوبری خوب دارد. و اغلب، راه‌اندازی ناوبری می‌تواند شامل تعداد زیادی کد صفحه دیگ بخار باشد تا نه تنها شنونده‌های کلیک را برای پیوندها یا دکمه‌های ناوبری تنظیم کند، بلکه سبک آنها را بر اساس اینکه کدام یک فعال است تغییر دهد.

Oats~i از صفحه دیگ برای شما مراقبت می کند و از شما می خواهد که فقط اطلاعات ناوبری مورد نیاز برنامه وب خود را ارائه دهید. این فرمت زیر را دارد (مثالی که از پروژه شروع کننده منبع شده است).

const AppMainNavInfo = MainNavigationInfoBuilder.buildMainNavigationInfo([

    {
        selector: "home-link",
        defaultRoute: "https://dev.to/",
        baseActiveRoute: "https://dev.to/",
    },
    {
        selector: "about-link",
        defaultRoute: "https://dev.to/about",
        baseActiveRoute: "https://dev.to/about",
    }
]);

شما با استفاده از روش MainNavigationInfoBuilder.buildMainNavigationInfo () یک اطلاعات ناوبری اصلی در Oats~i ایجاد می کنید. آرایه ای از اطلاعات ناوبری را برمی گرداند که هر کدام شامل موارد زیر است:

• انتخابگر: این یک انتخابگر نقطه است که Oats~i از آن برای پرس و جو از پیوند یا دکمه پیمایش، تنظیم شنوندگان (فقط برای دکمه‌ها – پیوندها/برچسب‌های A به‌طور خودکار رهگیری می‌شوند) و به‌روزرسانی ویژگی «حالت ناوبری» آن بر اساس فعال بودن آن استفاده می‌کند. یا نه در نشانه گذاری شما، این فقط یک نام کلاس است.
• مسیر پیش فرض: این مسیر پیش‌فرض است که اگر روی دکمه ناوبری کلیک شود، Oats~i باید به آن مسیر دهد. برای پیوندها، از آنجایی که Oats~i به طور خودکار کلیک‌های روی پیوندها/برچسب‌های A را قطع می‌کند، مطمئن شوید که این با ارزش ویژگی href شما مطابقت دارد.
• baseActiveRoute: این مسیر اصلی است که برای آن دکمه یا پیوند ناوبری باید فعال تلقی شود. به عنوان مثال، اگر یک دکمه ناوبری با پیش‌فرض Route «/profile» و baseActiveRoute «/profile» دارید و کاربر به /profile/update-pic هدایت می‌شود، Oats~i این دکمه را فعال تنظیم می‌کند زیرا این مسیر با مقدار baseActiveRoute شروع می‌شود. .

بیایید همه چیز را کنار هم بگذاریم و تصویر نهایی از آنچه برای راه اندازی و راه اندازی برنامه Oats~i نیاز دارید داشته باشیم. به طور معمول، شما باید تعریف کرده باشید:

• اطلاعات مسیریابی برنامه
• اطلاعات ناوبری اصلی برنامه (برای پیوندهای پیمایش اصلی در نمای اصلی شما)

سپس، به سادگی یک نمونه جدید از مدیر وضعیت برنامه دریافت کنید و با appRoot.initApp با ارسال این نمونه، اطلاعات مسیریابی برنامه، اطلاعات ناوبری اصلی برنامه و نمونه روتر اصلی تماس بگیرید. دوباره، در اینجا کد مثالی از پروژه شروع Oats~i است که همراه با cli ارائه می شود، اکنون در تابعی پیچیده شده است که ما بلافاصله آن را می خوانیم که فایل index.js در مرورگر بارگیری می شود.

function initApp(){

    const appStateManager = new AppStateManager(AppRoutingInfo);
    appRoot.initApp(appStateManager, new MainRouter(AppRoutingInfo, appStateManager, (args) => {}, "", async (url) => {

        return {

            canAccess: true,
            fallbackRoute: "https://dev.to/"
        }
    }), { template: null, mainNavInfos: AppMainNavInfo }, "");
}

initApp();

همانطور که برنامه وب شما رشد می کند و تغییر می کند، تنها بیت هایی از این کد که همیشه باید تغییر دهید، اطلاعات مسیریابی برنامه و اطلاعات ناوبری اصلی (AppRoutingInfo و AppMainNavInfo) است. این معمولاً به این دلیل است که شما مسیرهای جدیدی را به برنامه وب خود اضافه می کنید (در نتیجه اطلاعات مسیریابی را به روز می کنید) یا دکمه ها یا پیوندهای پیمایش اصلی جدید را اضافه می کنید (در نتیجه اطلاعات ناوبری اصلی را به روز می کنید).

بقیه کدها دست نخورده خواهند بود.

وقتی پروژه کوچک خود را در Oats~i بسازیم، بسیاری از اینها منطقی خواهد بود. این کاری است که ما در قسمت بعدی این مجموعه انجام خواهیم داد تا مفاهیم اساسی بعدی در مورد ساختن یک برنامه وب Oats~i را بیاموزیم.

اونوقت میبینمت

Oats~i را پشتیبانی کنید

می توانید از طریق Patreon از توسعه Oats~i حمایت کنید یا برای من یک قهوه بخرید.