ایجاد یک برنامه دسکتاپ تلگرام با PostgreSQL و Next.js 🪄

ek3nk4r 2023-02-13

0 32 12 دقیقه قبل خوانده شده

ایجاد یک برنامه دسکتاپ تلگرام با PostgreSQL و Next.js 🪄

پیشنهاد ویژه

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

فهرست مطالب

TL; DR

در این آموزش، نحوه ایجاد یک برنامه وب شبیه تلگرام را با ترکیب قدرت های جادویی PostgreSQL و Next.js خواهید آموخت.

اپلیکیشن پیام رسان تلگرام – تاریخچه سریع

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

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

کاوش در قدرت های PostgreSQL و Next.js

دلیل اینکه تلگرام را در ذهن خود داریم صرفاً به خاطر کارهایی که این برنامه می تواند انجام دهد نیست. همچنین به این دلیل است که زمینه بسیار خوبی برای ساختن یک برنامه مشابه و دیدن برخی از ابزارها و فریم ورک های توسعه دهنده عالی در عمل است. در این مورد، ما به طور خاص در مورد PostgreSQL و Next.js صحبت می کنیم. با ترکیب آنها می توانید برنامه دسکتاپ تلگرام مانند خود را (در مرورگر) ایجاد کنید. و ما به شما نشان خواهیم داد که چگونه!

چرا به طور خاص از Next.js و PostgreSQL استفاده می کنیم؟

چرا Next.js برخلاف ایجاد اپلیکیشن React؟

هیچ کمبودی در ابزارهای ساخت React وجود ندارد که هر کدام مزایا و معایب خاص خود را دارند. امروز ما روی چارچوب بسیار محبوب جاوا اسکریپت Next.js تمرکز می کنیم که به محبوب ترین ابزار ساخت برای پروژه های React تبدیل شده است.

از زمان نگارش این مقاله، Next.js دارای 100 هزار ستاره در GitHub است که در سال 2022 از Create React App پیشی گرفته است (Create React App حدود 98.8k ستاره دارد). با این حال، مهمترین عامل این است که Next.js که توسط Vercel ایجاد شده است از ابزار رسمی ساخت React ایجاد شده توسط فیس بوک پیشی گرفته است.

به چند دلیل، Next.js نسبت به Create React App (CRA) انعطاف پذیرتر است:

پیکربندی قابل تنظیم – در مقایسه با CRA، Next.js تنظیمات سازگارتر و قابل تنظیم تری را ارائه می دهد که به کاربران کنترل بیشتری بر ابزارها و فرآیند ساخت می دهد.
مسیرهای پویا – تقسیم خودکار کد و مسیریابی پویا توسط Next.js امکان پذیر شده است و مدیریت سیستم های پیچیده و در مقیاس بزرگ را ساده تر می کند.
رندر سمت سرور (SSR) – Next.js دارای پشتیبانی داخلی برای رندر سمت سرور است که شامل پیش رندر کردن صفحات در سرور قبل از ارسال آنها به مشتری است. این امر زمان بارگذاری را کاهش می دهد و بهینه سازی موتور جستجو (SEO) برنامه شما را افزایش می دهد.
ایجاد یک وب سایت ثابت – Next.js یک جایگزین انعطاف پذیر برای پروژه های مختلف، از برنامه های وب پویا گرفته تا وب سایت های ثابت است، زیرا می توان از آن برای تولید صفحات وب استاتیک نیز استفاده کرد.

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

چرا PostgreSQL وقتی پایگاه داده های SQL زیادی وجود دارد؟

PostgreSQL یک سیستم مدیریت پایگاه داده منبع باز است، به این معنی که هر کسی مجاز به استفاده و تغییر آن است. این باعث می شود که برای توسعه دهندگان و مشاغلی که مایلند از هزینه های مربوط به پایگاه های داده اختصاصی اجتناب کنند، گزینه ای محبوب است.

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

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

