> ## Documentation Index
> Fetch the complete documentation index at: https://docs.base44.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Refine Quickstart

> הוסף את Base44 לפרויקט Refine שלך

עקוב אחר ה-quickstart הזה כדי להוסיף את Base44 לפרויקט Refine שלך. תיצור בקאנד Base44, תגדיר entities, ותשלב את Base44 כ-data provider ב-Refine.

<Note>ה-CLI דורש Node.js 20.19.0 ומעלה.</Note>

## הגדרה

<Steps>
  <Step title="התקן את Base44 CLI">
    התקן את Base44 CLI גלובלית:

    ```bash theme={null}
    npm install -g base44@latest
    ```
  </Step>

  <Step title="צור בקאנד Base44">
    נווט לתיקיית פרויקט Refine שלך, ולאחר מכן הרץ:

    ```bash theme={null}
    base44 create
    ```

    אם אתה לא מחובר כבר, הפקודה תבקש ממך לבצע אימות.

    בחר **Create a basic project** כשתתבקש. פעולה זו יוצרת את קבצי הבקאנד בתוך תיקיית פרויקט Refine שלך. לאחר מכן עקוב אחר ההוראות להגדיר את הפרויקט שלך.

    כאשר אתה יוצר פרויקט, [Base44 skills](/developers/backend/overview/base44-skills) נכללים אוטומטית, ומספקים לסוכן ה-AI שלך הוראות והקשר עבור משימות Base44.
  </Step>

  <Step title="הגדר את ספריית הפלט">
    עדכן את [config.jsonc](/developers/backend/overview/project-structure#config-jsonc) כדי להצביע על ה-build output של Refine. הוסף או שנה את שדה `site.outputDirectory`:

    ```json theme={null}
    {
      "site": {
        "outputDirectory": "dist"
      }
    }
    ```
  </Step>

  <Step title="הגדר entities">
    צור [entity schemas](/developers/references/entities/introduction) כדי להגדיר את מבני הנתונים שלך. קבצי entity חייבים להיות ממוקמים בתיקיית `base44/entities/`.

    לדוגמה, צור את `base44/entities/task.jsonc`:

    ```json theme={null}
    {
      "name": "Task",
      "type": "object",
      "properties": {
        "title": {
          "type": "string"
        },
        "completed": {
          "type": "boolean",
          "default": false
        }
      },
      "required": ["title"]
    }
    ```
  </Step>

  <Step title="דחוף entities ל-Base44">
    דחוף את ה-entity schemas שלך ל-Base44:

    ```bash theme={null}
    base44 entities push
    ```

    פקודה זו מסנכרנת את הגדרות ה-entity המקומיות שלך עם הבקאנד Base44 שלך, ומאפשרת אותן לשימוש באפליקציה שלך. ראה [`entities push`](/developers/references/cli/commands/entities-push) למידע נוסף.
  </Step>

  <Step title="התקן Base44 SDK">
    התקן את Base44 SDK בפרויקט Refine שלך:

    ```bash theme={null}
    npm install @base44/sdk
    ```
  </Step>

  <Step title="צור לקוח Base44">
    צור [client](/developers/references/sdk/getting-started/client) של Base44 SDK בפרויקט שלך. ה-`appId` ניתן למצוא בקובץ `base44/.app.jsonc` שלך.

    לדוגמה, צור את `src/api/base44Client.ts`:

    ```typescript theme={null}
    import { createClient } from '@base44/sdk';

    export const base44 = createClient({
      appId: 'your-app-id-from-app.jsonc'
    });
    ```
  </Step>

  <Step title="השתמש ב-SDK ב-frontend שלך">
    צור קומפוננטה פשוטה לרישום והוספת tasks. לדוגמה, צור את `src/components/TaskList.tsx`:

    ```tsx theme={null}
    import { useState, useEffect } from 'react';
    import { base44 } from '../api/base44Client';

    export function TaskList() {
      const [tasks, setTasks] = useState<any[]>([]);
      const [newTaskTitle, setNewTaskTitle] = useState('');
      const [isLoading, setIsLoading] = useState(false);

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

      const loadTasks = async () => {
        setIsLoading(true);
        try {
          const taskList = await base44.entities.Task.list();
          setTasks(taskList);
        } catch (error) {
          console.error('Error loading tasks:', error);
        }
        setIsLoading(false);
      };

      const addTask = async (e: React.FormEvent) => {
        e.preventDefault();
        if (!newTaskTitle.trim()) return;

        setIsLoading(true);
        try {
          const newTask = await base44.entities.Task.create({
            title: newTaskTitle,
            completed: false
          });
          setTasks([...tasks, newTask]);
          setNewTaskTitle('');
        } catch (error) {
          console.error('Error creating task:', error);
        }
        setIsLoading(false);
      };

      return (
        <div>
          <h1>Tasks</h1>

          {isLoading && <p>Loading...</p>}

          <ul>
            {tasks.map((task) => (
              <li key={task.id}>{task.title}</li>
            ))}
          </ul>

          <form onSubmit={addTask}>
            <input
              type="text"
              value={newTaskTitle}
              onChange={(e) => setNewTaskTitle(e.target.value)}
              placeholder="New task"
              disabled={isLoading}
            />
            <button type="submit" disabled={isLoading || !newTaskTitle.trim()}>
              Add Task
            </button>
          </form>
        </div>
      );
    }
    ```

    <Note>
      השתמש בשם ה-entity המדויק מה-schema שלך בעת קריאה ל-SDK, כולל אותיות גדולות. לפי המוסכמה, שמות entities מתחילים באות גדולה. לדוגמה, אם ל-schema שלך יש `"name": "Task"`, אתה ניגש אליו כ-`base44.entities.Task.list()`.
    </Note>
  </Step>

  <Step title="ייבא את הקומפוננטה באפליקציה שלך">
    עדכן את `src/App.tsx` שלך כדי להשתמש בקומפוננטת TaskList:

    ```tsx theme={null}
    import { TaskList } from './components/TaskList';

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

    export default App;
    ```
  </Step>

  <Step title="הרץ את האפליקציה שלך מקומית">
    התחל את שרת הפיתוח של Refine כדי לבדוק את האינטגרציה שלך. משורש הפרויקט שלך, הרץ:

    ```bash theme={null}
    npm run dev
    ```

    אפליקציית Refine שלך תתחבר לבקאנד Base44 שלך דרך data provider מותאם, ותטפל אוטומטית בכל פעולות ה-CRUD.
  </Step>

  <Step title="בנה את ה-frontend שלך">
    כאשר אתה מרוצה מאיך שהכל נראה מקומית, בנה את פרויקט Refine שלך לפרודקשן:

    ```bash theme={null}
    npm run build
    ```

    זה יוצר קבצי פרודקשן מאופטמים בספריית הפלט שלך (בדרך כלל `dist`).
  </Step>

  <Step title="פרוס את ה-frontend שלך">
    פרוס את ה-frontend הבנוי שלך ל-Base44:

    ```bash theme={null}
    base44 deploy
    ```

    פקודת `deploy` פורסת את ה-frontend הבנוי שלך לאירוח Base44. היא גם תדחוף עדכונים ל-entity schemas שלך אם ביצעת שינויים מאז ה-push האחרון. כשהיא תסתיים, תראה את שם הפרויקט שלך, קישור ללוח הבקרה של Base44 שלך, וכתובת האפליקציה החיה שלך.
  </Step>
</Steps>

## השלבים הבאים

עכשיו שהבקאנד Base44 שלך משולב בפרויקט שלך, אתה יכול:

* להשתמש ב-[SDK](/developers/references/sdk/getting-started/overview) כדי להוסיף עוד פונקציונליות ל-frontend שלך.
* להוסיף [entities](/developers/backend/resources/entities/overview), [backend functions](/developers/backend/resources/functions), ו-[agents](/developers/backend/resources/agents-config). אם אתה עובד ב-TypeScript, [ייצר types](/developers/references/sdk/getting-started/dynamic-types) כדי לקבל autocomplete ובטיחות סוגים.
* לבדוק באופן מקומי על ידי הרצת [`base44 dev`](/developers/references/cli/commands/dev) עבור הבקאנד ו-`npm run dev` עבור ה-frontend. ראה [Local development](/developers/backend/overview/local-dev/local-development-overview) להוראות הגדרה.
* להמשיך לבנות את ה-frontend שלך ולפרוס עדכונים עם [`base44 deploy`](/developers/references/cli/commands/deploy).
* לפתוח את האתר המופץ שלך עם [`base44 site open`](/developers/references/cli/commands/site-open).

## ראה גם

* [CLI Command Reference](/developers/references/cli/commands/introduction): כל פקודות ה-CLI הזמינות
* [Project Structure](/developers/backend/overview/project-structure): כיצד קבצי הפרויקט מאורגנים
* [JavaScript SDK Documentation](/developers/references/sdk/getting-started/overview): חבר את האפליקציה שלך לבקאנד
* [Base44 Skills](/developers/backend/overview/base44-skills): למד עוזרי AI לעבוד עם Base44

<Note>דף זה תורגם באמצעות בינה מלאכותית. למידע המדויק והעדכני ביותר, עיין ב[גרסה האנגלית](/). </Note>