פיתוח אפליקציות מיני של טלגרם עם אינטגרציה ל-1C-Bitrix

פיתוח Telegram Mini App עם אינטגרציה ל-1C-Bitrix

לאחרונה פנה אלינו בעל חנות מקוונת על Bitrix עם קטלוג של 30,000 מוצרים. לאחר השקת ה-Mini App, ההמרה של הזמנות צמחה ב-25% בתוך חודש. לקוחות קונים ישירות ב-Telegram בלי להתקין אפליקציות.

הגרסה הניידת של האתר לרוב אינה מספקת מבחינת נוחות — Telegram Mini App פותר את הבעיה הזו. מצב אופייני: משתמש לוחץ על מוצר בערוץ Telegram, אבל הטעינה האיטית של הגרסה הניידת הורגת את המצב רוח.

ה-Mini App מסיר מכשולים: הכול קורה בתוך המסנג'ר, בלי לעבור הקשר. אנחנו מפתחים מיני-אפליקציות לחנויות על 1C-Bitrix במפתח סוהר: קטלוג, סל קניות, תשלום.

המהנדסים שלנו הם מומחים מוסמכים עם יותר מ-5 שנות ניסיון ועשרות הטמעות. אחד הלקוחות שלנו ציין עלייה של 25% במכירות בתוך חודש לאחר ההשקה.

כיצד פועלת האינטגרציה של Telegram Mini App עם 1C-Bitrix?

ארכיטקטורה: Mini App (React SPA) → בקשות HTTPS → Bitrix API (REST או נקודות קצה מותאמות אישית). ל-Mini App אין גישה למסד הנתונים — הכל עובר דרך ה-API. Bitrix משמש כ-backend ומחזיר JSON.

אימות מתבצע באמצעות initData מ-Telegram WebApp (חתימת HMAC-SHA256 באמצעות הטוקן הסודי של הבוט).

Telegram Client
└─ Mini App (React SPA)
└─ HTTPS requests → Bitrix API
└─ Telegram initData validation
└─ Business logic: catalog, cart, orders

כיצד לאמת משתמש ללא סיסמה?

כאשר Mini App נפתח, האובייקט window.Telegram.WebApp מכיל initData — מחרוזת עם נתוני המשתמש ו-hash. מחרוזת זו חייבת להישלח לשרת עם כל בקשה ולהיות מאומתת.

בצד ה-Mini App (React):

import { useEffect, useState } from 'react';

