آموزش بررسی عمیق توسعه اندروید با استفاده از Jetpack Compose - آخرین آپدیت

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

مقدمه Introduction

• مقدمه Introduction

دانلود اندروید استودیو و شروع به کار Downloading Android Studio and Getting Started

• دانلود اندروید استودیو Download Android Studio Pandas

• راه‌اندازی اولین اپلیکیشن و تور اندروید استودیو First App Setup & Android Studio Tour

• نصب امولاتور و اجرای اولین پروژه Install an Emulator & Run Your First Project

مبانی کاتلین (Kotlin) Kotlin Basics

• مقدمه‌ای بر مفاهیم بنیادی کاتلین Introduction to Kotlin Fundamentals

• متغیرها، مقادیر، رشته‌ها و String Templates Variables, Values, Strings and String Templates

• لیست‌ها، حلقه‌ها و دستور If Lists, Loops and the If Statement/Expression

• مقادیر Optionals، دیتا کلاس‌ها و خطای میلیارد دلاری Optionals, Data Class and the Billion Dollar Error

• انواع داده‌ها: Int, Double, Float Data Types - Int, Double, Float

• رشته‌ها: توالی‌های Escape و Raw Strings Strings - Escape Sequences, Raw Strings

• بیشتر درباره حلقه‌ها More on Loops

• رویکرد تابعی به حلقه‌ها و توابع مرتبه بالا (Higher Order Functions) Functional Approach to Loops and Higher Order Functions

• حلقه Repeat Repeat Loop

• جفت‌ها (Pairs) و سه-تایی‌ها (Triples) Pairs and Triples

• عبارت When When Expression

• Enumها با پارامتر و پیمایش روی آن‌ها Enums with parameters and iterating over enums

آشنایی با لایوت‌ها Introducing Layouts

• بررسی لایوت‌های Row, Column و Box با تصاویر و اشکال Exploring Row, Column, and Box Layouts with Images and Shapes

• ساخت آواتار با Box و Clipping Creating an Avatar with Box and Clipping

مبانی Jetpack Compose Jetpack Compose Basics

• راه‌اندازی پروژه Setting up the Project

• ایجاد پس‌زمینه گرادینت Creating a Gradient Background

• افکت Fade-in با animateFloatAsState و LaunchEffect Fading in using animateFloatAsState and LaunchEffect

• تنظیمات پروژه انیمیشن Animation Project Setup

• انیمیت کردن Opacity با animateFloatAsState Animating Opacity using animateFloatAsState

• انیمیشن‌های مبتنی بر وضعیت (State) State-Based Animations

• تکرار انیمیت کردن Opacity با animateFloatAsState Animating Opacity using animateFloatAsState

کامپوزبل Text و اصلاح‌کننده‌ها (Modifiers) Text Composable and Modifiers

• یک خوشامدگویی زیبا A Nice Greeting

• دموی اصلاح‌کننده‌های متن (Text Modifiers) Text Modifiers Demo

• مثال‌های متن تزئین شده Decorated Text Examples

• متن با سایه و شکل Text With Shadow And Shape

• متن قابل کلیک Clickable Text

• افزودن اسکرول عمودی Adding Vertical Scroll

• متن گرادینت Gradient Text

• متن با سایه و بلور Shadow and Blur Text

• استفاده از Annotated Build String Annotated Build String

بررسی کلاس‌ها و اینترفیس‌های کاتلین Exploring Kotlin Classes and Interfaces

• راه‌اندازی پروژه دموی کلاس‌های کاتلین Setup Kotlin Class Demo Project

• معرفی کلاس‌ها Introducing Classes

• ساخت صفحه ویژگی‌های دایره Creating a Circle Properties Screen

• افزودن یک دایره Adding a Circle

• دیتا کلاس‌ها (Data Classes) Data Classes

• کلاس‌های Enum ساده Simple Enum Classes

• کلاس‌های Enum عمومی General Enum Classes

• کلاس‌های Sealed Sealed Classes

• ساخت سیستم وضعیت UI با Sealed Classes Building a UI State System with Sealed Classes

• نکات کاتلین: استفاده از کلاس‌های تو در تو برای مدل‌سازی پاسخ‌های شبکه و وضعیت UI Kotlin Tips- Use Nested Classes to Model Network Responses & UI State

• کلاس‌های Singleton Singleton Classes

