ساختن یک بستر وبلاگ نویسی شخصی با Next.js و Encore.ts

در این آموزش ، ما یک پروژه عملی و سرگرم کننده ایجاد خواهیم کرد: یک بستر وبلاگ نویسی شخصیبشر ما با استفاده از API های REST با Encore.ts ، روی ساخت پس زمینه تمرکز خواهیم کرد.

من شما را از قدم به قدم از ابتدا تا استقرار سرویس پس زمینه در استفاده از پلت فرم میزبانی رایگان Encore Cloud پیاده می کنم. ما برای ذخیره داده های وبلاگ خود از PostgreSQL به عنوان پایگاه داده استفاده خواهیم کرد.

هیجان انگیز؟ بیایید شروع کنیم!

Encore چیست؟

Encore یک چارچوب پشتیبان منبع باز برای ساخت سیستم های مقیاس پذیر و توزیع شده است. این ابزاری دوستانه و دوست داشتنی است که باعث می شود ساخت و ساز برنامه های ایمن و ایمن با چارچوب API با کارایی بالا آسان شود. چه TypeScript را دوست دارید و چه بروید ، Encore از هر دو پشتیبانی می کند.

Encore همچنین با ابزارهای داخلی برای کمک به توسعه کمک می کند که آیا شما روی یک پروژه شخصی کوچک کار می کنید یا یک سیستم با پس زمینه در مقیاس بزرگ. این یک انتخاب عالی برای توسعه دهندگان است که سادگی ، عملکرد و مقیاس پذیری را ارزیابی می کنند.

پیش نیازهای

برای دنبال کردن این آموزش نیازی به یک متخصص رمزگذاری ندارید. اما از آنجا که ما در حال ایجاد یک API REST هستیم ، اگر درک اساسی در مورد نحوه کار API های REST داشته باشید ، مفید خواهد بود.

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

اگر قبلاً با Node.js یا Express کار کرده اید ، حتی کمی ، این یک امتیاز است. دانستن نحوه ایجاد مسیرهای سرور یا راه اندازی یک سرور اساسی به شما در اتصال نقاط در هنگام حرکت کمک می کند.

قبل از شروع کار ، مطمئن شوید که آخرین نسخه Node.js را نصب کرده اید. به وب سایت Node.js بروید و اگر قبلاً آن را بارگیری نکرده اید ، آن را بارگیری کنید. پس از اتمام این کار خوب است که برویم.

قبل از شروع کار ، یک چیز دیگر: Encore CLI. به Encore.dev بروید و تمام اطلاعات مورد نیاز برای نصب آن را پیدا خواهید کرد. اگر در ویندوز ، مکوس یا لینوکس هستید ، دستورالعمل های دستگاه خود را دنبال کنید.

همچنین می توانید دستورات زیر را کپی و چسباند تا مستقیماً آن را نصب کنید:

# Install Encore on macOS
brew install encoredev/tap/encore

# Install Encore on Windows (PowerShell)
iwr https://encore.dev/install.ps1 | iex

# Install Encore on Linux
curl -L https://encore.dev/install.sh | bash

اکنون که همه چیز را نصب کرده اید ، بیایید Node.js را بررسی کنیم و Encore روی دستگاه شما تنظیم شده است. مانند وقتی که یک پروژه جدید را شروع می کنید و می خواهید مطمئن شوید که تمام ابزارهای خود را در اختیار دارید.

در اینجا چگونه می توانید نسخه گره را بررسی کنید:

node -v

این باید نسخه Node.js را که نصب کرده اید به شما نشان دهد. اگر با شماره نسخه ظاهر شود ، خوب است که بروید.

بیایید نسخه Encore را بررسی کنیم:

encore version

اگر Encore به درستی نصب شود ، نسخه آن را نیز نمایش می دهد.

دیدن هر دو شماره نسخه؟ عالی همه شما تنظیم شده اید ، و ما آماده حرکت به جلو هستیم. اگر اینطور نیست ، مراحل نصب را دو بار بررسی کنید و ما آن را مرتب می کنیم.

راه اندازی پروژه

حال بیایید پروژه Encore خود را ایجاد کنیم. فقط دستور را اجرا کنید و برای تنظیم پروژه Encore شما را طی می کند.

