توسعه اپلیکیشن یک فرآیند پیچیده و چند مرحله ای است و همه آن با طراحی UI/UX آغاز می شود.

هنگامی که مرحله طراحی کامل شد، تمرکز به توسعه UI تغییر می کند، جایی که ابزارهایی مانند HTML ، CSS و جاوا اسکریپت وارد عمل می شوند. در سطح بالاتر، کتابخانه هایی مانند React و Vue روند توسعه را ساده می کنند.

صرف نظر از نوع برنامه، کد شما تقریباً همیشه می تواند به اجزاء تقسیم شود.

"مولفه های تکراری یک کابوس برای مدیریت هستند." - هر توسعه دهنده UI ناامید

تصور کنید یک کتابخانه کامپوننت داشته باشید که در آن همه عناصر رایج مورد استفاده از پیش ساخته شده و پاسخگو باشند – چقدر این امر توسعه را آسان‌تر و سریع‌تر می‌کند؟

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

آنچه را پوشش خواهیم داد

پیش نیازها

چرا یک کتابخانه کامپوننت بسازیم ؟

نحوه ساخت کتابخانه کامپوننت

بیایید کتابخانه را بسازیم

مرحله 1: طرح بندی را با استفاده از قلم و کاغذ طراحی کنید

مرحله 2: کامپوننت ها را در HTML و CSS طراحی کنید

مرحله 3: میزبانی فایل CSS پروژه

سوالات متداول

نتیجه گیری

پیش نیازها

مهارت در HTML، CSS، و جاوا اسکریپت : درک کامل اصول توسعه front-end ضروری است.

مهارت های پایه استقرار : آشنایی با استقرار برنامه ها در پلتفرم هایی مانند Netlify یا Vercel الزامی است.

دانش Git/GitHub : شما باید با کنترل نسخه، از جمله دستورات اولیه Git و مدیریت مخازن در GitHub راحت باشید.

چرا یک کتابخانه کامپوننت بسازیم؟

هر وب سایت از اجزایی ساخته شده است که با HTML ساختار یافته و با استفاده از CSS استایل بندی شده اند.

HTML و CSS فن آوری های اساسی برای ایجاد صفحات وب جذاب بصری هستند. با این حال، تسلط بر آنها می تواند به دلیل آرایه وسیع تگ های HTML و ویژگی های CSS چالش برانگیز باشد.

برای ساده کردن فرآیند، توسعه دهندگان اغلب از کتابخانه های مؤلفه استفاده می کنند که مزایای مختلفی را ارائه می دهد:

توسعه سریعتر : اجزای از پیش ساخته شده و ویژگی های طراحی پاسخگو، روند توسعه را تسریع می کنند.

سازگاری : استایل یکنواخت و سازگاری بین مرورگرها را در سراسر برنامه تضمین می کند.

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

پشتیبانی انجمن : اسناد گسترده، افزونه ها و یک جامعه قوی منابع ارزشمندی را فراهم می کند.

سفارشی‌سازی و دسترسی : سفارشی‌سازی آسان و اجزای مبتنی بر دسترسی را برای طرح‌های فراگیر ارائه می‌دهد.

نحوه ساخت کتابخانه کامپوننت

ساخت یک کتابخانه کامپوننت شامل چندین مرحله کلیدی است. ابتدا، من یک نمای کلی از هر مرحله ای که برای ایجاد کتابخانه کامپوننت انجام خواهیم داد به شما ارائه می دهم. پس از آن، ما آن را با هم می سازیم.

1. طرح کامپوننت ها را طراحی کنید

قبل از نوشتن هر کدی، داشتن دید روشنی از آنچه می خواهید بسازید بسیار مهم است. با ترسیم طرح اجزای خود روی کاغذ شروع کنید یا از ابزارهای طراحی مانند Figma یا Canva برای ایجاد یک نمایش بصری استفاده کنید.

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

