بناء التطبيق

توسيع ملف الطالب (Student Profile)

يقدر تطبيقك المُضمَّن يضيف محتوى لصفحة ملف الطالب في okta-web من الكود مباشرة — بدون أي إعداد في البوّابة. تكتب مكوّن Livewire داخل مجلد ثابت، تضيف عليه Attribute واحد، والمنصة تكتشفه وتسجّله تلقائياً.

لتطبيقات Embedded فقط. التطبيقات الخارجية تعرض بياناتها عبر HTTP/webhooks لا عبر هذا السجلّ.

هيكلة المجلد (تُشحن جاهزة في الـ boilerplate)

Modules/<App>/app/StudentProfile/
├── Panels/    ← بطاقات كاملة (Panel)
├── Stats/     ← أرقام في الشريط العلوي (Stat)
└── Actions/   ← أزرار في الترويسة (Action)

أي مكوّن داخل هذه المجلدات يحمل الـ Attribute المناسب يُكتشف ويُسجَّل آلياً عند الإقلاع — لا كود تسجيل تكتبه بنفسك.

التعريف: Attribute على الكلاس

namespace Modules\MyApp\app\StudentProfile\Panels;

use App\Support\StudentProfile\Attributes\StudentPanel;
use App\Support\StudentProfile\StudentProfileZone;
use Livewire\Component;

#[StudentPanel(
    title: 'ملخّص الحضور',
    permission: 'my_app.records.view',
    order: 50,
    zone: StudentProfileZone::Main,
)]
class AttendanceSummary extends Component
{
    public string $studentHashid;   // الوحيد المُمرَّر — لا id رقمي

    public function render()
    {
        return view('my-app::student-profile.attendance-summary');
    }
}

• key و component يُشتقّان تلقائياً من الكلاس (لا تكتبهما).
• يكفي title/label + permission؛ الباقي اختياري.

قواعد إلزامية

• استخدم studentHashid فقط — لا تمرّر id رقمياً أبداً.
• كل مساهمة لها permission بصيغة <feature>.<resource>.<action>.
• الآلية Embedded فقط.

الأنواع الأربعة (معاملات الـ Attribute)

1) #[StudentPanel] — بطاقة كاملة

2) #[StudentStat] — رقم في الشريط العلوي

المكوّن نفسه هو الـ widget الحيّ الذي يعرض القيمة.

3) #[StudentAction] — زر في الترويسة

url له الأولوية على event. الحدث يُبَثّ بـ Alpine $dispatch ويلتقطه Livewire عبر #[On] أو wire-elements (openModal).

4) الزون (Zone)

• Main — العمود العريض في وسط الصفحة.
• Sidebar — العمود الجانبي.

الكروم الموحّد للبلوكات (<x-profile-block> / <x-profile-stat>)

صفحة ملف الطالب لوحة بلوكات موحّدة: كل بطاقة تُعرض داخل كروم تملكه المنصة يُظهر مصدرها (تطبيقك) ولونه المميّز وحالة المزامنة وآخر تحديث ورابط «فتح في التطبيق». لتندمج بطاقتك بصرياً مع بقية اللوحة، لفّ محتوى الـ Panel بـ <x-profile-block> (بدل <x-card>):

{{-- my-app::student-profile.attendance-summary --}}
<x-profile-block
    :title="__('my-app::profile.attendance')"
    :source="\App\Support\StudentProfile\BlockSource::resolve('my-app')"
    status="live"                    {{-- live | syncing | offline | error --}}
    :last-synced-at="$syncedAt"
    :open-in-app-href="route('store.show', 'my-app')"
    :open-in-app-label="__('my-app::profile.open')">

    {{-- محتواك: مخطط/جدول/قائمة — بيانات الـ tenant من App\Services\PartnerApi\* فقط --}}

    <x-slot:actions>…</x-slot:actions>   {{-- اختياري: قائمة ⋮ --}}
</x-profile-block>

• BlockSource::resolve('<module-slug>') يعطيك هوية المصدر (اسم/لون/أيقونة) بشكل ثابت — لا تخترع لوناً لكل بطاقة. (أو مرّر source-label/accent/icon مباشرة.)
• الحالة ديناميكية: مرّر status وlast-synced-at وقت العرض حسب حالة مزامنتك الفعلية. status="offline" يعرض حالة «غير متصل» — استعمل <x-slot:offline> لمحتوى بديل (دعوة ربط).
• بطاقات الإحصاء (#[StudentStat]) تستخدم <x-profile-stat> (:label + :value + :source) لتظهر في شريط الإحصاءات منسوبةً لمصدرها.
• المنصة تملك الكروم؛ أنت تقدّم المحتوى + الحالة فقط. الشريط العلوي «مصادر البيانات» وفلتر المصدر يُشتقّان آلياً من بلوكاتك المسجَّلة (لا إعداد إضافي).

كيف يظهر في البوّابة

بوّابة الشركاء لا تشغّل كود تطبيقك؛ لذا تبويب ملف الطالب فيها للعرض فقط: يعرض المساهمات التي اكتشفها okta-web بعد تثبيت الـ sandbox، ويُشتقّ منها بلوك studentProfile في الـ manifest المنشور. أنت تكتب الكود فقط — والباقي تلقائي.

المكوّن يستقبل studentHashid فقط: <livewire:my-app::student-profile-summary :studentHashid="$studentHashid" />.

عرض الدليل كاملاً في صفحة واحدة · ↧ Markdown خام