پرش به مطلب اصلی

Pilot

مقدمه​

در این فاز برای شروع پروژه، Angular را معرفی می‌کنیم، به برخی نکات مهم در HTML می‌پردازیم و در نهایت چند منبع برای یادگیری flexbox و grid معرفی می‌کنیم.

  • تفاوت کتابخانه و فریمورک چیست؟
  • چرا به سراغ Angular می‌رویم؟
  • چگونه با Angular یک پروژه بسازیم؟
  • چرا از تگ‌های معنایی استفاده می‌کنیم؟
  • در استفاده از عکس‌ها چه نکاتی را باید رعایت کنیم؟

یادگیری​

Angular​

تفاوت کتابخانه و فریمورک​

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

اما در مقابل، Framework یا چارچوب، همان‌طور که از اسمش پیداست، علاوه بر ابزارهای مورد نیاز، شامل قواعد و دستورالعمل‌هایی برای کدنویسی است. این قواعد از بدیهی‌ترین مسائل مانند زبان مورد استفاده تا پیچیده‌ترین مسائل مانند Performance را شامل می‌شود. بزرگ‌ترین فریمورکی که در فرانت‌اند وجود دارد، Angular است. Angular توسط شرکت Google توسعه داده می‌شود. در ابتدا AngularJS نام داشت اما بعد از تغییرات اساسی و اضافه‌شدن Typescript، از نسخه 2 به بعد، به Angular تغییر نام داد. در زمان نوشتن این مطلب، جدیدترین نسخه آن، Angular 14 است و به طور منظم هر 6 ماه یک بار، نسخۀ جدید آن منتشر می‌شود.

خوشبختانه کدهای بنیادین React و Angular و همچنین اکثر کتابخانه‌ها و فریمورک‌های JavaScript، به صورت Open-Source در اختیار عموم قرار دارند.

چرا Angular؟​

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

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

این چارچوب می‌تواند توسط تیم فنی ایجاد شود و همراه با React یا به طور کلی هر کتابخانه‌ای مورد استفاده قرار گیرد؛ ولی قطعاً Overhead زیادی خواهد داشت و ممکن است به اندازۀ یک فریمورک، محکم و قابل اطمینان نباشد. استفاده از فریمورکی مانند Angular که بارها و بارها توسط هزاران توسعه‌دهنده مورد ارزیابی قرار گرفته، باگ‌های احتمالی آن کشف و ثبت شده، درخواست‌ها و فیچرهای جدید در آن پیاده‌سازی شده، قطعاً بار سنگینی را از دوش توسعه‌دهنده برمی‌دارد و هزینه‌های غیرضروری تیم را کاهش می‌دهد.

نصب و راه‌اندازی​

Angular یک Command-line Interface یا CLI دارد که با استفاده از آن می‌توانید پروژۀ خود را مدیریت کنید؛ بنابراین قبل از هر کاری، ابتدا باید با دستور زیر ان را نصب کنیم:

npm i -g @angular/cli@12.2.17

با استفاده از پارامتر g مشخص می‌کنیم که می‌خواهیم CLI در اسکوپِ Global نصب شود؛ بنابراین در هرکجا از سیستم می‌توانیم از آن استفاده کنیم.

همان‌طور که در کد بالا می‌بینید، ما از نسخه 12.2.17 استفاده می‌کنیم و پیشنهاد می‌کنیم شما هم از همین نسخه استفاده کنید تا در روند آموزش مشکلی پیش نیاید.

از این پس می‌توانید با استفاده از دستور ng، از CLI استفاده کنید.

ساخت پروژه جدید​

با استفاده از دستور زیر می‌توانید یک پروژه جدید ایجاد کنید:

ng new my-project-name

سعی کنید اسمی خلاقانه و همچنین مناسب برای پروژه انتخاب کنید که بیانگر کاربرد آن باشد. همچنین دقت داشته باشید که اسم انتخابی شما باید حتماً kebab-case باشد.

ESLint & Prettier​

در فاز قبل ESLint را معرفی کردیم؛ حال می‌خواهیم آن را به پروژه‌ای که ساختیم اضافه کنیم. برای این کار ابتدا باید پکیج مخصوص Angular را نصب کنیم:

ng add @angular-eslint/schematics

همان‌طور که می‌بینید به جای استفاده از npm i، از ng add برای نصب پکیج استفاده کردیم. این قابلیت در بعضی از پکیج‌ها وجود دارد و در صورتی که به این شکل آن‌ها را به پروژه اضافه کنیم، خودِ Angular ورژن مناسب را پیدا و نصب می‌کند؛ همچنین در صورتی که احتیاج باشد، علاوه بر نصب پکیج، فایل‌های مربوطه را نیز تغییر می‌دهد.