در اینجا دستور ایجاد یک پروژه Encore است:

encore app create

هنگامی که این کار را اجرا کردید ، Encore از شما می خواهد که برای پروژه خود زبانی را انتخاب کنید. در این آموزش با ما می رویم شرح این یک انتخاب عالی برای ساختن API های قوی و مقیاس پذیر است.

برای انتخاب TypeScript از کلیدهای فلش خود استفاده کنید ، سپس ضربه بزنید وارد کردنبشر

وقتی شما اجرا می کنید encore app create Command ، Encore چند الگو را برای انتخاب به شما می دهد. اینها مانند طرح های از پیش ساخته شده است ، هر یک برای کمک به شما در شروع کار بسته به نوع پروژه ای که می سازید ، کمک می کنند.

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

چرا؟ از آنجا که ساختمان از ابتدا بهترین راه برای دیدن نحوه کار همه چیز است.

بنابراین ، پیش بروید و موارد را انتخاب کنید برنامه خالی الگوی Encore یک پروژه تمیز و خالی برای شما به شما می دهد.

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

بدون کد اضافی ، بدون ویژگی از پیش ساخته فقط یک بوم خالی که منتظر ایده های شما است.

اکنون قسمت سرگرم کننده ای که پروژه شما را نامگذاری می کند آمده است. برای این آموزش ، من پروژه خود را نامگذاری کرده ام “وبلاگ”، اما احساس راحتی کنید که چیزی را انتخاب کنید که با شما طنین انداز باشد.

به محض ضربه زدن وارد کردن، Encore به عمل می آید. شروع به بارگیری “برنامه خالی” الگو و تنظیم پروژه خود در پشت صحنه.

در پرونده های ترمینال خود ایجاد می شود ، وابستگی ها نصب می شوند و همه چیز مرتب در یک ساختار پروژه تمیز سازماندهی می شود.

پس از اتمام تنظیم ، Encore احتمالاً شما را وادار می کند تا بلافاصله پروژه را اجرا کنید. این یک فرمان مانند را پیشنهاد می کند encore run برای آتش سوزی

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

این یک راه بهتر برای همگام سازی با کد است که ما چیزها را می سازیم و تغییر می دهیم.

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

به من اعتماد کن که می خواهی این را دوست داشته باشی. بیایید وارد شویم!

وقتی پروژه را در ویرایشگر کد خود باز می کنید ، بسیار ساده است. بدون درهم و برهمی ، بدون لیست بیش از حد وابستگی ها. اگر به داخل نگاه کنید package.json، فقط یک وابستگی اصلی را مشاهده خواهید کرد: encore.devبشر

این است در کنار آن ، TypeScript بی سر و صدا به عنوان یک وابستگی منحصر به فرد قرار می گیرد و همه چیز را تمیز و متمرکز نگه می دارد.

ترمینال خود را در ویرایشگر کد خود باز کنید و دستور زیر را اجرا کنید:

encore run

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

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

Encore در حال انجام وزنه برداری سنگین است تا بتوانید روی آنچه واقعاً مهم است تمرکز کنید: نوشتن کد عالی.

بیایید ادامه دهیم چیزهای بیشتری برای کشف وجود دارد!

اجرای نقاط پایانی API

خوب ، بیایید اولین نقطه پایانی API خود را ایجاد کنیم. ما قصد داریم یک ساده بسازیم /hello نقطه پایانی که با آن پاسخ می دهد “سلام ، جهان!” وقتی به آن ضربه زدی

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

من دایرکتوری به نام ایجاد کرده ام سلام درست در ریشه پروژه ، و در داخل آن ، پرونده ای به نام اضافه کردم hello.tsبشر

اینگونه است که ما می توانیم پروژه های سازماندهی شده و پوشه ها و پرونده های سازماندهی خود را به گونه ای نگه داریم که با رشد پروژه معقول باشد.

در داخل hello.ts پرونده ، من وارد کردم api عملکرد از Encore. این عملکرد قلب تعریف نقاط پایانی است. دو چیز اصلی طول می کشد:

1. در اعتراض به عنوان اولین پارامتر ، جایی که ما روش (مانند GET ، POST و غیره) را تعریف می کنیم (مانند /hello) ، و یک کلید به نام expose: trueبشر تنظیم expose: true یعنی این نقطه پایانی در دسترس عموم است که هرکسی می تواند آن را صدا کند.
2. در عملکرد ناهمزمان، جایی که ما منطق را برای آنچه که نقطه پایانی باید برگردد می نویسیم. در مورد ما ، این یک “سلام ، جهان!” پیام

امیدوارم که این ایده اساسی در مورد چگونگی ساختار نقاط پایانی و چه چیزی را هنگام کار با آنها در نظر داشته باشد.

حالا که اصول را پایین آورده ایم ، بیایید چرخ دنده ها را تغییر دهیم و شروع به ساختن آن کنیم API را برای بستر وبلاگ نویسی ما استراحت دهیدبشر اینجاست که همه چیز هیجان انگیز می شود!

ایجاد وبلاگ:

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

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

• عنوان: عنوان وبلاگ.
• محتوا: بدنه اصلی پست وبلاگ.
• نویسنده: نام شخصی که وبلاگ را می نویسد.

در اینجا نحوه ساختار آن در TypeScript آورده شده است:

interface Blog {
  id: number;
  title: string;
  content: string;
  author: string;
  created_at: string;
  updated_at: string;
}

interface CreateBlogParams {
  title: string;
  content: string;
  author: string;
}

بنابراین در اینجا ، اکنون ما تعریف کرده ایم createBlog عملکردی که اساساً یک نقطه پایانی پست است. برای ایجاد یک وبلاگ ، اطلاعات وبلاگ لازم خواهد بود.

import { api } from "encore.dev/api";

interface Blog {
  id: number;
  title: string;
  content: string;
  author: string;
  created_at: string;
  updated_at: string;
}

interface CreateBlogParams {
  title: string;
  content: string;
  author: string;
}

// Create Blog
export const createBlog = api<CreateBlogParams, Blog>(
  {
    method: "POST",
    path: "/blogs",
    expose: true,
  },
  async ({ title, content, author }: CreateBlogParams) => {
    return { title, content, author } as Blog;
  }
);

بیایید از داشبورد توسعه دهنده ای که Encore ارائه می دهد استفاده کنیم. آن را به عنوان پستچی در استروئیدها اما با ویژگی های بیشتر فکر کنید. هنگامی که داشبورد را باز می کنید ، قطره ای از تمام نقاط پایانی که ایجاد کرده اید را مشاهده خواهید کرد.

به عنوان مثال ، اگر شما ایجاد کرده اید createBlog نقطه پایانی درست در لیست قرار خواهد گرفت. هر نقطه پایانی که می سازید در اینجا ظاهر می شود.

ما قبلاً آزمایش کرده ایم createBlog نقطه پایانی با ارسال برخی از داده های نمونه مانند عنوان وبلاگ ، محتوا و نام نویسنده ، کاملاً آثار آن است.

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

قبل از اینکه عمیق تر به ایجاد API بپردازیم ، بیایید لحظه ای برای تنظیم پایگاه داده خود بگذاریم. از این گذشته ، پلت فرم وبلاگ نویسی ما به مکانی برای ذخیره تمام آن پست های وبلاگ نیاز دارد ، درست است؟

ما از PostgreSQL به عنوان پایگاه داده خود استفاده خواهیم کرد و Encore ادغام و مدیریت آن را بسیار آسان می کند.

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

بیایید پایگاه داده را ابتدا و در ابتدا اجرا کنیم و سپس به ساخت آن API ها ادامه خواهیم داد!

با postgresql ارتباط برقرار کنید

به منظور ارتباط با PostgreSQL ، اولین چیزی که شما نیاز دارید Docker است که روی دستگاه خود کار می کند. Docker برای ایجاد و مدیریت بانکهای اطلاعاتی مانند PostgreSQL بسیار عالی است و از اینکه محیط محلی شما بیش از حد کثیف شود ، جلوگیری می کند.

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

نصب ساده است بنابراین شما می توانید خیلی سریع یک نمونه postgresql ایجاد کنید.

