ایجاد گالری تصاویر توسط Tailwind CSS و ReactJS

سلام و عرض ادب خدمت دوستان همراه آکادمی راهکارینو (RahkariNo Academy). در این آموزش قصد داریم نحوه اجرا و پیاده سازی یک گالری تصاویر را توسط فریم ورک Tailwind CSS و کتابخانه ReactJS آموزش دهیم.

TailwindCSS یک فریم ورک بسیار سبک است که کلاس های CSS زیادی را در اختیار طراح وب قرار می دهد. تمام این کلاس ها در یک فایل جمع آوری شده است. برای مطالعه داکیومنت های این فریم ورک محبوب به سایت tailwindcss.com مراجعه کنید.

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

دیتای این گالری تصاویر را از Pixabay API می گیریم. مانند تصویر و عنوان و تگ های آن و…

معرفی و نصب فریم ورک Tailwind CSS:

توسط فریم ورک tailwind css کار طراحی بسیار آسان خواهد شد. بعنوان مثال می توان برای یک تگ p کلاس های font-bold text-white را تعریف کرد. در اینحالت متن داخل این تگ به حالت bold و سفید رنگ در خواهد آمد.

برای شروع کار نیاز است ابتدا کتابخانه react را نصب کنیم. دستور زیر را در cmd یا ترمینال اجرا کنید:

npm create-react-app tailwind-gallery
# or 
yarn create react-app tailwind-gallery

نصب فریم ورک tailwind css:

سپس اپلیکیشن را در نرم افزار visual studio code اجرا کرده و به منظور نصب TailwindCSS دستور زیر را در ترمینال اجرا کنید:

yarn add -D tailwindcss@latest postcss@latest postcss-cli autoprefixer@latest

راه اندازی اولیه tailwind و ایجاد فایل config:

در مرحله بعد نیاز است راه اندازی اولیه tailwind را انجام دهیم. دستور زیر را در ترمینال اجرا کنید:

npx tailwind init tailwind.js --full

پس از اجرای دستور فوق، یک فایل tailwind.js به شاخه اصلی پروژه اضافه خواهد شد. تصویر زیر:

این فایل js شامل تمام استایل های موردنیاز می باشد. مانند backgroundColor و border و screen sizes و…

ایجاد فایل کانفیگ postcss:

در شاخه اصلی پروژه، یک فایل جدید بنام postcss.config.js تعریف کرده و دستورات زیر را برای آن در نظر بگیرید:

const tailwindcss = require("tailwindcss");

module.exports = {
  plugins: [
      tailwindcss("./tailwind.js"), 
      require("autoprefixer")
    ]
};

تعریف فایل های css:

در پوشه اصلی پروژه، یک فولدر به نام assets ایجاد کرده و دو فایل به نام های tailwind.css و main.css در آن تعریف کنید. فایل tailwindcss.css را باز کرده و دستورات ایمپورت زیر را در آن درج کنید:

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

استایل های ایمپورت شده در فایل فوق کامپایل می شوند و بطور اتوماتیک در فایل main.css درج می شوند. پس در نهایت ما باید فایل main.css را در پروژه نهایی خود تعریف کنیم. به این منظور باید تغییراتی در فایل package.json انجام دهیم:

تغییراتی در فایل package.json:

فایل package.json را باز کرده و در زیر مجموعه scripts دستور زیر را درج کنید:

"build:css": "postcss src/assets/tailwind.css -o src/assets/main.css"

سپس باید برای واچ شدن تغییرات استایلی در پروژه، دستور زیر را در پایین دستور فوق درج کنید:

"watch:css": "postcss src/assets/tailwind.css -o src/assets/main.css"

در مرحله بعد عبارت مقابل start را باید بصورت زیر تغییر دهید:

"start": "npm run watch:css && react-scripts start",

و عبارت مقابل build را به شکل زیر تعریف کنید:

"build": "npm run build:css && react-scripts build",

در نهایت بخش scripts در فایل package.json باید شبیه تصویر زیر شده باشد:

اکنون اگر با دستور npm start پروژه را اجرا کنیم، استایل های کامپایل شده Tailwind در فایل main.css قرار می گیرند:

کار autoprefixer اینست که پیشوند -webkit- یا -moz- را به طور اتوماتیک به استایل های موردنیاز اضافه می کند. مانند استایل زیر:

.backdrop-filter-none {
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
}

بدین ترتیب استایل ها در تمام مرورگرها قابل شناسایی و اجرا خواهند بود.

آماده سازی فایل های App.js و index.js:

با اجرای دستور npx create-react-app فایل های زیادی به پروژه اضافه می شوند. برای ادامه کار باید این فایل های اضافی حذف شوند. بنابراین فایل های زیر را از پروژه پاک کنید:

App.css
App.test.js
index.css
logo.svg
reportWebVitals.js
setupTests.js

فایل App.js:

کامپوننت App را به شکل زیر آپدیت کنید:

function App() {
  return (
    <div>
     
    </div>
  );
}

export default App;

فایل index.js:

دستورات فایل index را به صورت زیر تغییر دهید:

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import "./assets/main.css";

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById("root")
);

مشاهده می کنید که فایل main.css را داخل فایل index.js (فایل اصلی پروژه) فراخوانی کردیم تا در کل پروژه بتوانیم از استایل های TailwindCSS استفاده کنیم.

برای اینکه چک کنیم آیا Tailwind بدرستی به پروژه ما اضافه شده یا خیر، دستورات زیر را به فایل App.js اضافه کنید:

<div>
      <h1 className="text-5xl">TailwindCSS & ReactJS</h1>
      <p className="text-3xl text-white bg-black inline-block">
        Provided by "Rahkarino Academy"
      </p>
    </div>

استایل های text-6xl و text-white و bg-black و… مختص Tailwind می باشند. خروجی کد فوق به شکل زیر خواهد بود:

طراحی کارت های گالری توسط Tailwind:

به منظور طراحی هر یک از کارت های گالری تصاویر توسط Tailwind CSS کدهای زیر را در فایل App.js اضافه کنید:

<div className="max-w-sm rounded overflow-hidden shadow-lg">
        <img
          src="https://source.unsplash.com/random"
          alt=""
          className="w-full"
        />
        <div className="px-6 py-4">
          <div className="font-bold text-purple-500 text-xl mb-2">
            Photo by Ehsan Safari
          </div>
          <ul>
            <li>
              <strong>Views: </strong>4000
            </li>
            <li>
              <strong>Downloads: </strong>300
            </li>
            <li>
              <strong>Likes: </strong>600
            </li>
          </ul>
        </div>
        <div className="px-6 py-4">
          <span className="inline-block bg-gray-200 text-gray-700 rounded-full px-3 py-1 text-sm mr-2">
            #tag1
          </span>
          <span className="inline-block bg-gray-200 text-gray-700 rounded-full px-3 py-1 text-sm mr-2">
            #tag2
          </span>
          <span className="inline-block bg-gray-200 text-gray-700 rounded-full px-3 py-1 text-sm mr-2">
            #tag3
          </span>
        </div>
      </div>

مشخص است که هر کدام از استایل ها چه کاری انجام می دهند. مثلا px-6 یعنی اندازه padding از چپ و راست 6 واحد باشد. یا mr-2 یعنی فاصله margin از راست المان 2 واحد باشد. استایل text-gray-700 یعنی رنگ متن داخل المان خاکستری با شفافیت 700 باشد.

خروجی دستورات فوق به شکل زیر خواهد بود:

نکته: احتمالا بدلیل فیلتر بودن سایت unsplash نیاز است برای لود تصویر فوق، فیلترشکن خود را روشن نمایید.

دریافت کلید API از سایت Pixabay:

از آنجا که سایت Pixabay فیلتر است، فیلترشکن مرورگر خود را روشن کنید و به آدرس Pixabay API Documentation رفته و با کلیک روی Join یک اکانت جدید بسازید. سپس لاگین کرده و API KEY خود را از صفحه مذکور دریافت نمایید. تصویر زیر:

کلید فوق را نمی خواهیم مستقیما در کامپوننت تعریف کنیم. بلکه بهتر است یک فایل بدون نام و با پسوند env. در شاخه اصلی پروژه بسازیم و بصورت زیر متغیر تعریف کنیم:

REACT_APP_PIXABAY_API_KEY=14781***-8c79b160********a17699969

دقت کنید که شما باید بجای کلید فوق، کلید API خود را درج نمایید.

