สร้าง API Proxy Server สำหรับไม่มีรหัส

เมื่อทำงานกับเครื่องมือที่ไม่มีรหัสเช่น Bubble การจัดการกับข้อมูล API มักจะเป็นประสบการณ์ที่น่าผิดหวัง คุณอาจพบว่าตัวเองอยู่ในสถานการณ์ที่คุณต้องการจัดการหรือแปลงข้อมูลก่อนที่คุณจะสามารถใช้งานได้อย่างมีประสิทธิภาพในแอปพลิเคชันของคุณ น่าเสียดายที่ข้อ จำกัด ของเครื่องมือที่ไม่มีรหัสสามารถทำให้งานนี้รู้สึกเหมือนการต่อสู้ที่ยากลำบาก คุณอาจพบว่าตัวเองหันไปหาวิธีแก้ปัญหาที่ซับซ้อนหรือแม้แต่เลิกโดยสิ้นเชิง

แต่ถ้ามีวิธีที่จะเอาชนะข้อ จำกัด เหล่านี้ล่ะ? ป้อนแนวคิดของพร็อกซีเซิร์ฟเวอร์ ด้วยการตั้งค่าพร็อกซีเซิร์ฟเวอร์คุณสามารถสกัดกั้นการโทร API ที่ทำโดยแอปพลิเคชันที่ไม่มีรหัสของคุณและทำการแปลงข้อมูลได้ทันที ซึ่งหมายความว่าคุณสามารถตอบสนอง API ดิบปรับเปลี่ยนให้เหมาะกับความต้องการของคุณแล้วส่งผ่านไปยังเครื่องมือที่ไม่มีรหัสสำหรับการรวมที่ราบรื่น

ตอนนี้ความคิดในการตั้งค่าพร็อกซีเซิร์ฟเวอร์อาจฟังดูน่ากลัวโดยเฉพาะอย่างยิ่งหากคุณไม่คุ้นเคยกับการเข้ารหัส แต่นี่เป็นข่าวดี: มันไม่น่ากลัวอย่างที่คิด ด้วยวิธีการและเครื่องมือที่ถูกต้องคุณสามารถสร้างเซิร์ฟเวอร์พร็อกซี API ที่ไม่มีเซิร์ฟเวอร์ที่จัดการกับการแปลงข้อมูลให้คุณโดยไม่จำเป็นต้องมีโครงสร้างพื้นฐานที่ซับซ้อนหรือการจัดการเซิร์ฟเวอร์

ในบทความนี้เราจะแนะนำคุณทีละขั้นตอนในการสร้างเซิร์ฟเวอร์พร็อกซี API แบบไร้เซิร์ฟเวอร์ที่เหมาะสำหรับแอปพลิเคชันที่ไม่มีรหัสของคุณ พร็อกซีเซิร์ฟเวอร์นี้จะทำหน้าที่เป็นสะพานเชื่อมระหว่างแพลตฟอร์มที่ไม่มีรหัสและ API ของคุณช่วยให้คุณสามารถปรับแต่งการตอบสนอง API เพื่อให้เหมาะกับความต้องการของแอปพลิเคชันของคุณ ในตอนท้ายของคู่มือนี้คุณจะมีโซลูชันที่แข็งแกร่งซึ่งช่วยเพิ่มขีดความสามารถในการพัฒนาที่ไม่มีรหัสและปลดล็อควิธีการใหม่ในการทำงานกับข้อมูล API

ดังนั้นเรามาดำน้ำและดูว่าคุณสามารถควบคุมการแปลงข้อมูล API ของคุณได้อย่างไรและปรับปรุงเวิร์กโฟลว์การพัฒนาที่ไม่มีรหัสของคุณ

คนงาน Cloudflare

คนงาน Cloudflare เป็นอินสแตนซ์การประมวลผลแบบคลาวด์แบบไม่มีเซิร์ฟเวอร์ … กล่าวอีกนัยหนึ่งคุณสามารถเรียกใช้จาวาสคริปต์ในคลาวด์และไม่ต้องจัดการกับการตั้งค่าเซิร์ฟเวอร์ของคุณเอง และส่วนที่ดีที่สุดคือ CloudFlare มีแผนฟรี

ลงทะเบียนสำหรับ CloudFlare

