التشغيل السريع: Dice Roller

في هذا التشغيل السريع، سنستعرض عملية إنشاء تطبيق بكرة النرد الذي يستخدم خدمة Azure Fluid Relay. يتم تقسيم التشغيل السريع إلى قسمين. في الجزء الأول، سنقوم بإنشاء التطبيق نفسه وتشغيله مقابل خادم Fluid محلي. في الجزء الثاني، سنقوم بإعادة تكوين التطبيق لتشغيله مقابل خدمة Azure Fluid Relay بدلاً من خادم dev المحلي.

نموذج التعليمات البرمجية المستخدمة في هذا التشغيل السريه متوفر هنا.

إعداد بيئة التطوير

للمتابعة مع هذا التشغيل السريع، ستحتاج إلى حساب Azure وتوفير Azure Fluid Relay. إذا لم يكن لديك حساب، يمكنك تجربة حساب Azure مجاناً.

ستحتاج أيضاً إلى تثبيت البرنامج التالي على جهاز الكمبيوتر الخاص بك.

• محرر تعليمة برمجية -- نوصي بـ Visual Studio Code.
• بوابه
• Node.js الإصدار 12.17 أو أعلى

الشروع في العمل محلياً

أولاً، يجب عليك تنزيل تطبيق العينة من GitHub. افتح نافذة أوامر جديدة وانتقل إلى المجلد حيث تريد تنزيل التعليمات البرمجية واستخدام Git لاستنساخ مستودع FluidHelloWorld وتحقق من main-azure الفرع. ستقوم عملية النسخ بإنشاء مجلد فرعي بالاسم FluidHelloWorld مع ملفات المشروع فيه.

git clone -b main-azure https://github.com/microsoft/FluidHelloWorld.git

تنقل إلى المجلد الذي تم إنشاؤه حديثاً، ثم قم بتثبيت التبعيات، وابدأ التطبيق.

cd FluidHelloWorld
npm install
...
npm start

عندما تقوم بتشغيل الأمر npm start، سيحدث أمران. أولاً، سيتم تشغيل خادم Fluid في عملية محلية. هذا الخادم مخصص للتطوير فقط. ستقوم بالترقية إلى خادم إنتاج مستضاف في Azure لاحقاً. ثانياً، سيتم فتح علامة تبويب مستعرض جديدة لصفحة تحتوي على مثيل جديد لتطبيق dice roller. يمكنك فتح علامات تبويب جديدة باستخدام نفس عنوان URL لإنشاء مثيلات إضافية لتطبيق dice roller. يتم تكوين كل مثيل من التطبيق افتراضياً لاستخدام خدمة Fluid المحلية. انقر فوق الزر إظهار في أي مثيل من التطبيق، ولاحظ أن حالة النرد تتغير في كل عميل.

الترقية إلى Azure Fluid Relay

لتشغيل خدمة Azure Fluid Relay، ستحتاج إلى تحديث تكوين تطبيقك للاتصال بخدمة Azure الخاصة بك بدلاً من الخادم المحلي الخاص بك.

تكوين عميل Azure وإنشائه

تثبيت @fluidframework/azure-client و"حزم @fluidframework/test-client-utils واستيراد عميل Azure وConsententTokenProvider.

import { InsecureTokenProvider } from "@fluidframework/test-client-utils";
import { AzureClient } from "@fluidframework/azure-client";

لتكوين عميل Azure، استبدل كائن الاتصال serviceConfig المحلي في app.js بقيم تكوين خدمة Azure Fluid Relay. يمكن العثور على هذه القيم في قسم "مفتاح الوصول" من مورد Fluid Relay في مدخل Azure. يجب أن يبدو الكائن الخاص بك serviceConfig على هذا النحو مع استبدال القيم. (للحصول على معلومات حول كيفية العثور على هذه القيم، راجع كيفية: توفير خدمة Azure Fluid Relay.) لاحظ أن id الحقول و name عشوائية.

const user = { id: "userId", name: "userName" };

const serviceConfig = {
    connection: {
        tenantId: "MY_TENANT_ID", // REPLACE WITH YOUR TENANT ID
        tokenProvider: new InsecureTokenProvider("" /* REPLACE WITH YOUR PRIMARY KEY */, user),
        endpoint: "https://myServiceEndpointUrl", // REPLACE WITH YOUR SERVICE ENDPOINT
        type: "remote",
    }
};

تحذير

أثناء التطوير، يمكنك استخدام InsecureTokenProvider لإنشاء وتوقيع رموز المصادقة المميزة التي ستقبلها خدمة Azure Fluid Relay. ومع ذلك، كما يوحي الاسم، هذا غير آمن ولا ينبغي استخدامه في بيئات التشغيل. توفر لك عملية إنشاء مورد Azure Fluid Relay مفتاح سري يمكن استخدامه لتوقيع طلبات آمنة. لضمان عدم كشف هذا السر، يجب استبدال هذا بتنفيذ آخر لـ ITokenProvider الذي يجلب الرمز المميز من خدمة خلفية آمنة مقدمة من المطور قبل إصدار الإنتاج.

تم توضيح أحد النهج الآمنة في "كيفية: كتابة TokenProvider باستخدام وظيفة Azure".

إنشاء وتشغيل العميل فقط

الآن بعد أن أشرت إلى تطبيقك لاستخدام Azure بدلاً من خادم محلي، لا تحتاج إلى تشغيل خادم Fluid المحلي مع تطبيق العميل الخاص بك. يمكنك تشغيل العميل دون أيضاً تشغيل الخادم باستخدام هذا الأمر.

npm run start:client

🥳تهانينا🎉 لقد نجحت في اتخاذ الخطوة الأولى نحو إلغاء قفل عالم تعاون Fluid.