تهيئة مشروع بناء تطبيق لإنشاء فواتير بصيغة PDF باستخدام React وRefine

سنبني في هذا الدليل تطبيقًا لإنشاء الفواتير بصيغة PDF بالاعتماد على مكتبة React، وهي مكتبة لبناء واجهات مستخدم تفاعلية في الويب و إطار عمل Refine الذي يعتمد على رياكت React لتسهيل بناء تطبيقات CRUD وتحسين تجربة المطور في إدارة البيانات والتفاعل مع الواجهات الأمامية، ثم ننشره على منصة DigitalOcean’s App Platform.

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

اقتباس

ملاحظة: يمكنك الحصول على الشيفرة المصدرية الكاملة للتطبيق الذي سنبنيه في هذا الدليل من هذا المستودع على GitHub.

سنستخدم التقنيات التالية بجانب Refine:

• نظام إدارة المحتوى Strapi القائم على التخزين السحابي Cloud لتخزين البيانات. ولجلب البيانات منه، سنستخدم موفر البيانات data-provider المدمج في Refine. يمكننا الوصول إلى API الخاص بـ Strapi عبر api.strapi-invoice
• مكتبة واجهة المستخدم Ant Design

بعد بناء التطبيق، سننشره باستخدام منصة DigitalOcean’s App Platform، التي تُبسّط وتسرّع عملية إعداد وإطلاق وتوسيع التطبيقات والمواقع الثابتة. يمكن نشر الكود عن طريق رابط مستودع GitHub، وستتولى المنصة App Platform إدارة البنية التحتية وبيئات عمل التطبيق والاعتمادات.

أما المتطلبات المُسبقة للعمل، فتكون كالآتي:

• بيئة تطوير محلية لـ Node.js
• تحتاج إلى معرفة أساسية بـ React وRefine وJSX
• حساب GitHub لاستضافة الكود البرمجي
• حساب DigitalOcean

ما هو Refine؟

إطار عمل Refine هو إطار عمل مفتوح المصدر يعتمد على React لتطوير التطبيقات التي تعتمد على إدارة البيانات الكثيرة مثل الأدوات الداخلية، لوحات التحكم Dashboards، ولوحات الإدارة Admin Panels، وجميع أنواع تطبيقات CRUD. يوفر مجموعة من خطافات Hooks والمكونات التي تساهم في تقليل وقت التطوير وتحسين تجربة المطور.

ملاحظة: CRUD هي اختصار للعمليات التي تتم على البيانات، وهي اختصار للحرف الأول من كلمات إنشاء Create وقراءة Read وتعديل Update وحذف Delete.

صُمم Refine لبناء تطبيقات الأعمال التجارية لبعضها B2B جاهزة للإنتاج؛ فبدلًا من البدء من الصفر، يوفر إطار العمل بعض الأدوات الأساسية التي تساعد في إدارة البيانات والحالة والاستيثاق Authentication والأذونات.

يتميز Refine باعتماده على بنية بدون رأس Headless، مما يسمح باستخدام أي مكتبة لتصميم واجهة مستخدم أو تصميم تنسيقات انسيابية CSS خاص. ويدعم مكتبات واجهة المستخدم مفتوحة المصدر مثل Ant Design وMaterial UI و Mantine و Chakra UI. لذا بهذه الطريقة، يمكننا التركيز على بناء الأجزاء المهمة من التطبيق دون الانشغال بالتفاصيل التقنية.

إنشاء تطبيق Refine جديد

ستستخدم الأمر البرمجي التالي لإنشاء المشروع بتفاعلية أكبر:

npm create refine-app@latest

اختر الخيارات التالية عندما تُطلب:

✔ Choose a project template · Vite
✔ What would you like to name your project?: · refine-invoicer
✔ Choose your backend service to connect: · Strapi v4
✔ Do you want to use a UI Framework?: · Ant Design
✔ Do you want to add example pages?: · No
✔ Choose a package manager: · npm

بعد اكتمال الإنشاء، ننتقل إلى مجلد المشروع ونبدأ التطبيق باستخدام:

npm run dev