PostgreSQL یک گزینه منعطف و محبوب برای انواع وظایف است و به دلیل این ویژگی ها از سناریوها استفاده می کند. همانطور که در نمودار زیر می بینید، PostgreSQL برای همه پاسخ دهندگان به نظرسنجی StackOverFlow 2022 رتبه 2 و برای حرفه ای ها رتبه یک است.

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

با این مقدمه، بیایید به ساخت برنامه وب خود بپردازیم.

چگونه PostgreSQL را به صورت محلی روی دستگاه خود تنظیم کنید

پیش نیازها

برنامه ما فول استک خواهد بود، به این معنی که ما باید یک معماری Back-end و Front-end داشته باشیم.

پشته فناوری ما شامل موارد زیر است:

🗄️ پایانه پشتی: Node.js + Nest.js
📦 پایگاه داده: PostgreSQL
🧑‍💻 قسمت جلویی: Next.js

برای کار با پایگاه های داده PostgreSQL، نرم افزار زیر باید نصب شود:

یک برنامه عالی برای مدیریت پایگاه های داده PostgreSQL Postgres.app است.
علاوه بر این، Pgcli، یک رابط خط فرمان برای Postgres، دارای برجسته سازی نحو است و تکمیل خودکار نیز توصیه می شود.
هنگامی که صحبت از استفاده از رابط کاربری گرافیکی برای کار با پایگاه های داده PostgreSQL می شود، والنتینا استودیو ترجیح من است. این یک ابزار فوق العاده است زیرا می تواند به پایگاه داده هایی مانند MongoDB و MySQL متصل شود. با این حال، جایگزین هایی مانند PgAdmin وجود دارد. با این حال، از هر چیزی که بیشتر با آن راحت هستید استفاده کنید.

راه اندازی پایگاه داده PostgreSQL برای برنامه تلگرام ما

مرحله 1: ایجاد پایگاه داده PostgreSQL
ابتدا مطمئن شوید که محیط توسعه شما تنظیم شده است و Postgres.app در حال اجرا است.

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

pgcli

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

\l

برای ایجاد یک پایگاه داده به نام تلگرام، عبارت SQL زیر را در پنجره خط فرمان pgcli خود کپی و جایگذاری کنید. اگر از دستور استفاده می کنید، اکنون باید بتوانید هر پایگاه داده، از جمله پایگاه داده ای را که به تازگی ایجاد کرده ایم، ببینید \l یک بار دیگر در همان پنجره

CREATE DATABASE telegram;

از دستور زیر برای اتصال به پایگاه داده در همان پنجره مرحله بعد استفاده کنید:

\c telegram

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

 CREATE TABLE telegram_profile (

    id UUID DEFAULT gen_random_uuid (),

    username VARCHAR(100) NOT NULL,

    profile_image VARCHAR(500) NOT NULL,

    last_message VARCHAR(1000) NOT NULL,

    last_message_date VARCHAR(20) NOT NULL

    );

    INSERT INTO telegram_profile (username, profile_image, last_message, last_message_date)

    VALUES ('Lucy', 'profile1.jpg', 'hello there', '2023-02-02'), ('John', 'profile2.jpg', 'how are you?', '2023-02-02'), ('Gemma', 'profile3.jpg', 'good morning!', '2023-02-03'), ('Sam', 'profile4.jpg', 'have a nice day', '2023-02-03'), ('William', 'profile5.jpg', 'whats up?', '2023-02-05'), ('Magdalena', 'profile6.jpg', 'hows it going?', '2023-02-05'), ('Tina', 'profile7.jpg', 'Guess what?', '2023-02-04'), ('Isabella', 'profile8.jpg', 'I know right so cool!', '2023-02-03'), ('Ethan', 'profile9.jpg', 'take care', '2023-02-02'), ('Ava', 'profile10.jpg', 'Send the picture', '2023-02-08');

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