• کلاس‌های Abstract در کاتلین و Jetpack Compose Abstract Classes in Kotlin and Jetpack Compose

• مثال کلاس Abstract و مقدمه‌ای کوتاه بر اینترفیس‌ها Abstract Class Example and Brief Introduction to Interfaces

• مقایسه اینترفیس‌ها و کلاس‌ها Interfaces vs Classes

• کلاس‌های Inner Inner Classes

• اینترفیس‌های Sealed Sealed Interfaces

معرفی اپلیکیشن Mood Map Introducing the Mood Map App

• معرفی اپلیکیشن Mood Map Introducing the Mood Map App

• راه‌اندازی پروژه و کامپوزبل MoodMapApp Setting up The Project - MoodMapApp Composable

• استفاده از Scaffold: نوار بالایی (Top Bar) Scaffold - Top Bar

• استفاده از Scaffold: نوار پایینی (Bottom Bar) Scaffold - Bottom Bar

• ناوبری بین صفحه Timeline و Stats Navigating between Timeline and Stats Screen

• استفاده از Scaffold: دکمه شناور (FAB) Scaffold - Floating Action Button

• دکمه شناور: تغییر وضعیت انتخاب‌گر ایموجی Floating Action Button - Toggle Emoji Picker

• پیاده‌سازی Snackbars در Scaffold Implementing Snackbars in a Jetpack Compose Scaffold

• ساخت انتخاب‌گر ایموجی Creating the Emoji Picker

• ساخت ردیف‌های ایموجی قابل کلیک Creating the Clickable Emoji Rows

• بازنویسی انتخاب‌گر ایموجی برای ایجاد UI قابل استفاده مجدد Emoji Picker Refactor Creating Reusable UI

• ورودی مود (Mood Entry) Mood Entry

• نقشه مود (Mood Map) Mood Entry Mood Map

• تولید پیام‌های مود تصادفی Generate Random Mood Messages

• پیاده‌سازی صفحه Timeline Implementing the Timeline Screen

• پیاده‌سازی MoodCard Implementing the MoodCard

• اتصال انتخاب‌گر ایموجی Connecting the Emoji Picker

• مقادیر صفحه Stats Stats Screen Values

• طراحی لایوت صفحه Stats Designing the Stats Screen Layout

• نمودار میله‌ای مود Mood Bar Chart

• پیاده‌سازی نمودار دایره‌ای مود با استفاده از Canvas Implementing Mood Pie Chart using the Canvas

• استفاده از Enum Class برای بهبود نوار پایینی Using an Enum Class to Improve Bottom Bar

• تخصیص خودکار شناسه‌های یکتا Automatically Assigning Unique Identifiers

آموزش Jetpack Compose: لیست آواتار با انتخاب چک‌باکس Jetpack Compose Tutorial - Avatar List with Checkbox Selection

• مقدمه Introduction

• راه‌اندازی پروژه Setting up the Project

• وارد کردن تصاویر کاربران Importing User Images

• دیتا کلاس CrewMember CrewMember Data Class

• صفحه آواتار خدمه Crew Avatar Screen

• صفحه اطلاعات خدمه Crew Info Screen

• صفحه ردیف خدمه Crew Row Screen

• لیست خدمه با استفاده از LazyColumn Crew List using LazyColumn

• تجمیع همه در صفحه Crew Roster Putting it together with Crew Roster Screen

تمرینات کدنویسی با رابط کاربری زیبا Coding Exercises with a Nice User Interface

• معرفی تمرینات کدنویسی Introducing the Coding Exercises

• راه‌اندازی پروژه Setting up the Project

• تمرین: بخش‌پذیری بر ۷ Exercise - Divisible by 7

• پاسخ: بخش‌پذیری بر ۷ Solution - Divisible by 7

• تمرین: بخش‌پذیری بر D و بازه Exercise - Divisible by D and Range

• پاسخ: منطق بخش‌پذیری بر D Solution - Divisible by D Logic

• پاسخ: رابط کاربری بخش‌پذیری بر D Solution - Divisible by D User Interface

• پاسخ: بهبود لایوت و نتایج اسکرول شونده Solution - Layout Improvements and Scrollable Results

اپلیکیشن Greetings: اولین قدم‌ها در Jetpack Compose Greetings App - First steps in Jetpack Compose

