Expense GQL

بناء Expense GQL: تطبيق لتتبع التمويل الشخصي باستخدام GraphQL و MERN Stack

كمطوّر برمجيات شغوف بالكود الفعّال وإدارة التمويل الشخصي، انطلقت مؤخرًا في مشروع يجمع بين هذين الاهتمامين. والنتيجة كانت تطبيق Expense GQL، وهو تطبيق لتتبع التمويل الشخصي تم بناؤه باستخدام GraphQL وتقنية MERN Stack. في هذه المقالة، سأشارك رحلتي في تطوير هذا التطبيق، وأشرح الخيارات التقنية والفوائد التي جلبتها لهذا المشروع.

الأساس: لماذا GraphQL؟

أثناء التفكير في تطبيق مالي، أدركت أن المستخدمين قد يحتاجون إلى مستويات مختلفة من التفاصيل حول معاملاتهم. قد يرغب البعض في نظرة عامة سريعة على إنفاقهم الشهري، بينما قد يرغب آخرون في التعمق في تفاصيل فئات محددة. عادةً، تتسبب واجهات برمجة التطبيقات التقليدية (REST APIs) في جلب بيانات زائدة، حيث يتم استرجاع تاريخ كامل للمعاملات حتى عند الحاجة فقط لبيانات ملخصة. هنا يظهر تفوق GraphQL، حيث يسمح للعملاء بطلب البيانات التي يحتاجونها فقط، مما يعزز الأداء وتجربة المستخدم.

التقنيات المستخدمة: MERN مع لمسة من GraphQL

في تطبيق Expense GQL، اخترت تقنيات حديثة وفعّالة:

الواجهة الأمامية: React (مع Vite للحصول على تجربة تطوير سريعة) و TailwindCSS و framer-motion للرسوم المتحركة.

الواجهة الخلفية: Node.js و Express، مع GraphQL عبر Apollo Server.

قاعدة البيانات: MongoDB لتخزين البيانات بتنسيق وثائقي مرن.

الأمان: bcryptjs لتشفير كلمات المرور و passport للحماية من الوصول غير المصرح به.

بناء الواجهة الخلفية: قوة GraphQL

تتألق قوة GraphQL في الواجهة الخلفية. باستخدام Apollo Server مع Express، قمت بتصميم مخطط يحدد هيكل البيانات والعمليات التي يمكن إجراؤها.

تصميم المخطط

إليكم جزءًا من مخطط GraphQL للمعاملات:

type Transaction {

_id: ID!

userId: ID!

description: String!

paymentType: String!

category: String!

amount: Float!

location: String

date: String!

user: User!

}

type Query {

transactions: [Transaction!]

transaction(transactionId:ID!): Transaction

}

type Mutation {

createTransaction(input: CreateTransactionInput!): Transaction!

updateTransaction(input: UpdateTransactionInput!): Transaction!

deleteTransaction(transactionId:ID!): Transaction!

}

هذا المخطط يعمل كعقد بين الواجهة الأمامية والخلفية، ويحدد بوضوح البيانات المتاحة والعمليات الممكنة.

المُحللات (Resolvers): حيث يحدث السحر

المُحللات هي وظائف تنفذ طلبات GraphQL. إليكم مثالاً على محلل لاسترجاع المعاملات:

Query: {

transactions: async (_, __, context) => {

try {

if (!context.getUser()) throw new Error("Unauthorized");

const userId = await context.getUser()._id;

const transactions = await Transaction.find({ userId });

return transactions;

} catch (err) {

console.error("Error getting transactions:", err);

throw new Error("Error getting transactions");

}

},

// ... محلات أخرى

}

يقوم هذا المحلل بمصادقة المستخدم، ويسترجع معرفه الفريد، ثم يجلب معاملاته من قاعدة البيانات.

تجربة الواجهة الأمامية: استخدام Apollo Client

في الواجهة الأمامية، يسهل Apollo Client عملية الاستعلام عن API الخاص بـ GraphQL. إعدادها بسيط:

import { ApolloClient, InMemoryCache, ApolloProvider } from "@apollo/client";

const client = new ApolloClient({

uri: "http://localhost:4000/gra...;,

cache: new InMemoryCache(),

credentials: "include",

});

ReactDOM.createRoot(document.getElementById("root")).render(

<React.StrictMode>

<BrowserRouter>

<GridBackground>

<ApolloProvider client={client}>

<App />

</ApolloProvider>

</GridBackground>

</BrowserRouter>

</React.StrictMode>

);

يصبح جلب البيانات أمرًا سهلاً باستخدام دالة useQuery من Apollo:

import { useQuery } from "@apollo/client";

import { GET_AUTHENTICATED_USER } from "./graphql/queries/user.query";

function App() {

const { loading, data } = useQuery(GET_AUTHENTICATED_USER);

if (loading) return null;

return (

<>

{data?.authUser && <Header />}

{/* بقية المكونات */}

</>

);

}

تسهّل Apollo Client إدارة الحالة وجلب البيانات، مما يجعل عملية التطوير أكثر سلاسة.

الخاتمة: قوة GraphQL في التطبيقات المالية

كان تطوير Expense GQL تجربة تثقيفية مميزة. أثبتت GraphQL أنها أداة قوية تسمح بجلب البيانات بكفاءة ومرونة بما يناسب احتياجات تطبيقات التمويل الشخصي. الجمع بين GraphQL و MERN Stack أدى إلى بناء تطبيق سريع وفعّال ويقدم تجربة ممتعة للمستخدمين. أنصح المطورين الذين يفكرون في بناء تطبيقات غنية بالبيانات بتجربة GraphQL، حيث توفر دقة وكفاءة في التعامل مع البيانات يمكنها تحسين أداء التطبيقات وتجربة المستخدم بشكل ملحوظ.