العودة للمقالات

بناء تطبيق كامل الميزات بدون خادم باستخدام React و AWS Amplify و TypeScript

Majd Muhtaseb27‏/10‏/202512 دقيقة

مقدمة

توضح هذه المقالة كيفية إنشاء تطبيق كامل الميزات بدون خادم بسرعة باستخدام React للواجهة الأمامية، و AWS Amplify لإدارة خدمات الواجهة الخلفية، و TypeScript لقاعدة بيانات آمنة من النوع. سنركز على تطبيق أساسي يسمح للمستخدمين بإنشاء وعرض الملاحظات.

المتطلبات الأساسية

• حساب AWS
• تثبيت Node.js و npm
• معرفة أساسية بـ React و TypeScript

إعداد مشروع Amplify

أولاً، قم بتثبيت Amplify CLI:

npm install -g @aws-amplify/cli

قم بتكوين Amplify باستخدام حساب AWS الخاص بك:

amplify configure

قم بإنشاء تطبيق React جديد باستخدام TypeScript:

npx create-react-app my-notes-app --template typescript
cd my-notes-app

قم بتهيئة Amplify في مشروعك:

amplify init

أجب على المطالبات لتكوين مشروع Amplify الخاص بك.

إضافة المصادقة

أضف المصادقة باستخدام Amplify:

amplify add auth

اقبل التكوين الافتراضي. ادفع التغييرات إلى AWS:

amplify push

إنشاء API

الآن، أضف واجهة برمجة تطبيقات باستخدام GraphQL:

amplify add api

حدد "GraphQL" كنوع API واقبل المخطط الافتراضي. ادفع التغييرات:

amplify push

ستقوم Amplify بإنشاء مخطط GraphQL، ومحللات، وجداول قاعدة بيانات (باستخدام DynamoDB) بناءً على التكوين الذي اخترته.

ربط React بـ API

قم بتثبيت مكتبات Amplify الضرورية:

npm install aws-amplify @aws-amplify/ui-react

قم بتكوين Amplify في ملف src/index.tsx الخاص بك:

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import { Amplify } from 'aws-amplify';
import awsconfig from './aws-exports';
import '@aws-amplify/ui-react/styles.css';


Amplify.configure(awsconfig);

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

aws-exports.js: يجب أن يكون هذا الملف قد تم إنشاؤه عند استخدام amplify push.

بناء واجهة المستخدم

إليك مكون React بسيط لإنشاء وعرض الملاحظات (App.tsx):

import React, { useState, useEffect } from 'react';
import { API, graphqlOperation } from 'aws-amplify';
import { withAuthenticator, Button, Heading, Input, Text, Flex, Card } from '@aws-amplify/ui-react';
import { listNotes } from './graphql/queries';
import { createNote, deleteNote } from './graphql/mutations';
import '@aws-amplify/ui-react/styles.css';

interface Note {
  id: string;
  name: string;
  description: string;
}

const App = ({ signOut, user }: any) => {
  const [notes, setNotes] = useState<Note[]>([]);
  const [noteName, setNoteName] = useState('');
  const [noteDescription, setNoteDescription] = useState('');

  useEffect(() => {
    fetchNotes();
  }, []);

  async function fetchNotes() {
    const apiData: any = await API.graphql(graphqlOperation(listNotes));
    setNotes(apiData.data.listNotes.items);
  }

  async function addNote() {
    if (!noteName || !noteDescription) return;
    const note = { name: noteName, description: noteDescription };
    await API.graphql(graphqlOperation(createNote, { input: note }));
    setNotes([...notes, note]);
    setNoteName('');
    setNoteDescription('');
    fetchNotes();
  }

  async function removeNote(note: Note) {
        if (!note?.id) return;
        const input = {id: note.id};
        await API.graphql(graphqlOperation(deleteNote, {input: input}));
        let newNotes = notes.filter((currentNote) => currentNote.id !== note.id);
        setNotes(newNotes);
  }


  return (
    <Flex direction="column">
      <Heading level={1}>تطبيق ملاحظاتي</Heading>
      <Text>مرحبا {user.username}</Text>
      <Button onClick={signOut}>تسجيل الخروج</Button>

      <Input
        placeholder="اسم الملاحظة"
        value={noteName}
        onChange={(e) => setNoteName(e.target.value)}
      />
      <Input
        placeholder="وصف الملاحظة"
        value={noteDescription}
        onChange={(e) => setNoteDescription(e.target.value)}
      />
      <Button onClick={addNote}>إضافة ملاحظة</Button>

      {notes.map((note: Note, index) => (
        <Card key={index}>
          <h2>{note.name}</h2>
          <p>{note.description}</p>
          <Button onClick={() => removeNote(note)}>حذف الملاحظة</Button>
        </Card>
      ))}
    </Flex>
  );
};

export default withAuthenticator(App);

تأكد من إنشاء graphql/queries.js و graphql/mutations.js. يجب أن يكون هذا قد تم إنشاؤه عند تشغيل amplify push.

خاتمة

يوفر هذا المثال أساسًا لبناء تطبيقات أكثر تعقيدًا بدون خادم باستخدام React و AWS Amplify و TypeScript. يمكنك التوسع في ذلك عن طريق إضافة المزيد من الميزات، مثل تحميل الصور وملفات تعريف المستخدمين والتحديثات في الوقت الفعلي.