Supabase Backend as a Service · درس

دمج الوظائف مع تطبيقكم

تعلّموا استدعاء Edge Functions المنشورة من تطبيقكم على جانب العميل ومعالجة استجاباتها.

دمج الوظائف مع تطبيقكم درس مجاني في Supabase Backend as a Service على CoddyKit. هذا هو الدرس 3 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Supabase Backend as a Service، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Supabase Backend as a Service 4 دروس في المجموع.

بعض أجزاء هذا الدرس لم تُترجم بعد وتظهر باللغة الإنجليزية.

Calling Your Edge Functions

You've learned to deploy Edge Functions. Now, let's connect them to your client application! This is where your app truly becomes dynamic.

Integrating functions allows your app to trigger server-side logic, process data, or interact with external services without managing a dedicated backend server.

How Clients Talk to Functions

Supabase Edge Functions are essentially HTTP endpoints. Your client application communicates with them by making standard HTTP requests.

The Supabase client library simplifies this process, providing a clean way to invoke your deployed functions directly from your JavaScript, TypeScript, or other supported client environments.

The `invoke()` Method

The primary method for calling an Edge Function from your client is supabase.functions.invoke().

It takes two main arguments:

Function Name: The name of your deployed Edge Function.
Options Object (optional): An object to pass data (payload) or configure the request.

Basic Invocation Syntax

Let's look at the basic structure for invoking an Edge Function without sending any specific data. You'll often use async/await for cleaner asynchronous code.

Invoking a 'Hello' Function

Imagine you have a simple Edge Function named 'hello-world' that just returns a 'Hello!' message. Here's how you'd call it:

import { createClient } from '@supabase/supabase-js'

const supabaseUrl = 'YOUR_SUPABASE_URL'
const supabaseAnonKey = 'YOUR_SUPABASE_ANON_KEY'

const supabase = createClient(supabaseUrl, supabaseAnonKey)

async function callHelloWorld() {
  try {
    const { data, error } = await supabase.functions.invoke('hello-world')
    if (error) {
      console.error('Error:', error.message)
    } else {
      console.log('Response:', data)
    }
  } catch (err) {
    console.error('Network error:', err.message)
  }
}

// Call the function to see the output
callHelloWorld()

Passing Data to Functions

Most real-world functions need input data. You can send a JSON payload to your Edge Function using the body property within the options object.

The body will be accessible inside your Edge Function via the request object.

Invoking with a Payload

Let's say you have a function called 'greet-user' that expects a name. Here's how to send that data:

import { createClient } from '@supabase/supabase-js'

const supabaseUrl = 'YOUR_SUPABASE_URL'
const supabaseAnonKey = 'YOUR_SUPABASE_ANON_KEY'

const supabase = createClient(supabaseUrl, supabaseAnonKey)

async function callGreetUser(userName) {
  try {
    const { data, error } = await supabase.functions.invoke('greet-user', {
      body: { name: userName }
    })
    if (error) {
      console.error('Error:', error.message)
    } else {
      console.log('Greeting:', data)
    }
  } catch (err) {
    console.error('Network error:', err.message)
  }
}

// Try it with your name!
callGreetUser('Coddy')

Handling Function Responses

When you invoke an Edge Function, the supabase.functions.invoke() call returns an object containing data and error properties.

data: Contains the successful response from your function.
error: Contains details if an error occurred during invocation or within the function itself.

Processing the Response

It's crucial to check for errors and handle both success and failure states. Your client application should gracefully manage these scenarios.

import { createClient } from '@supabase/supabase-js'

const supabaseUrl = 'YOUR_SUPABASE_URL'
const supabaseAnonKey = 'YOUR_SUPABASE_ANON_KEY'

const supabase = createClient(supabaseUrl, supabaseAnonKey)

async function processResponseExample() {
  const payload = { item: 'book', quantity: 2 }
  try {
    const { data, error } = await supabase.functions.invoke('process-order', {
      body: payload
    })

    if (error) {
      console.error('Order processing failed:', error.message)
      // Display an error message to the user
    } else {
      console.log('Order processed successfully:', data)
      // Update UI with success message or results
    }
  } catch (networkError) {
    console.error('Network or unexpected error:', networkError.message)
    // Handle connectivity issues
  }
}

processResponseExample()

Error Handling & Best Practices

Always implement robust error handling. Supabase's invoke method catches network errors in the catch block, and function-specific errors in the returned error object.

Frontend Validation: Validate input before sending.
User Feedback: Show loading states, success messages, or clear error messages.
Logging: Log errors for debugging.

Function Invocation Quiz

You're calling an Edge Function named 'calculate-total' and passing a JSON object { price: 10, quantity: 3 }. Which of the following code snippets correctly invokes the function and handles a potential error?

Functions in Your App

Great job! You've learned how to integrate Supabase Edge Functions into your client-side applications.

Use supabase.functions.invoke() to call functions.
Pass data using the body property in the options object.
Always handle both successful data and potential error responses.

This knowledge empowers you to build dynamic, interactive features powered by serverless logic directly from your app!

الأسئلة الشائعة

هل درس «دمج الوظائف مع تطبيقكم» مجاني؟

نعم — نص درس «دمج الوظائف مع تطبيقكم» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Supabase Backend as a Service، انتقل إلى CoddyKit PRO. تتضمن دورة Supabase Backend as a Service 4 دروس في المجموع.

ماذا ستتعلم في «دمج الوظائف مع تطبيقكم»؟

تعلّموا استدعاء Edge Functions المنشورة من تطبيقكم على جانب العميل ومعالجة استجاباتها. تتمرن على Supabase Backend as a Service مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ Supabase Backend as a Service؟

لا تُشترط خبرة سابقة. Supabase Backend as a Service على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 3 من أصل 4.

كم من الوقت يستغرق درس «دمج الوظائف مع تطبيقكم»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس Supabase Backend as a Service هذا؟

نعم. كل درس في Supabase Backend as a Service يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

مقدمة إلى Edge Functions
نشر وظيفتكم الأولى
دمج الوظائف مع تطبيقكم
الأسرار ومتغيرات البيئة والوظائف المجدولة

← العودة إلى Supabase Backend as a Service