توزيع OSDU مسؤول واجهة المستخدم أعلى Azure Data Manager for Energy

مقالة
04/17/2024

يوضح لك هذا الدليل كيفية نشر واجهة مستخدم مسؤول OSDU أعلى مثيل Azure Data Manager for Energy (ADME).

تمكن واجهة مستخدم مسؤول OSDU مسؤولي النظام الأساسي من إدارة قسم بيانات Azure Data Manager for Energy الذي تقوم بتوصيله به. تتضمن مهام الإدارة الاستحقاقات (إدارة المستخدم والمجموعة) والعلامات القانونية والمخططات والبيانات المرجعية وعرض العناصر وتصورها على الخريطة.

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

تثبيت Visual Studio Code مع حاويات Dev. من الممكن نشر واجهة مستخدم مسؤول OSDU من الكمبيوتر المحلي باستخدام Linux أو نظام Windows الفرعي لـ Linux‬ (WSL)، نوصي باستخدام حاوية Dev للقضاء على التعارضات المحتملة لإصدارات الأدوات والبيئات وما إلى ذلك.
Azure Data Manager لمثيل الطاقة.
تسجيل تطبيق معرف Microsoft Entra.
يمكن أن يكون تسجيل التطبيق هذا هو نفسه المستخدم لمثيل Azure Data Manager for Energy.
هام

أذونات واجهة برمجة التطبيقات التالية مطلوبة على تسجيل التطبيق لواجهة مستخدم مسؤول لتعمل بشكل صحيح.
عند تسجيل الدخول لأول مرة إلى واجهة مستخدم مسؤول، فإنه سيطلب الأذونات اللازمة. يمكنك أيضا منح الأذونات المطلوبة مسبقا، راجع وثائق إذن واجهة برمجة التطبيقات لتسجيل التطبيق.

إعداد بيئة

استخدم حاوية التطوير في Visual Studio Code لنشر واجهة مستخدم مسؤول OSDU لإزالة التعارضات من جهازك المحلي.
حدد Remote - Containers | Open لفتح حاوية تطوير واستنساخ مستودع واجهة مستخدم مسؤول OSDU.
اقبل مطالبة الاستنساخ.
عند مطالبتك بقالب تكوين حاوية.
1. حدد Ubuntu.
2. اقبل الإصدار الافتراضي.
3. لا تقم بإضافة أي ميزات إضافية.
بعد بضع دقائق، يتم تشغيل devcontainer.
افتح الوحدة الطرفية.

تثبيت Angular CLI وAzure CLI وnpm وNode Version Manager (NVM).

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash && \
export NVM_DIR="$([ -z "${XDG_CONFIG_HOME-}" ] && printf %s "${HOME}/.nvm" || printf %s "${XDG_CONFIG_HOME}/nvm")"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" && \
nvm install 14.17.3 && \
export NG_CLI_ANALYTICS=false && \ 
npm install -g @angular/cli@13.3.9 && \
curl -sL https://aka.ms/InstallAzureCLIDeb | sudo bash

سجل الدخول إلى Azure CLI عن طريق تنفيذ الأمر على المحطة الطرفية. ينقلك إلى شاشة تسجيل الدخول.
```
az login
```
ينقلك إلى شاشة تسجيل الدخول. أدخل بيانات الاعتماد الخاصة بك وعند النجاح، سترى رسالة نجاح.
تحقق من أنك تستخدم الاشتراك الصحيح.
```
az account show
```
إذا لزم الأمر، استخدم هذه التعليمة البرمجية لتغيير الاشتراك.
```
az account set --subscription <subscription-id>
```

تكوين متغيرات البيئة

أدخل متغيرات البيئة المطلوبة على المحطة الطرفية.

 export ADMINUI_CLIENT_ID="" ## App Registration to be used by OSDU Admin UI, usually the client ID used to provision ADME
 export WEBSITE_NAME="" ## Unique name of the static web app or storage account that will be generated. Storage account name must be between 3 and 24 characters in length and use numbers and lower-case letters only.
 export RESOURCE_GROUP="" ## Name of resource group
 export LOCATION="" ## Azure region to deploy to, i.e. "westeurope"

نشر حساب التخزين

إنشاء مجموعة موارد. تخطي هذه الخطوة إذا كانت مجموعة الموارد موجودة بالفعل.
```
az group create \
    --name $RESOURCE_GROUP \
    --location $LOCATION
```

إنشاء حساب تخزين.

az storage account create \
    --resource-group $RESOURCE_GROUP \
    --location $LOCATION \
    --name $WEBSITE_NAME \
    --sku Standard_LRS \
    --public-network-access Enabled \
    --allow-blob-public-access true

