نحوه ایجاد داشبورد Tailwind CSS با استفاده از Low Code [Tutorial]

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

آیا یادگیری Tailwind CSS سخت است؟

• یادگیری Tailwind CSS به دلیل کلاس‌های کاربردی گسترده‌اش می‌تواند در ابتدا کمی چالش برانگیز باشد، اما تقسیم آن به اجزای کوچک‌تر، تمرین با پروژه‌های عملی و استفاده از اسناد موجود و منابع آنلاین می‌تواند فرآیند یادگیری را مدیریت‌پذیرتر و لذت‌بخش‌تر کند.

در این آموزش، ما از Loopple استفاده خواهیم کرد که یک رابط بصری کشیدن و رها کردن را برای ساخت داشبوردهای Bootstrap، Tailwind CSS یا React بدون دردسر ارائه می دهد. Loopple فرآیند توسعه را ساده می کند و به کاربران امکان می دهد داشبوردها را سریعتر بسازند و زمان توسعه را به میزان قابل توجهی کاهش می دهد.

داشبوردی که در این آموزش Tailwind CSS می سازیم سه صفحه خواهد داشت:

1. فهرست مطالب
   

1. مشخصات
   

1. سفارشات
   

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

فهرست مطالب:

نحوه ایجاد پروژه جدید

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

می توانید از هر یک از گزینه های ذکر شده در زیر برای ایجاد داشبورد استفاده کنید. با این حال، در این آموزش، ما بر روی نحوه استفاده از Soft UI Dashboard Tailwind CSS تمرکز خواهیم کرد.

آن را انتخاب کنید، نامی به پروژه خود بدهید و سپس روی «ایجاد» کلیک کنید.

ایجاد صفحه فهرست

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

مرحله 1: نوار کناری را انتخاب کنید

مدال زیر با کلیک بر روی دکمه “+” در نوار کناری باز می شود. همانطور که می بینید، Loopple 2 نوع نوار کناری ارائه می دهد و کاربران می توانند از هر نوار کناری که دوست دارند استفاده کنند. با این حال، در این مورد، من با الگوی “سایدبار ساده” پیش می روم. وقتی روی آن کلیک می کنم، تمام عناصر موجود در آن الگو به نوار کناری من اضافه می شود.

مرحله 2: نوار نوار را انتخاب کنید

بعد، باید نوار ناوبری را انتخاب کنیم. با کلیک بر روی دکمه “+” در بالا، می توانیم یک مدل برای نوار ناوبری انتخاب کنیم.

در مدل های ناوبری سه انتخاب وجود دارد. در این مورد من گزینه “navbar with the logo” را انتخاب کرده ام. شما می توانید بسته به ترجیح خود از هر یک از آنها استفاده کنید.

مرحله 3: متن های ارائه شده در مدل ها را اصلاح کنید.

برای ویرایش یا تغییر نام یک متن، به سادگی روی آن دوبار کلیک کنید. سپس یک کادر در گوشه سمت راست بالای صفحه ظاهر می شود. شما می توانید هر متنی را که می خواهید اضافه کنید.

داشبورد Tailwind دارای عناصری است که دارای متن از پیش نوشته شده هستند. بیشتر این متن ها برای داشبورد شما کار نمی کنند. برای مثال، ممکن است بخواهید داشبورد رابط کاربری نرم افزار را به داشبورد SaaS یا چیزی شبیه داشبورد «نام محصول» خود تغییر دهید.

با دوبار کلیک بر روی آن می توانید متن عناصر را به راحتی تغییر دهید. در نسخه ی نمایشی خود، آزمایش این عناصر را به موارد زیر تغییر می دهم:

• داشبورد رابط کاربری نرم افزار –> داشبورد SaaS
• نام تجاری Navbar –> داشبورد SaaS
• داشبورد –> داشبورد
• جدول –> تجزیه و تحلیل
• صورتحساب –> فاکتور
• واقعیت مجازی –> پیام ها
• RTL –> تنظیمات

مرحله 4: رنگ نماد “Analytics” را تغییر دهید

برای انجام این کار، باید حاشیه نماد را انتخاب کنید زیرا کل رنگ آن را تغییر خواهیم داد. پس از آن، شما متوجه وجود یک تب ویرایشگر می شوید که حاوی برچسب های مختلف است. این برچسب ها طراحی فعلی نماد را توصیف می کنند و شما می توانید سبک های جدید را حذف کرده و اضافه کنید. در اینجا، برچسب های «از-بنفش-700» و «به صورتی-500» را حذف کردم و «از-نیلی-600» و «به-آبی-600» را اضافه کردم تا به نماد رنگ آبی بدهد.

مرحله 5: یک بخش کارت اضافه کنید

