# ابنِ نظام تجارة إلكترونية في ثوانٍ مع TomatoPHP

> خطوة بخطوة، حوّل تطبيق Laravel جديدًا إلى متجر متكامل مع TomatoPHP: لوحة تحكم وأدوار وCRM ومحافظ ونظام محتوى وقوالب وواجهة متجر جاهزة.

*2026-09-17T03:23:45Z*

مرحبًا يا مجتمع المطورين.

TomatoPHP مجموعة حديثة ومفتوحة المصدر من حزم Laravel، صُممت لتسهيل التطوير في بيئة VILT stack. تعتمد هذه المنظومة على Splade لإنشاء تطبيقات صفحة واحدة (SPA) حديثة وعالية الأداء باستخدام ملفات Blade فقط، فتجعل تجربة التطوير فعّالة وممتعة في آن واحد.

نواصل تطوير المنظومة بإضافة ميزات جديدة إلى إضافاتنا، وقد بنينا منها الآن نظام تجارة إلكترونية متكاملًا. سأرشدك في هذا المقال خطوة بخطوة خلال التنفيذ كاملًا، لتتمكن من إضافة نظام تجارة إلكترونية قوي إلى تطبيق Laravel الخاص بك.

في النهاية سيكون لديك:

- لوحة تحكم مع إدارة للأدوار
- نظام CRM لعملائك بحارس مصادقة خاص بهم
- محافظ للعملاء ومدفوعات
- نظام إدارة محتوى ونظام قوالب لواجهة المتجر
- منتجات وطلبات وعروض وفروع، مع قالب تجارة إلكترونية جاهز فوقها

_ملاحظة: كُتب هذا الدليل في مطلع 2024 لإصدارات TomatoPHP المبنية على Laravel 10. غيّرت إصدارات Laravel الأحدث بعض الملفات المذكورة أدناه (مثل `RouteServiceProvider.php` والـ middleware المسمى `Authenticate`)، فعدّل هذه الخطوات إن كنت تستخدم إصدارًا أحدث._

## تثبيت Tomato Admin

يبدأ كل شيء من إضافة tomato-admin مثبّتة على تطبيق Laravel جديد.

1. أنشئ تطبيق Laravel جديدًا:

```bash
composer create-project laravel/laravel tomato
```