2. ساختار کامپوننت را در HTML بنویسید

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

نکته حرفه ای : از HTML معنایی برای بهبود دسترسی کاربر و سئو استفاده کنید. به عنوان مثال، در صورت لزوم، از تگ‌های <article> ، <section> یا <header> به جای عناصر <div> عمومی استفاده کنید.

3. کامپوننت ها را با CSS استایل کنید

با وجود ساختار HTML، می‌توانید با استفاده از CSS، استایل‌سازی اجزا را شروع کنید. با استفاده از کلاس‌ها و شناسه‌های CSS، سبک‌هایی مانند رنگ‌های پس‌زمینه ، اندازه فونت ، تزئینات پیوند و سبک‌های دکمه را اعمال کنید.

CSS یک ابزار قدرتمند است - شما حتی می توانید انیمیشن های زیبا اضافه کنید. اما در این آموزش، ما بر روی استفاده از ویژگی های ضروری CSS برای ایجاد طرح های تمیز و کاربردی تمرکز خواهیم کرد.

4. فایل CSS پروژه را میزبانی کنید

هنگامی که کتابخانه مؤلفه شما آماده شد، باید آن را برای پروژه های آینده در دسترس قرار دهید. میزبانی فایل CSS خود بر روی پلتفرم هایی مانند Netlify ، GitHub Pages یا Vercel به شما این امکان را می دهد که از اجزای آن در پروژه های مختلف به سادگی با پیوند دادن به فایل CSS جهانی استفاده کنید.

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

بیایید کتابخانه را بسازیم

من سفر خود را به عنوان یک توسعه دهنده نرم افزار با غواصی در HTML و CSS برای طراحی صفحات وب آغاز کردم. این فناوری های اساسی برای هر توسعه دهنده وب ضروری است، اما تسلط بر آنها می تواند چالش برانگیز باشد – HTML دارای 152 تگ است، در حالی که CSS دارای بیش از 200 ویژگی است.

در حالی که نیازی به استفاده از تک تک تگ های HTML یا ویژگی های CSS ندارید، دانستن مفاهیم اصلی نیاز به زمان و تلاش قابل توجهی دارد. .

حال، بیایید یک سناریو را در نظر بگیریم: اگر از شما بخواهم یک وب سایت کوچک یا یک صفحه فرود بدون استفاده از کتابخانه مؤلفه ایجاد کنید، چگونه به آن نزدیک می شوید؟ هدف من این است که زمان صرف شده برای طراحی را به حداقل برسانم.

تصور کنید راهی برای خودکارسازی فرآیند طراحی وجود داشته باشد که به شما امکان می دهد بدون از دست دادن انعطاف پذیری به نتایج زیبایی برسید. اینجاست که یک کتابخانه کامپوننت وارد عمل می شود. با یک بار نوشتن اجزای خود در CSS خالص وانیلی، می توانید آنها را در هر پروژه ای دوباره استفاده کنید.

من شما را تشویق می‌کنم که این رویکرد را دنبال کنید زیرا تجربه بی‌درنگ با HTML و CSS را فراهم می‌کند و در عین حال به شما کمک می‌کند تا چندین مفهوم را به طور همزمان یاد بگیرید.

من یک کتابخانه کوچک متشکل از 10+ مؤلفه زیبا ایجاد کردم که می توانید در اینجا کاوش کنید: SlateUi . این کتابخانه به تعمیق درک من از فناوری های وب کمک کرده است.

هدف من درک کامل HTML و CSS بود. پس از تکمیل یک پروژه، می‌خواستم در تمام جنبه‌های حیاتی طراحی وب، از UI گرفته تا کد، اطمینان داشته باشم.

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

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

علاوه بر این، این رویکرد کمک می کند تا از نوشتن کدهای تکراری CSS برای عناصر مشابه جلوگیری شود.

مرحله 1: طرح بندی را با استفاده از قلم و کاغذ طراحی کنید

