آموزش بوت کمپ توسعه دهندگان وب با Flask و Python در سال 2023

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

به این دوره خوش آمدید! Welcome to this Course!

• به دوره خوش آمدید! Welcome to the course!

• مروری بر برنامه درسی Curriculum overview

• از اینجا به کد و کتاب الکترونیکی دسترسی پیدا کنید! Access the code and e-book here!

• چگونه پایتون را روی کامپیوتر خود نصب کنیم How to install Python on your computer

• چگونه IDE خود را نصب کنیم How to install your IDE

یک تجدید کننده کامل پایتون A Full Python Refresher

• معرفی این بخش Introduction to this section

• از اینجا به کد این بخش دسترسی پیدا کنید Access the code for this section here

• متغیرها در پایتون Variables in Python

• ایجاد متغیرها (Python 3.10) Creating variables (Python 3.10)

• قالب بندی رشته در پایتون String formatting in Python

• دریافت ورودی کاربر Getting user input

• درخواست ورودی از کاربران (Python 3.10) Asking users for input (Python 3.10)

• نوشتن اولین برنامه پایتون Writing our first Python app

• لیست ها، تاپل ها و مجموعه ها Lists, tuples and sets

• عملیات مجموعه پیشرفته Advanced set operations

• بولی ها در پایتون Booleans in Python

• اگر اظهارات If statements

• کلمه کلیدی "in" در پایتون The "in" keyword in Python

• اگر عباراتی با کلمه کلیدی "in" وجود دارد If statements with the "in" keyword

• دستورات If (Python 3.10) If statements (Python 3.10)

• حلقه ها در پایتون Loops in Python

• فهرست درک در پایتون List comprehensions in Python

• لغت نامه ها Dictionaries

• متغیرهای تخریب کننده Destructuring variables

• توابع در پایتون Functions in Python

• آرگومان ها و پارامترهای تابع Function arguments and parameters

• ایجاد توابع (Python 3.10) Creating functions (Python 3.10)

• مقادیر پارامترهای پیش فرض Default parameter values

• توابع مقادیر را برمی گرداند Functions returning values

• توابع لامبدا در پایتون Lambda functions in Python

• درک فرهنگ لغت Dictionary comprehensions

• باز کردن آرگومان ها Unpacking arguments

• باز کردن آرگومان های کلمه کلیدی Unpacking keyword arguments

• برنامه نویسی شی گرا در پایتون Object-Oriented Programming in Python

• روش های جادویی: __str__ و __repr__ Magic methods: __str__ and __repr__

• @classmethod و @staticmethod @classmethod and @staticmethod

• وراثت طبقاتی Class inheritance

• ترکیب کلاس Class composition

• hinting را در پایتون 3.5+ تایپ کنید Type hinting in Python 3.5+

• واردات در پایتون Imports in Python

• واردات نسبی در پایتون Relative imports in Python

• خطاها در پایتون Errors in Python

• کلاس های خطای سفارشی Custom error classes

• توابع درجه یک First-class functions

• دکوراتورهای ساده در پایتون Simple decorators in Python

• نحو "at" برای دکوراتورها The 'at' syntax for decorators

• تزئین توابع با پارامترها Decorating functions with parameters

• دکوراتورها با پارامترها Decorators with parameters

• تغییرپذیری در پایتون Mutability in Python