حال به نصب Prettier می‌پردازیم:

npm i -D prettier eslint-config-prettier eslint-plugin-prettier

با اجرای دستور بالا، علاوه بر Prettier، تنظیمات مربوط به ESLint هم دانلود می‌شوند و می‌توانیم از آن‌ها در پروژه استفاده کنیم. علت این کار آن است که تنظیمات ESLint و Prettier باهم تداخل نداشته باشند.

در ادامه محتوای پیشنهادی فایل‌های تنظیمات مربوط به ESLint و Prettier را می‌بینیم:

.eslintrc
{
    "root": true,
    "ignorePatterns": ["projects/**/*"],
    "overrides": [
        {
            "files": ["*.ts"],
            "parserOptions": {
                "project": ["tsconfig.json"],
                "createDefaultProgram": true
            },
            "extends": [
                "plugin:@angular-eslint/recommended",
                "plugin:@angular-eslint/template/process-inline-templates",
                "prettier"
            ],
            "plugins": ["prettier"],
            "rules": {
                "@angular-eslint/directive-selector": [
                    "error",
                    {
                        "type": "attribute",
                        "prefix": "app",
                        "style": "camelCase"
                    }
                ],
                "@angular-eslint/component-selector": [
                    "error",
                    {
                        "type": "element",
                        "prefix": ["app", "icon", "illustration"],
                        "style": "kebab-case"
                    }
                ],
                "@typescript-eslint/explicit-member-accessibility": ["error"],
                "@typescript-eslint/explicit-function-return-type": ["error"],
                "prettier/prettier": ["error", {"endOfLine": "auto"}]
            }
        },
        {
            "files": ["*.html"],
            "extends": ["plugin:@angular-eslint/template/recommended", "prettier"],
            "plugins": ["prettier"],
            "rules": {"prettier/prettier": ["error", {"endOfLine": "auto"}]}
        }
    ]
}
.prettierrc
{
    "printWidth": 120,
    "tabWidth": 4,
    "semi": true,
    "singleQuote": true,
    "trailingComma": "es5",
    "bracketSpacing": false,
    "arrowParens": "always",
    "endOfLine": "auto",
    "overrides": [
        {
            "files": ["*.html"],
            "options": {
                "parser": "html"
            }
        },
        {
            "files": ["*.component.html"],
            "options": {
                "parser": "angular"
            }
        },
        {
            "files": ["*.css", "*.scss"],
            "options": {
                "singleQuote": false
            }
        }
    ]
}

فراموش نکنید محتویات فایل gitignore. را به فایل prettierignore. هم اضافه کنید تا از تغییر فایل‌های ناخواسته جلوگیری شود.

زمانی که یک پروژۀ جدید انگولاری می‌سازید، به صورت خودکار یک فایل با نام editorconfig. در پوشۀ اصلی پروژه قرار می‌گیرد؛ کارکرد این فایل مانند ESLint یا Prettier است و می‌توانید قوانینی وضع کنید که تمام اعضای گروه از آن‌ها پیروی کنند. از آنجایی که ما از ESLint و Prettier استفاده می‌کنیم، دیگر نیازی به این فایل نیست و برای جلوگیری از تداخل احتمالی باید آن را پاک کنید.

شما می‌توانید با استفاده از دستور زیر، ایراداتی که ESLint به کدهای شما وارد می‌کند را ببینید:

ng lint

همچنین با استفاده از این دستور می‌توانید به ESLint بگویید که به طور خودکار و هوشمند سعی کند ایرادات را برطرف نماید:

ng lint --fix

مطالعه بیشتر​

همان‌طور که احتمالاً حدس می‌زنید، Angular حاوی مباحث بسیار زیادی است که توضیح تک‌تک آن‌ها در قالب آموزش متنی بسیار دشوار است؛ بنابراین این مباحث در قالب کارگاه ارائه خواهد شد؛ اما در صورتی که تمایل دارید به منابع بیشتری دسترسی داشته باشید، می‌توانید از لینک‌های زیر استفاده کنید:

HTML​

تگ‌های معنایی​

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

توصیه می‌کنیم همزمان با خواندن این مطلب، صفحۀ دمو را نیز مشاهده کنید تا به صورت دیداری و کاربردی با مفاهیم آشنا شوید.

