Ana içeriğe geç

Bir form gönderme

Bu örnekte, OneEntry API'sini kullanarak bir formun nasıl gönderileceğini gösteriyoruz.

✅ Senaryonun amacı:

  • OneEntry Platform'dan form yapılandırmasını almak
  • Bir iletişim formundan kullanıcı girişi verilerini toplamak.
  • Verilerin gönderimden önce doğru biçimlendirildiğinden ve doğrulandığından emin olmak.
  • Toplanan verileri OneEntry API'sine göndermek.

✅ İhtiyacınız olanlar:

  • OneEntry API'si ile kimlik doğrulama için geçerli bir PROJECT_URL ve APP_TOKEN.
  • Bir işaretçi (örneğin, 'contact_us') ile tanımlanan OneEntry'de önceden yapılandırılmış bir form.
  • Önceden yapılandırılmış form alanları.

📌 Önemli:

  • API istekleri sırasında olası hataları nazikçe ele alarak kullanıcılara geri bildirim sağlamak.
  • Veri gizliliği ve güvenliğini sağlamak, özellikle e-posta adresleri gibi hassas bilgileri işlerken.
  • Form alanlarını ve işaretçilerini arka uç yapılandırmasıyla senkronize tutmak, uyumsuzlukları önlemek için.
  • Bu örnekler hata işleme içermemektedir.
  • Hataları bir try-catch bloğu kullanarak veya await Promise.catch((error) => error) gibi bir yapı kullanarak yönetebilirsiniz.

Senaryo​

1. SDK'dan defineOneEntry'i içe aktarın ve url ile token'ı tanımlayın​

Örnek:

import { defineOneEntry } from 'oneentry';

const PROJECT_URL = 'your-project-url';
const APP_TOKEN = 'your-app-token';

2. defineOneEntry() fonksiyonu ile bir API istemcisi oluşturma​

Örnek:

const { Forms, FormData } = defineOneEntry(PROJECT_URL, {
  token: APP_TOKEN,
});

3. Forms.getFormByMarker() ile formu alın​

Örnek:

const formData = await Forms.getFormByMarker('contact_us');
Sonuç:
{
  "id": 3,
  "attributeSetId": 2,
  "type": "data",
  "localizeInfos": {
    "title": "Bize ulaşın",
    "titleForSite": "",
    "successMessage": "Veri işleme başarılı mesajı",
    "unsuccessMessage": "Veri işleme başarısız mesajı",
    "urlAddress": "",
    "database": "0",
    "script": "0"
  },
  "version": 5,
  "position": 1,
  "identifier": "contact_us",
  "processingType": "script",
  "templateId": null,
  "attributes": [
    {
      "type": "string",
      "marker": "first_name",
      "isLogin": null,
      "isSignUp": null,
      "position": 1,
      "settings": {},
      "isVisible": true,
      "listTitles": [],
      "validators": {
        "requiredValidator": {
          "strict": true
        }
      },
      "localizeInfos": {
        "title": "Ad"
      },
      "additionalFields": [],
      "isNotificationEmail": null,
      "isNotificationPhoneSMS": null,
      "isNotificationPhonePush": null
    },
    {
      "type": "string",
      "marker": "email",
      "isLogin": null,
      "isSignUp": null,
      "position": 2,
      "settings": {},
      "isVisible": true,
      "listTitles": [],
      "validators": {
        "requiredValidator": {
          "strict": true
        },
        "emailInspectionValidator": true
      },
      "localizeInfos": {
        "title": "E-posta"
      },
      "additionalFields": [],
      "isNotificationEmail": null,
      "isNotificationPhoneSMS": null,
      "isNotificationPhonePush": null
    },
    {
      "type": "string",
      "marker": "surname",
      "isLogin": null,
      "isSignUp": null,
      "position": 3,
      "settings": {},
      "isVisible": true,
      "listTitles": [],
      "validators": {
        "stringInspectionValidator": {
          "stringMax": 0,
          "stringMin": 0,
          "stringLength": 0
        }
      },
      "localizeInfos": {
        "title": "Soyad"
      },
      "additionalFields": [],
      "isNotificationEmail": null,
      "isNotificationPhoneSMS": null,
      "isNotificationPhonePush": null
    },
    {
      "type": "list",
      "marker": "topic",
      "isLogin": null,
      "isSignUp": null,
      "position": 4,
      "settings": {},
      "isVisible": true,
      "listTitles": [
        {
          "title": "Makale",
          "value": "article",
          "extended": {
            "type": null,
            "value": null
          },
          "position": 1
        },
        {
          "title": "Makale-2",
          "value": "article-2",
          "extended": {
            "type": null,
            "value": null
          },
          "position": 2
        }
      ],
      "validators": {
        "requiredValidator": {
          "strict": true
        }
      },
      "localizeInfos": {
        "title": "Konu"
      },
      "additionalFields": [],
      "isNotificationEmail": null,
      "isNotificationPhoneSMS": null,
      "isNotificationPhonePush": null
    },
    {
      "type": "text",
      "marker": "text",
      "isLogin": null,
      "isSignUp": null,
      "position": 5,
      "settings": {},
      "isVisible": true,
      "listTitles": [],
      "validators": {},
      "localizeInfos": {
        "title": "Metin"
      },
      "additionalFields": [],
      "isNotificationEmail": null,
      "isNotificationPhoneSMS": null,
      "isNotificationPhonePush": null
    },
    {
      "type": "spam",
      "marker": "spam",
      "isLogin": null,
      "isSignUp": null,
      "position": 6,
      "settings": {},
      "isVisible": true,
      "listTitles": [],
      "validators": {},
      "localizeInfos": {
        "title": "Robot değil misiniz?"
      },
      "additionalFields": [],
      "isNotificationEmail": null,
      "isNotificationPhoneSMS": null,
      "isNotificationPhonePush": null
    },
    {
      "type": "button",
      "marker": "send",
      "isLogin": null,
      "isSignUp": null,
      "position": 7,
      "settings": {},
      "isVisible": true,
      "listTitles": [],
      "validators": {},
      "localizeInfos": {
        "title": "Gönder"
      },
      "additionalFields": [],
      "isNotificationEmail": null,
      "isNotificationPhoneSMS": null,
      "isNotificationPhonePush": null
    }
  ],
  "moduleFormConfigs": [
    {
      "id": 2,
      "moduleIdentifier": "content",
      "isGlobal": false,
      "isClosed": false,
      "viewOnlyUserData": false,
      "commentOnlyUserData": false,
      "entityIdentifiers": [
        {
          "id": "services",
          "isNested": false
        }
      ]
    }
  ]
}

4. Form gönderimi için ek ayarları alın​

Örnek:

const moduleFormConfig = formData?.moduleFormConfigs?.[0];

5. Ön uç Form'dan alan verilerini alın​

Örnek:

[
  {
    "marker": "first_name",
    "value": "Adınız"
  },
  {
    "marker": "surname",
    "value": "Soyadınız"
  },
  {
    "marker": "email",
    "value": "your@email.com"
  },
  {
    "marker": "topic",
    "value": [
      "article"
    ]
  },
  {
    "marker": "text",
    "value": [
      {
        "plainValue": "Bazı metinler"
      }
    ]
  }
]

6. OneEntry Form ile kullanmak için verileri dönüştürün​

Örnek:

const transformedFormData = fieldsData.map((field: any) => {
  const { marker, value } = field;
  const formField = formFields.find(
    (field: { marker: string }) => field.marker === marker,
  );
  const { type } = formField;

  return {
    marker,
    type,
    value,
  }
});
Sonuç:
[
  {
    "marker": "first_name",
    "type": "string",
    "value": "Adınız"
  },
  {
    "marker": "surname",
    "type": "string",
    "value": "Soyadınız"
  },
  {
    "marker": "email",
    "type": "string",
    "value": "your@email.com"
  },
  {
    "marker": "topic",
    "type": "list",
    "value": [
      "article"
    ]
  },
  {
    "marker": "text",
    "type": "text",
    "value": [
      {
        "plainValue": "Bazı metinler"
      }
    ]
  }
]

7. FormData.postFormsData() ile FormsData gönderin​

Örnek:

const formResponse = await FormData.postFormsData({
  formIdentifier: 'contact_us',
  formData: transformedFormData,
  formModuleConfigId: moduleFormConfig?.id || 0,
  moduleEntityIdentifier: moduleFormConfig?.entityIdentifiers?.[0]?.id || '',
  replayTo: null,
  status: 'sent',
});
Sonuç:
{
  "formData": {
    "formIdentifier": "contact_us",
    "time": "2025-11-17T12:51:20.172Z",
    "formData": [
      {
        "marker": "first_name",
        "type": "string",
        "value": "Adınız"
      },
      {
        "marker": "surname",
        "type": "string",
        "value": "Soyadınız"
      },
      {
        "marker": "email",
        "type": "string",
        "value": "your@email.com"
      },
      {
        "marker": "topic",
        "type": "list",
        "value": [
          "article"
        ]
      },
      {
        "marker": "text",
        "type": "text",
        "value": [
          {
            "plainValue": "Bazı metinler"
          }
        ]
      }
    ],
    "entityIdentifier": "services",
    "fingerprint": "UQ_rrofe2",
    "isUserAdmin": false,
    "formModuleId": 2,
    "userIdentifier": null,
    "parentId": null,
    "id": 120
  },
  "actionMessage": "Veri işleme başarılı mesajı"
}

Son örnek​

// 1. SDK'dan defineOneEntry'i içe aktarın ve PROJECT_URL ile APP_TOKEN'ı tanımlayın
import { defineOneEntry } from 'oneentry';

const PROJECT_URL = 'your-project-url';
const APP_TOKEN = 'your-app-token';

// 2. Bir API istemcisi oluşturma 
const { Forms, FormData } = defineOneEntry(PROJECT_URL, {
  token: APP_TOKEN,
});

// 3. Formu alın ve alanları pozisyona göre sıralayın
const formData = await Forms.getFormByMarker('contact_us');
const formFields = formData?.attributes.slice().sort(
  (a: { position: number }, b: { position: number }) =>
    a.position - b.position,
);

// 4. Bu, form gönderimi için ek ayarları içerir
const moduleFormConfig = formData?.moduleFormConfigs?.[0];

// 5. Ön uç Form'dan alan verilerini alın
const fieldsData = [
  {
    marker: 'first_name',
    value: 'Adınız',
  },
  {
    marker: 'surname',
    value: 'Soyadınız',
  },
  {
    marker: 'email',
    value: 'your@email.com',
  },
  {
    marker: 'topic',
    value: [
      'article',
    ],
  },
  {
    marker: 'text',
    value: [
      {
        plainValue: 'Bazı metinler',
      },
    ],
  },
];

// 6. OneEntry Form ile kullanmak için verileri dönüştürün 
const transformedFormData = fieldsData.map((field: any) => {
  const { marker, value } = field;
  const formField = formFields.find(
    (field: { marker: string }) => field.marker === marker,
  );
  const { type } = formField;

  return {
    marker,
    type,
    value,
  };
});

// 7. FormsData gönderin
const formResponse = await FormData.postFormsData({
  formIdentifier: 'contact_us',
  formData: transformedFormData,
  formModuleConfigId: moduleFormConfig?.id || 0,
  moduleEntityIdentifier: moduleFormConfig?.entityIdentifiers?.[0]?.id || '',
  replayTo: null,
  status: 'sent',
});
console.log(formResponse);