const tg = window.Telegram.WebApp; export function useTelegramAuth() { const [token, setToken] = useState<string | null>(null); useEffect(() => { tg.ready(); tg.expand();

const initData = tg.initData; if (!initData) return; // Send initData to the server to exchange for a JWT token fetch('/api/telegram/auth', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ init_data: initData }), }) .then(r => r.json()) .then(data => setToken(data.token)); }, []);

  return { token, user: tg.initDataUnsafe?.user };
}

בצד Bitrix — אימות חתימה:

// /local/api/telegram/auth.php
namespace Local\TelegramMiniApp;

class InitDataValidator { private string $botToken; public function __construct(string $botToken) { $this->botToken = $botToken; } public function validate(string $initData): bool { parse_str($initData, $params); $hash = $params['hash'] ?? ''; unset($params['hash']);

        // Sort the keys, build the data-check-string
        ksort($params);
        $dataCheckString = implode("\n", array_map(
            fn($k, $v) => "$k=$v",
            array_keys($params),
            array_values($params)
        ));

        // Secret: HMAC-SHA256 of the bot token with the key "WebAppData"
        $secretKey = hash_hmac('sha256', $this->botToken, 'WebAppData', true);
        $expected = hash_hmac('sha256', $dataCheckString, $secretKey);

        // Check the timestamp (no older than 24 hours)
        $authDate = (int)($params['auth_date'] ?? 0);
        if (time() - $authDate > 86400) {
            return false;
        }

        return hash_equals($expected, $hash);
    }

    public function extractUser(string $initData): ?array
    {
        parse_str($initData, $params);
        return json_decode($params['user'] ?? '{}', true);
    }
}

בעת ההתחברות הראשונה דרך Mini App, אנו מתאימים את ה-user_id של Telegram עם לקוח ב-Bitrix באמצעות השדה המותאם אישית UF_TELEGRAM_ID. אם המשתמש לא נמצא, נוצר משתמש חדש עם קבוצת "Customers".

נקודות קצה של API עבור ה-Mini App

קטלוג המוצרים, הסל וההזמנות מיושמים באמצעות מטפלי Bitrix REST מותאמים אישית. סט טיפוסי: קטלוג עם עימוד, הוספה/הסרה מהסל ויצירת הזמנה. דוגמה לבקר קטלוג:

class CatalogController {
    public function index(Request $request): JsonResponse {
        $elements = \CIBlockElement::GetList(
            ['SORT' => 'ASC'],
            ['IBLOCK_ID' => CATALOG_IBLOCK_ID, 'ACTIVE' => 'Y'],
            false,
            ['nPageSize' => 20, 'iNumPage' => (int)$request->get('page', 1)],
            ['ID', 'NAME', 'PREVIEW_TEXT', 'PREVIEW_PICTURE', 'PROPERTY_PRICE', 'PROPERTY_ARTICLE']
        );
        $items = [];
        while ($row = $elements->GetNextElement()) {
            $fields = $row->GetFields();
            $props = $row->GetProperties();
            $items[] = [
                'id' => (int)$fields['ID'],
                'name' => $fields['NAME'],
                'text' => $fields['PREVIEW_TEXT'],
                'image' => \CFile::GetPath($fields['PREVIEW_PICTURE']),
                'price' => (float)($props['PRICE']['VALUE'] ?? 0),
            ];
        }
        return new JsonResponse(['items' => $items]);
    }
}

תהליך פיתוח שלב אחר שלב

1. קטלוג וניתוח דרישות — אנו בוחנים בלוקים של מידע, הצעות מסחר ומחירים. אנו מגדירים את מערך התכונות ל-MVP.
2. עיצוב ארכיטקטורה — אנו מפתחים REST API בצד Bitrix, סכמות נתונים לסל ולזמנות. אנו משתמשים ב-ORM ובמטמון מתויג לביצועים.
3. פיתוח Mini App — אנו יוצרים אפליקציית React עם רכיבים לקטלוג, לסל ולקופה.
4. אינטגרציה עם Bitrix — אנו מחברים את ה-API, מגדירים אימות באמצעות initData וקישור משתמשים.
5. הגדרת Telegram Payments — אנו רושמים את הספק, יוצרים חשבוניות ומטפלים בקריאות חוזרות.
6. בדיקות — אנו בודקים עם משתמשים אמיתיים ומתקנים באגים.
7. פריסה והשקה — אנו מפרסמים את ה-Mini App דרך @BotFather ומגדירים ניטור.
8. תמיכה — 30 ימי תמיכה בחינם לאחר ההשקה.

למה Telegram Mini App עדיף על אפליקציה לנייד?

Mini App משלב מחסום כניסה נמוך, פריסה מהירה והמרה גבוהה הודות למסנג'ר המובנה. זו האפשרות האידיאלית לחנויות מקוונות שרוצות להשיק מכירות לנייד במהירות ללא העלות של אפליקציות נייטיביות.

תשלום באמצעות Telegram Payments

Telegram תומך בתשלום מובנה דרך ספקים (YooKassa וכדומה). בצד Bitrix נוצרת חשבונית דרך Bot API:

public function createInvoice(int $orderId, int $bitrixUserId): string {
    $order = \Bitrix\Sale\Order::load($orderId);
    $response = $this->botApiPost('createInvoiceLink', [
        'title' => 'Order #' . $orderId,
        'description' => 'Payment for order ' . $order->getField('ACCOUNT_NUMBER'),
        'payload' => json_encode(['order_id' => $orderId, 'user_id' => $bitrixUserId]),
        'provider_token' => PAYMENT_PROVIDER_TOKEN,
        'currency' => 'RUB',
        'prices' => [['label' => 'Total', 'amount' => (int)($order->getPrice() * 100)]],
    ]);
    return $response['result']; // invoice_link
}

לאחר התשלום, ה-Mini App מקבל callback ומעדכן את סטטוס ההזמנה ב-Bitrix. הקונה מקבל התראה דרך הבוט.

מה כלול בעבודה

• רישום בוט והגדרת Mini App דרך @BotFather
• פיתוח אפליקציית React: קטלוג, עמוד מוצר, סל קניות, תשלום
• אימות initData בצד Bitrix עם הגנה מפני זיוף
• קישור משתמש Telegram ללקוח ב-Bitrix (דרך UF_TELEGRAM_ID)
• REST API: קטלוג, סל קניות, הזמנות, סטטוסים, התראות
• (אופציונלי) אינטגרציה עם Telegram Payments לתשלום בלחיצה אחת
• התראות ללקוחות דרך הבוט: שינויי סטטוס הזמנה, קודי קופון
• תיעוד API ומדריך תפעול
• הדרכת מנהלים לעבודה עם לוח הבקרה
• תמיכה למשך 30 יום לאחר ההשקה

לוח זמנים לפיתוח

העלות מחושבת באופן אישי לאחר ניתוח הקטלוג והדרישות שלך. הזמן אינטגרציה — נכין הצעה מסחרית תוך 1-2 ימים. קבל ייעוץ ממהנדס מנוסה.

ההבטחות שלנו: עלות קבועה בכל שלב, לוחות זמנים שקופים, מסירת כל שלב עם תעודת קבלה חתומה. אנו עובדים עם 1C-Bitrix החל מגרסאות עדכניות, ותומכים בהחלפת CommerceML, REST API וקטלוגים בעומס גבוה של עד 500,000 מוצרים. צור קשר כדי להעריך את הפרויקט שלך.