ساخت یک برنامه مربوط به دستور پخت غذا با استفاده از Prisma و React

ترجمه و تالیف : عرفان کاکایی
تاریخ انتشار : 13 خرداد 98
خواندن در 6 دقیقه
دسته بندی ها : react

در یکی دو سال اخیر، GraphQL با توجه به برتری‌های متنوعی که در زمینه REST دارد، توانسته در صحنه توسعه‌دهی frontend بسیار پیش برود.

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

مقالات مرتبط: GraphQL - نکات خوب و بد

در این آموزش، ما یک برنامه مربوط به دستور پخت غذا با استفاده از Prisma و React‌ خواهیم ساخت.

جدوا محتوا:

  • پیش‌نیازها
  • نصب
  • راه‌اندازی Prisma
  • گسترش
  • راه‌اندازی برنامه React
  • کد
  • نتیجه گیری

پیش‌نیازها

  • دانش متوسط در زمینه JavaScript و React.
  • اساس GraphQL.
  • اساس Docker. اگر هیچ تجربه پیشینی در آن ندارید، نترسید. فقط دستورات موجود را کپی و پیست کنید.

نصب

ما باید کلاینت Prisma CLI را به صورت global و با اجرای این دستور نصب کنیم:

npm install -g prisma

ما از create-react-app برای bootstrap کردن برنامه React خود استفاده خواهیم کرد. این دستور را اجرا کرده، تا آن را به صورت global نصب کنید:

npm install -g create-react-app

برای این که از Prisma به صورت محلی استفاده کنید، باید Docker را بر روی دستگاه خود نصب داشته باشید. اگر هنوز Docker را ندارید، می‌توانید نسخه Community آن را در این لینک دانلود کنید.

راه‌اندازی Prisma

برای استفاده از Prisma CLI، شما باید یک حساب کاربری Prisma داشته باشید. شما می‌توانید در این لینک یک حساب Prisma بسازید، و سپس با استفاده از این دستور به Prisma CLI وارد شوید:

prisma login

حال که ما تمام dependencyهای مورد نیاز برای شروع پروژه خود را به صورت نصب شده داریم، به ترمینال بروید، یک پوشه جدید برای پروژه بسازید و با استفاده از این دستورات به آن پوشه جهت‌یابی کنید:

mkdir recipe-app-prisma-react 

cd recipe-app-prisma-react

سپس ما سرور Prisma خود را در پوشه مورد نظر راه‌اندازی خواهیم کرد:

prisma init

یک درخواست مجوز به همراه چند گزینه مربوط به متدی که می‌خواهید برای راه‌اندازی سرور Prisma خود استفاده کنید، ظاهر خواهد شد. ما در حال حاضر به صورت محلی با سرور کار خواهیم کرد و سپس بعدا آن را گسترش خواهیم داد. Create new database را انتخاب کنید، تا Prisma یک دیتابیس را به صورت محلی با استفاده از Docker بسازد.

ساخت یک برنامه مربوط به دستور پخت غذا با استفاده از Prisma و React

سپس، از شما درخواست خواهد شد که یک دیتابیس را انتخاب کنید. برای این آموزش، ما از PostgreSQL استفاده خواهیم کرد:

ساخت یک برنامه مربوط به دستور پخت غذا با استفاده از Prisma و React

سپس باید یک زبان برای کلاینت Prisma تولید شده انتخاب کنید. Prisma JavaScript Client را انتخاب کنید (ما از type checkerها استفاده نخواهیم کرد، تا این آموزش را ساده نگه داریم):

ساخت یک برنامه مربوط به دستور پخت غذا با استفاده از Prisma و React

حال فایل‌های زیر باید بر پایه گزینه‌های انتخاب شده توسط Prisma ساخته شده باشند:

ساخت یک برنامه مربوط به دستور پخت غذا با استفاده از Prisma و React

گسترش

حال که سرور Prisma ما راه‌اندازی شده است، مطمئن شوید که Docker در حال اجراست و این دستور را برای شروع سرور اجرا کنید:

docker-compose up -d

Docker compose برای اجرای چند محفظه (Container) بر روی یک سرویس استفاده می‌شود. دستور بالا سرور Prisma و دیتابیس Postgres را شروع خواهد کرد. به آدرس 127.0.0.1:4466 بروید تا پس‌زمینه Prisma را ببینید. در صورتی که می‌خواهید سرور خود را متوقف کنید، دستور docker-compose stop را اجرا کنید.

