דלג לתוכן הראשי

ארכיטקטורת מובייל (React Native)

אפליקציית המובייל גבאי סמארט היא אפליקציית React Native מותאמת ל-Android TV ו-טאבלטים. היא משמשת כיחידת התצוגה בבית הכנסת.

טכנולוגיות מפתח​

  • React Native (תהליך עבודה CLI, לא Expo Go).
  • React Navigation: לניתוב בין מסכים.
  • Redux Toolkit: ניהול מצב (משקף את ארכיטקטורת Client).
  • Socket.IO Client: לעדכונים בזמן אמת מהשרת.

אופטימיזציה ל-Android TV​

האפליקציה מתוכננת לחוויות "10-foot UI".

  • ניווט: תומך בניווט D-Pad (שלט רחוק).
  • ניהול פוקוס: אלמנטים מפתח (כרטיסים, כפתורים) בעלי מצבי פוקוס נראים.
  • כיווניות: נעול למצב Landscape (אופקי).
  • שמירה על ערות: משתמש ב-react-native-keep-awake למניעת שינה של המסך.

מבנה מסכים (src/screens)​

  • Main: לולאת התצוגה הראשית (זמני תפילה, הודעות, זמנים).
  • Device: מסכי הגדרה.
    • DeviceSelectionScreen.tsx: צירוף/הגדרה ראשונית.
    • SmartTVMonitorScreen.tsx: תצוגת טלמטריה וניטור.
  • Times: מסכים ייעודיים לצפייה בטבלאות לוח זמנים.

סנכרון נתונים​

  1. טעינה ראשונית: שולפת קונפיגורציה מלאה (זמנים, הודעות, הגדרות) דרך REST API בהפעלה.
  2. זמן אמת: מאזינה לאירועי Socket.IO (למשל, refreshData, message:new) כדי להפעיל רענונים ברקע מבלי לקטוע את מחזור התצוגה.

תקשורת עם השרת​

REST API​

משמש לטעינת נתונים סטטיים:

import { btManagementApi } from '@/utilities/api/btManagementApi';

const times = await btManagementApi.get('/tfila-times');

Socket.IO​

משמש לעדכונים דינמיים:

import io from 'socket.io-client';

const socket = io(SOCKET_URL, {
  auth: { token: authToken },
});

socket.on('refreshData', () => {
  // רענון נתונים ברקע
});

MQTT (אופציונלי)​

חלק מהמכשירים משתמשים ישירות ב-MQTT לקבלת פקודות:

import mqtt from 'react-native-mqtt';

mqtt.connect({
  uri: MQTT_URL,
  clientId: deviceId,
});

אופטימיזציית ביצועים​

  • Lazy Loading: רכיבים נטענים רק כשנדרש.
  • Memoization: שימוש ב-React.memo ו-useMemo למניעת רינדור מיותר.
  • Image Caching: תמונות נשמרות במטמון מקומי.
  • Background Tasks: שימוש ב-react-native-background-timer למשימות רקע.

בדיקה​

# בדיקות יחידה
npm test

# בדיקת קישוריות שרת
npm run test:server

# בדיקת API
npm run test:api