ابتدا، می خواهید یک طرح اولیه برای صفحه وب ایجاد کنید. این فقط طراحی اولیه است تا بدانید چه چیزی باید در پروژه خود بسازید

طرح از سه عنصر کلیدی تشکیل شده است:

الف) سربرگ
ب) کارت(های)
ج) پاورقی

هر جزء شامل رنگ‌های متمایز، متن و عناصر اضافی است. در مثال ما به این صورت است:

از اجزای اصلی طرح: هدر، کارت، پاورقی" width="600" height="400" loading="lazy">

در یک پروژه واقعی، شما معمولاً با مدل‌های طراحی آماده شده شروع می‌کنید که در ابزارهایی مانند Figma یا سایر نرم‌افزارهای طراحی UI ایجاد شده‌اند.

برای این پروژه از Canva برای طراحی چیدمان استفاده کردم. این مرحله طراحی اولیه بسیار مهم است زیرا پایه و اساس توسعه ویژگی اصلی را می‌سازد.

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

مرحله 2: کامپوننت ها را در HTML و CSS طراحی کنید

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

تا کنون، ما سه جزء ساخته ایم:

الف) هدر با پیوندهای ناوبری
ب) پاورقی
ج) کارت های افقی با دکمه های عمل

حالا بیایید با ساختن اولین مؤلفه شروع کنیم: Header .

جزء هدر:

هدر در بالای صفحه یا بخش قرار دارد. معمولاً حاوی لوگو، نوار جستجو، پیوندهای ناوبری و غیره است.

جزء پاورقی:

پاورقی پاورقی یا پایین صفحه وب یا یک بخش را تعریف می کند. معمولاً حاوی اطلاعات کپی رایت، جزئیات تماس، پیوندهای ناوبری و غیره است.

جزء کارت:

جزء کارت می تواند انواع مختلفی از محتوا را در خود جای دهد، از جمله عنوان، تصویر، محتوای اصلی و پاورقی که دارای دکمه فراخوان برای اقدام است.

کارت‌ها برای اهداف خاصی طراحی شده‌اند، مانند نمایش محصولات تجارت الکترونیک، نمایش اخبار، یا ارائه چندین عملکرد دیگر در زمینه‌های مختلف.

ترکیب همه با هم:

با کلیک کردن روی دکمه، داده‌های کارت با حقایق تصادفی گربه همراه با طول هر واقعیت به‌روزرسانی می‌شوند.

توجه : من از یک API منبع باز برای این پروژه استفاده کردم. اگر محتوا روی کارت به‌روزرسانی نمی‌شود، ممکن است به دلیل قطع API باشد.

حالا کد CSS را چک کرده اید؟

شاید تعجب کنید که چرا من فقط یک خط کد را به فایل CSS خود وارد کرده ام. خوب، من فایل‌های CSS هر سه بخش طرح‌بندی ( هدر، پاورقی و اجزای کارت ) را در یک فایل CSS ترکیب کرده‌ام و فایل را در Netlify میزبانی کرده‌ام. این نشانی اینترنتی است که هر سه فایل CSS را در خود جای داده است:

@import url(" https://hashnodeblogchallenge.netlify.app/index.css ");

CSS را در هر سه مؤلفه خدمت می کند و استایل ها را برای هر سه مؤلفه حفظ می کند.

مرحله 3: میزبانی فایل CSS پروژه

سرانجام، به مهم ترین بخش این پروژه رسیدم، جایی که همه جادوها اتفاق می افتد.

در حال حاضر، من سه فایل CSS برای هر یک از اجزای وب دارم: هدر ، کارت ، و پاورقی .

از آنجایی که پروژه ما کوچک است، من تمام کدهای فایل CSS را در یک فایل CSS ترکیب می کنم تا یک فایل CSS به دست بیاورم که به عنوان یک فایل CSS جهانی کار می کند.