اکنون که Docker داریم ، PostgreSQL را اجرا می کنیم و سپس به پروژه Encore خود متصل می شویم. اول ، بیایید داکر بگیریم!

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

حال ، بیایید روی ایجاد یک تمرکز کنیم طرحواره پایگاه داده برای وبلاگ ما API. برای انجام این کار ، ما استفاده خواهیم کرد پرونده های مهاجرتبشر مهاجرت مانند یک کنترل نسخه برای DB شما است و به شما کمک می کند DB خود را با گذشت زمان تعریف و به روز کنید.

در اینجا نحوه تنظیم آن آورده شده است:

1. در داخل وبلاگ دایرکتوری (که قبلاً ایجاد کردیم) ، دایرکتوری دیگری به نام اضافه خواهیم کرد migrationsبشر اینجاست که تمام پرونده های مهاجرت پایگاه داده ما زندگی می کنند.
2. در داخل migrations پوشه ، ما یک پرونده به نام ایجاد خواهیم کرد 1_create_blogs_table.up.sqlبشر این نام ممکن است کمی خاص به نظر برسد ، اما این فقط یک کنوانسیون است 1 نشان می دهد که این اولین مهاجرت است ، و .up.sql به این معنی که این فایل ایجاد یا به روزرسانی طرحواره پایگاه داده خواهد شد.

در این پرونده ما طرح را برای ما تعریف خواهیم کرد blogs جدول

در اینجا یک مثال آورده شده است:

CREATE TABLE blogs (
    id SERIAL PRIMARY KEY,
    title TEXT NOT NULL,
    content TEXT NOT NULL,
    author TEXT NOT NULL,
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
    updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

این طرح شامل:

• در id ستونی که با هر پست وبلاگ جدید به صورت خودکار وارد می شود.
• titleبا contentوت author ستون ها برای ذخیره جزئیات وبلاگ.
• بوها created_at ستون برای ردیابی هنگام ایجاد وبلاگ.

پس از اجرای این پرونده مهاجرت ، Encore هنگام اجرای پروژه به طور خودکار آن را در پایگاه داده اعمال می کند.

و درست مانند آن ، پایگاه داده ما آماده ذخیره پست های وبلاگ خواهد بود!

import { SQLDatabase } from "encore.dev/storage/sqldb";

حال ، بیایید کد خود را به پایگاه داده وصل کنیم. برای انجام این کار ، ما باید وارد کنیم ساق پا از Encore's sqldb ماژول این به ما امکان می دهد تا با پایگاه داده PostgreSQL خود به طور یکپارچه ارتباط برقرار کنیم.

پس از وارد کردن آن ، ما ایجاد خواهیم کرد نمونه پایگاه دادهبشر از آنجا که پایگاه داده ما نامگذاری شده است blogs، ما از آن به عنوان مرجع استفاده خواهیم کرد.

در نمونه بانک اطلاعاتی ، ما نیز باید مسیر خود را تعریف کنیم migrations پوشه این به Encore می گوید که پرونده های مهاجرتی را که قبلاً ایجاد کردیم پیدا کنیم.

در اینجا چگونه در کد به نظر می رسد:

const db = new SQLDatabase("blogs", { migrations: "./migrations" });

با استفاده از این تنظیم ، Encore دقیقاً می داند که پرونده های مهاجرت را پیدا کنید و به طور خودکار آنها را در آن اعمال می کند blogs پایگاه داده وقتی پروژه را اجرا می کنیم.

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

import { api, APIError } from "encore.dev/api";
import { SQLDatabase } from "encore.dev/storage/sqldb";

const db = new SQLDatabase("blogs", { migrations: "./migrations" });

interface Blog {
  id: number;
  title: string;
  content: string;
  author: string;
  created_at: string;
  updated_at: string;
}

interface CreateBlogParams {
  title: string;
  content: string;
  author: string;
}

// Create Blog
export const createBlog = api<CreateBlogParams, Blog>(
  {
    method: "POST",
    path: "/blogs",
    expose: true,
  },
  async ({ title, content, author }: CreateBlogParams): Promise<Blog> => {
    const row = await db.queryRow<Blog>`
      INSERT INTO blogs (title, content, author)
      VALUES (${title}, ${content}, ${author})
      RETURNING id, title, content, author, created_at, updated_at`;

    if (!row) {
      throw APIError.internal("Failed to create blog");
    }
    return row;
  }
);

ما اکنون از یک پرس و جو SQL برای ذخیره استفاده کرده ایم titleبا contentوت author به blogs بانک اطلاعاتی

این یک دستور SQL ساده است که ذخیره سازی داده ها در پایگاه داده را کنترل می کند. پس از اجرای مجدد برنامه خود ، متوجه می شوید که پس از اتمام روند کار در Docker ، یک ظرف برای پایگاه داده شما ایجاد می شود.

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

فقط روی آن کلیک کنید ، داده های مورد نیاز را ارائه دهید و به ارسال ضربه بزنید. شما فوراً پاسخ را خواهید دید که آیا این یک موفقیت است یا خطایی.

این یک روش سریع و آسان برای اطمینان از همه چیز همانطور که انتظار می رود کار می کند. بیایید امتحان کنیم!

اکنون ، وقتی پاسخ را بررسی می کنیم ، می توانیم مشاهده کنیم idبا created_atوت updated_at زمینه ها این بدان معنی است که داده های ما با موفقیت در پایگاه داده ذخیره شده است. کاملاً کار می کند!

اگر می خواهید نگاهی دقیق تر به جداول و داده ها بیندازید ، می توانید از آن استفاده کنید Encore DB Shellبشر

این یک ابزار مفید است که به شما امکان می دهد مستقیماً با پایگاه داده خود ارتباط برقرار کنید.

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

encore db shell blogs

در اینجا blogs نام پایگاه داده ما است. پس از اجرای این کار ، در داخل پوسته پایگاه داده قرار خواهید گرفت ، جایی که می توانید جداول را کشف کنید ، نمایش داده شدگان SQL را اجرا کنید و دقیقاً آنچه را که در پایگاه داده خود ذخیره شده است ببینید.

بیایید آن را امتحان کنیم و ببینیم چه چیزی در زیر کاپوت است!

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

ما می توانیم داده ها را ببینیم ، هرچند که به دلیل فضای محدود در ترمینال کمی تنگ شده است. اما نکته مهم این است که کار می کند! داده ها به درستی ذخیره می شوند و ما آن را تأیید کردیم.

و با این کار ، ما اولین نقطه پایانی خود را برای ایجاد یک وبلاگ با موفقیت به پایان رسانده ایم. باحال ، درست است؟

بیایید این حرکت را ادامه دهیم و بیشتر بسازیم!

همه وبلاگ ها را بخوانید:

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

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

همه چیز در مورد ساختن آنچه قبلاً آموخته ایم است. بیایید شیرجه بزنیم و این کار را انجام دهیم!

// Read All Blogs
export const getBlogs = api(
  {
    method: "GET",
    path: "/blogs",
    expose: true,
  },
  async (): Promise<{ blogs: Blog[] }> => {
    const rows = db.query`
          SELECT id, title, content, created_at
          FROM blogs
          ORDER BY created_at DESC
      `;

    const blogs: Blog[] = [];
    for await (const row of rows) {
      blogs.push({
        id: row.id,
        title: row.title,
        content: row.content,
        author: row.author,
        created_at: row.created_at,
        updated_at: row.updated_at,
      });
    }

    return { blogs };
  }
);

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

سر به سمت داشبورد توسعه دهنده، پیدا کردن getAllBlogs نقطه پایانی در کشویی ، و ارسال ارسال.

اگر همه چیز درست تنظیم شده است ، باید لیستی از تمام وبلاگ های ذخیره شده در پایگاه داده خود را مشاهده کنید.

دریافت وبلاگ توسط شناسه:

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

این ساده است فقط یک ترفند کوچک به آنچه قبلاً انجام داده ایم. بیایید آن را بسازیم و ببینیم که چگونه کار می کند!

// Read a Single Blog by ID
export const getBlogById = api<{ id: number }, Blog>(
  {
    method: "GET",
    path: "/blogs/:id",
    expose: true,
  },
  async ({ id }: { id: number }): Promise<Blog> => {
    const row = await db.queryRow<Blog>`
      SELECT * FROM blogs WHERE id = ${id}`;
    if (!row) {
      throw APIError.notFound("Blog not found");
    }
    return row;
  }
);

بیایید این نقطه پایانی جدید را با استفاده از داشبورد توسعه دهندهبشر از آنجا که ما تاکنون فقط یک وبلاگ در پایگاه داده داریم ، وبلاگ را با آن بررسی خواهیم کرد id: 1بشر

سر به داشبورد بروید ، پیدا کنید getBlogById نقطه پایانی و عبور 1 به عنوان شناسه ارسال را ارسال کنید ، و باید جزئیات آن وبلاگ واحد را در پاسخ مشاهده کنید.

به روزرسانی وبلاگ توسط شناسه:

به روزرسانی یک وبلاگ توسط شناسه آن بسیار ساده است. اول ، ما یک تعریف خواهیم کرد به روزرسانی blogparams رابط برای ساختار داده هایی که انتظار داریم مانند idبا titleبا contentوت authorبشر

سپس ، ما از یک پرس و جو SQL برای به روزرسانی وبلاگ در پایگاه داده بر اساس ارائه شده استفاده خواهیم کرد idبشر

اگر وبلاگ با داده id وجود ندارد ، ما یک پیام خطایی را به کاربر می اندازیم تا به کاربر اطلاع دهیم.

interface UpdateBlogParams {
  id: number;
  title: string;
  content: string;
}

// Update Blog
export const updateBlog = api<UpdateBlogParams, Blog>(
  {
    method: "PUT",
    path: "/blogs/:id",
    expose: true,
  },
  async ({ id, title, content }: UpdateBlogParams): Promise<Blog> => {
    const row = await db.queryRow<Blog>`
      UPDATE blogs
      SET title = ${title}, content = ${content}, updated_at = NOW()
      WHERE id = ${id}
      RETURNING id, title, content, author, created_at, updated_at`;

    if (!row) {
      throw APIError.notFound("Blog not found");
    }
    return row;
  }
);

بیایید این را آزمایش کنیم و ببینیم که چگونه کار می کند. سر به سمت داشبورد توسعه دهنده، پیدا کردن updateBlog نقطه پایانی ، و عبور در id از وبلاگ شما می خواهید همراه با جدید به روز کنید titleبا content، یا authorبشر

در title وت content برای وبلاگ 1 بر اساس داده هایی که در بدنه درخواست ارسال کرده ایم به روز شده اند.

اگر پاسخ را در داشبورد توسعه دهنده، تغییرات منعکس شده در آنجا را مشاهده خواهید کرد.

وبلاگ را با شناسه حذف کنید:

حال ، بیایید ببینیم چگونه می توانیم یک وبلاگ را با شناسه خود حذف کنیدبشر ما می خواهیم id به عنوان یک پارامتر در عملکرد و اجرای یک پرس و جو ساده SQL برای حذف وبلاگ از پایگاه داده.

اگر وبلاگ با داده id وجود دارد ، حذف می شود. اگر اینطور نیست ، ما با یک پیام خطا ، آن را با لطف اداره می کنیم.

// Delete Blog
export const deleteBlog = api<{ id: number }, { message: string }>(
  {
    method: "DELETE",
    path: "/blogs/:id",
    expose: true,
  },
  async ({ id }: { id: number }): Promise<{ message: string }> => {
    const row = await db.queryRow<Blog>`
    SELECT * FROM blogs WHERE id = ${id}`;
    if (!row) {
      throw APIError.notFound("Blog not found");
    }

    await db.exec`DELETE FROM blogs WHERE id = ${id}`;

    return { message: "Blog deleted successfully" };
  }
);

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

حالا که ما همه را طی کرده ایم عملیات خزنده برای وبلاگ ما API ایجاد کردنبا خواندنبا بروزرسانیوت حذف کردن شما پایه و اساس ساخت یک برنامه کاملاً کاربردی را دارید.

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

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

سرور باطن را مستقر کنید:

استقرار در محاصره کردن یکی از آن مواردی است که تقریباً جادویی احساس می کند فوق العاده جالب و فوق العاده آسان است.

با 3 دستور، می توانید کل کد باطن خود ، از جمله پایگاه داده را مستقر کنید.

در اینجا نحوه عملکرد آن آورده شده است:

1. تغییرات خود را روی صحنه ببرید:

   git add .
   

2. تغییرات خود را مرتکب شوید با یک پیام:

   git commit -m "Your commit message here"
   

3. فشار برای محاصره:

   git push encore
   

و همین است! Encore مراقبت از استراحت در ساخت برنامه شما ، تنظیم پایگاه داده و استقرار همه چیز به ابر است.

اکنون برنامه خود را از App.encore.dev باز کنید

اینجا شماست URL میزبان زنده! اکنون می توانید از این URL استفاده کنید ایجاد کردنبا خواندنبا بروزرسانیوت حذف کردن وبلاگ ها

و حدس بزنید چه؟ این قبلاً در یک میزبان است محیط صحنهبشر

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

Encore باعث می شود استقرار احساس بی دردسر کند. بیایید آن را برای چرخش بگیریم!

ادغام API با Frontend

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

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

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

در اینجا ، من یک ساده ایجاد کرده ام Next.JS برنامه Frontend برای نشان دادن چگونگی آماده سازی API های ما برای ادغام با هر جبهه.

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

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

"use client";
import axios from "axios";
import { useEffect, useState } from "react";

export default function BlogList() {
  const [blogs, setBlogs] = useState<
    {
      id: string;
      title: string;
      content: string;
      author: string;
      created_at: string;
    }[]
  >([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    const fetchBlogs = async () => {
      try {
        const response = await axios.get(
          "https://staging-blogs-nqei.encr.app/blogs"
        );
        console.log(response);
        setBlogs(response?.data?.blogs);
      } catch (err) {
        console.log(err);
        setError("Failed to load blogs. Please try again later.");
      } finally {
        setLoading(false);
      }
    };
    fetchBlogs();
  }, []);

  if (loading) {
    return (
      <div className="text-center mt-20 text-lg text-gray-500">
        Loading blogs...
      div>
    );
  }

  if (error) {
    return (
      <div className="text-center mt-20 text-lg text-red-500">{error}div>
    );
  }

  return (
    <div className="min-h-screen bg-gradient-to-b from-blue-50 to-blue-100 py-10 px-4 sm:px-10">
      <h1 className="text-4xl font-bold text-center text-gray-700 mb-10 drop-shadow-lg">
        {`Syket's`} Blog
      h1>
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        {blogs.map((blog) => (
          <div
            key={blog.id}
            className="bg-white shadow-md rounded-2xl p-6 hover:shadow-xl transition-shadow duration-300"
          >
            <h2 className="text-xl font-semibold text-gray-800 mb-2 truncate">
              {blog.title}
            h2>
            <p className="text-gray-600 text-sm line-clamp-3">{blog.content}p>
          div>
        ))}
      div>
    div>
  );
}

و اینجا ماست صفحه وبلاگ کوچک و ساده! این هیچ چیز فانتزی نیست ، اما کار را انجام می دهد. می توانید وبلاگ هایی را که قبلاً ایجاد کردیم ، درست در اینجا نمایش داده شده ، از API با پس زمینه ما نمایش داده شود.

این یک مثال عالی از چگونگی ارتباط همه چیز با هم با پشت و کار در هماهنگی است.

پایان

این یک سفر باورنکردنی برای ما از همان آغاز پروژه برای ایجاد اولین API ، اتصال آن به پایگاه داده PostgreSQL و سپس استقرار آن در محیط Encore بوده است.

کارهای زیادی برای انجام دادن وجود داشت و وقتی همه قطعات با هم جمع شدند. Encore باعث می شود طراحی برنامه های ایمن و از نوع ایمن که می توانند به سرعت مقیاس شوند ، آسان شود.

اگر نگاه دقیق تری می خواهید ، نتوانید اسناد را بررسی کنید. ارتباط زیادی با Encore وجود دارد.

همچنین ، اگر پروژه را دوست دارید لطفا Encore Star on Githubبشر

با تشکر از خواندن تا پایان!