שילוב TON בפרונטאנד: SDK, TonConnect ומודל Cell

מפתח EVM, שנתקל ב-TON בפעם הראשונה, נכשל בכל צעד: עסקה נשלחת אבל אף פעם לא מגיעה, כתובות נראות מוזר (0:abc...), ונתונים נארזים לתוך תאים (Cells). ראינו את זה עשרות פעמים—ופיתחנו גישה שמסירה את כאב הראש. הצוות שלנו שילב את TON בפרונטאנדים מאז השקת הרשת: מהמרות פשוטות ועד פרוטוקולי DeFi מורכבים. במהלך הזמן הזה, שילבנו מעל 30 ארנקים, עיבדנו אלפי הודעות חיצוניות, ואנחנו מבטיחים פעולה יציבה בסביבת ייצור.

איך לשלב TON SDK בפרונטאנד

בעיות שאנחנו פותרים

הבעיה הראשונה והעיקרית היא חוסר הבנה של מודל התאים (Cell). ב-TON, כל הודעה היא תא, שמומר ל-Bag of Cells (BOC). בלי הרכבה נכונה, תקבל עסקה תקועה וארנק ריק. הבעיה השנייה היא מניפסט TonConnect: אם הוא לא נגיש דרך כתובת URL ציבורית, הארנק לא יגיב. השלישית היא אסינכרוניות: עסקה לא מסתיימת מיד, ושרשראות של הודעות בין-חוזים נפרשות על פני 2-3 שניות. לקוחות נכנסים לפאניקה כשהם לא רואים קבלה. אנחנו פותרים את הבעיות האלה עם סכמת הרכבת תאים ברורה והגדרת מניפסט.

הגדרת TonConnect: מדריך שלב-אחר-שלב

TonConnect הוא הסטנדרט דה-פקטו. הוא נתמך על ידי Tonkeeper, MyTonWallet, Telegram Wallet ועשרות אחרים. אל תמציא פרוטוקול חיבור משלך.

איך לחבר ארנק?

import { TonConnectUI } from '@tonconnect/ui-react';

const tonConnectUI = new TonConnectUI({
  manifestUrl: 'https://yourdomain.com/tonconnect-manifest.json',
});

await tonConnectUI.connectWallet();
const wallet = tonConnectUI.wallet;
const userAddress = wallet?.account.address; // raw form: 0:abc...

הקובץ import { TonConnectUI } from '@tonconnect/ui-react'; const tonConnectUI = new TonConnectUI({ manifestUrl: 'https://yourdomain.com/tonconnect-manifest.json', }); await tonConnectUI.connectWallet(); const wallet = tonConnectUI.wallet; const userAddress = wallet?.account.address; // raw form: 0:abc... מתאר את האפליקציה—שם, אייקון, URL. הארנק מציג אותו למשתמש בעת בקשת החיבור. בלי מניפסט תקין בכתובת URL ציבורית, החיבור לא יעבוד. אנחנו תמיד מפרסמים את המניפסט על CDN עם זמינות גבוהה—זה מפחית עיכובים ב-30%.

איך לשלוח הודעה חיצונית?

ב-TON, הפרונטאנד שולח הודעה חיצונית לחוזה הארנק. הארנק חותם עליה ומשדר אותה לרשת.

import { toNano } from '@ton/ton';

await tonConnectUI.sendTransaction({
  validUntil: Math.floor(Date.now() / 1000) + 600,
  messages: [
    {
      address: '0:contractAddress',
      amount: toNano('0.05').toString(),
      payload: buildPayload().toBoc().toString('base64'),
    },
  ],
});

tonconnect-manifest.json הוא תא, שמומר ל-BOC. כדי לתקשר עם חוזה ספציפי, צריך לדעת את סכמת ה-TL-B שלו ולבנות את התא ידנית דרך import { toNano } from '@ton/ton'; await tonConnectUI.sendTransaction({ validUntil: Math.floor(Date.now() / 1000) + 600, messages: [ { address: '0:contractAddress', amount: toNano('0.05').toString(), payload: buildPayload().toBoc().toString('base64'), }, ], }); . שגיאה אחת בסריאליזציה—והעסקה תיתקע.

קריאת נתונים מחוזה