فرآیند میزبانی فایل CSS ساده است. در اینجا یک تفکیک دقیق از آنچه باید انجام دهید آورده شده است:

1. کد خود را به GitHub فشار دهید

شما باید فایل های پروژه خود، از جمله HTML، CSS، و سایر دارایی ها را به یک مخزن GitHub فشار دهید (آپلود کنید). در اینجا نحوه انجام این کار آمده است:

با استفاده از git init یک مخزن Git را در فهرست پروژه خود راه اندازی کنید.

همه فایل های خود را با استفاده از git add . .

فایل ها را با git commit -m "Initial commit" commit کنید.

به یک مخزن GitHub که با استفاده از git remote add origin <repo-url> .

در نهایت، کد خود را با استفاده از git push -u origin main فشار دهید.

نتیجه : فایل های پروژه شما اکنون در مخزن GitHub شما میزبانی می شود.

2. Netlify را باز کنید و وارد شوید یا ثبت نام کنید

سپس، از Netlify بازدید کنید و اگر قبلاً یک حساب کاربری دارید وارد شوید یا یک حساب جدید ایجاد کنید.

می‌توانید با استفاده از اعتبار GitHub یا یک ایمیل جداگانه ثبت‌نام کنید. این مرحله به شما امکان دسترسی به خدمات میزبانی وب Netlify را می دهد که به شما امکان می دهد پروژه خود را مستقیماً از GitHub مستقر کنید.

3. مخزن GitHub خود را که حاوی کد شما است وصل کنید

پس از ورود به سیستم، مخزن GitHub خود را به Netlify متصل خواهید کرد.

در Netlify بر روی "سایت جدید از گیت" کلیک کنید.

GitHub را به عنوان منبع انتخاب کنید.

به Netlify اجازه دسترسی به حساب GitHub شما را بدهید.

مخزن حاوی پروژه شما را از فهرست انتخاب کنید.

در صورت لزوم تنظیمات ساخت را پیکربندی کنید (البته برای سایت های استاتیک ساده، Netlify به طور خودکار آنها را شناسایی می کند).

4. روی "استقرار" کلیک کنید

پس از اتصال مخزن خود، Netlify یک دکمه "Deploy" را نمایش می دهد.

روی "Deploy" کلیک کنید تا فرآیند ساخت و استقرار راه اندازی شود.

Netlify کد شما را از GitHub می کشد، سایت را می سازد (در صورت نیاز)، و آن را در یک URL زنده مستقر می کند.

پروژه شما اکنون در وب است و یک URL به شما ارائه می شود که می توانید به سایت مستقر شده دسترسی داشته باشید.

5. به URL Deployed دسترسی داشته باشید و URL فایل CSS را اضافه کنید

با مراجعه به URL ارائه شده توسط Netlify و ارجاع مستقیم به فایل CSS که آپلود کرده اید، به سایت مستقر شده دسترسی خواهید داشت.

