مرحبًا بك في دليل Invoice Radar Plugin للمطورين!
سيساعدك هذا الدليل على إنشاء مكونات إضافية مخصصة لجلب الفواتير والإيصالات من منصات مختلفة.
Invoice Radar هي أداة لأتمتة المستندات تساعدك على جلب الفواتير والإيصالات وتنزيلها وتنظيمها من منصات مختلفة.
تعرف على المزيد حول رادار الفاتورة
مقدمة
ابدء
هيكل البرنامج المساعد
كتابة البرنامج المساعد الأول الخاص بك
أنماط مفيدة
مرجع الخطوات
المعرفة الأساسية بـ JSON وHTML وCSS وJavaScript.
محرر نصوص أو IDE (على سبيل المثال، VSCode، Sublime Text).
رادار الفاتورة مثبت على نظام التشغيل macOS أو Windows.
تنزيل وتثبيت رادار الفاتورة :
طلب الوصول إلى رادار الفاتورة
تنزيل البرنامج المساعد الفارغ :
قم بتنزيل البرنامج الإضافي الفارغ على جهازك المحلي.
أعد تسمية الملف إلى your-plugin-name.json
.
وضعه في مجلد من اختيارك.
أضف البرنامج المساعد إلى رادار الفاتورة :
فتح رادار الفاتورة.
انتقل إلى الإعدادات واختر علامة التبويب Available Plugins
.
اختر Choose Plugin Directory
وحدد المجلد الذي قمت بحفظ المكون الإضافي فيه.
يجب أن يظهر المكون الإضافي الخاص بك الآن في قائمة المكونات الإضافية المتاحة.
المكونات الإضافية لـ Invoice Radar مكتوبة بلغة JSON وتتبع بنية محددة. يتكون كل ملحق من الأقسام التالية:
وصف البرنامج المساعد :
البيانات الوصفية : المعلومات الأساسية حول المكون الإضافي، مثل الاسم والوصف وعنوان URL للصفحة الرئيسية.
configSchema : خصائص التكوين التي قد يتطلبها البرنامج المساعد.
خطوات القشط :
checkAuth : خطوات التحقق مما إذا كان المستخدم قد تمت مصادقةه بالفعل.
startAuth : خطوات بدء عملية المصادقة.
getDocuments : خطوات جلب المستندات وتنزيلها.
{ "$schema": "https://raw.githubusercontent.com/invoiceradar/plugins/main/schema.json"، "id": "example"، "name": "مثال للنظام الأساسي"، "description": " وصف مختصر للخدمة."، "الصفحة الرئيسية": "https://example.com"، "checkAuth": [ { "إجراء": "تنقل"، "عنوان url": "https://example.com/dashboard" }, { "إجراء": "checkElementExists"، "محدد": "#logout-button" } ]، "startAuth": [ { "إجراء": "تنقل"، "عنوان url": "https://example.com/login" }, { "action": "waitForElement"، "selector": "#account-summary"، "timeout": 120000 } ]، "الحصول على المستندات": [ { "إجراء": "تنقل"، "عنوان url": "https://example.com/billing" }, { "action": "extractAll"، "selector": ".invoice-row"، "variable": "invoice"، "fields": { "id": { "selector": ".invoice-id" }, "date": { "selector": ".invoice-date" }, "total": { "selector": ".invoice-total" }, "url": { "selector": ".invoice-download"، "attribute": "href" } }، "لكل": [ { "action": "downloadPdf"، "url": "{{invoice.url}}"، "document": "{{invoice}}" } ] } ] }
يمكن العثور على المخطط الكامل هنا.
لنقم بإنشاء مكون إضافي بسيط لجلب الفواتير من خدمة افتراضية.
تعريف البيانات الوصفية :
يتم استخدام هذه المعلومات لتحديد المكوّن الإضافي وعرضه في Invoice Radar. يتم استخدام عنوان URL للصفحة الرئيسية للحصول على الرمز المفضل للخدمة.
لاحظ أن id
يجب أن يكون فريدًا وأحرف صغيرة.
{ "id": "example-service"، "name": "Example Service"، "description": "وصف مختصر للخدمة."، "homepage": "https://example.com"}
تعرف على المزيد حول حقول البيانات التعريفية.
تحديد مخطط التكوين (اختياري):
يحدد مخطط التكوين الحقول المطلوبة لكي يعمل البرنامج الإضافي. في هذا المثال، نحتاج إلى teamID
password
للمصادقة.
سيتم عرض هذه الحقول للمستخدم عند إضافة البرنامج المساعد في Invoice Radar.
"configSchema": { "teamID": { "type": "string"، "title": "معرف الفريق"، "description": "معرف فريقك أو حسابك لجلب الفواتير."، "مطلوب": صحيح } }
تعرف على المزيد حول حقول مخطط التكوين.
التحقق من المصادقة :
يحتوي checkAuth
على خطوات للتحقق من مصادقة المستخدم. يمكن القيام بذلك عن طريق التحقق من عنوان URL أو وجود العنصر. الخطوة الأخيرة داخل checkAuth
يجب أن تكون خطوة تحقق.
يتم تنفيذ هذه الخطوات عند بدء التشغيل. إذا تمت مصادقة المستخدم بالفعل، فسيتخطى المكون الإضافي عملية المصادقة وينتقل مباشرة إلى جلب المستندات.
"التحقق": [ { "إجراء": "تنقل"، "عنوان url": "https://example.com/dashboard" }, { "إجراء": "checkElementExists"، "محدد": "#logout-button" } ]
بدء المصادقة :
يحتوي startAuth
على خطوات لبدء عملية المصادقة. يمكن أن يتضمن ذلك الانتقال إلى صفحة تسجيل الدخول وانتظار مؤشر تسجيل الدخول الناجح.
سيكون المتصفح مرئيًا أثناء عملية المصادقة، مما يسمح للمستخدم بالتفاعل مع نموذج تسجيل الدخول.
"بدء المصادقة": [ { "إجراء": "تنقل"، "عنوان url": "https://example.com/login" }, { "action": "waitForElement"، "selector": "#account-summary"، "timeout": 120000 } ]
كشط المستندات :
يحتوي getDocuments
على خطوات لجلب المستندات وتنزيلها. يمكن أن يتضمن ذلك الانتقال إلى صفحة الفوترة واستخراج تفاصيل الفاتورة وتنزيل ملفات PDF.
"الحصول على المستندات": [ { "إجراء": "تنقل"، "عنوان url": "https://example.com/billing" }, { "action": "extractAll"، "selector": ".invoice-row"، "variable": "invoice"، "fields": { "id": { "selector": ".invoice-id" }, "date": { "selector": ".invoice-date" }, "total": { "selector": ".invoice-total" }, "url": { "selector": ".invoice-download"، "attribute": "href" } }، "لكل": [ { "action": "downloadPdf"، "url": "{{invoice.url}}"، "document": { "type": "invoice"، "id": "{{invoice.id}}"، "التاريخ": "{{invoice.date}}"، "الإجمالي": "{{invoice.total}}" } } ] } ]
لقد انتهيت! :
احفظ الملف وأضفه إلى Invoice Radar. يمكنك الآن تشغيل البرنامج المساعد لجلب الفواتير من الخدمة.
checkAuth
)تقوم العديد من الخدمات بإعادة التوجيه تلقائيًا إلى صفحة تسجيل الدخول إذا لم تتم مصادقة المستخدم. يمكننا استخدام هذا السلوك للتحقق من مصادقة المستخدم.
{ "إجراء": "تنقل"، "عنوان url": "https://example.com/login"}، { "إجراء": "checkURL"، "عنوان url": "https://example.com/account"، }
اعتمادًا على الخدمة، قد يعيدون توجيهك من لوحة التحكم إلى صفحة تسجيل الدخول إذا لم تتم مصادقتك. في هذه الحالة، يمكنك استخدام خطوة checkURL
للتحقق مما إذا كان عنوان URL لا يزال مطابقًا بعد زيارة لوحة المعلومات.
{ "إجراء": "تنقل"، "عنوان url": "https://example.com/dashboard"}، { "إجراء": "checkURL"، "عنوان url": "https://example.com/dashboard"، }
لاحظ أنه يمكنك استخدام الأنماط الشاملة لمطابقة عناوين URL الديناميكية: https://example.com/dashboard/**
.
يمكنك استخدام محدد فريد للحالة التي تمت المصادقة عليها للتحقق مما إذا كان المستخدم قد تمت المصادقة عليه، على سبيل المثال، زر تسجيل الخروج أو رابط ملف التعريف.
{ "إجراء": "تنقل"، "عنوان url": "https://example.com/home"}، { "action": "waitForElement"، "selector": "#logout-button"}
في بعض الحالات، لم يتم تحميل موقع الويب بالكامل عند تنفيذ خطوة checkElementExists
. لتجنب ذلك، يمكنك استخدام خاصية waitForNetworkIdle
للانتظار حتى يتم تحميل الصفحة بالكامل.
{ "إجراء": "تنقل"، "عنوان url": "https://example.com/home"، "waitForNetworkIdle": صحيح}، { "action": "checkElementExists"، "selector": "#logout-button"}
startAuth
)تبدأ معظم عمليات المصادقة بالانتقال إلى صفحة تسجيل الدخول وانتظار ظهور عنصر معين بعد تسجيل الدخول الناجح.
تذكر أن المتصفح سيكون مرئيًا أثناء عملية المصادقة، مما يسمح للمستخدم بالتفاعل مع نموذج تسجيل الدخول. يمكن أن يكون تدفق المصادقة نفسه تلقائياً، ولكن ليس مطلوبًا.
{ "إجراء": "تنقل"، "عنوان url": "https://example.com/login"}، { "action": "waitForElement"، "selector": "#logout-button"، "timeout": 120000}
لمنح المستخدم وقتًا كافيًا لتسجيل الدخول، يوصى بتوفير مهلة طويلة لخطوة الانتظار، مع الإعداد الافتراضي 120 ثانية.
يقدم هذا القسم نظرة عامة على الخطوات المتاحة التي يمكن استخدامها لإنشاء مكونات إضافية لـ Invoice Radar. تمثل كل خطوة إجراءً محددًا يمكن تنفيذه أثناء عملية الأتمتة.
خطوات التنقل
التنقل ( navigate
)
انتظر عنوان URL ( waitForURL
)
انتظر العنصر ( waitForElement
)
انتظر التنقل ( waitForNavigation
)
انتظر حتى تكون الشبكة خاملة ( waitForNetworkIdle
)
خطوات التفاعل
انقر فوق العنصر ( click
)
اكتب النص ( type
)
حدد القائمة المنسدلة ( dropdownSelect
)
تشغيل جافا سكريبت ( runJs
)
خطوات التحقق
التحقق من وجود العنصر ( checkElementExists
)
التحقق من عنوان URL ( checkURL
)
تشغيل جافا سكريبت ( runJs
)
خطوات استخراج البيانات
استخرج ( extract
)
استخراج الكل ( extractAll
)
خطوات استرجاع المستندات
تنزيل PDF ( downloadPdf
)
انتظر تنزيل PDF ( waitForPdfDownload
)
طباعة الصفحة بصيغة PDF ( printPdf
)
تنزيل Base64 PDF ( downloadBase64Pdf
)
خطوات المنطق الشرطي
إذا ( if
)
خطوات متنوعة
النوم ( sleep
)
مقتطفات
احصل على الفاتورة من Stripe URL ( getInvoiceFromStripeUrl
)
احصل على الفواتير من بوابة عملاء Stripe ( getInvoicesFromStripeBillingPortal
)
navigate
)ينتقل إلى عنوان URL المحدد وينتظر تحميل الصفحة. افتراضيًا، ينتظر فقط التحميل الأولي للصفحة، وليس أي طلبات AJAX لاحقة.
{ "إجراء": "تنقل"، "عنوان url": "https://example.com"}
يمكنك ضبط waitForNetworkIdle
على true
للتأكد من تحميل الصفحة بالكامل قبل المتابعة.
{ "إجراء": "تنقل"، "عنوان url": "https://example.com/dashboard"، "waitForNetworkIdle": صحيح}
من الجيد أن تعرف :
عناوين URL النسبية مدعومة وسيتم حلها بناءً على الصفحة الحالية.
سينتظر إجراء التنقل فقط التحميل الأولي للصفحة، وليس لأي طلبات AJAX لاحقة.
waitForURL
)ينتظر حتى يتطابق عنوان URL الحالي مع عنوان URL المحدد، بشكل اختياري مع انتهاء المهلة. يدعم أحرف البدل.
{ "إجراء": "waitForURL"، "url": "https://example.com/profile/**"، "مهلة": 3000}
waitForElement
)ينتظر ظهور المحدد المحدد على الصفحة، اختياريًا مع انتهاء المهلة.
{ "إجراء": "waitForElement"، "selector": "#example"، "timeout": 3000}
waitForNavigation
)ينتظر حتى يحدث التنقل في الصفحة. لن تنتظر هذه الخطوة حتى يتم تحميل الصفحة بالكامل. استخدم خطوة waitForNetworkIdle لهذا الغرض. المهلة اختيارية وتكون افتراضيًا 10 ثوانٍ
{ "إجراء": "waitForNavigation"، "مهلة": 10000}
waitForNetworkIdle
)ينتظر حتى تصبح الشبكة خاملة. يعد هذا مفيدًا إذا كنت تريد التأكد من انتهاء الصفحة من تحميل جميع الموارد. تكتمل الخطوات عندما لا يكون هناك المزيد من طلبات الشبكة لمدة 500 مللي ثانية. المهلة اختيارية وتكون افتراضيًا 15 ثانية.
تحتوي خطوة navigate
على خيار waitForNetworkIdle
الذي يمكن ضبطه على true
للحصول على نفس السلوك.
{ "الإجراء": "waitForNetworkIdle"، "المهلة": 10000}
click
)ينقر فوق العنصر المحدد بواسطة المحدد المحدد في الصفحة.
{ "إجراء": "انقر"، "محدد": "#button"}
type
)يكتب النص المحدد في العنصر المحدد بواسطة المحدد المحدد في الصفحة.
{ "إجراء": "نوع"، "محدد": "#input"، "قيمة": "مرحبًا بالعالم"}
dropdownSelect
) لتحديد القيمة المحددة من القائمة المنسدلة المحددة بواسطة المحدد المحدد في الصفحة. يحدث التحديد بناءً على سمة value
للخيار.
{ "action": "dropdownSelect"، "selector": "#dropdown"، "value": "Option 1"}
runJs
)يقوم بتشغيل JavaScript المحدد في سياق الصفحة. وإذا عاد الوعد فسوف ينتظر.
إذا كنت تريد استخدام نتيجة البرنامج النصي في الخطوات اللاحقة، فاستخدم خطوة الاستخراج بدلاً من ذلك.
{ "action": "runJs"، "script": "document.querySelector('#example').click();"}
يتم استخدام هذه الخطوات داخل checkAuth
للتحقق من مصادقة المستخدم.
checkElementExists
)التحقق من وجود المحدد المحدد في الصفحة. تستخدم عادةً لعمليات التحقق من المصادقة.
{ "إجراء": "checkElementExists"، "selector": "#example"}
checkURL
) يتحقق مما إذا كان عنوان URL الحالي يطابق عنوان URL المحدد. يدعم أنماط أحرف البدل مثل https://example.com/dashboard/**
.
{ "إجراء": "checkURL"، "عنوان url": "https://example.com"}
runJs
) يمكن استخدام خطوة runJs
كخطوة تحقق أيضًا. من خلال تشغيل برنامج نصي يُرجع قيمة صحيحة أو خاطئة، يمكنك التحقق من مصادقة المستخدم.
{ "action": "runJs"، "script": "document.cookie.includes('authToken');"}
تُستخدم هذه الخطوات لتحميل البيانات من الصفحة، مثل قائمة عناصر أو قيمة واحدة، واستخدامها في الخطوات اللاحقة.
extract
)يستخرج قطعة واحدة من البيانات من الصفحة ويخزنها في متغير.
باستخدام حقول CSS:
{ "إجراء": "استخراج"، "متغير": "حساب"، "حقول": { "id": "#team-id"، "name": "#team-name"، "url": { " Selector": "#team-link", "attribute": "href" } } }
في هذا المثال، يتم استخدام account
كاسم متغير، ويتم استخراج الحقول id
و name
و url
باستخدام محددات CSS. ويمكن استخدامها في الخطوات اللاحقة باستخدام العناصر النائبة {{account.id}}
{{account.name}}
و {{account.url}}
.
باستخدام جافا سكريبت:
{ "action": "extract"، "variable": "token"، "script": "localStorage.getItem('authToken')"}
يقوم هذا المثال بإنشاء متغير token
يتم استخراجه باستخدام JavaScript. يمكن الوصول إلى القيمة باستخدام العنصر النائب {{token}}
. من الممكن أيضًا إرجاع كائن.
extractAll
)يستخرج قائمة البيانات من الصفحة، ويقوم بتشغيل الخطوات المحددة لكل عنصر. يُستخدم هذا عادةً لتكرار قائمة الفواتير وتنزيلها.
لكل عنصر يطابق selector
، يتم استخراج الحقول وتخزينها في variable
المتوفر في خطوات forEach
.
من الجيد أن تعرف :
يتم تحديد نطاق كل محدد داخل كائن fields
تلقائيًا إلى العنصر المطابق.
الحقل variable
اختياري. إذا لم يتم توفيرها، فسيتم تخزين البيانات المستخرجة في المتغير الافتراضي item
.
يمكن الوصول إلى الفهرس الحالي باستخدام العنصر النائب {{index}}
. يبدأ من 0 ويزيد لكل عنصر.
مع حقول CSS:
{ "action": "extractAll"، "selector": ".invoice-list .invoice-item"، "variable": "invoice"، "fields": { "id": "td.invoice-id"، " date": "td.invoice-date"، "total": "td.invoice-total"، "url": { "selector": "a.invoice-link"، "attribute": "href" } }، "لكل": [ { "إجراء": "تنقل"، "عنوان url": "{{invoice.url}}" }, { "إجراء": "downloadPdf"، "فاتورة": "{{invoice}}" } ] }
مع جافا سكريبت:
عند استخدام JavaScript، يجب أن تكون النتيجة مصفوفة من الكائنات أو القيم. وإذا كانت النتيجة وعداً فسيتم انتظارها.
{ "action": "extractAll"، "script": "Array.from(document.querySelectorAll('#year-selector option')).map(option => option.value);"، "variable": "year "، "لكل": [ { "action": "dropdownSelect"، "selector": "#year-selector"، "value": "{{year}}" } ] }
ترقيم الصفحات
الدعم التجريبي، لم يتم توثيقه بعد.
تُستخدم هذه الخطوات لتنزيل المستندات ومعالجتها في Invoice Radar. تتطلب كافة الخطوات تمرير كائن document
، والتي تحتوي على بيانات التعريف الخاصة بالمستند.
تحتوي وسيطة document
على الحقول التالية:
مطلوب
id
: معرف المستند الفريد
على سبيل المثال INV-123
أو 123456
date
: تاريخ الفاتورة كسلسلة
على سبيل المثال 2022-01-01
أو 01/01/2022
أو January 1, 2022
مُستَحسَن
total
: المبلغ الإجمالي للفاتورة بما في ذلك العملة.
على سبيل المثال $100.00
أو €100.00
أو 100 EUR
أو 100,00€
سيحاول المحلل اللغوي المدمج استخراج المبلغ والعملة من السلسلة.
خياري
type
: نوع المستند (اختياري. الإعدادات الافتراضية هي auto
)
يمكن ضبطها على auto
أو invoice
أو receipt
أو refund
أو other
.
metadata
: بيانات التعريف الإضافية للمستند (اختياري)
على سبيل المثال { "orderNumber": "12345" }
يمكنك إما تمرير كل حقل على حدة أو تمرير الكائن بأكمله إذا كان يحتوي على كافة الحقول المطلوبة.
على سبيل المثال باستخدام حقول منفصلة:
"document": { "id": "{{item.invoiceId}}"، "date": "{{item.date}}"، "total": "{{item.amount}} {{item.currency" }}", "نوع": "فاتورة"}
على سبيل المثال، إذا كان الكائن يحتوي على جميع الحقول المطلوبة، فيمكنك تمريره مباشرة:
"مستند": "{{عنصر}}"
downloadPdf
)يقوم بتنزيل ملف PDF من عنوان URL المحدد.
{ "action": "downloadPdf"، "url": "https://example.com/invoice.pdf"، "document": { "id": "{{item.invoiceId}}"، "date": "{{item.date}}"، "الإجمالي": "{{item.total}}" } }
waitForPdfDownload
)ينتظر تنزيل PDF. المهلة الافتراضية هي 15 ثانية.
{ "action": "waitForPdfDownload"، "timeout": 10000، "document": { "id": "{{item.invoiceId}}"، "date": "{{item.date}}"، "total ": "{{item.total}}" } }
printPdf
)يطبع الصفحة الحالية إلى ملف PDF.
{ "action": "printPdf"، "document": { "id": "{{item.invoiceId}}"، "date": "{{item.date}}"، "total": "{{item" .المجموع}}" } }
downloadBase64Pdf
)يقوم بتنزيل ملف PDF من سلسلة مشفرة base64.
{ "action": "downloadBase64Pdf"، "base64": "{{item.base64String}}"، "document": { "id": "{{item.invoiceId}}"، "date": "{{item" .date}}", "total": "{{item.total}}" } }
if
) يقوم بتنفيذ الخطوات المحددة إذا كان الشرط صحيحا. إذا كان الشرط غير صحيح، يتم تنفيذ الخطوات else
.
{ "action": "if"، "script": "'{{invoice.url}}'.includes('pdf')"، "ثم": [ { "إجراء": "انقر"، "محدد": "#مثال" } ]، "آخر": [ { "إجراء": "تنقل"، "عنوان url": "https://example.com/fallback" } ] }
sleep
)ينتظر مقدار الوقت المحدد بالمللي ثانية. لا ينصح بهذا بشكل عام. في معظم الحالات، من الأفضل استخدام خطوات waitForElement، أو waitForURL، أو waitForNetworkIdle.
{ "الإجراء": "النوم"، "المدة": 1000}
المقتطفات عبارة عن مجموعات معدة مسبقًا من الخطوات التي تعمل على تبسيط المهام الشائعة. تظهر الخطوات الخاصة بمقتطف محدد داخل أدوات المطور
في الوقت الحالي، لا يمكن إنشاء مقتطفات مخصصة. إذا كانت لديك مهمة مشتركة تعتقد أنها ستكون مفيدة كمقتطف، فيرجى إنشاء مشكلة على GitHub.
getInvoiceFromStripeUrl
)يستخرج فاتورة من عنوان URL لفاتورة Stripe.
{ "action": "runSnippet"، "snippet": "getInvoiceFromStripeUrl"، "args": { "url": "https://invoice.stripe.com/i/inv_123" } }
getInvoicesFromStripeBillingPortal
)يستخرج الفواتير المتاحة من بوابة الفوترة Stripe.
{ "action": "runSnippet"، "snippet": "getInvoicesFromStripeBillingPortal"، "args": { "url": "https://stripe-portal.example.com/billing" } }
في بعض الأحيان، قد تحتاج إلى تشغيل طلب جلب داخل خطوة لجلب البيانات من واجهة برمجة التطبيقات. للقيام بذلك، يمكنك استخدام الإجراء extractAll
.
{ "action": "extractAll"، "variable": "invoice"، "script": "fetch('https://example.com/api/invoices').then(res => res.json()) " "لكل": [ { "action": "downloadPdf"، "url": "{{invoice.url}}"، "document": { "id": "{{invoice.id}}"، "date": "{{invoice" .date}}", "total": "{{invoice.total}}" } } ] }
سيؤدي هذا إلى تشغيل طلب الجلب وإرجاع النتيجة ككائن JavaScript.
في بعض السيناريوهات، قد تحتاج إلى تنفيذ خطوة داخل عنصر . للقيام بذلك، يمكنك استخدام سمة
iframe
في الخطوة.
{ "action": "click"، "selector": "#button-inside-iframe"، "iframe": true}،
من خلال تعيين iframe
على true
، سيبحث Invoice Radar عن عنصر الأول في الصفحة ويقوم بتنفيذ الخطوة بداخله.
يمكنك أيضًا استخدام سلسلة موجودة داخل سمة src
الخاصة بـ iframe لاستهداف إطار iframe محدد.
{ "action": "انقر"، "selector": "#button-inside-iframe"، "iframe": "iframe.example.com"}،