فایل datamodel.prisma خود را باز کرده، و محتویات دمو را با این محتویات جایگزین کنید:

type Recipe {

  id: ID! @unique

  createdAt: DateTime!

  updatedAt: DateTime!

  title: String! @unique

  ingredients: String!

  directions: String!

  published: Boolean! @default(value: "false")

}

سپس این دستور را اجرا کنید، تا یک سرور دمو را اعزام کنید:

prisma deploy

باید پاسخی دریافت کنید که مدل‌های ساخته شده و اندپوینت Prisma شما را به این صورت نمایش می‌دهد:

ساخت یک برنامه مربوط به دستور پخت غذا با استفاده از Prisma و React

برای دیدن سرور گسترش داده شده، داشبورد Prisma خود را بر روی آدرس https://app.prisma.io/ باز کنید و به بخش سرویس‌ها بروید. حال باید این صفحه را در داشبورد خود ببینید:

ساخت یک برنامه مربوط به دستور پخت غذا با استفاده از Prisma و React

برای گسترش آن به سرور محلی خود، فایل prisma.yml را باز کنید را و اندپوینت را به http://localhost:4466 تغییر دهید. سپس دستور prisma deploy را اجرا کنید.

راه‌اندازی برنامه React

حال که سرور Prisma ما آماده است، می‌توانیم برنامه React خود را راه‌اندازی کنیم، تا اندپوینت GraphQL را در بر گیرد.

در پوشه پروژه، این دستور را اجرا کنید تا با استفاده از create-react-app برنامه client خود را bootstrap کنیم:

create-react-app client

برای کار با GraphQL، ما به چند dependency نیاز خواهیم داشت. به پوشه client بروید و این دستور را برای نصب آن‌ها اجرا کنید:

cd client

npm install apollo-boost react-apollo graphql-tag graphql --save

برای رابط کاربری، ما از Ant Design استفاده خواهیم کرد:

npm install antd --save

ساختار پوشه

ساختار پوشه برنامه ما به این صورت خواهد بود:

src
├── components
│   ├── App.js
│   ├── App.test.js
│   ├── RecipeCard
│   │   ├── RecipeCard.js
│   │   └── index.js
│   └── modals
│       ├── AddRecipeModal.js
│       └── ViewRecipeModal.js
├── containers
│   └── AllRecipesContainer
│       ├── AllRecipesContainer.js
│       └── index.js
├── graphql
│   ├── mutations
│   │   ├── AddNewRecipe.js
│   │   └── UpdateRecipe.js
│   └── queries
│       ├── GetAllPublishedRecipes.js
│       └── GetSingleRecipe.js
├── index.js
├── serviceWorker.js
└── styles
    └── index.css

کد

Index.js

این فایل که در آن ما پیکربندی Apollo را انجام می‌دهیم، فایل ورودی اصلی برای برنامه ما است:

import React from 'react';

import ReactDOM from 'react-dom';

import ApolloClient from 'apollo-boost';

import { ApolloProvider } from 'react-apollo';



import App from './components/App';



// Pass your prisma endpoint to uri

const client = new ApolloClient({

  uri: 'https://eu1.prisma.sh/XXXXXX'

});



ReactDOM.render(

  <ApolloProvider client={client}>

    <App />

  </ApolloProvider>,

  document.getElementById('root')

);



GetAllPublishedRecipes.js

برنامه را به گونه‌ای کوئری کنید تا تمام دستور پخت‌ها را بگیرد:

import { gql } from 'apollo-boost';



export default gql`query GetAllPublishedRecipes {

    recipes(where: { published: true }) {

      id

      createdAt

      title

      ingredients

      directions

      published

    }

  }`;



GetSingleRecipe.js

برنامه را به گونه‌ای کوئری کنید تا دستور پخت‌ها را بر حسب id آن‌ها بگیرد:

import { gql } from 'apollo-boost';



export default gql`query GetSingleRecipe($recipeId: ID!) {

    recipe(where: { id: $recipeId }) {

      id

      createdAt

      title

      directions

      ingredients

      published

    }

  }`;



AddNewRecipe.js