تگتوضیحاتلینک
headerمعمولاً در بالاترین بخش صفحه یا المان مورد نظر قرار می‌گیرد و در اکثر مواقع شامل لوگو، nav و دکمه‌های Call-to-Action می‌باشد.مشاهده
navشامل لینک‌هایی به قسمت‌های مختلف صفحۀ اصلی یا سایت می‌باشد.مشاهده
mainشامل محتوای اصلی سایت می‌باشد و در اکثر مواقع بیشترین حجم از صفحه را اشغال می‌کند.مشاهده
asideشامل محتوایی غیر از محتوای اصلی می‌باشد به طوری که نمی‌توان آن را در main قرار داد. به‌عنوان مثال تبلیغات یا لینک به قسمت‌های مختلف مقاله.مشاهده
footerمعمولاً در پایین‌ترین بخش صفحه یا المان مورد نظر قرار می‌گیرد و در اکثر مواقع شامل Copyright، توضیحات مختصری در مورد سایت و شخص یا گروه سازنده می‌باشد.مشاهده
articleبخشی از محتواست که کاملاً از بخش‌های دیگر مستقل می‌باشد به گونه‌ای که می‌توان آن را به طور جداگانه استفاده یا منتشر کرد. به‌عنوان مثال می‌توان به مقاله‌ای از یک مجله یا پستی از یک وبلاگ اشاره کرد.مشاهده
sectionبخشی از محتوای اصلی سایت را مشخص می‌کند. معمولاً از این تگ برای ایجاد تمایز بینِ قسمت‌های مختلف استفاده می‌شود. معمولاً در ابتدای هر بخش از heading یعنی تگ‌های h1 تا h6 استفاده می‌شود.مشاهده
detailsشامل بخشی از محتواست که کاربر می‌تواند در صورت نیاز آن را نمایان یا پنهان کند.مشاهده
summaryهمیشه داخل المان details استفاده می‌شود و باید شامل توضیحاتی دربارۀ آن باشد.مشاهده

البته موارد بالا تنها بخشی از تگ‌های معنایی HTML می‌باشند. برای آشنایی بیشتر با این مفهوم می‌توانید از لینک‌های زیر استفاده کنید:

Text Formatting Tags​

بعضی از تگ‌ها مانند b و i برای تغییر ظاهر بخشی از متن استفاده می‌شوند که لیست آن‌ها را در اینجا ذکر می‌کنیم:

تگتوضیحات
b & strongعبارت مورد نظر را به صورت Bold یا پُررنگ نمایش می‌دهند.
i & emعبارت مورد نظر را به صورت Italic یا کج نمایش می‌دهند.
markبرای Highlight کردن بخشی از نوشته، استفاده می‌شود.
smallعبارت مورد نظر را با اندازۀ کوچکتری نسبت به اندازۀ اصلی نمایش می‌دهد.
delبرای نوشته‌های حذف‌شده استفاده می‌شود به طوری که معمولاً آن‌ها را به صورت خط‌خورده نمایش می‌دهد.
insبرای نوشته‌های اضافه‌شده استفاده می‌شود به طوری که معمولاً آن‌ها را با Underline نمایش می‌دهد.
subمعمولاً برای نمایش اندیس‌ها در پایینِ عبارت، استفاده می‌شود.
supمعمولاً برای نمایش شماره‌های پاورقی در بالای عبارت، استفاده می‌شود.

اما تمامِ این styleها را با استفاده از CSS نیز می‌توانیم داشته باشیم؛ پس علت وجود این تگ‌ها چیست؟ چرا برای بعضی از استایل‌ها مانند Bold، دو تگ متفاوت داریم؟

کاربرد اصلی این تگ‌ها برای استفادۀ سریع هنگام نوشتن محتوای سایت است. به‌عنوان مثال هر وقت خواستیم یک کلمه را Bold کنیم به جای اینکه از span در HTML و یک کلاس در CSS، می‌توانیم از b یا strong استفاده کنیم، بدونِ آنکه نیاز باشد تغییری در کد CSS دهیم.

از طرفی در صورت نیاز می‌توانید ظاهر این تگ‌ها را مانند هر تگ دیگری تغییر دهید؛ یعنی مثلاً به جای اینکه یک کلاس به اسم bold درست کنید و هر بار مجبور باشید در HTML از آن استفاده کنید، می‌توانید صرفاً تگ b را استعمال کنید و در CSS فرمت دلخواه را اعمال کنید.

تگ‌های b و strong در ظاهر تفاوتی باهم ندارند. اما زمانی که شما از strong استفاده کنید، علاوه بر اینکه عبارت مورد نظر به شکل Bold نمایش داده می‌شود، اگر کاربر از Screen Reader استفاده کند، نرم‌افزار به این موضوع اشاره خواهد کرد. به طور کلی زمانی که صرفاً بخواهید ظاهر کلمه پُررنگ باشد از b و زمانی که بخواهید مفهوم کلمه پُررنگ باشد از strong استفاده کنید. همچنین در مورد تگ‌های i و em، اگر از em استفاده کنید، نرم‌افزار آن عبارت را با استرس بیشتری می‌خواند.

برای آشنایی بیشتر با این مفهوم می‌توانید از لینک زیر استفاده کنید:

