آموزش Full Stack Kotlin Multiplatform KMP Development | وب موبایل

سرفصل ها و درس ها

معرفی و راه اندازی Introduction and Setup

• معرفی Introduction

• درباره KMP About KMP

• درباره Kobweb About Kobweb

• Kobweb Binary را دانلود و نصب کنید Download & Install Kobweb Binary

• یک پروژه Kobweb خالی ایجاد کنید Create an Empty Kobweb Project

• کد منبع پروژه (Github) Project Source Code (Github)

پنل مدیریت - صفحه ورود Admin Panel - Login Screen

• نمای کلی پنل مدیریت Admin Panel Overview

• طراحی صفحه ورود به سیستم Design Login Screen

• ایجاد یک انیمیشن انتقال Creating a Transition Animation

• راه اندازی Kmongo + MongoRepository Kmongo Setup + MongoRepository

• اولین نقطه پایانی API ایجاد کنید - usercheck Create a first API Endpoint - usercheck

• ماژول commonMain ایجاد کنید Create commonMain module

• درخواست POST - وجود کاربر را بررسی کنید POST Request - Check User Existence

• راه اندازی سرور محلی MongoDB MongoDB Local Server setup

• تغییر مسیر کاربران غیرمجاز Redirect Unauthorized users

پنل مدیریت - صفحه اصلی Admin Panel - Home Screen

• SidePanel را ایجاد کنید Create SidePanel

• NavigationItem - Transition Animation NavigationItem - Transition Animation

• NavigationItem - حالت انتخاب شده NavigationItem - Selected State

• کاربر را خارج کنید Logout the user

• CollapsedSidePanel را ایجاد کنید Create CollapsedSidePanel

• OverflowSidePanel را ایجاد کنید Create OverflowSidePanel

• پانل OverflowSidePanel را متحرک کنید Animate OverflowSidePanel

• ایجاد AdminPageLayout Create AdminPageLayout

• AddButton را ایجاد کنید Create AddButton

• HomeContent ایجاد کنید Create HomeContent

• یک جوک تصادفی از یک API شخص ثالث واکشی کنید Fetch a Random Joke from a third party API

• یک مؤلفه LoadingInicator ایجاد کنید Create a LoadingInicator component

پنل مدیریت - ایجاد صفحه Admin Panel - Create Screen

• فیلدهای سوئیچ و ورودی ایجاد کنید Create Switch and Input Fields

• کامپوننت CategoryDropdown را ایجاد کنید Create CategoryDropdown component

• کامپوننت ThumbnailUloader را ایجاد کنید Create ThumbnailUploader component

• اجزای EditorKey را ایجاد کنید Create EditorKey components

• متحرک سازی اجزای EditorKey Animate EditorKey components

• ویرایشگر و CreateButton Editor and CreateButton

• یک کلاس Post Model ایجاد کنید Create a Post Model class