جهش مربوط به ساخت یک دستور پخت جدید:

import { gql } from 'apollo-boost';



export default gql`mutation AddRecipe(

    $directions: String!

    $title: String!

    $ingredients: String!

    $published: Boolean

  ) {

    createRecipe(

      data: {

        directions: $directions

        title: $title

        ingredients: $ingredients

        published: $published

      }

    ) {

      id

    }

  }`;



UpdateRecipe.js

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

import { gql } from 'apollo-boost';



export default gql`mutation UpdateRecipe(

    $id: ID!

    $directions: String!

    $title: String!

    $ingredients: String!

    $published: Boolean

  ) {

    updateRecipe(

      where: { id: $id }

      data: {

        directions: $directions

        title: $title

        ingredients: $ingredients

        published: $published

      }

    ) {

      id

    }

  }`;



AllRecipesContainer.js

اینجا، جایی است که عملیات‌های CRUD در آن قرار دارند. این فایل بسیار عظیم است. من بخش‌های نامربوط را حذف کرده‌ام، تا برای بخش‌های حیاتی جا باز کنم. شما می‌توانید باقی کد را در این لینک مشاهده نمایید.

ما در جهت استفاده از کوئری‌ها و جهش‌های خود، باید آن‌ها را وارد کرده، و سپس از دستور graphql در react-apollo استفاده کنیم، که ما را قادر می‌سازد تا یک کامپوننت سطح بالا (higher-order component) بسازیم. این کامپوننت می‌تواند کوئری‌ها را اجرا کرده، و بر پایه داده‌هایی که ما در برنامه خود داریم، به صورت واکنش‌پذیر برنامه را بروزرسانی کند. در اینجا مثالی از نحوه گرفتن و نمایش دستور پخت‌های منتشر شده را مشاهده می‌نمایید:

import React, { Component } from 'react';
import { graphql } from 'react-apollo';

import { Card, Col, Row, Empty, Spin } from 'antd';

// queries
import GetAllPublishedRecipes from '../../graphql/queries/GetAllPublishedRecipes';

class AllRecipesContainer extends Component {
  render() {
    const { loading, recipes } = this.props.data;

    return (
      <div>
        {loading ? (
          <div className="spin-container">
            <Spin />
          </div>
        ) : recipes.length > 0 ? (
          <Row gutter={16}>
            {recipes.map(recipe => (
              <Col span={6} key={recipe.id}>
                <RecipeCard
                  title={recipe.title}
                  content={
                    <Fragment>
                      <Card
                        type="inner"
                        title="Ingredients"
                        style={{ marginBottom: '15px' }}
                      >
                        {`${recipe.ingredients.substring(0, 50)}.....`}
                      </Card>
                      <Card type="inner" title="Directions">
                        {`${recipe.directions.substring(0, 50)}.....`}
                      </Card>
                    </Fragment>
                  }
                  handleOnClick={this._handleOnClick}
                  handleOnEdit={this._handleOnEdit}
                  handleOnDelete={this._handleOnDelete}
                  {...recipe}
                />
              </Col>
            ))}
          </Row>
        ) : (
          <Empty />
        )}
      </div>
    );
  }
}

graphql(GetAllPublishedRecipes)(AllRecipesContainer);

نتیجه نهایی چنین ظاهری دارد:

ساخت یک برنامه مربوط به دستور پخت غذا با استفاده از Prisma و React

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

از آنجایی که ما بیش از یک تقویت کننده را در کامپوننت خود لازم کرده‌ایم، از compose استفاده خواهیم کرد تا بتوانیم تمام تقویت کننده‌های مورد نیاز بری کامپوننت را ترکیب کنیم:

import React, { Component } from 'react';

import { graphql, compose, withApollo } from 'react-apollo';



// کوئری‌ها

import GetAllPublishedRecipes from '../../graphql/queries/GetAllPublishedRecipes';

import GetSingleRecipe from '../../graphql/queries/GetSingleRecipe';



// جهش‌ها

import UpdateRecipe from '../../graphql/mutations/UpdateRecipe';

import AddNewRecipe from '../../graphql/mutations/AddNewRecipe';



// ورودهای دیگر



class GetAllPublishedRecipes extends Component {

    // منطق کلاس

}



