ما به تازگی یک آموزش برنامه نویس وب مبتدی عالی را در کانال YouTube freeCodeCamp.org منتشر کردیم. در پایان این آموزش، درک کاملی از چندین فناوری اصلی، از جمله Next.js، Tailwind CSS، و TypeScript خواهید داشت، همگی در حین ایجاد یک پروژه عملی و واقعی.

فن آوری های اصلی مورد استفاده

شما مهارت های خود را در سه فناوری اصلی بهبود خواهید داد.

Next.js

Next.js یک چارچوب قدرتمند React است که توسعه دهندگان را قادر می سازد تا با استفاده از React، رندر سمت سرور و برنامه های وب استاتیک بسازند. این به دلیل سهولت استفاده، عملکرد کارآمد، و محیط پر از ویژگی هایش شناخته شده است. ایده‌آل برای ایجاد برنامه‌های مقیاس‌پذیر، Next.js جنبه‌های پیچیده‌ای مانند مسیریابی و مدیریت API را ساده می‌کند و آن را به انتخابی عالی برای مبتدیانی تبدیل می‌کند که به دنبال تحلیل توسعه React هستند.

Tailwind CSS

Tailwind CSS یک فریم ورک CSS برای اولین بار است که به توسعه دهندگان اجازه می دهد برنامه های خود را مستقیماً در نشانه گذاری HTML خود استایل کنند. برخلاف چارچوب‌های سنتی CSS، Tailwind کلاس‌های کاربردی سطح پایینی را ارائه می‌کند که می‌توانید آنها را برای ایجاد طرح‌های سفارشی بدون ترک HTML خود ترکیب کنید. این رویکرد آن را بسیار انعطاف پذیر و کارآمد می کند، به خصوص برای ساخت سریع طرح های منحصر به فرد و پاسخگو.

TypeScript

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

بخش های دوره

این دوره به چند بخش تقسیم می شود. در اینجا چیزی است که در هر بخش خواهید آموخت.

معرفی

در بخش مقدماتی، ما زمینه را برای پروژه خود فراهم کردیم. شما در مورد ساختار کلی دوره و اهدافی که ما قصد دستیابی به آن را داریم یاد خواهید گرفت. ما در مورد اپلیکیشن Weather که می‌خواهیم بسازیم بحث می‌کنیم و مروری مختصر از فناوری‌هایی که استفاده می‌کنیم ارائه می‌کنیم: Next.js برای چارچوب React، Tailwind CSS برای استایل‌سازی، و TypeScript برای گفت ن تایپ قوی به کد جاوا اسکریپت.

کامپوننت نوار ناوبری

اولین بخش عملی این دوره بر ایجاد مولفه Navbar تمرکز دارد. این بخش به شما می آموزد که چگونه با استفاده از Next.js و Tailwind CSS یک نوار ناوبری کاربردی و زیبا بسازید. شما یاد خواهید گرفت که چگونه اجزای خود را در Next.js ساختاردهی کنید و از کلاس های Tailwind CSS برای استایل نوار نوار خود استفاده کنید و از پاسخگو بودن و کاربرپسند بودن آن اطمینان حاصل کنید.

API و پیکربندی انواع داده

در اینجا، ما به ادغام APIهای خارجی و پیکربندی انواع داده با TypeScript می پردازیم. شما یاد خواهید گرفت که چگونه داده های آب و هوا را از یک API شخص ثالث واکشی کنید و چگونه رابط های TypeScript را برای مدیریت موثر انواع داده ها تعریف کنید. این بخش برای درک نحوه مدیریت داده ها در یک محیط TypeScript و نحوه ادغام منابع داده خارجی در برنامه بسیار مهم است.

اجزای بخش روز جاری

این بخش از دوره به ساخت بخش روز جاری اپلیکیشن آب و هوا اختصاص دارد. شما یاد خواهید گرفت که چگونه داده های آب و هوا را در زمان واقعی برای روز جاری نمایش دهید، از جمله دما، شرایط آب و هوا و موارد دیگر. این بخش بر استفاده از مؤلفه‌های React و مدیریت حالت در Next.js تأکید می‌کند و به شما نشان می‌دهد که چگونه برنامه خود را پویا و تعاملی کنید.

جزییات اضافی

در قسمت Additional Details Component، ما روی نمایش اطلاعات اضافی آب و هوا مانند رطوبت، سرعت باد و فشار هوا تمرکز می کنیم. این ماژول مهارت های شما را در ایجاد عناصر UI پیچیده تر با استفاده از Tailwind CSS و Next.js افزایش می دهد و اطمینان می دهد که این مؤلفه ها هم آموزنده و هم از نظر بصری جذاب هستند.

بخش داده های پیش بینی 7 روز

پیش بینی یکی از ویژگی های مهم هر برنامه آب و هوا است. این بخش شما را از طریق ایجاد یک پیش بینی آب و هوای 7 روزه راهنمایی می کند و به شما یاد می دهد که چگونه مجموعه ای از داده ها را به طور موثر مدیریت و نمایش دهید. شما درک خود را از ساختار کامپوننت در Next.js و نحوه مدیریت داده های پویا در برنامه خود عمیق تر خواهید کرد.

جستجو و منطق مکان فعلی

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

نتیجه

در پایان این دوره، یک برنامه آب و هوای کاملاً کاربردی و درک عمیقی از نحوه استفاده از Next.js، Tailwind CSS و TypeScript در یک پروژه دنیای واقعی خواهید داشت. دوره کامل را در کانال YouTube freeCodeCamp.org تماشا کنید (تماشای 2 ساعته).

خبرکاو