نفتح الرابط http://localhost:5173 في المتصفح لرؤية التطبيق.

تثبيت المكتبات الخارجية

سنحتاج لتثبيت بعض حزم npm التي سنستخدمها في التطبيق:

• ‏react-input-mask‏‮: لتنسيق حقول الإدخال، ستستخدم هذه المكتبة لتنسيق حقل رقم الهاتف
• ؜antd-style: حل css-in-js خاص بـ Ant Design. ستستخدم هذه المكتبة لتخصيص مكونات Ant Design
• ؜vite-tsconfig-paths: ملحق لـ Vite يسمح بحل الواردات باستخدام مسار JSX

للقيام بذلك ننفذ الأمر التالي:

npm install react-input-mask antd-style

ثم نثبت الأنواع التالية:

npm install @types/react-input-mask vite-tsconfig-paths --save-dev

بعد تثبيت الحِزم، سنحتاج إلى تحديث ملف tsconfig.json لاستخدام مسار JSX. هذا يجعل استيراد الملفات أسهل للقراءة و الصيانة، فبدلًا من كتابة الأمر التالي:

"import { Log } from "../../types/Log

سنكتب ما يلي: 

"import { Log } from "@/types/Log

لتحقيق ذلك، نضيف الكود التالي إلى ملف tsconfig.json:

{
  "compilerOptions": {
    "target": "ESNext",
    "useDefineForClassFields": true,
    "lib": ["DOM", "DOM.Iterable", "ESNext"],
    "allowJs": false,
    "skipLibCheck": true,
    "esModuleInterop": false,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "ESNext",
    "moduleResolution": "bundler",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",
    "baseUrl": "./src",
    "paths": {
      "@/*": ["./*"]
    }
  },
  "include": ["src", "vite.config.ts"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

سنحتاج أيضًا إلى تحديث ملف vite.config.ts لاستخدام ملحق vite-tsconfig-paths، والذي يسمح لـ Vite بحل الواردات باستخدام مسار JSX كالتالي:

import react from "@vitejs/plugin-react";
import { defineConfig } from "vite";
import tsconfigPaths from "vite-tsconfig-paths";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [tsconfigPaths({ root: __dirname }), react()],
  build: {
    rollupOptions: {
      output: {
        manualChunks: {
          antd: ["antd"],
        },
      },
    },
  },
});

إضافة المكونات الأساسية والدوال المساعدة

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

التطبيق فى مستودع GitHub شامل و يعمل جيدًا، لذا سيساعد إعداد هذه الملفات وتجهيزها على اتباع خطوات الدليل وعدم الإطالة فيه.

أولًا، نحذف الملفات والمجلدات التالية من المشروع الذي أنشأته:

• مجلد src/components
• مجلد src/contexts
• ملف src/authProvider.ts
• ملف src/constants.ts

ثم ننسخ الملفات والمجلدات التالية إلى نفس الموقع في المشروع:

• ؜components
• ؜providers
• ؜utils
• ؜types
• ؜styles

بنية المشروع بعد التعديل

بعد هذه الخطوات، يجب أن تكون بُنية المشروع كما يلي:

└── 📁src
    └── 📁components
    └── 📁providers
    └── 📁styles
    └── 📁types
    └── 📁utils
    └── App.tsx
    └── index.tsx
    └── vite-env.d.ts

بعد هذه الخطوات، سيُظهِر ملف App.tsx خطأ لأنك أزلت ملفات authProvider.ts وconstants.ts. ستقوم بإصلاح ذلك عن طريق تحديث ملف App.tsx في الخطوة التالية.

الخلاصة

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

ترجمة وبتصرف للمقال Building a React PDF Invoice Generator App with Refine and Deploying it to DigitalOcean's App Platform لكاتبيه Alican Erdurmaz و Anish Singh Walia.

اقرأ أيضًا

• مصادر تعلم مكتبة React لبناء تطبيقات الويب
• تعرف على أمان مواقع الويب
• إنشاء تطبيق قائمة مهام باستخدام React
• الدليل المرجعي للعمل على نظام غيت Git
• أساسيات جافاسكربت اللازمة للعمل مع React