export default compose(

  graphql(UpdateRecipe, { name: 'updateRecipeMutation' }),

  graphql(AddNewRecipe, { name: 'addNewRecipeMutation' }),

  graphql(GetAllPublishedRecipes)

)(withApollo(AllRecipesContainer));

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

ساخت یک دستور پخت:

بعد از گرفتن داده‌ها از فرم زیر:

ساخت یک برنامه مربوط به دستور پخت غذا با استفاده از Prisma و React

ما تابع callback با نام handleSubmit را اجرا خواهیم کرد، که جهش addNewRecipeMutation را اجرا می‌کند:

class GetAllPublishedRecipes extends Component {

  //باقی منطق

   _handleSubmit = event => {

    this.props

      .addNewRecipeMutation({

        variables: {

          directions,

          title,

          ingredients,

          published

        },

        refetchQueries: [

          {

            query: GetAllPublishedRecipes

          }

        ]

      })

      .then(res => {

        if (res.data.createRecipe.id) {

          this.setState(

            (prevState, nextProps) => ({

              addModalOpen: false

            }),

            () =>

              this.setState(

                (prevState, nextProps) => ({

                  notification: {

                    notificationOpen: true,

                    type: 'success',

                    message: `recipe ${title} added successfully`,

                    title: 'Success'

                  }

                }),

                () => this._handleResetState()

              )

          );

        }

      })

      .catch(e => {

        this.setState((prevState, nextProps) => ({

          notification: {

            ...prevState.notification,

            notificationOpen: true,

            type: 'error',

            message: e.message,

            title: 'Error Occured'

          }

        }));

      });

  };

};

ویرایش یک دستور پخت:

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

ساخت یک برنامه مربوط به دستور پخت غذا با استفاده از Prisma و React

سپس ما یک handleSubmit متفاوت را اجرا می‌کنیم، تا به این صورت جهش بروزرسانی را اجرا کنیم:

class GetAllPublishedRecipes extends Component {

  // باقی منطق

  _updateRecipe = ({

    id,

    directions,

    ingredients,

    title,

    published,

    action

  }) => {

    this.props

      .updateRecipeMutation({

        variables: {

          id,

          directions,

          title,

          ingredients,

          published: false

        },

        refetchQueries: [

          {

            query: GetAllPublishedRecipes

          }

        ]

      })

      .then(res => {

        if (res.data.updateRecipe.id) {

          this.setState(

            (prevState, nextProps) => ({

              isEditing: false

            }),

            () =>

              this.setState(

                (prevState, nextProps) => ({

                  notification: {

                    notificationOpen: true,

                    type: 'success',

                    message: `recipe ${title} ${action} successfully`,

                    title: 'Success'

                  }

                }),

                () => this._handleResetState()

              )

          );

        }

      })

      .catch(e => {

        this.setState((prevState, nextProps) => ({

          notification: {

            ...prevState.notification,

            notificationOpen: true,

            type: 'error',

            message: e.message,

            title: 'Error Occured'

          }

        }));

      });

  };

}

حذف کردن یک دستور پخت:

برای عملکرد حذف، ما یک soft-delete بر روی دستور پخت حذف شده انجام خواهیم داد، که یعنی ما اساسا صفت published را به false‌ تغییر می‌دهیم؛ زیرا ما در هنگام گرفتن مقالات، مطمئن می‌شویم که فقط مقالات منتشر شده را دریافت می‌کنیم.

ما از تابع مشابه تابع بالا استفاده می‌کنیم، و Published را طبق مثال زیر، به عنوان false منتقل می‌کنیم:

class GetAllPublishedRecipes extends Component {

   // باقی منطق 

   _handleOnDelete = ({ id, directions, ingredients, title }) => {

    // وقتی که کاربر مجوز حذف را تایید کرد 

    this._updateRecipe({

      id,

      directions,

      ingredients,

      title,

      published: false, // soft delete the recipe

      action: 'deleted'

    });

  };

};

شما می‌توانید به کد مربوطه در این لینک دسترسی داشته، و همچنین برنامه دمو را در این لینک امتحان کنید.

نتیجه گیری

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

منبع

دیدگاه‌ها و پرسش‌ها

برای ارسال نظر لازم است ابتدا وارد سایت شوید
در حال دریافت نظرات از سرور، لطفا منتظر بمانید