• معرفی Preview و امولاتور در اندروید استودیو Introducing the Preview and the Emulator in Android Studio

• متن، اصلاح‌کننده‌ها و ستون‌ها Text, Modifiers and Columns

• ردیف‌ها، ستون‌ها و باکس‌ها Rows, Columns and Boxes

• متن، کامپوزبل‌های سفارشی و اصلاح‌کننده‌ها Text, Custom Composables and Modifiers

• بازنویسی کد و افزودن Border Refactoring Code and adding a Border

• ایجاد پس‌زمینه Linear Gradient Creating a Linear Gradient background

• نمای متن سفارشی Custom text View *

• تغییر تصادفی رنگ‌ها با استفاده از Mutable State Randomly Changes Colors using a Mutable State

• ساخت مدل آیتم داده با استفاده از Data Class Creating the Data Item Model using a Data Class

• ساخت نمای پیام (Message View) Creating the Message View

• ساخت عنوان Greetings Creating the Greetings Title

• دایره قابل چرخش، انیمیشن‌ها و Sweep Gradients Rotatable Circle, Animatings and Sweep Gradients

• ساخت نمای عنوان Creating the Title View

• نمای اصلی Greetings Main Greetings View

• منابع رشته (String Resources) String Resources

• بومی‌سازی اپلیکیشن (Localization) App Localization

انیمیشن‌ها Animations

• راه‌اندازی پروژه انیمیشن Animation Project Setup

• قابلیت Animated Visibility Animated Visibility

پروژه GeoBlur GeoBlur

• شروع به کار Getting Started

• اسکلت نمای اصلی Skeleton of the Main View

• نوار پیشرفت (Progress Bar) سفارشی Custom Progress Bar

• افزودن نوار پیشرفت به نما و به‌روزرسانی با کلیک دکمه Adding the Progress Bar to the View and Updating It with Button Clicks

• ساخت دیتا کلاس‌های Landmark و UI State Creating the Landmark and UI State Data Classes

• افزودن وابستگی‌ها (Dependencies) Adding the Dependencies

• ایجاد پوشه Assets و فایل JSON نقاط دیدنی Creating an Assets Folder and a Landmarks JSON File

• سازماندهی اپلیکیشن با MVVM: تنظیم پکیج‌های Model, View و ViewModel Organizing Your App with MVVM- Setting Up Model, View, and ViewModel Packages

• درک ViewModel، MutableStateFlow و asStateFlow در MVVM Understanding ViewModel, MutableStateFlow, and asStateFlow in MVVM

• یکپارچه‌سازی وضعیت ViewModel در کامپوزبل‌ها Integrating ViewModel State into Composables

• دسترسی ایمن به لیست‌های پویا از وضعیت ViewModel Safely Accessing Dynamic Lists from ViewModel State

• بارگذاری و تجزیه JSON از Assets در ViewModel Loading and Parsing JSON from Assets in ViewModel

• پیاده‌سازی ثبت پاسخ Implementing Submit Answer

• بازنشانی وضعیت بازی و مخلوط کردن سوالات Resetting Game State and Shuffling Questions

• افزودن ویژگی‌های محاسباتی playerWon و progress Adding Computed Properties playerWon and progress

• اتصال ViewModel به View با پیشرفت، وضعیت بارگذاری و حالت تقلب Connecting ViewModel to View with Progress, Loading State, and Cheat Mode

• نمایش و بلور کردن تصاویر با AsyncImage در Compose Displaying and Blurring Images with AsyncImage in Compose

• مخلوط کردن و نمایش گزینه‌های پاسخ در کوییز Shuffling and Displaying Answer Options in the Quiz

• نمایش تصاویر Displaying the Images

• نمایش دیالوگ برد/باخت در Jetpack Compose Showing a Win/Loss Dialog in Jetpack Compose

• حذف هشدارها (Warnings) Removing Warnings

• رویکرد بهتر به View Models با استفاده از collectAsStateWithLifecycle A Better Approach to View Models using collectAsStateWithLifecycle

بررسی ژست‌های لمسی (Gestures) Exploring Gestures

• مقدمه‌ای بر ژست‌های لمسی Introduction to Gestures

• زوم با استفاده از Pointer Input Zoom using Pointer Input

• افزودن ژست ضربه (Tap) با زنجیر کردن Pointer Input Adding a Tap Gesture by Chaining Pointer Input