برای شروع، بیایید کارت را با افزودن یک “شبکه” قبل از گنجاندن آن در پروژه خود قرار دهیم. بعد، به منو بروید و “بخش کارت” را در دسته “بخش ها” انتخاب کنید. پس از انجام کار، می توانید به راحتی طرح کارت مورد نظر خود را در فضای کاری بکشید و رها کنید. برای این نمایش، من از اولین گزینه طراحی استفاده می کنم.
حال برای تغییر رنگ آیکون ها به «مرحله 4» مراجعه کنید و طبق دستورالعمل ها عمل کنید. در مورد من، تمام نمادها را به رنگ آبی تغییر دادم. علاوه بر این، در صورت تمایل متن را به دلخواه تنظیم کنید. در داشبورد خود، تغییرات زیر را اعمال کردم که در زیر لیست شده است.

• پول امروز → درآمد
• 53,00 دلار → 5,400 دلار
• کاربران امروز → کاربران
• -2٪ → +5٪
• 103,430 دلار → 970

دنبال کردن این مراحل باید به خروجی زیر منجر شود:

برای تغییر رنگ متن برای “+5%”، کافی است روی متن “+5%” کلیک کنید. در ورودی متن “class”، “text-lime-500” را اضافه کنید تا رنگ سبز روی متن اعمال شود و “text-red-600” حذف شود.

مرحله 6: یک Grid اضافه کنید

برای افزودن یک شبکه، با کلیک بر روی برگه «شبکه»، «شبکه با ۲ ستون» را از «شبکه» انتخاب کنید، سپس آن را بکشید و در فضای کاری خالی رها کنید. این شبکه فضای کاری را به دو ستون تقسیم می کند.

مرحله 7: نمودارها را به Grid اضافه کنید

برای ترکیب نمودارها، با انتخاب بخش «نمودارها» از برگه مؤلفه شروع کنید. شما می توانید بین دو مدل یکی را انتخاب کنید. در مورد من، مدل “خط نمودار” را انتخاب کردم و آن را در ستون سمت چپ کشیده و رها کردم. به دنبال آن، مدل «نوار نمودار» را انتخاب کردم و آن را در سمت راست صفحه قرار دادم.

برای اینکه متن با محصول خود مرتبط تر باشد، می توانید آن را مطابق با آن سفارشی کنید. این تغییراتی است که من در متن ایجاد کردم:

📈 در “خط نمودار”:

• بررسی اجمالی فروش → گزارش ها
• 4 درصد بیشتر در سال 2021 → 4 درصد بیشتر در سال 2023

📊 در “نوار نمودار”:

• کاربران فعال → Analytics
• کاربران → فروش
• کلیک ها → توزیع
• فروش → Churn
• موارد → بازگشت

مرحله 8: اضافه کردن جداول

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

برای افزودن جداول، به تب “Components” رفته و “Tables” را انتخاب کنید. مجموعه ای از الگوهای جدول موجود را خواهید دید که در آنجا نمایش داده می شوند. در حال حاضر الگوی «محصول جدول» انتخاب شده و در ستون سمت چپ قرار می گیرد. علاوه بر این، عنوان از “محصولات پرفروش” به “سفارش های اخیر” تغییر یافته است.

علاوه بر این، ما الگوی جدول “کشور جدول” را در ستون سمت راست قرار می دهیم.

فرآیند ایجاد صفحه “Index.html” اکنون به پایان رسیده است. برای ذخیره فایل کافیست روی دکمه “ذخیره” واقع در مرکز صفحه کلیک کنید. اگر مایل به پیش نمایش ساخته خود هستید، می توانید روی دکمه “پیش نمایش” کلیک کنید تا نتیجه را مشاهده کنید.

صفحه سفارشات را ایجاد کنید 📄

مرحله 1: یک صفحه جدید برای ایجاد یک فایل جدید اضافه کنید.

روی تب “صفحه” واقع در گوشه سمت راست بالا کلیک کنید. برای ایجاد یک صفحه جدید، “افزودن صفحه” را انتخاب کنید.

مرحله 2: نوار کناری را از صفحه “Index” کپی کنید.

ما می خواهیم همان نوار کناری را در این صفحه نیز قرار دهیم. درست مانند کاری که در صفحه Index انجام دادیم، بیایید یک نوار کناری با استفاده از الگوها اضافه کنیم. اکنون روی تب “Pages” کلیک کرده و “Index” را انتخاب کنید تا به “Index.html” برگردید. نوار کناری را انتخاب کنید و در بخش Sidenav روی “ویرایش کد” کلیک کنید.

سپس کد HTML برای نوار کناری ظاهر می شود. شما می توانید آن را درست مانند زندگی روزمره با انتخاب همه چیز با “Ctrl + A” کپی کنید و سپس “Ctrl + C” را برای کپی فشار دهید.

بازگشت به “صفحه 2” (Orders.html) در زیر “صفحات”. نوار کناری را که قبلا اضافه کردید انتخاب کنید، سپس روی “EditCode” در زیر “SideNav” در سمت راست کلیک کنید. کد موجود را با کد کپی شده از “Index.html” جایگزین کنید.

مرحله 3: نوار نوار را اضافه کنید

از دستورالعمل های راهنمای صفحه “Index” نیز می توان برای این کار استفاده کرد. با کلیک بر روی علامت “+” الگوی Navbar را انتخاب کنید و سپس متن سمت چپ را برای خواندن “SaaS Dashboard” ویرایش کنید.