• بیایید کد خود را بهبود دهیم (#1) Let's improve our code (#1)

• یک پست جدید اضافه کنید - jvmMain Add a New Post - jvmMain

• کلاس CreatePageUiEvent Model CreatePageUiEvent Model class

• یک پست جدید اضافه کنید - jsMain Add a New Post - jsMain

• نمایش یک پنجره بازشو پیام Display a Message Popup

• یک صفحه موفقیت ایجاد کنید Create a Success Page

• کلاس EditorControl ایجاد کنید Create EditorControl class

• اعمال سبک بر روی متن انتخاب شده Apply Style on a selected text

• پیاده سازی کنترل لینک Link Control implementation

• پیاده سازی کنترل تصویر Image Control implementation

• پیاده سازی کد کنترل Code Control implementation

• پیاده سازی Break Style Break Style implementation

پنل مدیریت - صفحه MyPosts Admin Panel - MyPosts Screen

• یک نوار جستجو ایجاد کنید Create a SearchBar

• عناصر انتخاب پست را ایجاد کنید Create post selection elements

• مدل های ApiListResponse و PostWithoutDetails را ایجاد کنید Create ApiListResponse and PostWithoutDetails models

• ReadMyPosts API Endpoint را پیاده سازی کنید Implement readMyPosts API Endpoint

• کامپوننت PostPreview را ایجاد کنید Create PostPreview component

• بیایید چند پست دیگر اضافه کنیم Lets add some more posts

• کامپوننت CategoryChip را ایجاد کنید Create CategoryChip component

• اجرای نمایش بیشتر پست ها Implement Show more posts

• پیاده سازی PostPreview قابل انتخاب Selectable PostPreview implementation

• حذف پست های انتخابی Delete Selected posts

• جستجوی پست ها بر اساس عنوان Search Posts by Title

• نوار جستجو را مخفی کنید Hide the SearchBar

• پست انتخابی را بخوانید Read Selected Post

• بیایید کد خود را بهبود دهیم (#2) Let's improve our code (#2)

• توابع عمومی سفارشی - زندگی خود را آسان تر کنید Custom Generic functions - Make your life easier

• اطلاعات ایجاد صفحه را به روز کنید Update Create Page information

• یک پست انتخابی را به روز کنید Update a Selected Post

وب سایت وبلاگ - صفحه اصلی Blog Website - Home Page

• پیش نمایش طراحی وبلاگ Blog Design Preview

• یک بخش هدر ایجاد کنید Create a Header Section

• یک جزء SearchBar را تغییر دهید Modify a SearchBar component

• هدر را کاملاً پاسخگو کنید Make Header Fully Responsive

• پانل سرریز صفحه اصلی را ایجاد کنید Create HomePage Overflow Panel

• واکشی پست های اصلی Fetch Main Posts

• یک MainSection ایجاد کنید Create a MainSection

• دریافت آخرین پست ها Fetch Latest Posts

• یک PostsSection ایجاد کنید Create a PostsSection

• واکشی پست های حمایت شده Fetch Sponsored Posts

• یک SponsoredPostsSection ایجاد کنید Create a SponsoredPostsSection

• واکشی پست های محبوب Fetch Popular Posts

• نمایش پست های محبوب Display Popular Posts

• منطق مشترک شدن در خبرنامه را پیاده سازی کنید Implement a Subscribe to Newsletter logic

• یک بخش خبرنامه ایجاد کنید Create a NewsletterSection

وب سایت وبلاگ - صفحه جستجو Blog Website - Search Page

• پیاده سازی جستجو بر اساس منطق دسته Implement Search by Category logic

• یک PostsSection را پیاده سازی کنید Implement a PostsSection

• اجرای منطق جستجو بر اساس عنوان Implement Search by Title logic

• رفع خطای SearchPage و افزودن LoadingIndicator Fixing a SearchPage Error and adding a LoadingIndicator

وب سایت وبلاگ - صفحه پست Blog Website - Post Page

• یک صفحه پست ایجاد کنید Create a Post Page

• پاکسازی صفحه پست Post Page cleanup

• یک سبک PostPreview اضافه کنید Add a PostPreview Style

• یک بخش پاورقی ایجاد کنید Create a Footer Section

برنامه اندروید Android App

• یک ماژول اندروید جدید ایجاد کنید Create a New Android Module

• تم سفارشی مواد 3 Custom Material 3 Theme

• وابستگی ها را در ماژول اندروید اضافه کنید Add dependencies inside the Android module

• یک اطلس MongoDB را راه اندازی کنید Setup a MongoDB Atlas

• یک شی MongoSync ایجاد کنید Create a MongoSync object

• راه اندازی ناوبری Navigation Setup

• یک جزء کارت پستال ایجاد کنید Create a PostCard component

• همه پست ها را از پایگاه داده واکشی کنید Fetch all posts from the database

• یک ماژول مشترک ایجاد کنید Create a shared module

• اجرای نوار جستجو SearchBar implementation

• پاکسازی صفحه اصلی HomeScreen cleanup

• یک NavigationDrawer ایجاد کنید Create a NavigationDrawer

• یک صفحه نمایش دسته بندی را پیاده سازی کنید Implement a Category Screen

• یک صفحه نمایش جزئیات را پیاده سازی کنید Implement a Details Screen

• به صورت اختیاری بخش‌های Header و Footer را مخفی کنید Optionally hide Header and Footer sections

• پاکسازی NavGraph NavGraph cleanup

گسترش Deployment

• Backend - یک رشته اتصال را به روز کنید Backend - Update a Connection string

• تست پنل مدیریت و خبرنامه Testing an Admin panel and Newsletter

• بیایید سرور را مستقر کنیم Let's deploy the server

لمس نهایی Final Touch

• اضافه کردن یک سایه جعبه در یک PostPreview Adding a Box Shadow on a PostPreview

به روز رسانی دوره Course Updates

• شماره 1 - راهنمای مهاجرت Kmongo #1 - Kmongo Migration Guide

• شماره 2 مسیر قابل ساخت و به روز رسانی وابستگی #2 Path composable and Dependency Update

• شماره 3 - پاکسازی کلاس دسته #3 - Category class cleanup

• شماره 4 - به روز رسانی صفحه جستجو و وابستگی ها #4 - Search Page & Dependencies Update