بناء تطبيق إدارة الماليّة متكامل (Full-Stack) يتيح ميزة التلخيص الآلي بـ Flutter و Spring Boot

دليل شامل: بناء تطبيق إدارة الماليّة متكامل (Full-Stack) يتيح ميزة التلخيص الآلي بـ Flutter و Spring Boot

في عصرنا الرقمي المتسارع، أصبحت إدارة الشؤون المالية الشخصية تحدياً يواجه الكثيرين. لم يعد المستخدمون يكتفون بمجرد تسجيل نفقاتهم يدوياً، بل يبحثون عن حلول ذكية تقدم لهم تحليلات فورية وتلخيصاً ذكياً لسلوكهم المالي. في هذا المقال العلمي والعملي، سنتعلم بالتفصيل كيفية بناء تطبيق إدارة الماليّة متكامل (Full-Stack) يتيح ميزة التلخيص الآلي بـ Flutter و Spring Boot. سنقوم بدمج تقنيات الذكاء الاصطناعي لتلخيص المصاريف الشهرية وتقديم نصائح مالية مخصصة للمستخدم بناءً على بياناته الفعلية.

لماذا اختيار Flutter و Spring Boot لتطبيق مالي؟

عند بناء التطبيقات المالية، هناك عاملان لا يمكن المساومة عليهما: الأداء العالي والأمان الصارم من جهة الخلفية (Backend)، وتجربة المستخدم السلسة والمتجاوبة من جهة الواجهة الأمامية (Frontend). هنا تبرز قوة هذا المزيج التقني:

Spring Boot: يعتبر الخيار الأول للمؤسسات المالية الكبرى بفضل بيئته القوية (Spring Ecosystem)، ودعمه الممتاز لعمليات الأمان (Spring Security)، وإدارته الفعالة للبيانات والعمليات المتزامنة، بالإضافة إلى سهولة دمجه مع نماذج الذكاء الاصطناعي عبر Spring AI.
Flutter: يتيح لك كتابة كود برمي واحد يعمل بكفاءة عالية على نظامي Android و iOS بنفس الأداء الأصلي (Native)، مما يقلل وقت التكلفة والتطوير مع توفير واجهات مستخدم جذابة وتفاعلية للغاية.

المفهوم الأساسي وهندسة النظام (Architecture)

قبل الدخول في كتابة الأكواد البرمجية، من الضروري فهم كيفية تدفق البيانات في تطبيقنا المالي المتكامل. يتكون النظام من ثلاثة أجزاء رئيسية:

الواجهة الأمامية (Flutter App): تتيح للمستخدم إدخال المعاملات المالية (مصاريف، واردات)، واستعراض الرسوم البيانية، وطلب تلخيص مالي آلي بنقرة زر واحدة.
الخلفية (Spring Boot API): تعمل كعقل مدبر للتطبيق؛ تعالج الطلبات، وتدير العمليات مع قاعدة البيانات، وتتواصل مع نموذج الذكاء الاصطناعي (مثل OpenAI GPT أو Google Gemini) لتوليد التلخيص المالي الذكي.
قاعدة البيانات (PostgreSQL): لتخزين بيانات المستخدمين والمعاملات المالية بشكل آمن ومنظم.

ملاحظة هامة: لضمان أمان البيانات المالية، يجب دائماً تشفير البيانات الحساسة أثناء النقل (عبر HTTPS) وأثناء التخزين، واستخدام بروتوكولات تفويض آمنة مثل OAuth2 أو JWT.

الخطوة الأولى: بناء الخلفية باستخدام Spring Boot

سنبدأ بإنشاء مشروع Spring Boot جديد. يمكنك استخدام Spring Initializr وتحديد الاعتماديات التالية: Spring Web, Spring Data JPA, PostgreSQL Driver, و Lombok.

1. إنشاء كائن المعاملة الماليّة (Transaction Entity)

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

package com.finance.app.entity;

import jakarta.persistence.*;
import java.time.LocalDate;