อันดับแรก ลงทะเบียนบัญชี ด้วย CloudFlare ถ้าคุณยังไม่มี คุณสามารถข้ามการลงทะเบียนเว็บไซต์และคลิก“ สำรวจผลิตภัณฑ์อื่น ๆ ”

สร้าง Good day World Employee

ทางด้านซ้าย NAV คลิก“ คนงานและหน้า” ที่กึ่งกลางของหน้าจอคลิก“ สร้างคนงาน”

ต่อไปคุณจะสร้าง Good day World Employee ที่เรียบง่าย คลิก“ ปรับใช้” ที่ด้านล่างของหน้าจอและในที่สุดคลิก URL ที่ปรับใช้ซึ่งมีลักษณะเช่น: https://hello-world-calm-bird-9b18.mad-be1.employees.dev/

ยินดีด้วย! พนักงานสวัสดีโลกของคุณกำลังทำงานอยู่

พร็อกซีและหม้อแปลง

ตั้งค่าพร็อกซี

กลับมาที่หน้าจอด้วย URL ของคนงานคลิก“ แก้ไขรหัส”

ทางด้านซ้ายจะเป็นรหัส Good day World ลบรหัสนี้และแทนที่ด้วย:

addEventListener('fetch', occasion => {
  occasion.respondWith(handleRequest(occasion.request));
});

async perform handleRequest(request) {
  const apiKey = request.headers.get('Authorization');

  if (!apiKey) {
    return new Response('Lacking Authorization header', { standing: 401 });
  }

  const profileKey = request.headers.get('Profile-Key');

  let apiUrl;
  let requestOptions;

  if (request.technique === 'GET') {
    // Get the API endpoint from the question parameter
    apiUrl = new URL(request.url).searchParams.get('endpoint');

    if (!apiUrl) {
      return new Response('Lacking endpoint parameter', { standing: 400 });
    }

    // Decode the URL-encoded endpoint
    apiUrl = decodeURIComponent(apiUrl);

    requestOptions = {
      technique: 'GET',
      headers: {
        'Authorization': apiKey,
        'Content material-Sort': 'software/json',
      },
    };

    if (profileKey) {
      requestOptions.headers('Profile-Key') = profileKey;
    }
  } else if (request.technique === 'POST' || request.technique === 'PUT') {
    // Parse the request physique as JSON
    const requestBody = await request.json();

    apiUrl = requestBody.endpoint ?? new URL(request.url).searchParams.get('endpoint');

    if (!apiUrl) {
      return new Response('Lacking endpoint parameter', { standing: 400 });
    }

    requestOptions = {
      technique: request.technique,
      headers: {
        'Authorization': apiKey,
        'Content material-Sort': 'software/json',
      },
      physique: JSON.stringify(requestBody),
    };

    if (profileKey) {
      requestOptions.headers('Profile-Key') = profileKey;
    }
  } else {
    return new Response('Methodology not allowed', { standing: 405 });
  }

  attempt {
    // Make the API request with the suitable choices
    const response = await fetch(apiUrl, requestOptions);

    // Parse the response JSON
    const information = await response.json();

    // Remodel the information construction based mostly on the endpoint
    const transformedData = transformData(information, apiUrl);

    // Return the remodeled information because the response with the returned response.standing
    return new Response(JSON.stringify(transformedData), {
      standing: response.standing,
      headers: { 'Content material-Sort': 'software/json' },
    });
  } catch (error) {
    // Deal with any errors
    return new Response('Error occurred', { standing: 500 });
  }
}

perform transformData(information, apiUrl) {
  const endpoint = apiUrl.cut up('/').pop();

  change (endpoint) {
    case 'endpoint':
      // Test if the information is an object with a "information" property
      if (information && typeof information === 'object' && 'information' in information) {
        // Remodel the information construction
        const transformedData = {
          information: (information.information),
        };
        return transformedData;
      }
      break;
    case 'consumer':
      // Test if the consumer endpoint is an object
      if (information && typeof information === 'object') {
        // Add within the timestamp
        const transformedData = {...information};
        information.myAddedDate = (new Date()).toISOString();
        return transformedData;
      }
      break;
    // Add extra circumstances for different endpoint checks if wanted
    default:
      break;
  }

  // Return the unique information if no transformation is required
  return information;
}