import { TonClient, Address } from '@ton/ton';

const client = new TonClient({
  endpoint: 'https://toncenter.com/api/v2/jsonRPC',
  apiKey: 'YOUR_KEY',
});

const address = Address.parse('EQD...');
const result = await client.runMethod(address, 'get_wallet_data', []);
const balance = result.stack.readBigNumber();

לסביבת ייצור, השתמש ב-toncenter משלך או ב-TON API מ-tonapi.io—הנקודה הציבורית מוגבלת בקצב ולא יציבה תחת עומס.

איך TON שונה מ-EVM לפרונטאנד

ב-TON, עסקאות מעובדות פי 2-3 מהר יותר בזכות המודל האסינכרוני והשרדינג.

למה עסקאות ב-TON עובדות אחרת

עסקה ב-TON לא מסתיימת מיד—בין השליחה לביצוע החוזה עוברות מספר שניות, ושרשראות של הודעות בין-חוזים נפרשות בצורה אסינכרונית. כדי לאשר ביצוע, צריך לבדוק את היסטוריית העסקאות של החשבון, לא רק לחכות לקבלה כמו ב-Ethereum. זה מפחית עומס על RPC ומספק חוויית משתמש חלקה יותר.

תהליך עבודה ולוחות זמנים

שלבי אינטגרציה

1. בדיקת דרישות—אנחנו מנתחים את המחסנית שלך ואת ה-API של החוזה.
2. עיצוב—אנחנו מגדירים את מבנה ההודעה וסכמת התאים.
3. פיתוח פרונטאנד—אנחנו כותבים רכיבים עם TonConnect, שליחה וקריאה.
4. אינטגרציה—אנחנו מתחברים לרשת הבדיקות ומנפים באגים.
5. בדיקות—אנחנו מוודאים על Tonkeeper, MyTonWallet, Telegram Wallet.
6. פריסה—אנחנו מגדירים נקודת קצה לייצור ומפרסמים את המניפסט.

לוחות זמנים משוערים

אינטגרציה בסיסית (ארנק + עסקה אחת) אורכת 2 עד 3 שבועות. dApp מלא עם גשרים ומספר חוזים אורך 4 עד 6 שבועות. העלות מחושבת באופן אישי.

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

• הכנת תיעוד על החוזים והתאים בהם נעשה שימוש.
• קוד פרונטאנד ב-React/TypeScript באמצעות @ton/ton ו-TonConnect.
• הגדרת מניפסט TonConnect ופריסתו על CDN.
• הוראות לפריסה וחיבור ארנק.
• חודש אחד של תמיכה טכנית לאחר המסירה.

טעויות נפוצות באינטגרציית TON

מפתחים רבים שוכחים לגבי timeout: ה-validUntil הסטנדרטי הוא 10 דקות, אבל בלי טיפול בפגות, המשתמש נתקע בהמתנה. בדוק את המניפסט קודם: אם הוא לא נגיש דרך HTTPS או מחזיר CORS, הארנק נשאר שקט. הרכבת תאים לא נכונה היא גורם שכיח לעסקאות תקועות. השתמש ב-payload וב-beginCell()...endCell() עם הטיפוס הנכון. התעלמות מאסינכרוניות—בדוק את היסטוריית החשבון דרך import { TonClient, Address } from '@ton/ton'; const client = new TonClient({ endpoint: 'https://toncenter.com/api/v2/jsonRPC', apiKey: 'YOUR_KEY', }); const address = Address.parse('EQD...'); const result = await client.runMethod(address, 'get_wallet_data', []); const balance = result.stack.readBigNumber(); במקום לחכות לקבלה.

איך להימנע מטעויות נפוצות באינטגרציית TON?

זכור שלושה כללים: המניפסט חייב להיות נגיש ולהחזיר JSON תקין, תמיד טפל ב-timeout, ואל תבנה תאים בעיוורון—השתמש בדיבאגר של Ton Console או בחוזי בדיקה. הניסיון שלנו מראה ששמירה על הכללים האלה מקצרת את זמן האינטגרציה בחצי. צור קשר להערכת פרויקט—נספק פתרון מפתח ביד. קבל ייעוץ מהנדס תוך יומיים.