مرحله 4: نام صفحه را تغییر دهید

بیایید به صفحه یک نام معنادار بدهیم. برگه “صفحات” را انتخاب کنید. با کلیک بر روی “ویرایش” در بخش “صفحه 2″، نام فایل را به “سفارشات” ویرایش کنید.

مرحله 5: تایپوگرافی را اضافه و ویرایش کنید

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

در مرحله بعد، به بخش “کامپوننت” بروید و “تایپوگرافی” را انتخاب کنید. از میان گزینه های موجود، طرحی مانند «تایپوگرافی H2» را انتخاب کنید. ظاهر تایپوگرافی را سفارشی کنید، متن را به «مشاهده همه سفارش‌ها» تغییر دهید و تگ عنوان را از h2 به h4 تنظیم کنید.

اگر می‌خواهید متن را پررنگ کنید، می‌توانید از دکمه “<>” برای ویرایش کد HTML استفاده کنید و کلاس “font-bold” را در بخش “Classes” در زیر تب “Editor” اضافه کنید.

مرحله 6: یک جدول اضافه کنید

برای نمایش داده های جدولی، بیایید یک جدول اضافه کنیم. روی تب “کامپوننت” کلیک کنید و بخش “جدول” را انتخاب کنید. یک الگوی جدول مناسب مانند “محصول جدول” را برای این صفحه انتخاب کنید. ظاهر جدول را سفارشی کنید و فراموش نکنید که عنوان آن را به “Orders” تغییر دهید.

شما با موفقیت فایل “Orders.html” را ایجاد کردید. فراموش نکنید پیشرفت خود را ذخیره کنید و یک لحظه برای پیش نمایش صفحه وقت بگذارید.

بیایید جلو برویم و صفحه نمایه را طبق مراحل زیر ایجاد کنیم.

صفحه پروفایل را ایجاد کنید

مرحله 1: اضافه کردن یک صفحه جدید و تغییر نام

درست همانطور که برای صفحه “سفارش ها” انجام دادیم، بیایید یک صفحه جدید اضافه کنیم. روی “صفحات” کلیک کنید و سپس “افزودن صفحه” را انتخاب کنید. صفحه جدیدی با عنوان “صفحه 2” ایجاد خواهد شد. پیش بروید و نام آن را به “نمایه” تغییر دهید.

مرحله 2: یک نوار کناری و نوار ناوبری اضافه کنید

برای حفظ ثبات، می خواهیم نوار کناری و نوار ناوبری این صفحه با صفحات قبلی مطابقت داشته باشد. خوشبختانه، ما به راحتی می توانیم کد را از صفحات قبلی کپی کنیم. برای دستورالعمل‌های نحوه انجام این کار می‌توانید به «مرحله ۲» و «مرحله ۳» در زیر «ایجاد صفحه سفارش‌ها» مراجعه کنید.

مرحله 3: جزئیات نمایه را اضافه کنید

بیایید روی بخش «نمایه» در زیر تب «شبکه» تمرکز کنیم. اولین مورد را از بخش «نمایه» به فضای کاری بکشید و رها کنید. اکنون می توانید تغییراتی در ظاهر آن ایجاد کنید. مثلاً نام مدیر عامل را به «مایکل اوردان» تغییر دهیم.

در مرحله بعد، آخرین مورد را از قسمت «نمایه» به فضای کاری بکشید و رها کنید. این بخش نیز قابل ویرایش است.

شما صفحه “نمایه” را تکمیل کرده اید. قبل از پایان، به یاد داشته باشید که پیشرفت خود را ذخیره کنید و یک لحظه برای پیش نمایش صفحه وقت بگذارید.

همانطور که به پایان این کار رسیده اید، اکنون می توانید پیش نمایش هر سه صفحه را مشاهده کنید. به سادگی یک صفحه را در یک زمان انتخاب کنید و ببینید چگونه به نظر می رسند.

افکار نهایی 💬

با کمک Loopple Tailwind CSS و Low Code، اکنون می توانید داشبوردهای جذاب بصری را به طور موثرتری طراحی کنید. شما توانایی پیاده سازی رابط های کاربری مدرن، سفارشی سازی فونت ها، ایجاد آیکون های منحصر به فرد، و ترکیب نمودارها، گرافیک ها و کارت ها را دارید تا داشبورد خود را زنده کنید.
با پیروی از دستورالعمل های گام به گام دقیق ارائه شده برای هر الگو، می توانید با اطمینان داشبوردهای قابل توجه Tailwind SaaS ایجاد کنید که کاربران شما را مجذوب خود کرده و برنامه های کاربردی شما را بهبود بخشد.
آماده باشید تا خلاقیت خود را آزاد کنید و طرح های داشبورد خود را به ارتفاعات جدیدی ارتقا دهید! 🚀

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

با ثبت نام در وب سایت Loopple و شروع پروژه خود امروز، قدرت کم کد را تجربه کنید!