• ژست‌های کشیدن (Drag) Drag Gestures

مبانی Jetpack Compose با پروژه Tip Master Jetpack Compose Basics with Tip Master

• معرفی Tip Master: آنچه خواهید ساخت Meet Tip Master- What You'll Build

• راه‌اندازی Setting Up

• متغیرهای وضعیت برای محاسبه انعام State Variables for Tip Calculation

• ساخت هدر با سوئیچ تم Creating the Header with Theme Switch

• افزودن فیلدهای ورودی برای مبلغ و تعداد نفرات Adding Input Fields for Bill and People

• رابط کاربری گزینه‌های انعام با فیلد درصد سفارشی Tip Options UI with Custom Percentage Field

• ساخت کامپوننت TipButton قابل استفاده مجدد Creating the Reusable TipButton Component

• طراحی لایوت نهایی خلاصه صورت‌حساب Laying Out the Final Bill Summary

• طراحی ردیف‌های خلاصه با آیکون و مقادیر Designing Summary Rows with Icons and Values

• مدیریت وضعیت بین دکمه‌های انعام و فیلد ورودی Managing State Between Tip Buttons and Input Field

• طراحی اسپلش اسکرین با پس‌زمینه گرادینت Designing a Splash Screen with Gradient Background

• مدیریت داده‌های لانچ اپلیکیشن با SharedPreferences Managing App Launch Data Using SharedPreferences

• حالت تیره و روشن پویا با Jetpack Compose Dynamic Dark and Light Mode with Jetpack Compose

• افزودن آیکون انعام سفارشی به اپلیکیشن اندروید Adding a Custom Tip Icon to Your Android App

ویژگی‌های کاتلین: گترها، سترها و Backing Properties سفارشی Kotlin Properties - Custom Getters, Setters, and Backing Properties

• مقدمه‌ای بر ویژگی‌های (Properties) کاتلین Introduction to Kotlin Properties

• تفاوت var و val (مرور کلی) var vs val – Key Differences (Recap)

• گترها و سترهای سفارشی Custom Getters and Setters

• سترهای خصوصی (Private Setters) Private setters

• فیلدهای Backing ساده Simple Backing Fields

• ویژگی‌های Backing Backing Properties

• راه‌اندازی اپلیکیشن Energy Setting Up Energy App

• ساخت صفحه مود (Mood Screen) Creating the Mood Screen

• ساخت Mood View Model Creating the Mood View Model

• دکمه عملیاتی (Action Button) The Action Button

• سطح انرژی با اشکال و Canvas The Energy Level with Shapes and the Canvas

• پایه صفحه مود: لایوت، گرادینت‌ها و تایپوگرافی Mood Screen Foundation- Layout, Gradients and Typography

• دکمه‌های عملیاتی صفحه مود Mood Screen Action Buttons

• اتصال ViewModel به صفحه مود و پرداخت‌های نهایی Wiring the ViewModel to the Mood Screen + Final Touches

ساخت اپلیکیشن یادداشت با Room Database Building a Notes App with Room Database

• مقدمه Introduction

• راه‌اندازی پروژه و صفحه اصلی Setting up the Project and the Main Screen

• ساختار پکیج و مدل Note Package Structure and the Note Model

• مدیریت وضعیت و منطق اپلیکیشن با ViewModel Managing App State and Logic with ViewModel

• تزریق ViewModel به صفحه اصلی Injecting the View Model into the Main Screen

• ساختاربندی صفحه اصلی و ساخت نماهای پشتیبان Structuring the Main Screen and Creating Supporting Views

• هدر یادداشت‌ها Notes Header

• نوار جستجو و مرتب‌سازی - بخش اول Search and Sort Bar - Part 1

• نوار جستجو و مرتب‌سازی - بخش دوم Search and Sort Bar - Part 2

• پیاده‌سازی کامپوزبل AddOrEditNoteCard Implementing the AddOrEditNoteCard Composable

• پیاده‌سازی کامپوزبل NotesListOrEmpty Implementing the NotesListOrEmpty Composable

• پیاده‌سازی کامپوزبل EmptyNotesState Implementing EmptyNotesState Composable

• کامپوزبل NoteItem NoteItem Composable

• استایل‌دهی Material3 برای NoteItem NoteItem Material3 Styling

• تولید UUID پیش‌فرض برای مدل یادداشت Generating a Default UUID for our Note Model