هنگامی که سایت شما مستقر شد، URL ارائه شده را یادداشت کنید (به عنوان مثال، https://example.netlify.app ).

برای دسترسی به یک فایل CSS خاص، نام فایل را به URL اضافه کنید، به عنوان مثال: https://example.netlify.app/styles.css .

در اینجا styles.css نام فایل CSS شما است که در GitHub آپلود کرده اید و از طریق Netlify مستقر شده اید.

این به شما امکان می دهد فایل CSS را مستقیماً از طریق یک URL عمومی مشاهده یا ارجاع دهید.

این فرآیند اساساً به شما کمک می‌کند پروژه خود و دارایی‌های آن را در Netlify میزبانی کنید و به هر فایلی (مانند filename.css ) که در GitHub آپلود کرده‌اید، دسترسی آسانی داشته باشید. می توانید از این پیوندهای عمومی در پروژه های خود استفاده کنید یا آنها را به اشتراک بگذارید.

و بس! این URL را به فایل CSS پروژه خود پیوند دهید.

من فایل CSS اصلی را در برنامه Netlify میزبانی کرده ام تا به سادگی با وارد کردن آن به پروژه شما در هر جایی به آن دسترسی داشته باشید. در اینجا آدرس فایل CSS میزبانی شده من است: https://hashnodeblogchallenge.netlify.app/index.css .

زیبایی کتابخانه های کامپوننت در این است که به شما اجازه می دهند به جای طراحی بر توسعه تمرکز کنید.

سوالات متداول

چه مزایایی از این به دست آورده ایم؟

اکنون، شما فقط باید کد HTML را کپی کرده و فایل CSS را در پروژه خود وارد کنید. در اینجا مزایای کلیدی وجود دارد:

زمان صرف شده برای کدنویسی تکراری CSS را کاهش می دهد .

کنترل بیشتری بر روی اجزاء فراهم می کند و امکان سفارشی سازی بر اساس نیازهای شما را فراهم می کند.

تجربه بی‌درنگ با HTML و CSS را ارائه می‌دهد و به شما امکان می‌دهد مفاهیم اصلی را به طور موثر یاد بگیرید.

اگر بخواهم چیزی را تغییر دهم چه؟

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

اگر بخواهم کامپوننت های بیشتری ایجاد کنم چه؟

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

چگونه این باعث صرفه جویی در وقت من می شود؟

تصور کنید باید 5 وب سایت ایجاد کنید که هر کدام دارای 5 صفحه است (که در مجموع 25 صفحه است). اگر عناصر مشترکی مانند سرصفحه ها و پاورقی ها را که در تمام 25 صفحه استفاده می شوند شناسایی کنید، می توانید از نوشتن 25 مؤلفه جداگانه اجتناب کنید. در عوض، می‌توانید به سادگی از مؤلفه‌های کتابخانه‌تان استفاده کنید—فقط HTML را کپی و پیست کنید و فایل CSS را اضافه کنید.

چه چیزی به کل برنامه اجازه می دهد فقط با یک خط CSS کار کند؟

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

کامپوننت ها را بر اساس نیاز خود ایجاد کنید .

طراحی آنها را با CSS کنترل کنید و ویژگی های لازم را اعمال کنید.

فایل CSS اصلی خود را در جایی میزبانی کنید تا یک URL جدید به دست آورید که می توانید از آن برای وارد کردن سبک های CSS خود در HTML استفاده کنید.

اکنون می توانید محاسبه کنید که چقدر در زمان ذخیره کرده اید.

نتیجه گیری

ایجاد یک کتابخانه کامپوننت با استفاده از HTML و CSS به شما این امکان را می دهد که صفحات وب زیبا را سریع و موثر بسازید.

همچنین درک عمیقی از HTML و CSS برای شما فراهم می کند که مهارت های ضروری برای یک حرفه توسعه نرم افزار موفق هستند. با این مهارت‌ها، می‌توانید طرح‌بندی‌های جذابی را بدون صرف زمان زیاد برای کدنویسی از ابتدا ایجاد کنید.

برای کمک به شما در شروع کار، در اینجا نمونه ای از کتابخانه مؤلفه ای است که من ایجاد کردم، که شامل بیش از 10 مؤلفه زیبا است: SlateUI .

اکنون، شما به سادگی باید کد HTML را کپی کنید و آن را در جایی که می خواهید اجزای خود را نمایش دهید، جایگذاری کنید، همراه با وارد کردن URL فایل CSS خود در آن فایل HTML.

پس بچه ها این پایان از طرف من است. اگر این مقاله را مفید می‌دانید، آن را به اشتراک بگذارید و با من ارتباط برقرار کنید - من برای فرصت‌ها آماده هستم:

من را در توییتر X: Prankur دنبال کنید

من را در LinkedIn دنبال کنید: Prankur's Linkedin

به نمونه کارها من در اینجا نگاه کنید: نمونه کارها Prankur

خبرکاو