از تنظیمات اتصال پایگاه داده PostgreSQL زیر استفاده کنید:

میزبان: میزبان محلی
پایگاه داده: تلگرام
کاربر: postgres
کلمه عبور: هیچ رمز عبوری وجود ندارد آن را خالی بگذارید
بندر: 5432

مرحله ۲: ایجاد بک‌اند Nest.js

در نهایت، Nest.js را توسعه داده و آن را به پایگاه داده PostgreSQL خود متصل می کنیم. پس از این مرحله، ما در نهایت به سمت جلوی React Next.js سوئیچ خواهیم کرد.

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

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

    mkdir telegram-app
    cd telegram-app
    nest new backend

با باز کردن پروژه در ویرایشگر کد خود، برای ایجاد چند فایل کنترلر و سرویس آماده شوید. برای اتصال به پایگاه های داده PostgreSQL، TypeORM و PostgreSQL را نیز در پروژه خود نصب می کنیم. ابتدا از خط فرمان استفاده کنید cd به درون باطن پوشه، سپس دستورالعمل های زیر را اجرا کنید.

    cd backend
    npm install --save pg @nestjs/typeorm typeorm
    nest g controller telegram
    nest g service telegram

بیایید قبل از تولید فایل های پروژه اضافی، فایل ها را کمی مرتب کنیم. با حذف این فایل ها از پوشه پروژه خود از شر آنها خلاص شوید:

app.service.ts
app.controller.ts
app.controller.spec.ts

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

    mkdir src/telegram
    touch src/telegram/{telegram.module.ts,telegram.entity.ts,telegram.service.ts,telegram.controller.ts}
    mkdir src/telegram/dto
    touch src/telegram/dto/telegram.dto.ts

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

در کل 7 فایل وجود دارد:

app.module.ts
telegram.service.ts
telegram.module.ts
telegram.entity.ts
telegram.controller.ts
dto/telegram.dto.ts
main.ts

اینجاست app.module.ts فایل.

   import { Module } from '@nestjs/common';

    import { TypeOrmModule } from '@nestjs/typeorm';

    import { TelegramController } from './telegram/telegram.controller';

    import { TelegramService } from './telegram/telegram.service';

    import { TelegramModule } from './telegram/telegram.module';

    import { DataSource } from 'typeorm';

    @Module({
      imports: [
        TypeOrmModule.forRoot({
          type: 'postgres',

          host: 'localhost',

          port: 5432,

          username: 'postgres',

          password: '',

          database: 'telegram',

          entities: ['dist/**/*.entity{.ts,.js}'],

          synchronize: true,
        }),

        TelegramModule,
      ],

      controllers: [TelegramController],

      providers: [TelegramService],
    })
    export class AppModule {
      constructor(private dataSource: DataSource) {}
    }

بعد، ما داریم telegram.service.ts فایل.

 import { Injectable } from '@nestjs/common';

    import { InjectRepository } from '@nestjs/typeorm';

    import { Repository } from 'typeorm';

    import { Telegram } from './telegram.entity';

    @Injectable()
    export class TelegramService {
      constructor(
        @InjectRepository(Telegram)
        private telegramRepository: Repository<Telegram>
      ) {}

      async findAll() {
        const data = await this.telegramRepository.query(
          `SELECT * FROM telegram_profile`
        );

        try {
          console.log('Data', data);

          return data;
        } catch (error) {
          console.log(error);
        }
      }
    }

پس از آن می آید telegram.module.ts فایل.

    import { Module } from '@nestjs/common';

    import { TypeOrmModule } from '@nestjs/typeorm';

    import { TelegramController } from './telegram.controller';

    import { TelegramService } from './telegram.service';

    import { Telegram } from './telegram.entity';

    @Module({
      imports: [TypeOrmModule.forFeature([Telegram])],

      controllers: [TelegramController],

      providers: [TelegramService],

      exports: [TypeOrmModule],
    })
    export class TelegramModule {}