• عملیات CRUD: افزودن یادداشت CRUD - Add Note

• عملیات CRUD: به‌روزرسانی یادداشت CRUD - Update Note

• عملیات CRUD: حذف یادداشت CRUD - Delete Note

• عملیات CRUD: ویرایش یادداشت CRUD - Edit Note

• فیلتر و مرتب‌سازی یادداشت‌ها Filter and Sort Notes

• تست ویژگی‌های اپلیکیشن قبل از افزودن Room Testing App Features Before Adding Room

• افزودن وابستگی‌های Room Adding Room Dependencies

• تبدیل تاریخ به رشته و بالعکس Converting Dates to Strings and Vice Versa

• یکپارچه‌سازی NoteModel با Room NoteModel Room Integration

• ساخت اینترفیس Note DAO Creating the Note DAO Interface

• اتصال DAO به ViewModel Connecting the DAO to ViewModel

• ساخت دیتابیس Singleton Room Creating a Singleton Room Database

• استفاده از ViewModel با Room در Jetpack Compose ViewModel with Room in Jetpack Compose

• اجرای اپلیکیشن و تنظیم وارد کردنهای Gradle Running the App and Adjusting Gradle imports

• به‌روزرسانی LoadNotes با استفاده از Room Updating LoadNotes using Room

• به‌روزرسانی عملیات CRUD برای استفاده از Room Database Updating CRUD Operations to use Room Database

• تست نهایی اپلیکیشن یادداشت Testing out our Note App

• انتقال منطق ViewModel از MainActivity Moving ViewModel Logic out of MainActivity

هم‌روندی (Concurrency) در کاتلین Concurrency in Kotlin

• مقدمه‌ای بر همگام (Synchronous) در مقابل ناهمگام (Asynchronous) Introduction to Synchronous vs Asynchronous

• راه‌اندازی Kotlin Playground برای بخش هم‌روندی Kotlin Playground Setup for Concurrency Section

• کد ناهمگام متوالی با استفاده از Launch و Suspend Sequential Asynchronous code using Launch and Suspend

• کد ناهمگام موازی با استفاده از Launch و Suspend Parallel Asynchronous code using Launch and Suspend

بازی Game Of Life Game Of Life

• ساختار کلی نمای اصلی General Structure of the Main View

• منابع تصاویر Image Resources

• مدل BoardModel و متدهای بنیادی BoardModel and Fundamental Methods

• نوع طراحی (DesignType) DesignType

• پیاده‌سازی applyDesignPattern در مدل Board Implementing applyDesignPattern in the Board Model

• شبکه موجودات (Creature Grid) Creature Grid

• پیاده‌سازی نمای Board Implementing the Board View

• پیاده‌سازی Tap to Add Design Pattern در نمای Board Implementing Tap to Add Design Pattern in Board View

• تولید نسل بعدی با LaunchEffect در نمای Game of Life Generating the Next Generation with a LaunchEffect in the Game of Life View

• تنظیم سرعت و بازنشانی بازی در GameOfLifeView Adjusting Speed and Resetting the Game in GameOfLifeView

• ساخت دکمه طراحی Creating the Design Button

• نمای انتخاب طراحی - بخش اول Design Selection View - Part 1

• نمای انتخاب طراحی - دکمه دایره‌ای Design Selection View - Circle Button

• نمای انتخاب طراحی - تکمیل Design Selection View - Completion

• آیکون‌های نمای کنترل The Control View Icons

• دکمه کنترل Control Button

• پیاده‌سازی نمای کنترل - بخش اول Implementing the Control View - Part 1

• پیاده‌سازی نمای کنترل - بخش دوم Implementing the Control View - Part 2

• تولید تصاویر پس‌زمینه تصادفی Generating Random Background Images

• افزودن منبع تصویر کوهستان گمشده Adding the Missing Mountain Image Resource

بازی اعداد چینی Shuzi Shuzi Chinese Number Game

• مقدمه Introduction

• ایجاد پروژه Shuzi Creating the Shuzi Project

• طراحی لایوت صفحه بازی Laying out the Game Screen

• افزودن Top App Bar و Scaffold به صفحه بازی Adding a Top App Bar and a Scaffold to the Game Screen

• تنظیم ساختار پوشه‌ها Setting up the Folder Structure