@Entity
@Table(name = "transactions")
public class Transaction {

    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Long id;

    private String description;
    private double amount;
    private String category; // مثل: طعام، مواصلات، ترفيه
    private String type; // EXPENSE أو INCOME
    private LocalDate date;

    // Constructor الافتراضي والباراميتري
    public Transaction() {}

    public Transaction(String description, double amount, String category, String type, LocalDate date) {
        this.description = description;
        this.amount = amount;
        this.category = category;
        this.type = type;
        this.date = date;
    }

    // Getter و Setter لجميع الحقول
    public Long getId() { return id; }
    public String getDescription() { return description; }
    public void setDescription(String description) { this.description = description; }
    public double getAmount() { return amount; }
    public void setAmount(double amount) { this.amount = amount; }
    public String getCategory() { return category; }
    public void setCategory(String category) { this.category = category; }
    public String getType() { return type; }
    public void setType(String type) { this.type = type; }
    public LocalDate getDate() { return date; }
    public void setDate(LocalDate date) { this.date = date; }
}

2. مستودع البيانات (Transaction Repository)

واجهة بسيطة للتعامل مع العمليات الأساسية لقاعدة البيانات (CRUD):

package com.finance.app.repository;

import com.finance.app.entity.Transaction;
import org.springframework.data.jpa.repository.JpaRepository;
import java.util.List;

public interface TransactionRepository extends JpaRepository<Transaction, Long> {
    List<Transaction> findAllByOrderByDateDesc();
}

3. خدمة التلخيص الآلي باستخدام الذكاء الاصطناعي (AI Summary Service)

هنا تكمن القوة الحقيقية للتطبيق. سنقوم بإنشاء خدمة تتصل بـ OpenAI API لإرسال قائمة المعاملات واستقبال تلخيص ذكي باللغة العربية يقدم نصائح مالية للمستخدم.

package com.finance.app.service;

import com.finance.app.entity.Transaction;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.stereotype.Service;
import org.springframework.web.client.RestTemplate;
import org.springframework.http.*;
import java.util.*;
import java.util.stream.Collectors;

@Service
public class AISummaryService {

    @Value("${openai.api.key}")
    private String apiKey;

    private final String OPENAI_API_URL = "https://api.openai.com/v1/chat/completions";

    public String generateFinancialSummary(List<Transaction> transactions) {
        if (transactions.isEmpty()) {
            return "لا توجد معاملات مالية مسجلة لتلخيصها حالياً.";
        }

        // تحويل المعاملات إلى نص منسق ليفهمه النموذج
        String transactionsData = transactions.stream()
                .map(t -> String.format("- %s: %.2f $ (%s) في %s", t.getType(), t.getAmount(), t.getCategory(), t.getDate()))
                .collect(Collectors.joining("\n"));

        String prompt = "أنت خبير مالي ذكي ومساعد شخصي. حلل المعاملات المالية التالية وقدم ملخصاً تنفيذياً باللغة العربية في 3 نقاط أساسية تشمل: أكثر فئة تم الصرف عليها، ونصيحة مالية ذكية لتقليل النفقات:\n" + transactionsData;

        RestTemplate restTemplate = new RestTemplate();
        HttpHeaders headers = new HttpHeaders();
        headers.setContentType(MediaType.APPLICATION_JSON);
        headers.setBearerAuth(apiKey);

        Map<String, Object> requestBody = new HashMap<>();
        requestBody.put("model", "gpt-3.5-turbo");
        
        List<Map<String, String>> messages = new ArrayList<>();
        messages.add(Map.of("role", "user", "content", prompt));
        requestBody.put("messages", messages);

        HttpEntity<Map<String, Object>> entity = new HttpEntity<>(requestBody, headers);

        try {
            ResponseEntity<Map> response = restTemplate.postForEntity(OPENAI_API_URL, entity, Map.class);
            List<Map<String, Object>> choices = (List<Map<String, Object>>) response.getBody().get("choices");
            Map<String, Object> message = (Map<String, Object>) choices.get(0).get("message");
            return (String) message.get("content");
        } catch (Exception e) {
            return "عذراً، فشل توليد التلخيص الآلي في الوقت الحالي. يرجى المحاولة لاحقاً.";
        }
    }
}