و اکنون است telegram.entity.ts فایل.

  import { Entity, Column, PrimaryGeneratedColumn, BaseEntity } from 'typeorm';

    @Entity()
    export class Telegram extends BaseEntity {
      @PrimaryGeneratedColumn('uuid')
      id: string;

      @Column()
      username: string;

      @Column()
      profile_image: string;

      @Column()
      last_message: string;

      @Column()
      last_message_date: string;
    }

ما انجام خواهیم داد telegram.controller.ts اکنون فایل کنید

import { Controller, Get } from '@nestjs/common';

    import { TelegramService } from './telegram.service';

    import { TelegramDto } from './dto/telegram.dto';

    @Controller('telegramprofiles')
    export class TelegramController {
      constructor(private telegramService: TelegramService) {}

      @Get()
      async findAll(): Promise<TelegramDto[]> {
        return await this.telegramService.findAll();
      }
    }

فقط یک مورد دیگر برای رفتن به دنبال dto/telegram.dto.ts فایل.

export class TelegramDto {
      username: string;

      profile_image: string;

      last_message: string;

      last_message_date: string;
    }

در نهایت main.ts فایل.

 import { NestFactory } from '@nestjs/core';

    import { AppModule } from './app.module';

    async function bootstrap() {
      const app = await NestFactory.create(AppModule);

      app.enableCors();

      await app.listen(8080);
    }

    bootstrap();

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

    npm run start:dev

به http://localhost:8080/telegramprofiles بروید و تمام داده‌هایی که در پایگاه داده PostgreSQL ما هستند به صورت JSON در مرورگر و کنسول بازگردانده می‌شوند. REST API ما راه‌اندازی شده است و کار می‌کند، اکنون به قسمت جلو برویم.

ایجاد یک برنامه وب تلگرام برای برنامه دسکتاپ با Next.js

شروع با صفحه دیگ Next.js

بیایید با پیمایش دوباره به پوشه اصلی تلگرام-اپ شروع کنیم cd به آن اکنون دستورات را برای ایجاد یک پروژه boilerplate Next.js اجرا کنید.

    npx create-next-app@latest frontend

توسعه رابط کاربری اپلیکیشن تلگرام

صفحه اصلی Next.js ما اکنون فقط به مقداری کد HTML و CSS نیاز دارد. کد را کپی کرده و آن را در فایل های صحیح پروژه خود قرار دهید.

این کد را کپی کرده و در آن قرار دهید src/pages/index.js فایل.

 import { useState, useEffect } from 'react';

    import '../styles/Home.module.css';

    export default function Home() {
      useEffect(() => {
        fetchAPI();
      }, []);

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

      const [data, setData] = useState([]);

      const fetchAPI = () => {
        const API = 'http://localhost:8080/telegramprofiles';

        fetch(API)
          .then((response) => {
            return response.json();
          })

          .then((data) => {
            setData(data);

            setLoading(false);

            console.log(data);
          });
      };

      return (
        <>
          <div className="header">
            <p>Telegram</p>
          </div>

          <div className="container">
            {loading ? (
              <div>
                <p>Loading...</p>
              </div>
            ) : (
              <div className="sidebar">
                {data.map((profile) => (
                  <div className="profile-container">
                    <div className="profile">
                      <div className="profile-image-container">
                        <div className="profile-image"></div>
                      </div>

                      <div className="profile-message">
                        <p>{profile.username}</p>

                        <p>{profile.last_message}</p>
                      </div>

                      <div className="profile-date">
                        <p>{profile.last_message_date}</p>
                      </div>
                    </div>
                  </div>
                ))}
              </div>
            )}

            <div className="main">
              <p>Select a chat to start messaging</p>
            </div>
          </div>
        </>
      );
    }