• اندروید Jetpack Compose: ایجاد تم رنگی سفارشی Material 3 Android Jetpack Compose – Creating a Custom Material 3 Color Theme

• ساخت مدل داده (Option Model Class) در کاتلین برای اندروید Creating a Data Model (Option Model Class) in Kotlin for Android

• ساخت مخزن اعداد در کاتلین (لایه داده برای MVVM) Building a Number Repository in Kotlin (Data Layer for MVVM)

• از اعداد به چینی: منطق کاتلین برای کاراکترها و پین‌یین (Pinyin) From Numbers to Chinese- Kotlin Logic for Characters & Pinyin

• ساخت GameViewModel و اینترفیس SpeechEngine Creating the GameViewModel and SpeechEngine Interface

• طراحی وضعیت UI بازی در Jetpack Compose Designing the Game UI State in Jetpack Compose

• Game ViewModel: وضعیت UI، شروع بازی و تولید گزینه‌ها Game ViewModel - UI State, startGame, and generateOptions

• Game ViewModel: پیاده‌سازی setOptions و resetGame Game ViewModel - Implementing setOptions and resetGame

• نوار پیشرفت بازی Game Progress Bar

• طراحی نمایش عدد با گرادینت و کارت Designing the Number Display with Gradient and Card

• افزودن سوئیچ پین‌یین و پخش صدا به نمایش عدد Adding Pinyin Toggle and Audio Playback to the Number Display

• نهایی کردن صفحه نمایش عدد Finalizing the Number Display Screen

• انیمیت کردن متن پین‌یین با AnimatedVisibility در Jetpack Compose Animating Pinyin Text with AnimatedVisibility in Jetpack Compose

• ساخت شبکه کوییز با LazyVerticalGrid Creating the Quiz Grid with a LazyVerticalGrid

• کارت گزینه کوییز Quiz Option Card

• دیالوگ پایان بازی Game Over Dialog

• یکپارچه‌سازی کامپوننت‌ها در صفحه بازی Integrating Components into the Game Screen

• تزریق ViewModel به صفحه بازی Injecting the View Model into the Game Screen

• اجرای اپلیکیشن و تنظیم Speech Manager App Execution and Speech Manager Setup

• پیاده‌سازی Speech Manager Implementing the Speech Manager

• اجرای اپلیکیشن Running the App

• بهبود صفحه بازی و بحث درباره ViewModel Improving the Game Screen and ViewModel Discussion

پازل Mystic Mystic Puzzle

• مقدمه‌ای بر Mystic Puzzle Introduction to Mystic Puzzle

• اولین لایه UI: گرادینت تمام صفحه در Main Activity First UI Layer- Full-Screen Gradient in the Main Activit

• داده‌های تایل (Tile) Tile Data

• هدر بازی Game Header

• دکمه عملیاتی Action Button

• ثابت‌های UI UI Constants

• کامپوزبل Tile با انیمیشن سفارشی Tile Composable with Custom Animation

• وضعیت بازی Game State

• راه‌اندازی Tiles View Model Setting up the Tiles View Model

• تنظیمات تکمیلی Tiles View Model Setting up the Tiles View Model

• پازل حل شده: راهکارهای جایگزین Solved Puzzle - Alternative Solutions

• View Model: بارگذاری تایل‌ها View Model - Load Tiles

• View Model: بررسی پایان بازی View Model - Is Game Over

• View Model: تابع کمکی Is Adjacent View Model - Is Adjacent Helper Function

• View Model: مخلوط کردن (Shuffle) View Model - Shuffle

• View Model: امتحان کردن حرکت View Model - Try Move

• View Model: تغییر وضعیت نمایش پایان بازی View Model - Change is Game Over Visibility

• پاکسازی کد: بازنویسی و ساختاربندی Cleaning Up Code - Refactoring and Structure

• تبدیل کلاس به یک ViewModel واقعی Making the ViewModel a Bonafide ViewModel

• ساختاربندی صفحه تایل Structuring the Tile Screen

• صفحه تایل: دکمه Shuffle Tile Screen - The Shuffle Button

• صفحه تایل: تراز کردن هدر بازی و راه‌اندازی بورد Tile Screen - Alligning the Game Header and Setting up the Board

• صفحه تایل: ساخت بورد و فعال‌سازی گیم‌پلی Tile Screen - Building the Board and Enabling Gameplay

• انیمیت کردن تایل‌ها Animating the Tiles