> إن لم تكن لديك بيئة لتشغيل Laravel بعد، يمكنك الاستعانة بهذا [الدليل](https://docs.tomatophp.com/get-started/environment-setup) لبناء واحدة على Ubuntu Linux.

2. انتقل بالأمر `cd` إلى مجلد المشروع، واضبط بيانات قاعدة البيانات في ملف `.env`، وتأكد أن التطبيق يعمل وأن قاعدة البيانات متصلة. أسهل طريقة للتحقق هي تشغيل الـ migrations:

```bash
php artisan migrate
```

3. ثبّت tomato-admin:

```bash
composer require tomatophp/tomato-admin
```

4. بعد انتهاء Composer شغّل أمر التثبيت التلقائي:

```bash
php artisan tomato-admin:install
```

5. إن كنت على macOS فيمكن لأداة التثبيت أن تثبّت حزم Yarn تلقائيًا، وإلا فابنِ ملفات الواجهة بنفسك هكذا:

```bash
yarn && yarn build
```

_ملاحظة: كان الأمر في المقال الأصلي `yarn & yarn build`، والرمز `&` المفرد يرسل `yarn` إلى الخلفية، لذلك استُخدم `&&` هنا وفي بقية الدليل._

أصبح tomato-admin مثبّتًا الآن على مشروع Laravel الخاص بك.

### نشر ملفات migrations الخاصة بـ Media Library

تستخدم حزمنا ملفات الوسائط، لذلك نحتاج إلى نشر ملفات migrations الخاصة بـ Spatie Media Library:

```bash
php artisan vendor:publish --provider="Spatie\MediaLibrary\MediaLibraryServiceProvider" --tag="medialibrary-migrations"
```

إن لم يعمل هذا الأمر فاستخدم النسخة التفاعلية بدلًا منه:

![نافذة vendor:publish التفاعلية وهي تعرض قائمة المزوّدات والوسوم القابلة للنشر](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5h8jkfafatf1nqtuh8ib.png)

```bash
php artisan vendor:publish
```

ثم اكتب `media` في مربع البحث واختر عنصر الـ migrations. بعد ذلك نفّذ الـ migrations:

```bash
php artisan migrate
```

افتح المتصفح الآن وستظهر لك صفحة رئيسية مثل هذه:

![الصفحة الرئيسية لتطبيق Laravel بعد تثبيت Tomato Admin](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wrm0574dwbhwx43nvxgk.png)

أخيرًا، غيّر قيمة الثابت `HOME` في `RouteServiceProvider.php` إلى `/admin`، ليُعاد توجيه المستخدمين إلى لوحة التحكم بعد تسجيل الدخول.

## تثبيت Tomato Roles

لا يكتمل أي نظام تجارة إلكترونية دون إدارة متينة للأدوار، لذلك الحزمة التالية هي tomato-roles.

1. أضف الحزمة:

```bash
composer require tomatophp/tomato-roles
```

2. بعد انتهاء Composer شغّل أمر التثبيت:

```bash
php artisan tomato-roles:install
```

3. افتح `app\Models\User.php` وأضف إليه هذا الـ trait:

```php
use \Spatie\Permission\Traits\HasRoles;
```

أصبحت لوحة التحكم جاهزة. سجّل الدخول من `/admin/login` بالبريد `admin@admin.com` وكلمة المرور `password`.

![لوحة تحكم TomatoPHP بعد تسجيل الدخول](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3qg11z9vp04z3vc75pgg.png)

> إن حاولت فتح أي صفحة فأُعيد توجيهك إلى `Two-factor Confirmation` ولم تكن تحتاجها الآن، يمكنك إيقافها بحذف `implements MustVerifyEmail` من نموذج `User.php`.

## تثبيت Tomato CRM

يجب أن يدير نظام التجارة الإلكترونية تفاعلات العملاء ومصادقتهم وغيرها من الإجراءات الأساسية، وهذا ما تتولاه tomato-crm.

1. أضف الحزمة وثبّتها:

```bash
composer require tomatophp/tomato-crm
```

```bash
php artisan tomato-crm:install
```

2. انشر النموذج `Accounts.php` داخل تطبيقك لتتمكن من تخصيصه:

```bash
php artisan vendor:publish --tag="tomato-crm-model"
```

3. انشر ملف إعدادات tomato-crm:

```bash
php artisan vendor:publish --tag="tomato-crm-config"
```

4. في ملف الإعدادات `tomato-crm.php` وجّه النموذج إلى النسخة الموجودة في تطبيقك:

```php
"model" => \App\Models\Account::class,
```

### إضافة حارس accounts

يسجّل العملاء دخولهم بشكل منفصل عن المشرفين، لذلك نحتاج إلى حارس جديد. أضفه إلى `config/auth.php` هكذا:

```php
<?php

return [

    /*
    |--------------------------------------------------------------------------
    | Authentication Defaults
    |--------------------------------------------------------------------------
    |
    | This option controls the default authentication "guard" and password
    | reset options for your application. You may change these defaults
    | as required, but they're a perfect start for most applications.
    |
    */

    'defaults' => [
        'guard' => 'web',
        'passwords' => 'users',
    ],

    /*
    |--------------------------------------------------------------------------
    | Authentication Guards
    |--------------------------------------------------------------------------
    |
    | Next, you may define every authentication guard for your application.
    | Of course, a great default configuration has been defined for you
    | here which uses session storage and the Eloquent user provider.
    |
    | All authentication drivers have a user provider. This defines how the
    | users are actually retrieved out of your database or other storage
    | mechanisms used by this application to persist your user's data.
    |
    | Supported: "session"
    |
    */

    'guards' => [
        'web' => [
            'driver' => 'session',
            'provider' => 'users',
        ],
        'accounts' => [
            'driver' => 'session',
            'provider' => 'accounts',
        ]
    ],

    /*
    |--------------------------------------------------------------------------
    | User Providers
    |--------------------------------------------------------------------------
    |
    | All authentication drivers have a user provider. This defines how the
    | users are actually retrieved out of your database or other storage
    | mechanisms used by this application to persist your user's data.
    |
    | If you have multiple user tables or models you may configure multiple
    | sources which represent each model / table. These sources may then
    | be assigned to any extra authentication guards you have defined.
    |
    | Supported: "database", "eloquent"
    |
    */

    'providers' => [
        'users' => [
            'driver' => 'eloquent',
            'model' => App\Models\User::class,
        ],
        'accounts' => [
            'driver' => 'eloquent',
            'model' => App\Models\Account::class,
        ],
    ],

    /*
    |--------------------------------------------------------------------------
    | Resetting Passwords
    |--------------------------------------------------------------------------
    |
    | You may specify multiple password reset configurations if you have more
    | than one user table or model in the application and you want to have
    | separate password reset settings based on the specific user types.
    |
    | The expiry time is the number of minutes that each reset token will be
    | considered valid. This security feature keeps tokens short-lived so
    | they have less time to be guessed. You may change this as needed.
    |
    | The throttle setting is the number of seconds a user must wait before
    | generating more password reset tokens. This prevents the user from
    | quickly generating a very large amount of password reset tokens.
    |
    */

    'passwords' => [
        'users' => [
            'provider' => 'users',
            'table' => 'password_reset_tokens',
            'expire' => 60,
            'throttle' => 60,
        ],
    ],

    /*
    |--------------------------------------------------------------------------
    | Password Confirmation Timeout
    |--------------------------------------------------------------------------
    |
    | Here you may define the amount of seconds before a password confirmation
    | times out and the user is prompted to re-enter their password via the
    | confirmation screen. By default, the timeout lasts for three hours.
    |
    */

    'password_timeout' => 10800,

];
```

ثم امسح ذاكرة الإعدادات المؤقتة وأعد بناء ملفات الواجهة:

```bash
php artisan config:clear
```

```bash
yarn && yarn build
```

أصبح نظام CRM جاهزًا، ويمكنك الاطلاع عليه من لوحة التحكم.

## تثبيت Tomato Wallet

لإدارة المعاملات بين العملاء والبائعين تحتاج إلى معالج مدفوعات متين. تدير tomato-wallet محافظ العملاء وتعالج المدفوعات أيضًا، وتأتي مع العديد من بوابات الدفع المدمجة.

1. أضف الحزمة وثبّتها:

```bash
composer require tomatophp/tomato-wallet
```

```bash
php artisan tomato-wallet:install
```

2. اجعل النموذج `Account.php` يطبّق الواجهة `Wallet` ويستخدم الـ trait المسمى `HasWallet` لتعمل محافظ العملاء. يجب أن يبدو نموذج Account هكذا:

```php
<?php

namespace App\Models;

use Bavix\Wallet\Interfaces\Wallet;
use Bavix\Wallet\Traits\HasWallet;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
use Illuminate\Foundation\Auth\User as Authenticatable;
use Illuminate\Notifications\Notifiable;
use Laravel\Sanctum\HasApiTokens;
use Spatie\Macroable\Macroable;
use Spatie\MediaLibrary\HasMedia;
use Spatie\MediaLibrary\InteractsWithMedia;
use Spatie\Permission\Traits\HasRoles;
use TomatoPHP\TomatoCrm\Models\Group;

/**
 * @property integer $id
 * @property string $name
 * @property string $username
 * @property string $loginBy
 * @property string $address
 * @property string $type
 * @property string $password
 * @property string $otp_code
 * @property string $otp_activated_at
 * @property string $last_login
 * @property string $agent
 * @property string $host
 * @property integer $attempts
 * @property boolean $login
 * @property boolean $activated
 * @property boolean $blocked
 * @property string $deleted_at
 * @property string $created_at
 * @property string $updated_at
 * @property AccountsMeta[] $accountsMetas
 * @property Activity[] $activities
 * @property Comment[] $comments
 * @property Model meta($key, $value)
 * @property Location[] $locations
 */
class Account extends Authenticatable implements HasMedia, Wallet
{
    use InteractsWithMedia;
    use HasApiTokens, HasFactory, Notifiable;
    use HasWallet;

    /**
     * @var array
     */
    protected $fillable = [
        'email',
        'phone',
        'parent_id',
        'type',
        'name',
        'username',
        'loginBy',
        'address',
        'password',
        'otp_code',
        'otp_activated_at',
        'last_login',
        'agent',
        'host',
        'is_login',
        'is_active',
        'deleted_at',
        'created_at',
        'updated_at'
    ];

    protected $casts = [
        'is_login' => 'boolean',
        'is_active' => 'boolean'
    ];
    protected $dates = [
        'deleted_at',
        'created_at',
        'updated_at',
        'otp_activated_at',
        'last_login',
    ];


    protected $appends = [
        'birthday',
        'gender',
        'more'
    ];

    public function getMoreAttribute()
    {
        $metas = $this->accountsMetas()->get()->pluck('value', 'key')->toArray();
        return $metas;
    }

    public function getBirthdayAttribute()
    {
        return $this->meta('birthday') ?: null;
    }

    public function getGenderAttribute()
    {
        return $this->meta('gender') ?: null;
    }

    /**
     * @return \Illuminate\Database\Eloquent\Relations\HasMany
     */
    public function accountsMetas()
    {
        return $this->hasMany('TomatoPHP\TomatoCrm\Models\AccountsMeta');
    }

    /**
     * @param string $key
     * @param string|null $value
     * @return Model|string
     */
    public function meta(string $key, string|null $value=null): Model|string|null
    {
        if($value){
            return $this->accountsMetas()->updateOrCreate(['key' => $key], ['value' => $value]);
        }
        else {
            return $this->accountsMetas()->where('key', $key)->first()?->value;
        }
    }
    /**
     * @return \Illuminate\Database\Eloquent\Relations\HasMany
     */
    public function activities()
    {
        return $this->hasMany('TomatoPHP\TomatoCrm\Models\Activity');
    }

    /**
     * @return \Illuminate\Database\Eloquent\Relations\HasMany
     */
    public function comments()
    {
        return $this->hasMany('TomatoPHP\TomatoCrm\Models\Comment');
    }

    /**
     * @return \Illuminate\Database\Eloquent\Relations\HasMany
     */
    public function locations()
    {
        return $this->hasMany('TomatoPHP\TomatoCrm\Models\Location');
    }

    public function groups(){
        return $this->belongsToMany(Group::class, 'account_groups', 'account_id', 'group_id');
    }
}
```

أصبحت المحفظة تعمل الآن، ويمكنك إجراء أي معاملة ومتابعة رصيد العميل.

## تثبيت Tomato CMS

يحتاج كل متجر إلكتروني إلى واجهة أمامية محسّنة جيدًا. ولتحسين محركات البحث (SEO) وإضافة المحتوى كالمقالات والصفحات نستخدم tomato-cms:

```bash
composer require tomatophp/tomato-cms
```

```bash
php artisan tomato-cms:install
```

## تثبيت Tomato Themes

تُبنى واجهة المتجر نفسها كقالب باستخدام tomato-themes، وهي حزمة تبسّط المشاريع متعددة القوالب وتعتمد على معمارية Hierarchical Model-View-Controller (HMVC).

1. أضف الحزمة وثبّتها، ثم أعد بناء ملفات الواجهة:

```bash
composer require tomatophp/tomato-themes
```

```bash
php artisan tomato-themes:install
```

```bash
yarn && yarn build
```

2. تأكد من وجود مجلد `Themes` في جذر المشروع، وأضف مساحة الأسماء `Themes` إلى قسم autoload في `composer.json`:

```json
    "autoload": {
        "psr-4": {
            "App\\": "app/",
            "Database\\Factories\\": "database/factories/",
            "Database\\Seeders\\": "database/seeders/",
            "Themes\\": "Themes/"
        }
    },
```

3. أعد تحميل الـ autoloader الخاص بـ Composer:

```bash
composer dump-autoload
```

4. أضف ملفات القوالب إلى المصفوفة `content` في `tailwind.config.js` ليلتقط Tailwind الأصناف المستخدمة فيها:

```js
content: [
    ...
    "./Themes/**/*.blade.php",
    "./Themes/**/**/*.blade.php",
],
```

أصبح نظام القوالب جاهزًا: يمكنك رفع قالب أو إنشاء قالب جديد.

## تثبيت Tomato E-Commerce

بعد أن اكتملت الأسس (CRM وإدارة الأدوار والحزم الداعمة) حان وقت جمعها معًا في نظام التجارة الإلكترونية نفسه.

1. أضف الحزمة وثبّتها:

```bash
composer require tomatophp/tomato-ecommerce
```

```bash
php artisan tomato-ecommerce:install
```

تثبّت هذه الحزمة لك tomato-products وtomato-orders وtomato-offers وtomato-branches.

2. ليعمل كل شيء كما ينبغي، ثبّت tomato-branches:

```bash
php artisan tomato-branches:install
```

3. أنشئ `Shipping Vendor` واحدًا على الأقل من `/admin/shipping-vendors`.

4. اذهب إلى `/admin/settings/seo`، وارفع شعاراتك، وغيّر اسم الموقع وبيانات SEO.

## تثبيت قالب التجارة الإلكترونية

لنمنح الآن المتجر ونظام إدارة المحتوى مظهرًا جميلًا. يتميز قالبنا بتصميم بسيط وأنيق يمثّل نقطة انطلاق مثالية للتخصيص.

1. ادخل إلى مجلد `Themes`:

```bash
cd Themes
```

2. انسخ قالبنا:

```bash
git clone git@github.com:tomatophp/Ecommerce.git
```

3. افتح `/themes` في لوحة التحكم، وستجد القالب الجديد في القائمة، وما عليك إلا تفعيله.

> انتبه إلى أن ملف `routes/web.php` الرئيسي يجب ألا يعرّف المسار `/`، لأنه قد يطغى على مسارات القالب.

4. أعد بناء ملفات الواجهة لإصلاح التنسيقات:

```bash
yarn && yarn build
```

افتح صفحتك الرئيسية الآن وستحصل على شيء مثل هذا:

![الصفحة الرئيسية للمتجر كما يعرضها قالب التجارة الإلكترونية من TomatoPHP](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/57tiy1f52bciut39u14q.png)

يمكنك اختيار أي قسم من القائمة المنسدلة في الأعلى وإضافته إلى صفحتك.

### بناء القوائم

أنشئ قوائمك من `/admin/menus` باستخدام هذه المسارات:

- الرئيسية `/`
- من نحن `/about`
- المتجر `/shop`
- المدونة `/blog`
- اتصل بنا `/contact`
- الشروط والأحكام `/terms`
- الخصوصية `/privacy`

يمكنك إنشاء قائمتين، `main` و`footer`. تظهر القائمة الرئيسية في الترويسة تلقائيًا، وقائمة التذييل في التذييل.

### توجيه الزوار إلى صفحة دخول العملاء

عدّل الـ middleware المسمى `Authenticate` ليُعاد توجيه الزوار غير المسجلين إلى مسار دخول الحسابات:

```php
<?php

namespace App\Http\Middleware;

use Illuminate\Auth\Middleware\Authenticate as Middleware;
use Illuminate\Http\Request;

class Authenticate extends Middleware
{
    /**
     * Get the path the user should be redirected to when they are not authenticated.
     */
    protected function redirectTo(Request $request): ?string
    {
        return $request->expectsJson() ? null : route('accounts.login');
    }
}
```

### إضافة traits التجارة الإلكترونية إلى Account

أخيرًا، أضف هذه الـ traits إلى نموذج `Account.php`:

```php
    use \TomatoPHP\TomatoEcommerce\Services\Traits\InteractsWithEcommerce;
    use \TomatoPHP\TomatoNotifications\Traits\InteractWithNotifications;
    use \TomatoPHP\TomatoOrders\Services\Traits\InteractsWithOrders;
```

## الخلاصة

بعد تثبيت نظام التجارة الإلكترونية كاملًا يمكنك البدء في إدارة كتالوجك: أضف المنتجات، وحدّد التصنيفات لتشكيل ما تعرضه، وأنشئ الطلبات. أصبح النظام جاهزًا لمعالجة المعاملات وتشغيل تجارتك على الإنترنت.

شكرًا لاستخدامك إضافات Tomato وإطار عمل TomatoPHP.

- انضم إلى خادم الدعم على [Discord](https://discord.gg/VZc8nBJ3ZU)
- اقرأ [التوثيق](https://docs.tomatophp.com)
- إن أعجبك أي مستودع فامنحه نجمة على [TomatoPHP GitHub](https://github.com/tomatophp)
- ادعمنا عبر [GitHub Sponsors](https://github.com/sponsors/fadymondy)

---

Source: https://fadymondy.com/ar/blog/build-e-commerce-system-in-seconds-with-tomatophp