คลิก“ บันทึกและปรับใช้” ที่มุมขวาบน

มีสองฟังก์ชั่นหลักในรหัสนี้: handleRequest และ transformData–

ที่ handleRequest ฟังก์ชั่นพร็อกซ์ของการเรียก API คุณไม่จำเป็นต้องแก้ไขฟังก์ชั่นนี้

ที่ transformData เป็นฟังก์ชั่นที่ทำการแปลงข้อมูลและคุณจะต้องอัปเดตสิ่งนี้เพื่อจัดการกับความต้องการข้อมูลของคุณ เพิ่มเติมเกี่ยวกับเรื่องนี้ในภายหลัง

คุณอาจพบรหัสนี้ใน คนอื่น ๆ–

สำหรับตอนนี้ลองเรียกใช้รหัสนี้

เรียกใช้พร็อกซี – รับ

รายการที่จำเป็นต้องมีบางอย่างในการทดสอบพร็อกซีเซิร์ฟเวอร์ด้วยโซเชียล API ของ Ayrshare แต่คุณยินดีที่จะใช้ API ใด ๆ :

เริ่มต้นด้วย GET โทรหาไฟล์ /จุดสิ้นสุดของผู้ใช้– ในแผงกลางที่ส่วนท้ายของ URL ของคุณ

?endpoint=httpspercent3Apercent2Fpercent2Fapp.ayrshare.compercent2Fapipercent2Fuser

นี่คือค่า URL ที่เข้ารหัสซึ่งแปลเป็น https://app.ayrshare.com/api/consumer–

ตัวอย่างเช่น:

https://hello-world-calm-bird-9b18.mad-be1.employees.dev?endpoint=httpspercent3Apercent2Fpercent2Fapp.ayrshare.compercent2Fapipercent2Fuser

ด้านล่างรายการ URL คลิก“+ เพิ่มส่วนหัว” ป้อนคีย์“ การอนุญาต” และค่า“ ผู้ถือ API_KEY” ที่ API_KEY เป็นคีย์ API ของคุณที่พบในแผงควบคุม Ayrshare

ตอนนี้คลิกปุ่ม“ ส่ง”

คุณควรเห็นแผงด้านขวา🟢 200 หากทุกอย่างสำเร็จ ใดๆ GET อาจใช้ URL (ตรวจสอบให้แน่ใจว่า url encode) ด้วยพร็อกซีเซิร์ฟเวอร์

เรียกใช้พร็อกซี – โพสต์

คุณสามารถทำได้ POST คำขอ

เปลี่ยน URL เพื่อเรียก จุดสิ้นสุดการวิเคราะห์ ซึ่งดึงการวิเคราะห์ในโพสต์ แก้ไขพารามิเตอร์การสืบค้นของ URL คนงานของคุณเป็น:

?endpoint=httpspercent3Apercent2Fpercent2Fapp.ayrshare.compercent2Fapipercent2Fanalyticspercent2Fpost

นอกจากนี้ตรวจสอบวิธี HTTP จาก Get to Submit (The Dropdown)

ในกล่องข้อความ“ ร่างกาย” ป้อน:

{
    "id": "bBbtup4YDUm6agvSkQA4",
    "platforms": (
        "fb"
    )
}

ที่ไหน id คือ ID ของก โพสต์ที่เผยแพร่ซึ่งคุณสามารถทำได้อย่างง่ายดายในส่วน “โพสต์” ของแดชบอร์ด Ayrshare

หลังจากป้อนข้อมูลทั้งหมดให้คลิก“ ส่ง” การตอบสนองควรเป็นอีกครั้ง🟢 200

การแปลงข้อมูล

ส่วนสุดท้ายคือการแปลงข้อมูลเป็นความต้องการของคุณ

ในส่วนรหัสด้านบน:

perform transformData(information, apiUrl) {
  const endpoint = apiUrl.cut up('/').pop();

  change (endpoint) {
    case 'endpoint':
      // Test if the information is an object with a "information" property
      if (information && typeof information === 'object' && 'information' in information) {
        // Remodel the information construction
        const transformedData = {
          information: (information.information),
        };
        return transformedData;
      }
      break;
     case 'consumer':
      // Test if the consumer endpoint is an object
      if (information && typeof information === 'object') {
        // Add within the timestamp
        const transformedData = {...information};
        information.myAddedDate = (new Date()).toISOString();
        return transformedData;
      }
      break;
    // Add extra circumstances for different endpoint checks if wanted
    default:
      break;
  }

  // Return the unique information if no transformation is required
  return information;
}