ارسال درخواست به سرور Pixabay:

برای دریافت لیست تصاویر از سایت pixabay، به دو هوک useState و useEffect نیاز داریم. فایل App.js را باز کرده و این دو هوک را ایمپورت کنید و دو state زیر را تعریف کنید:

const [images, setImages] = useState([]);
const [loading, setLoading] = useState(true);

وقتی از سرور پاسخی دریافت می شود، تصاویر بصورت آرایه داخل images قرار می گیرند. و وقتی درخواست به سرور منتظر جواب است، لودینگ نمایش می یابد.

ساختار آدرس API سایت Pixabay بصورت زیر است:

https://pixabay.com/api/?key=14781***-8c79b160********a17699969&image_type=photo&pretty=true

که بجای API KEY بصورت Hard Code باید از متغیر فایل env استفاده شود. برای ارسال درخواست Fetch هوک useEffect را به شکل زیر تعریف کنید:

useEffect(() => {
    fetch(
      `https://pixabay.com/api/?key=${process.env.REACT_APP_PIXABAY_API_KEY}&image_type=photo&pretty=true`
    )
      .then((res) => res.json())
      .then((data) => {
        setImages(data);
        setLoading(false);
      })
      .catch((err) => console.log(err));
}, []);

نمایش تصاویر گالری بصورت داینامیک:

اکنون که تصاویر دریافتی از سرور را داخل آرایه images درج کرده ایم، می توانیم روی آن متد map را اجرا کنیم و در گرید سه تایی نمایش دهیم. لطفا دستورات زیر را برای فایل App.js تعریف کنید تا تصاویر به همراه عنوان، تعداد دانلودها و تعداد view ها از سرور pixabay دریافت شود:

<div className="text-center mb-2">
      <h1 className="text-5xl">TailwindCSS & ReactJS</h1>
      <p className="text-3xl text-white bg-black inline-block">
        Provided by &nbsp;&nbsp;"Rahkarino Academy"
      </p>
    </div>
    {loading ? (
      <h1>Loading...</h1>
    ) : (
      <div className="container mx-auto">
        <div className="grid grid-cols-4 gap-4">
          {images.hits.map((item) => {
            return (
              <div className="max-w-sm rounded overflow-hidden shadow-lg">
                <img src={item.webformatURL} alt="" className="w-full" />
                <div className="px-6 py-4">
                  <div className="font-bold text-purple-500 text-xl mb-2">
                    Photo by {item.user}
                  </div>
                  <ul>
                    <li>
                      <strong>Views: </strong>
                      {item.views}
                    </li>
                    <li>
                      <strong>Downloads: </strong>
                      {item.downloads}
                    </li>
                    <li>
                      <strong>Likes: </strong>
                      {item.likes}
                    </li>
                  </ul>
                </div>
                <div className="px-6 py-4">
                  {item.tags.split(", ").map((tag) => {
                    return (
                      <span className="inline-block bg-gray-200 text-gray-700 rounded-full px-3 py-1 text-sm mr-2">
                        {tag}
                      </span>
                    );
                  })}
                </div>
              </div>
            );
          })}
        </div>
      </div>
    )}

توضیح کدهای فوق:

در ابتدا، لودینگ را نمایش دادیم. به این شکل که گفتیم اگر مقدار loading برابر true بود عبارت …Loading نمایش یابد و اگر false بود، گالری تصاویر نمایش یابد.

در قدم بعدی، روی آرایه images حلقه اجرا کرده ایم و برای هر کدام از آیتم های آرایه، یک کارت نمایش می دهیم که شامل اطلاعات زیر است:

• تصویر
• نام عکاس
• تعداد downloads
• تعداد views
• تعداد likes
• لیست برچسب ها

نکته: لیست برچسب ها (tags) یک آرایه است که مجددا روی آنها نیز متد map را اجرا کرده ایم.

امیدوارم از این آموزش استفاده لازم را برده باشید. در این آموزش از تکنولوژی های React.js و Tailwind CSS برای ایجاد یک گالری تصاویر استفاده کردیم. چنانچه سوال یا پیشنهادی دارید می توانید از طریق فرم ارسال دیدگاه پایین همین مقاله آن را با ما در میان بگذارید.