تكوين موقع الويب الثابت.

az storage blob service-properties update \
    --account-name $WEBSITE_NAME \
    --static-website \
    --404-document index.html \
    --index-document index.html

تعيين أذونات حاوية $web للسماح بالوصول المجهول.

az storage container set-permission \
    --name '$web' \
    --account-name $WEBSITE_NAME \
    --public-access blob

أضف عنوان URI لإعادة التوجيه إلى تسجيل التطبيق.

export REDIRECT_URI=$(az storage account show --resource-group $RESOURCE_GROUP --name $WEBSITE_NAME --query "primaryEndpoints.web") && \
echo "Redirect URL: $REDIRECT_URI" && \
echo "Add the redirect URI above to the following App Registration's Single-page Application (SPA) section: https://ms.portal.azure.com/#view/Microsoft_AAD_RegisteredApps/ApplicationMenuBlade/~/Authentication/appId/$ADMINUI_CLIENT_ID/isMSAApp~/false"

إنشاء تطبيق ويب ونشره

انتقل إلى مجلد OSDUApp.
```
cd OSDUApp/
```
ثبّت التبعيات.
```
npm install
```

تعديل المعلمات في ملف التكوين الموجود في /src/config/config.json.

{
    "mapboxKey": "key", // This is optional for the access token from Mapbox.com and used to visualize data on the map feature.
    ...
    "data_partition": "<adme_data_partition>", // ADME Data Partition ID (i.e. opendes)
  "idp": {
     ...
     "tenant_id": "<tenant_id>", // Entra ID tenant ID
     "client_id": "<client_id>", // App Registration ID to use for the admin UI, usually the same as the ADME App Registration ID, i.e. "6ee7e0d6-0641-4b29-a283-541c5d00655a"
     "redirect_uri": "<redirect_uri>", // This is the website URL ($REDIRECT_URI), i.e. "https://contoso.z1.web.core.windows.net"
     "scope": "<client_id>/.default" // Scope of the ADME instance, i.e. "6ee7e0d6-0641-4b29-a283-541c5d00655a/.default"
  },
  "api_endpoints": { // Just replace contoso.energy.azure.com with your ADME_URL after removing https or wwww in all the API endpoints below.
     "entitlement_endpoint": "https://contoso.energy.azure.com/api/", 
     "storage_endpoint": "https://contoso.energy.azure.com/api/",
     "search_endpoint": "https://contoso.energy.azure.com/api/",
     "legal_endpoint": "https://contoso.energy.azure.com/api/",
     "schema_endpoint": "https://contoso.energy.azure.com/api/",
     "osdu_connector_api_endpoint":"osdu_connector", // Optional. API endpoint of the OSDU Connector API*
     "file_endpoint": "https://contoso.energy.azure.com/api/",
     "graphAPI_endpoint": "https://graph.microsoft.com/v1.0/",
     "workflow_endpoint": "https://contoso.energy.azure.com/api/"
  }
  ...
}

إشعار

تم إنشاء OSDU الاتصال or API كواجهة بين المستهلكين وواجهات برمجة تطبيقات OSDU التي تغلف بعض استدعاءات وعناصر سلسلة واجهة برمجة التطبيقات. حاليا، يدير جميع العمليات والإجراءات على كائنات المشروع والسيناريو.

إنشاء واجهة مستخدم الويب.
```
ng build
```

تحميل البنية إلى حساب التخزين.

az storage blob upload-batch \
    --account-name $WEBSITE_NAME \
    --source ./dist/OSDUApp \
    --destination '$web' \
    --overwrite

إحضار عنوان URL لموقع الويب.
```
echo $REDIRECT_URI
```
افتح عنوان URL لموقع الويب في المستعرض وتحقق من أنه يعمل بشكل صحيح ومتصل بمثيل Azure Data Manager الصحيح ل Energy.

الخطوات التالية

بعد نجاح عمل واجهة مستخدم مسؤول، يمكنك:

يمكنك أيضا استيعاب البيانات في Azure Data Manager لمثيل الطاقة:

البرنامج التعليمي حول استيعاب محلل CSV.
البرنامج التعليمي حول استيعاب البيان.

المراجع

للحصول على معلومات حول واجهة مستخدم مسؤول OSDU، راجع OSDU GitLab.
للحصول على أساليب النشر الأخرى (Terraform أو البنية الأساسية لبرنامج ربط العمليات التجارية ل Azure DevOps CI/CD)، راجع OSDU مسؤول UI DevOps.

Share via