عکس‌ها​

alt​

حتما با alt در تگ img آشنا هستید. حتی شاید زمانی که از آن استفاده نکردید، متوجه هشدار IDE شده باشید. اما کاربرد این Attribute چیست؟ زمانی که از عکس استفاده می‌کنیم چرا باید توضیحی برای آن بنویسیم؟ مقدار این Attribute به کاربر نشان داده نمی‌شود، پس نوشتن آن چه فایده‌ای دارد؟

alt در اینجا مخفف عبارت Alternate Text یا متن جایگزین می‌باشد که دو کاربرد مهم برای آن می‌توان در نظر گرفت:

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

  2. Screen Readerها متن مورد نظر را می‌خوانند بنابراین کاربرانی که نمی‌توانند عکس را ببینند، متوجهِ موضوع عکس می‌شوند.

بنابراین استفاده از alt برای عکس‌ها بسیار حائز اهمیت است. اما در موارد زیر بهتر است یک متن خالی را برای آن در نظر بگیریم:

  • عکس مورد نظر صرفاً برای زیبایی ظاهری و دکوری باشد، به طوری که مفهوم خاصی به محتوا اضافه نکند.
  • عکس مورد نظر Caption داشته باشد.

دقت کنید که در موارد بالا حتماً باید تگ alt را استفاده کنید، اما متنی داخل آن ننویسید؛ به‌عنوان مثال:

<img src="https://totally-real-website.com/some-picture.png" alt="" />

علت این موضوع این است که اگر alt وجود نداشته باشد، Screen Reader نام فایل عکس را به‌عنوان توضیحات آن می‌خواند؛ اما اگر متن خالی داخل alt باشد، عکس به کلی در نظر گرفته نمی‌شود.

برای آشنایی بیشتر با این مفهوم می‌توانید از لینک زیر استفاده کنید:

Performance​

ما تقریباً در تمام سایت‌ها از عکس استفاده می‌کنیم؛ بنابراین همیشه باید به مبحث Performance توجه داشته باشیم، چرا که در غیر این صورت تجربۀ بدی در انتظار کاربران ما خواهد بود.

یکی از بهترین راه‌ها برای افزایش Performance، استفاده از عکس‌های باکیفیت و در عینِ حال کم‌حجم است. برای این موضوع ما سایت Squoosh را که توسط توسعه‌دهندگان Google ساخته شده، به شما پیشنهاد می‌کنیم. استفاده از آن بسیار آسان است، صرفاً کافی است عکس خود را آپلود و عکس کم‌حجم شده را دریافت کنید. همچنین این سایت قابلیت تبدیل به انواع فرمت‌ها و استفاده از الگوریتم‌های گوناگون را دارد.

در صورت امکان پیشنهاد می‌کنیم حتماً از فرمت svg استفاده کنید. این فرمت برخلاف فرمت‌هایی مثل png و jpeg، به صورت Vector یا برداری می‌باشد، به طوری که شما می‌توانید بدونِ افت کیفیت، به هر اندازه آن را کوچک یا بزرگ کنید. فرمت svg همواره از باقی فرمت‌ها کم‌حجم‌تر است اما در عوض، جزئیات کمتری را می‌توانید در آن جای دهید. بنابراین بهترین استفاده از svg در لوگوها، Illustrationها و آیکن‌هاست.

برای دانلود فایل‌های svg حرفه‌ای می‌توانید از لینک‌های زیر استفاده کنید:

Flexbox & Grid​

می‌توان گفت Flexbox و Grid جزء بهترین قابلیت‌هایی هستند که در طی چند سال گذشته به CSS اضافه شده‌اند؛ اما متاسفانه خیلی از افراد در استفاده از آن‌ها دچار مشکل می‌شوند و نحوۀ کارکرد آن‌ها را به خوبی درک نمی‌کنند. بنابراین در این قسمت به معرفی چند منبع برای رفع ابهامات احتمالی می‌پردازیم.

برای آشنایی بیشتر با Flexbox می‌توانید از لینک زیر استفاده کنید:

برای آشنایی بیشتر با Grid می‌توانید از لینک زیر استفاده کنید:

پروژه​

در این دوره قصد داریم یک فروشگاه آنلاین مانند Steam یا Epic برای خرید بازی بسازیم. در این فاز شما باید با توجه به موارد آموزش داده شده، یک Landing Page برای سایت خود بسازید. می‌توانید از نرم‌افزارهای مشابه ایده بگیرید اما اینکه چه قابلیت‌هایی در سایت شما وجود داشته باشد، کاملاً بستگی به خودتان دارد. در صورتی که پیاده‌سازی قابلیتی ضروری باشد، در مستندات به آن اشاره خواهیم کرد.