הודעות שפורסמו על ידי Les | מתמחים טופ

Les

@ע-ה-דכו-ע ברור. לדעתי זה בעיות בהגדרות של הפרוקסי

Les

@aiib ביקשתי מהבייס לפרט לי איך אמור לעבוד האינטגרציה לאתר שלי
המטרה של האינטגרציה: לאפשר לאפליקציית ה-Base44 שלך (צד הלקוח - Frontend) לתקשר עם ה-API של נדרים קארד (מערכת חיצונית) בצורה מאובטחת ויעילה.

האינטגרציה שלי פועלת בשלבים הבאים:
הגדרת פרטי התחברות ב-Base44 (Backend של האפליקציה שלך):
כמנהל באפליקציית Base44, אתה מזין את פרטי ההתחברות שלך לנדרים קארד (כמו MosadId ו-ApiPassword) בדף ההגדרות של הארגון (pages/Settings).
פרטים אלו נשמרים בצורה מאובטחת ב-Database של Base44 תחת ישות Organization עבור ה-tenantId (מזהה הארגון) שלך.
חשוב לוודא שתיבת הסימון nedarim_card_enabled מסומנת ב-true באותה ישות, כדי שהמערכת תדע שהאינטגרציה פעילה.
האפליקציה שלך שולחת בקשה (Frontend):
כאשר משתמש באפליקציה שלך (למשל, בדף NedarimCardManagement או בטאב נדרים קארד בכרטיס משפחה) מבקש לבצע פעולה שקשורה לנדרים קארד (לדוגמה, "טען נתוני כרטיס", "שייך כרטיס מגנטי", "הוסף טעינה" וכו'), קוד ה-Frontend שלך (בעיקר דרך הקובץ components/utilities/nedarimCardApi.js) מפעיל פונקציה מתאימה.
פונקציה זו אינה פונה ישירות לשרתי נדרים קארד. במקום זאת, היא שולחת בקשת HTTP POST אל שרת הפרוקסי שלך ב-Vercel.
הבקשה לשרת הפרוקסי מכילה:
tenantId: מזהה הארגון שלך.
accessToken: טוקן אימות של המשתמש הנוכחי ב-Base44, שמוודא שהמשתמש מורשה לבצע את הפעולה.
action: איזה סוג פעולה יש לבצע מול נדרים קארד (לדוגמה: 'GetClientCard', 'AddTlush').
payload: הנתונים הספציפיים לאותה פעולה (לדוגמה: ClientId, Amount וכו').
שרת הפרוקסי ב-Vercel מקבל את הבקשה ומטפל בה (Backend - Vercel Serverless Function):

הפרוקסי שלך ב-Vercel (הפרויקט nedarim-card-integration שמכיל את קוד ה-API, ככל הנראה בנתיב api/index.ts או api/index.js) מקבל את בקשת ה-POST.
הפרוקסי משתמש ב-tenantId וב-accessToken (שהתקבלו מהאפליקציה שלך) כדי:
לאמת את המשתמש מול Base44.
לשלוף ממאגר הנתונים של Base44 את פרטי ההתחברות הסודיים של נדרים קארד (כלומר, ה-nedarim_card_mosad_id וה-nedarim_card_api_password) עבור ה-tenantId הספציפי ששלח את הבקשה. זהו השלב הקריטי שבו הפרטים הסודיים אינם נחשפים ל-Frontend.
לאחר שיש לפרוקסי את פרטי ההתחברות, הוא בונה את הבקשה המתאימה ל-API של נדרים קארד.
שרת הפרוקסי פונה ל-API של נדרים קארד:

הפרוקסי שלך מבצע קריאת HTTP (בדרך כלל POST) ישירות ל-API של נדרים קארד, תוך שימוש בפרטי ההתחברות ששלף ובנתוני ה-payload שהתקבלו מהאפליקציה שלך.
שרתי נדרים קארד מקבלים את הבקשה, מעבדים אותה ומחזירים תשובה לפרוקסי.
הפרוקסי מחזיר תשובה לאפליקציה (Frontend):

הפרוקסי שלך מקבל את התשובה מנדרים קארד.
הוא מעבד את התשובה (למשל, בודק שגיאות, מנסח אותה מחדש בפורמט שה-Frontend מצפה לו).
הוא שולח את התשובה בחזרה לאפליקציה שלך (ל-Frontend).
האפליקציה שלך מציגה את הנתונים:

ה-Frontend מקבל את התשובה מהפרוקסי ומציג את הנתונים למשתמש (לדוגמה, יתרת כרטיס, היסטוריית עסקאות וכו').

עשיתי את כל ההגדרות ועם כל זה עדיין לא מצליח להתחבר.

Les

האם יש כאן תותח שמבין ויודע ויכול לעזור לי לעשות אינטגרציה לאתר שאני בונה בBase44 ?

Les

@נעזר1000
המוצר שאני עשיתי זה ניהול תמיכות עבור ארגוני צדקה.
לגבי מה שכתבת, אני שאלתי אותם
ש. לאחר שאני גומר לבנות את האפליקציה, היא יושבת תמיד אצלכם, או שאני יכול להקים אתר עם דומיין פרטי?
התשובה שהם ענו לי: אתה יכול לבחור - אתה יכול שהיא תהיה אצלנו תחת דומיין פרטי. אם אתה מעוניין אתה גם יכול לחלץ את הקוד ולשים על שרתים שלך.

Les

@ארץ-הצבי
תודה.

Les

@ארץ-הצבי

import React, { useState, useEffect } from 'react';
import { Family } from '@/entities/Family';
import { Search, Plus, ChevronLeft, Filter, Download, Upload } from 'lucide-react';
import FamilyDetailsDialog from '../components/families/FamilyDetailsDialog';

export default function FamiliesPage() {
const [families, setFamilies] = useState([]);
const [filteredFamilies, setFilteredFamilies] = useState([]);
const [searchTerm, setSearchTerm] = useState('');
const [loading, setLoading] = useState(true);
const [selectedFamily, setSelectedFamily] = useState(null);
const [isDialogOpen, setIsDialogOpen] = useState(false);

useEffect(() => {
loadFamilies();

const urlParams = new URLSearchParams(window.location.search);
const familyId = urlParams.get('familyId');
if (familyId) {
  openFamilyById(familyId);
}

}, []);

useEffect(() => {
filterFamilies();
}, [searchTerm, families]);

const openFamilyById = async (id) => {
try {
const familyList = await Family.list();
const foundFamily = familyList.find(f => f.id === id);
if (foundFamily) {
setSelectedFamily(foundFamily);
setIsDialogOpen(true);
}
} catch (error) {
console.error("Failed to find family:", error);
}
};

const filterFamilies = () => {
let filtered = [...families];

if (searchTerm) {
  const term = searchTerm.toLowerCase();
  filtered = filtered.filter(family =>
    family.family_name?.toLowerCase().includes(term) ||
    family.husband_name?.toLowerCase().includes(term) ||
    family.wife_name?.toLowerCase().includes(term) ||
    family.address?.toLowerCase().includes(term) ||
    family.husband_phone?.includes(term) ||
    family.wife_phone?.includes(term) ||
    family.email?.toLowerCase().includes(term) ||
    family.husband_id?.includes(term) ||
    family.wife_id?.includes(term)
  );
}

filtered.sort((a, b) => (a.family_name > b.family_name) ? 1 : -1);

setFilteredFamilies(filtered);

};

const handleFamilyClick = (family) => {
setSelectedFamily(family);
setIsDialogOpen(true);
};

const handleAddFamily = () => {
setSelectedFamily(null);
setIsDialogOpen(true);
};

const handleDialogClose = () => {
setIsDialogOpen(false);
setSelectedFamily(null);
};

const handleDialogSave = () => {
loadFamilies();
setIsDialogOpen(false);
setSelectedFamily(null);
};

const exportToExcel = () => {
const headers = 'שם משפחה,שם בעל,ת.ז. בעל,טלפון בעל,שם אישה,ת.ז. אישה,טלפון אישה,כתובת,דוא"ל,מצב משפחתי,מספר ילדים,מספר ילדים נשואים,הכנסה חודשית,הוצאה חודשית,סטטוס,הערות,שם מכר,טלפון מכר\n';

let csvContent = '\ufeff' + headers;
filteredFamilies.forEach(family => {
  csvContent += `"${family.family_name || ''}","${family.husband_name || ''}","${family.husband_id || ''}","${family.husband_phone || ''}","${family.wife_name || ''}","${family.wife_id || ''}","${family.wife_phone || ''}","${family.address || ''}","${family.email || ''}","${family.marital_status || ''}","${family.num_children || 0}","${family.num_married_children || 0}","${family.monthly_income || 0}","${family.monthly_expenses || 0}","${family.status || ''}","${family.notes || ''}","${family.acquaintance_name || ''}","${family.acquaintance_phone || ''}"\n`;
});

const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
const url = URL.createObjectURL(blob);
const link = document.createElement('a');
link.setAttribute('href', url);
link.setAttribute('download', 'משפחות.csv');
link.style.visibility = 'hidden';
document.body.appendChild(link);
link.click();
document.body.removeChild(link);

};

const importFromExcel = async (event) => {
const file = event.target.files[0];
if (!file) return;

try {
  alert('מייבא משפחות מקובץ, אנא המתן...');
  
  const fileText = await new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onload = (e) => resolve(e.target.result);
    reader.onerror = (e) => reject(e);
    reader.readAsText(file);
  });
  
  const rows = fileText.split('\n');
  const headers = rows[0].split(',').map(h => h.trim().replace(/^"(.*)"$/, '$1'));
  
  const families = [];
  
  for (let i = 1; i < rows.length; i++) {
    if (!rows[i].trim()) continue;
    
    const values = rows[i].split(',').map(v => v.trim().replace(/^"(.*)"$/, '$1'));
    const familyData = {};
    
    headers.forEach((header, index) => {
      familyData[header] = values[index] || '';
    });
    
    families.push(familyData);
  }
  
  let successCount = 0;
  let errorCount = 0;
  
  for (const familyData of families) {
    try {
      await Family.create({
        family_name: familyData['שם משפחה'],
        husband_name: familyData['שם בעל'],
        husband_id: familyData['ת.ז. בעל'],
        husband_phone: familyData['טלפון בעל'],
        wife_name: familyData['שם אישה'],
        wife_id: familyData['ת.ז. אישה'],
        wife_phone: familyData['טלפון אישה'],
        address: familyData['כתובת'],
        email: familyData['דוא"ל'],
        marital_status: familyData['מצב משפחתי'],
        num_children: parseInt(familyData['מספר ילדים'] || '0'),
        num_married_children: parseInt(familyData['מספר ילדים נשואים'] || '0'),
        monthly_income: parseFloat(familyData['הכנסה חודשית'] || '0'),
        monthly_expenses: parseFloat(familyData['הוצאה חודשית'] || '0'),
        status: familyData['סטטוס'] || 'pending',
        notes: familyData['הערות'],
        acquaintance_name: familyData['שם מכר'] || '',
        acquaintance_phone: familyData['טלפון מכר'] || ''
      });
      successCount++;
    } catch (error) {
      console.error('Failed to create family:', familyData, error);
      errorCount++;
    }
  }

  alert(`הייבוא הושלם בהצלחה: ${successCount} משפחות נוספו, ${errorCount} שגיאות`);
  loadFamilies();
} catch (error) {
  console.error('Import failed:', error);
  alert('שגיאה בייבוא הקובץ: ' + error.message);
}

event.target.value = '';

};

return (
<div className="py-8">
<div className="mb-6">
<h1 className="text-3xl font-bold mb-6">ניהול משפחות</h1>

    <div className="flex flex-col sm:flex-row justify-between items-start gap-4 mb-6">
      <div className="relative flex-1">
        <Search className="absolute right-3 top-3 h-4 w-4 text-gray-400" />
        <input
          type="search"
          placeholder="חיפוש לפי שם, כתובת, טלפון או אימייל..."
          className="pr-10 w-full p-2 border rounded"
          value={searchTerm}
          onChange={(e) => setSearchTerm(e.target.value)}
        />
      </div>
      <div className="flex gap-2">
        <input
          type="file"
          accept=".xlsx,.xls,.csv"
          onChange={importFromExcel}
          className="hidden"
          id="excel-upload"
        />
        <label
          htmlFor="excel-upload"
          className="bg-green-600 text-white px-4 py-2 rounded-md flex items-center cursor-pointer hover:bg-green-700"
        >
          <Upload className="h-4 w-4 ml-2" />
          ייבוא מאקסל
        </label>
        <button 
          onClick={exportToExcel}
          className="bg-blue-600 text-white px-4 py-2 rounded-md flex items-center hover:bg-blue-700"
        >
          <Download className="h-4 w-4 ml-2" />
          ייצוא CSV
        </button>
        <button 
          onClick={() => window.location.href = '/AdvancedFilter'}
          className="bg-gray-100 text-gray-700 px-4 py-2 rounded-md flex items-center hover:bg-gray-200"
        >
          <Filter className="h-4 w-4 ml-2" />
          סינון מתקדם
        </button>
        <button 
          onClick={handleAddFamily}
          className="bg-blue-600 text-white px-4 py-2 rounded-md flex items-center hover:bg-blue-700"
        >
          <Plus className="h-4 w-4 ml-2" />
          הוסף משפחה
        </button>
      </div>
    </div>
  </div>

  {loading ? (
    <div className="flex justify-center items-center h-40">
      <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-gray-900"></div>
    </div>
  ) : (
    <div className="overflow-x-auto">
      <table className="min-w-full bg-white border rounded-lg">
        <thead>
          <tr className="bg-gray-50 text-gray-600 text-right">
            <th className="py-3 px-4 font-medium">שם משפחה</th>
            <th className="py-3 px-4 font-medium">שם בעל/אישה</th>
            <th className="py-3 px-4 font-medium">טלפון</th>
            <th className="py-3 px-4 font-medium">כתובת</th>
            <th className="py-3 px-4 font-medium">סטטוס</th>
            <th className="py-3 px-4 font-medium">פעולות</th>
          </tr>
        </thead>
        <tbody className="divide-y">
          {filteredFamilies.map(family => (
            <tr 
              key={family.id} 
              className="hover:bg-gray-50 cursor-pointer"
              onClick={() => handleFamilyClick(family)}
            >
              <td className="py-3 px-4 font-medium">{family.family_name}</td>
              <td className="py-3 px-4">{family.husband_name || family.wife_name || '-'}</td>
              <td className="py-3 px-4">{family.husband_phone || family.wife_phone || '-'}</td>
              <td className="py-3 px-4">{family.address || '-'}</td>
              <td className="py-3 px-4">
                <span className={`inline-block px-2 py-1 rounded-full text-xs
                  ${family.status === 'active' ? 'bg-green-100 text-green-800' :
                    family.status === 'pending' ? 'bg-yellow-100 text-yellow-800' :
                    family.status === 'inactive' ? 'bg-gray-100 text-gray-800' :
                    'bg-blue-100 text-blue-800'}`}>
                  {family.status === 'active' ? 'פעיל' :
                   family.status === 'pending' ? 'ממתין' :
                   family.status === 'inactive' ? 'לא פעיל' :
                   family.status}
                </span>
              </td>
              <td className="py-3 px-4">
                <button
                  onClick={(e) => {
                    e.stopPropagation();
                    handleFamilyClick(family);
                  }}
                  className="text-blue-600 hover:text-blue-800 flex items-center"
                >

}

Les

@נעזר1000 כן, ראיתי שיש גישה לקוד, אלא שאני לא מבין בקודים, לכן שאלתי באיזה שפה הוא משתמש.

Les

בניתי תוכנה Web App ע"י האתר המהפכני https://app.base44.com/
הכל ע"י Ai. כעת האתר נמצא בשרתים שלהם. השאלה שלי אם מישהו כאן יודע באיזה שפה האתר בונה את התוכנה?
השאלה שלי היא בכדי לדעת האם הוא מתאים לוורדפרס.

Les

פוסטים

ה-Frontend מקבל את התשובה מהפרוקסי ומציג את הנתונים למשתמש (לדוגמה, יתרת כרטיס, היסטוריית עסקאות וכו').