و این کد را در styles/global.css فایل.

  @import url('../styles/Home.module.css');

    @import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');

    *,
    *::before,
    *::after {
      margin: 0;

      padding: 0;

      box-sizing: border-box;
    }

    :root {
      --main-font-family: 'Roboto', sans-serif;

      --main-font-color: #ffffff;

      --main-font-size: 16px;
    }

    html {
      font-size: var(--main-font-size);
    }

    body {
      background: #24303f;

      color: #ffffff;
    }

در نهایت، این کد را کپی و در آن قرار دهید styles/Home.module.css فایل.

    .header {
      text-align: center;

      color: #b1bfcf;

      font-weight: bold;

      margin-top: 0.2rem;
    }

    .container {
      width: 100%;

      display: flex;

      flex-flow: row nowrap;

      justify-content: flex-start;
    }

    .sidebar {
      background: #1a222c;
    }

    .profile {
      display: flex;

      flex-flow: row nowrap;
    }

    .profile:hover {
      background: #3d6a97;
    }

    .profile-image-container {
      margin: 0.3rem;
    }

    .profile-image {
      border-radius: 100%;

      width: 3rem;

      height: 3rem;

      background: #baf6af;
    }

    .profile-message {
      margin-left: 1rem;

      width: 10rem;

      display: flex;

      flex-flow: column nowrap;

      align-items: flex-start;

      justify-content: center;

      border-bottom: 0.01rem solid #b1bfcf;
    }

    .profile-message p:nth-child(2) {
      color: #b1bfcf;
    }

    .profile-date {
      margin: 0.5rem 0.5rem 0 0;

      border-bottom: 0.01rem solid #b1bfcf;
    }

    .profile-date p {
      color: #b1bfcf;

      font-size: 0.8rem;
    }

    .main {
      display: flex;

      flex-flow: row nowrap;

      justify-content: center;

      width: 100%;
    }

    .main p {
      margin-top: 40rem;

      color: #b1bfcf;

      background: #1a222c;

      height: 1.7rem;

      border-radius: 1rem;

      padding: 0.5rem;

      font-size: 0.9rem;
    }

اطمینان حاصل کنید که پایگاه داده PostgreSQL، سرورهای باطن و فرانت اند شما همگی در حال اجرا هستند. به http://localhost:3000/ بروید و باید یک برنامه آزمایشی تلگرام با مقداری داده را ببینید. این تنها یک مثال ساده است، اما می‌توانید ببینید که چقدر پتانسیل برای ایجاد برنامه‌های پیشرفته‌تر با استفاده از این پشته فناوری وجود دارد. اگر می خواهید، حتی می توانید سعی کنید عملکردهای بیشتری مانند جدول دیگری برای نظرات افراد اضافه کنید که سپس می توانید در پنجره چت ارائه دهید.

Socket.IO یک بسته فوق العاده برای افزودن برخی از قابلیت های چت بلادرنگ خواهد بود 😉

افکار نهایی

در نهایت، ساختن یک برنامه دسکتاپ تلگرام مشابه با PostgreSQL و Next.js یک ترکیب قوی است که تجربه ای امن، سریع و کاربرپسند را ارائه می دهد. توسعه‌دهندگان می‌توانند به سرعت برنامه‌های پویا و مقیاس‌پذیر را طراحی کنند که برای عملکرد و سئو بهینه‌سازی شده‌اند، با بهره‌برداری از ویژگی‌های Next.js.

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

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

اگر ارزشی را از این مقاله دریافت کردید، احتمالاً از آن دسته افرادی هستید که از ارزشی که Livecycle می‌تواند برای تیم‌های اصلی و جریان‌های کاری توسعه آنها به ارمغان بیاورد، قدردانی می‌کنید. خوشحال می شوم اگر SDK ما را روی یکی از پروژه های خود امتحان کنید و با تیم خود به آن بپردازید. 🙏

ek3nk4r 2023-02-13

0 32 12 دقیقه قبل خوانده شده