ภายใน คำสั่งเปลี่ยนระบุจุดสิ้นสุดของจุดสิ้นสุดที่แตกต่างกันเช่น “โพสต์” หรือ “การวิเคราะห์” จากนั้นแปลงข้อมูลตามสิ่งที่ปลายทางนั้นส่งคืน ในตัวอย่างนี้หากจุดสิ้นสุดสิ้นสุดใน “จุดสิ้นสุด” และหากมีฟิลด์ที่เรียกว่า “ข้อมูล” ในวัตถุข้อมูลให้เปลี่ยนวัตถุเป็นอาร์เรย์และส่งคืนข้อมูลที่แปลงแล้ว ในตัวอย่างที่สองหากจุดสิ้นสุดสิ้นสุดใน“ ผู้ใช้” และ“ ข้อมูล” เป็นวัตถุให้เพิ่มการประทับเวลาวันที่ปัจจุบัน myAddedDate ไปยังวัตถุ

คุณอาจเพิ่มจุดสิ้นสุดอื่น ๆ ลงในคำสั่งสวิตช์และการกระทำบนจุดสิ้นสุดเหล่านั้นเช่นการเปลี่ยนค่าทั้งหมดในวัตถุจากตัวพิมพ์ใหญ่เป็นตัวพิมพ์เล็ก

บทสรุป

หากคุณพอใจกับเครื่องมือที่ไม่มีรหัส แต่ต้องการนำโครงการของคุณไปสู่อีกระดับการเรียนรู้ JavaScript เล็กน้อยอาจเป็นตัวเปลี่ยนเกม ด้วยการรวม JavaScript เข้ากับเวิร์กโฟลว์ที่ไม่มีรหัสของคุณคุณสามารถปลดล็อกโลกใหม่ของความเป็นไปได้และปรับแต่งเครื่องมือของคุณให้เหมาะกับความต้องการของคุณได้ดีขึ้น

แต่ความยุ่งยากในการตั้งค่าและการบำรุงรักษาเซิร์ฟเวอร์ล่ะ? นั่นคือสิ่งที่ฟังก์ชั่น Serverless เข้ามาด้วยการคำนวณแบบไม่มีเซิร์ฟเวอร์คุณสามารถเรียกใช้รหัส JavaScript ของคุณโดยไม่ต้องกังวลเกี่ยวกับโครงสร้างพื้นฐานพื้นฐาน ซึ่งหมายความว่าคุณสามารถมุ่งเน้นไปที่การเขียนและการปรับใช้รหัสของคุณในขณะที่แพลตฟอร์ม Serverless ดูแลส่วนที่เหลือ

ตอนนี้ถ้าคุณไม่เคยเขียนบรรทัดของ JavaScript มาก่อนความคิดของการดำน้ำอาจดูน่ากลัว แต่อย่ากลัว! ด้วยการทดลองเล็กน้อยและความช่วยเหลือของแหล่งข้อมูลออนไลน์เช่น CHATGPT คุณสามารถเร่งความเร็วได้อย่างรวดเร็ว เริ่มต้นเล็ก ๆ ลองแนวคิดพื้นฐานบางอย่างและค่อยๆสร้างทักษะของคุณ

ด้วยการรวมพลังของฟังก์ชั่น JavaScript และ Serverless เข้ากับเครื่องมือที่ไม่มีรหัสที่มีอยู่ของคุณคุณสามารถปรับปรุงเวิร์กโฟลว์ของคุณทำงานซ้ำ ๆ โดยอัตโนมัติและสร้างโซลูชันที่ซับซ้อนมากขึ้น ดังนั้นอย่ากลัวที่จะก้าวออกจากเขตความสะดวกสบายของคุณและโอบกอดโลกแห่งรหัส ด้วยความพยายามและคำแนะนำเล็กน้อยคุณจะประหลาดใจที่ชีวิตของคุณในดินแดนที่ไม่มีรหัสง่ายขึ้น