4. متحكم الواجهة البرمجية (Transaction Controller)

نقوم الآن بإنشاء الـ Controller لتعريض نقاط النهاية (Endpoints) للـ Flutter App:

package com.finance.app.controller;

import com.finance.app.entity.Transaction;
import com.finance.app.repository.TransactionRepository;
import com.finance.app.service.AISummaryService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.http.ResponseEntity;
import org.springframework.web.bind.annotation.*;

import java.util.List;

@RestController
@RequestMapping("/api/transactions")
@CrossOrigin(origins = "*") // للسماح للـ Flutter App بالاتصال بالـ API دون مشاكل CORS
public class TransactionController {

    @Autowired
    private TransactionRepository repository;

    @Autowired
    private AISummaryService aiSummaryService;

    @GetMapping
    public List<Transaction> getAllTransactions() {
        return repository.findAllByOrderByDateDesc();
    }

    @PostMapping
    public Transaction createTransaction(@RequestBody Transaction transaction) {
        return repository.save(transaction);
    }

    @GetMapping("/summary")
    public ResponseEntity<Map<String, String>> getAISummary() {
        List<Transaction> transactions = repository.findAll();
        String summary = aiSummaryService.generateFinancialSummary(transactions);
        return ResponseEntity.ok(Map.of("summary", summary));
    }
}

الخطوة الثانية: بناء الواجهة الأمامية باستخدام Flutter

الآن، سننتقل إلى جهة العميل. تأكد من إعداد بيئة عمل Flutter وتثبيت حزمة http في ملف pubspec.yaml لإجراء طلبات الشبكة.

dependencies:
  flutter:
    sdk: flutter
  http: ^1.1.0

1. نموذج البيانات في Flutter (Transaction Model)

نقوم بإنشاء نموذج بيانات يطابق الحقول القادمة من خلفية Spring Boot:

class Transaction {
  final int? id;
  final String description;
  final double amount;
  final String category;
  final String type;
  final String date;

  Transaction({
    this.id,
    required this.description,
    required this.amount,
    required this.category,
    required this.type,
    required this.date,
  });

  factory Transaction.fromJson(Map<String, dynamic> json) {
    return Transaction(
      id: json['id'],
      description: json['description'],
      amount: json['amount'].toDouble(),
      category: json['category'],
      type: json['type'],
      date: json['date'],
    );
  }

  Map<String, dynamic> toJson() {
    return {
      'description': description,
      'amount': amount,
      'category': category,
      'type': type,
      'date': date,
    };
  }
}

2. خدمة الاتصال بالـ API (API Service)

سنقوم بإنشاء فئة مخصصة لإدارة الاتصال بخلفية التطبيق وجلب البيانات والتلخيص الآلي.

import 'dart:convert';
import 'http_service.dart'; // تأكد من استيراد حزمة http
import 'package:http/http.dart' as http;
import 'transaction_model.dart';

class ApiService {
  // استبدل بـ IP جهازك إذا كنت تختبر على هاتف حقيقي
  static const String baseUrl = 'http://10.0.2.2:8080/api/transactions';

  Future<List<Transaction>> fetchTransactions() async {
    final response = await http.get(Uri.parse(baseUrl));
    if (response.statusCode == 200) {
      List jsonResponse = json.decode(utf8.decode(response.bodyBytes));
      return jsonResponse.map((data) => Transaction.fromJson(data)).toList();
    } else {
      throw Exception('فشل تحميل المعاملات المالية');
    }
  }