• پارامترهای پیش فرض قابل تغییر (و چرا ایده بدی هستند) Mutable default parameters (and why they're a bad idea)

مبانی وب سایت Website Basics

• وب سایت ها و اینترنت چگونه کار می کنند؟ How do websites and the internet work?

• جلویی در مقابل توسعه عقب Front end vs. Back end development

• فن آوری های کلیدی وب: HTML، CSS و جاوا اسکریپت Key web technologies: HTML, CSS, and JavaScript

• بازرس مرورگر: با استفاده از ابزارهای توسعه دهنده The Browser Inspector: using the developer tools

ساختار صفحه با HTML Page structure with HTML

• عناصر: اجزای اصلی HTML Elements: the basic components of HTML

• اولین عنصر HTML خود را بنویسید Write your first HTML element

• یادآوری: کجا می توان کد و یادداشت ها را پیدا کرد Reminder: where to find code and notes

• یک مثال کامل: HTML و CSS A full example: HTML and CSS

• برخی از رایج ترین عناصر HTML Some of the most common HTML elements

• عناصر رایج HTML Common HTML Elements

• دسته بندی محتوای HTML چیست؟ What are HTML content categories?

• دسته بندی محتوای HTML HTML content categories

• عناصر تودرتو در HTML Nesting elements in HTML

• شروع اولین پروژه HTML ما Starting our first HTML project

• کدام عناصر HTML را نمی توان تودرتو کرد؟ Which HTML elements can't be nested?

• مروری بر عناصر ظرف HTML An overview of HTML container elements

• نگاهی دقیق به ویژگی های HTML A detailed look at HTML attributes

• ویژگی های کلاس و شناسه HTML The class and id HTML attributes

• افزودن تصاویر به پروژه ما Adding images to our project

• HTML معنایی چیست؟ What is semantic HTML?

• حاشیه نویسی در سطح سند در HTML Document-level annotations in HTML

• حاشیه نویسی در سطح سند Document-level annotations

• تکمیل پروژه HTML ما با حاشیه نویسی در سطح سند Completing our HTML project with document-level annotations

• بهترین منبع HTML: MDN The best HTML resource: MDN

سبک صفحه با CSS Page style with CSS

• چگونه یک فایل CSS را پیوند دهیم How to link a CSS file

• پیوند دادن فایل های CSS Linking CSS files

• انتخابگرهای اصلی CSS: هدف قرار دادن عناصر خاص Basic CSS selectors: targeting specific elements

• رنگ ها چگونه کار می کنند: RGB، هگزادسیمال و HSL How colours work: RGB, Hexadecimal, and HSL

• رنگ ها در CSS Colours in CSS

• رنگ ها در CSS: متن و پس زمینه Colours in CSS: text and background

• شروع به نوشتن فایل CSS پروژه ما Starting to write our project's CSS file

• وراثت در CSS Inheritance in CSS

• چه خواصی را نمی توان به ارث برد؟ What properties can't be inherited?

• مدل جعبه CSS The CSS Box Model

• مدل جعبه CSS CSS Box Model

• نمای کلی واحدهای CSS Overview of CSS units

• کار با فاصله در پروژه ما Working with spacing in our project

• انتخابگرهای نزولی در CSS Descendent selectors in CSS

• ویژگی در CSS چیست؟ What is specificity in CSS?

• BEM: یک رویکرد ساده تر برای هدف گذاری CSS BEM: a simpler approach to CSS targeting

پروژه 1: میکرو بلاگ (طراحی + سایت) Project 1: Micro Blog (design+site)

• نمای کلی پروژه این بخش Overview of this section's project

• از اینجا به کد تمام شده دسترسی پیدا کنید Access the finished code here

• از کانال یوتیوب ما: چگونه یک پروژه نرم افزاری جدید را شروع کنیم From our YouTube channel: How to start a new software project

• مرحله 1: تبدیل شدن به یک کاربر Step 1: becoming a user

• مرحله 2: پر کردن مطالب عقب افتاده Step 2: populating the backlog

• مرحله 3: قاب سیمی یا طراحی خشن Step 3: wireframing or rough design

• مرحله 4: طراحی کامل پیکسل Step 4: pixel perfect design

• مرحله 5: ایجاد ساختار صفحه Step 5: creating the page structure

• مرحله 6: کدگذاری ساختار صفحه با HTML Step 6: coding the page structure with HTML

• SVG چیست؟ What are SVGs?

• چگونه تصاویر را در سایت HTML خود قرار دهیم How to include images in our HTML site

• اتمام هدر و پیمایش Finishing the header and navigation

• فرم های HTML: ارسال داده ها HTML forms: sending data

• فرم های HTML: کار با مناطق متنی HTML forms: working with textareas

• ایجاد پاورقی با چندین ستون Creating the footer with multiple columns

• نحوه استایل دادن به هدر و نوار منو How to style the header and menu bar

• تنظیم خانواده فونت در پروژه ما Setting the font family in our project

• نحوه استایل دادن به فرم ها و ورودی های HTML How to style HTML forms and inputs

• نحوه استایل دهی به ورودی های میکرو بلاگ How to style the micro blog entries

• نحوه استایل دادن به فوتر صفحه How to style the page footer

• یک مرجع CSS برای آنچه در این بخش استفاده کرده ایم A CSS reference for what we've used in this section

توسعه Backend با Flask Backend Development with Flask

• "سلام، دنیا" با فلاسک "Hello, world" with Flask

• استفاده از render_template برای ارسال رشته های طولانی تر HTML Using render_template to send longer HTML strings

• Jinja2 چیست؟ What is Jinja2?

• عبارات Jinja2 Jinja2 Expressions

• کار با ساختارهای داده در Jinja2 Working with data structures in Jinja2

• عبارات مشروط در Jinja2 Conditional statements in Jinja2

• استفاده از حلقه ها در Jinja2 Using loops in Jinja2

• راه اندازی پروژه میکروبلاگ ما با Flask Setting up our Microblog project with Flask

• دریافت داده های فرم با استفاده از Flask Receiving form data using Flask

• نمایش ورودی های گذشته در پروژه میکروبلاگ Displaying past entries in the Microblog project

• قالب بندی تاریخ ها به درستی در ورودی های ما Formatting dates correctly in our entries

• مقدمه ای بر MongoDB Introduction to MongoDB

• دسترسی به MongoDB با قطب نما و اطلس Accessing MongoDB with Compass and Atlas

• به‌روزرسانی کوچک پیمونگو که ویدیوی بعدی را تحت تأثیر قرار می‌دهد Small update to pymongo affecting the next video

• ذخیره ورودی های میکروبلاگ در MongoDB Storing Microblog entries in MongoDB

• با زدن "Refresh" چه اتفاقی می افتد؟ What happens when you hit "Refresh"?

• بازیابی ورودی های میکروبلاگ از MongoDB Retrieving the Microblog entries from MongoDB

• نحوه استفاده از الگوی کارخانه برنامه Flask How to use Flask's app factory pattern

استقرار برنامه های Flask در Render.com Deploying Flask Apps to Render.com

• فایل requirement.txt چیست؟ What is the requirements.txt file?

• خدمات استقرار چه کاری برای ما انجام می دهد؟ What do deployment services do for us?

• در حال آماده سازی برنامه ما برای استقرار Preparing our app for deployment

• یک برنامه Flask را در Render.com مستقر کنید Deploy a Flask app to Render.com

استقرار برنامه های Flask در Heroku (LEGACY) Deploying Flask Apps to Heroku (LEGACY)

• Heroku دیگر رایگان نیست - جایگزین Heroku is no longer free - alternatives

• فایل requirement.txt چیست؟ What is the requirements.txt file?

• هیروکو چیست؟ What is Heroku?

• نتیجه نهایی این بخش: یک برنامه کاملاً مستقر شده The end result of this section: a fully deployed app

• از اینجا به کد تمام شده دسترسی پیدا کنید Access the finished code here

• آماده کردن برنامه ما برای Heroku Getting our app ready for Heroku

• استقرار برنامه ما در Heroku Deploying our app to Heroku

• پنهان کردن جزئیات اتصال MongoDB از کد ما Hiding the MongoDB connection details from our code

تسلط Jinja2: سطح I Jinja2 Mastery: Level I

• تعریف متغیرهای Jinja با استفاده از کلمه کلیدی "set". Defining Jinja variables using the 'set' keyword

• Jinja فیلترها برای فراخوانی توابع درون خطی با استفاده از عملگر لوله Jinja filters to call inline functions using the pipe operator

• ماکروهای Jinja برای بهبود قابلیت استفاده مجدد و حذف موارد تکراری Jinja macros to improve reusability and remove duplication

• وراثت Jinja با استفاده از "extends" و "block" Jinja inheritance using 'extends' and 'block'

• نحوه استفاده از تگ های سبک CSS با وراثت How to use CSS style tags with inheritance

• مدیریت CSS در برنامه های بزرگتر با وراثت Handling CSS in larger apps with inheritance

• Jinja با استفاده از کلمه کلیدی "is" تست می کند Jinja tests using the 'is' keyword

• محیط Jinja و زمینه رندر The Jinja Environment and Rendering Context

• مسیریابی با Jinja با استفاده از url_for در قالب‌های خود Routing with Jinja using url_for in your templates

پروژه 2: ردیاب عادت Project 2: Habit Tracker

• نمای کلی پروژه ردیاب عادت Habit tracker project overview

• نمایش و ذخیره عادات Displaying and saving habits

• سبک دادن به ردیاب عادت Styling the habit tracker

• افزودن پیمایش تاریخ Adding date navigation

• سبک پیمایش تاریخ Styling the date navigation

• تکمیل عادات Completing habits

• اضافه کردن طرح های فلاسک Adding Flask blueprints

• راه اندازی MongoDB Setting up MongoDB

• استفاده از MongoDB در ردیاب عادت Using MongoDB in the habit tracker

• مقدمه ای بر Git و GitHub Introduction to Git and GitHub

• استقرار برنامه ما در Heroku Deploying our app to Heroku

تسلط جینجا: سطح دوم Jinja Mastery: Level II

• جینجا شامل کلمه کلیدی شامل می شود Jinja Includes with the include keyword

• کنترل فضای خالی در Jinja Whitespace control in Jinja

• جینجا در حال فرار و گریز Jinja escaping and unescaping

• بلوک تماس برای ماکروهای Jinja The call block for Jinja macros

پروژه 3: نمونه کارها Project 3: Portfolio

• نمای کلی پروژه نمونه کارها Portfolio Project Overview

• ساخت اپلیکیشن Flask ما برای این پروژه Making our Flask app for this project

• الگوی پایه و نوار ناوبری The base template and nav bar

• افزودن یک صفحه درباره به برنامه Flask ما Adding an about page to our Flask app

• افزودن صفحه تماس به برنامه Flask ما Adding a contact page to our Flask app

• مقدمه ای بر CSS Grid Introduction to CSS Grid

• درخواست های رسانه ای با CSS برای توسعه پاسخگو Media queries with CSS for responsive development

• نمایش پروژه ها در صفحه اصلی با استفاده از CSS Grid Displaying projects in the homepage using CSS Grid

• ایجاد صفحات جداگانه پروژه Creating the individual project pages

• رسیدگی به خطا با Flask با استفاده از app.errorhandler Error handling with Flask using app.errorhandler

احراز هویت در برنامه های Flask Authentication in Flask Apps

• کوکی ها چیست؟ جلسات چیست؟ What are cookies? What are sessions?

• ثبت کاربران در برنامه های Flask شما Registering users in your Flask apps

• ورود کاربران با Flask Logging users in with Flask

• هش کردن رمز عبور (یا رمزگذاری) با passlib Password hashing (or encryption) with passlib

• ایجاد دکوراتور «لازم به ورود» Creating a 'login required' decorator

پروژه 4: فهرست تماشای فیلم Project 4: Movie Watchlist

• نمای کلی پروژه و متغیرهای CSS Project overview and CSS variables

• افزودن نوار ناوبری Adding a nav bar

• اضافه کردن پاورقی Adding a footer

• چیدمان صفحه را در کنار هم قرار دهید Putting the page layout together

• نحوه تغییر حالت تاریک در برنامه Flask How to toggle dark mode in a Flask app

• یک فرم با WTForms ایجاد کنید Create a form with WTForms

• یک WTForm در قالب ما رندر کنید Render a WTForm in our template

• داده ها را با استفاده از WTForms دریافت و تأیید کنید Receive and validate data using WTForms

• نمایش جدول تمام فیلم ها Displaying a table of all movies

• ایجاد صفحه جزئیات فیلم Creating the movie details page

• تنظیم رتبه بندی فیلم Setting movie ratings

• آخرین تاریخ تماشا را تنظیم کنید Set the last watched date

• یک ویجت WTForm سفارشی ایجاد کنید Create a custom WTForm Widget

• ویرایش فیلم ها و از پیش پر کردن فرم Editing movies and pre-populating a form

• ثبت نام کاربر را به برنامه Flask اضافه کنید Add user signups to a Flask app

• ورود کاربران را به برنامه Flask اضافه کنید Add user logins to a Flask app

• صفحات را بر اساس کاربر وارد شده شخصی کنید Personalize pages based on the logged in user

• خروج کاربر را به برنامه Flask اضافه کنید Add user logouts to a Flask app

• برنامه Flask ما را در Heroku مستقر کنید Deploy our Flask app to Heroku

• همزمانی در هروکو با گانیکورن Concurrency in Heroku with gunicorn

• محتوای دوره میراث را از اینجا دانلود کنید Download the legacy course content here

• سخنرانی و نتیجه گیری پاداش Bonus lecture and conclusion