  Future<String> fetchAISummary() async {
    final response = await http.get(Uri.parse('$baseUrl/summary'));
    if (response.statusCode == 200) {
      Map<String, dynamic> data = json.decode(utf8.decode(response.bodyBytes));
      return data['summary'] ?? 'لا يوجد ملخص متاح حالياً.';
    } else {
      return 'فشل الحصول على التلخيص الآلي المالي.';
    }
  }
}

3. واجهة المستخدم الرئيسية (UI Screen)

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

import 'package:flutter/material.dart';
import 'api_service.dart';
import 'transaction_model.dart';

class HomeScreen extends StatefulWidget {
  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  final ApiService apiService = ApiService();
  late Future<List<Transaction>> futureTransactions;
  bool isLoadingSummary = false;

  @override
  void initState() {
    super.initState();
    futureTransactions = apiService.fetchTransactions();
  }

  void _showSummaryDialog() async {
    setState(() { isLoadingSummary = true; });
    try {
      String summary = await apiService.fetchAISummary();
      showDialog(
        context: context,
        builder: (context) => AlertDialog(
          title: Row(
            children: [
              Icon(Icons.psychology, color: Colors.amber),
              SizedBox(width: 10),
              Text('التلخيص المالي الذكي'),
            ],
          ),
          content: SingleChildScrollView(
            child: Text(summary, style: TextStyle(fontSize: 16, height: 1.4)),
          ),
          actions: [
            TextButton(
              onPressed: () => Navigator.pop(context),
              child: Text('إغلاق'),
            ),
          ],
        ),
      );
    } finally {
      setState(() { isLoadingSummary = false; });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('إدارة المالية الذكية'),
        centerTitle: true,
        backgroundColor: Colors.teal,
      ),
      body: FutureBuilder<List<Transaction>>(
        futureTransactions: futureTransactions,
        builder: (context, snapshot) {
          if (snapshot.connectionState == ConnectionState.waiting) {
            return Center(child: CircularProgressIndicator());
          } else if (snapshot.hasError) {
            return Center(child: Text('حدث خطأ أثناء جلب البيانات'));
          } else if (!snapshot.hasData || snapshot.data!.isEmpty) {
            return Center(child: Text('لا توجد معاملات مسجلة بعد.'));
          }

          final transactions = snapshot.data!;
          return ListView.builder(
            itemCount: transactions.length,
            itemBuilder: (context, index) {
              final tx = transactions[index];
              return Card(
                margin: EdgeInsets.symmetric(horizontal: 10, vertical: 5),
                child: ListTile(
                  leading: Icon(
                    tx.type == 'EXPENSE' ? Icons.arrow_downward : Icons.arrow_upward,
                    color: tx.type == 'EXPENSE' ? Colors.red : Colors.green,
                  ),
                  title: Text(tx.description),
                  subtitle: Text('${tx.category} - ${tx.date}'),
                  trailing: Text(
                    '${tx.amount} $',
                    style: TextStyle(fontWeight: FontWeight.bold, fontSize: 16),
                  ),
                ),
              );
            },
          );
        },
      ),
      floatingActionButton: FloatingActionButton.extended(
        onPressed: isLoadingSummary ? null : _showSummaryDialog,
        label: isLoadingSummary 
            ? SizedBox(width: 20, height: 20, child: CircularProgressIndicator(color: Colors.white, strokeWidth: 2)) 
            : Text('توليد تلخيص ذكي'),
        icon: Icon(Icons.bolt),
        backgroundColor: Colors.teal,
      ),
    );
  }
}

أفضل الممارسات والنصائح عند التطوير

عند بناء تطبيق مالي حقيقي للإنتاج (Production)، يجب اتباع بعض القواعد الصارمة:

تخزين مفاتيح الـ API بأمان: لا تضع أبداً مفتاح OpenAI API داخل كود Flutter الخاص بك. يجب دائماً إخفاؤه في ملفات البيئة (.env) على الخادم (Spring Boot) والوصول إليه بشكل غير مباشر لحماية حسابك من الاختراق والسرقة.
التخزين المؤقت (Caching): استدعاء نماذج الذكاء الاصطناعي مكلف مادياً ويستغرق وقتاً. قم بعمل كاش (Cache) للتلخيص المالي اليومي أو الأسبوعي للمستخدم بدلاً من توليده مجدداً مع كل نقرة زر.
إدارة الحالة (State Management): في التطبيقات الكبيرة، يفضل استخدام حلول قوية لإدارة الحالة في Flutter مثل Riverpod أو Bloc لتسهيل صيانة الكود وفصل منطق الأعمال عن واجهة المستخدم.

أخطاء شائعة يجب تجنبها

إليك أهم الأخطاء التي يقع فيها المطورون المبتدئون أثناء بناء تطبيقات ماليّة متكاملة:

عدم معالجة استجابات الشبكة الفارغة أو الخاطئة: قد ينقطع الاتصال بالإنترنت أثناء جلب التلخيص، لذا يجب دائماً استخدام كتل try-catch وإظهار رسائل خطأ واضحة للمستخدم النهائي.
إرسال كافة البيانات المالية للذكاء الاصطناعي دون فلترة: انتبه لخصوصية المستخدم! لا ترسل أبداً معلومات شخصية حساسة مثل الأسماء، أرقام الحسابات البنكية، أو العناوين إلى الـ API الخارجي للذكاء الاصطناعي. فقط أرسل الأرقام والتصنيفات العامة.
إهمال تصفح الصفحات (Pagination): مع مرور الوقت، تزداد المعاملات المالية للمستخدم لآلاف السجلات. جلبها دفعة واحدة يسبب بطء التطبيق واستهلاكاً كبيراً للذاكرة. استخدم الـ Pagination دائماً في الـ API.

خلاصة المقال

لقد قمنا في هذا الدليل العملي بـ بناء تطبيق إدارة الماليّة متكامل (Full-Stack) يتيح ميزة التلخيص الآلي بـ Flutter و Spring Boot. استعرضنا كيفية بناء نموذج البيانات وقاعدة البيانات وتطوير نظام ذكاء اصطناعي آمن في الخلفية، بالإضافة لتصميم واجهة مستخدم متجاوبة وسلسة في Flutter تعرض البيانات والتحليلات بشكل جذاب ومفهوم. يمثل هذا التطبيق نواة ممتازة لمشاريع أكبر وأكثر تعقيداً في قطاع التقنية المالية (FinTech).

الأسئلة الشائعة (FAQ)

س1: هل يمكنني استخدام نموذج ذكاء اصطناعي محلي بدلاً من OpenAI المدفوع؟

نعم، يمكنك استخدام نماذج مفتوحة المصدر مثل Llama أو Mistral وتشغيلها محلياً باستخدام أدوات مثل Ollama، ومن ثم ربطها بـ Spring Boot عبر مكتبة Spring AI لتقليل التكاليف تماماً وضمان خصوصية البيانات بنسبة 100%.

س2: كيف يمكنني ربط تطبيق Flutter بقاعدة البيانات مباشرة؟

من الناحية الأمنية والهيكلية، لا يجب أبداً ربط تطبيق الهاتف بقاعدة البيانات مباشرة. يجب دائماً استخدام طبقة وسيطة (Backend API) مثل Spring Boot لإدارة الصلاحيات، والتحقق من صحة البيانات، وحماية قاعدة البيانات من الهجمات المباشرة.

س3: ما هي أفضل طريقة لتأمين الـ API الخاص بالتطبيق المالي؟

تعتبر آلية JWT (JSON Web Tokens) مقترنة بـ Spring Security هي المعيار الذهبي لتأمين التطبيقات المالية. تقوم بإصدار توكن مشفر للمستخدم بعد تسجيل الدخول، ويتم إرساله مع كل طلب للتحقق من هوية وصلاحيات المستخدم قبل معالجة البيانات.

مدونة مطيع الجابري

القائمة الرئيسية

الصفحات