دليل شامل حول جميع أدوات Google APIs وطريقة استخدامها

تُعد واجهات Google API من أهم الأدوات التي تتيح للمطورين التكامل مع العديد من خدمات Google مثل الخرائط، اليوتيوب، جداول البيانات، وتقنيات الذكاء الاصطناعي. سواء كنت تبني موقعًا أو تطبيقًا، فإن هذه الخدمات تسهّل الوصول إلى البيانات أو استخدام ميزات جاهزة.

1. Google Maps API - خرائط Google

Google Maps API تُستخدم لدمج الخرائط التفاعلية في المواقع أو التطبيقات. يمكنك عرض الخرائط، وضع علامات، وحساب المسارات.

2. YouTube Data API - واجهة YouTube

تتيح هذه الواجهة الوصول إلى بيانات الفيديوهات وقنوات YouTube. يمكن استخدامها في جلب الفيديوهات أو عرض معلومات القنوات.

جاري تحميل الفيديوهات...

3. Google Sheets API - جداول Google

تتيح هذه الواجهة الوصول إلى جداول البيانات من Google Sheets لعرض أو تعديل المحتوى في الوقت الفعلي.

جاري تحميل البيانات...

4. Google Drive API - إدارة ملفات Drive

تتيح هذه الواجهة الوصول إلى ملفات Drive لعرضها أو إدارتها مباشرة من خلال الموقع أو التطبيق.

جاري تحميل الملفات...

5. Cloud Translation API - الترجمة الآلية

توفر هذه الواجهة ترجمة النصوص بين لغات متعددة باستخدام تقنيات Google السحابية.

جاري الترجمة...

سكريبت كود استخدام Google APIs

1. Google Maps API - عرض خريطة تفاعلية

هذا الكود يعرض خريطة تفاعلية مع وضع علامة (Marker) على موقع معين.

<!DOCTYPE html>
<html>
  <body>
    <div id="map" style="height: 400px;"></div>
    <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
    <script>
      function initMap() {
        const location = { lat: 31.7917, lng: -7.0926 };  // المغرب
        const map = new google.maps.Map(document.getElementById("map"), {
          zoom: 6,
          center: location,
        });
        new google.maps.Marker({ position: location, map: map });
      }
      window.onload = initMap;
    </script>
  </body>
</html>

2. YouTube Data API - جلب فيديوهات من قناة

الكود التالي يعرض قائمة بأحدث الفيديوهات من قناة YouTube معينة.

<div id="youtube-videos">جاري تحميل الفيديوهات...</div>
<script>
  const apiKey = "YOUR_API_KEY";
  const channelId = "UC_x5XG1OV2P6uZZ5FSM9Ttw";  // قناة Google Developers

  fetch(`https://www.googleapis.com/youtube/v3/search?key=${apiKey}&channelId=${channelId}&part=snippet&maxResults=5`)
    .then(response => response.json())
    .then(data => {
      let html = "<ul>";
      data.items.forEach(item => {
        html += `<li><a href="https://www.youtube.com/watch?v=${item.id.videoId}" target="_blank">${item.snippet.title}</a></li>`;
      });
      html += "</ul>";
      document.getElementById("youtube-videos").innerHTML = html;
    })
    .catch(error => console.error("خطأ في جلب فيديوهات YouTube:", error));
</script>

3. Google Sheets API - جلب بيانات من جدول

هذا المثال يقوم بجلب بيانات من جدول Google Sheets وعرضها في جدول HTML.

<div id="sheet-data">جاري تحميل البيانات...</div>
<script>
  const apiKey = "YOUR_API_KEY";
  const sheetId = "SHEET_ID";  // ضع معرف الجدول هنا
  const range = "Sheet1!A1:C5";

  fetch(`https://sheets.googleapis.com/v4/spreadsheets/${sheetId}/values/${range}?key=${apiKey}`)
    .then(response => response.json())
    .then(data => {
      let html = "<table border='1'><tr><th>العمود 1</th><th>العمود 2</th><th>العمود 3</th></tr>";
      data.values.forEach(row => {
        html += "<tr>" + row.map(cell => `<td>${cell}</td>`).join("") + "</tr>";
      });
      html += "</table>";
      document.getElementById("sheet-data").innerHTML = html;
    })
    .catch(error => console.error("خطأ في جلب البيانات:", error));
</script>

4. Google Drive API - عرض ملفات Google Drive

هذا المثال يقوم بجلب قائمة بالملفات المخزنة في Google Drive وعرضها على الموقع.

<div id="drive-files">جاري تحميل الملفات...</div>
<script>
  const apiKey = "YOUR_API_KEY";

  fetch(`https://www.googleapis.com/drive/v3/files?key=${apiKey}`)
    .then(response => response.json())
    .then(data => {
      let html = "<ul>";
      data.files.forEach(file => {
        html += `<li><a href="https://drive.google.com/file/d/${file.id}/view" target="_blank">${file.name}</a></li>`;
      });
      html += "</ul>";
      document.getElementById("drive-files").innerHTML = html;
    })
    .catch(error => console.error("خطأ في جلب الملفات:", error));
</script>

5. Cloud Translation API - الترجمة الآلية

هذا الكود يقوم بترجمة نص معين باستخدام Google Cloud Translation API.

<div id="translation-result">جاري الترجمة...</div>
<script>
  const apiKey = "YOUR_API_KEY";
  const text = "Hello, how are you?";
  const targetLanguage = "ar";  // الترجمة إلى العربية

  fetch(`https://translation.googleapis.com/language/translate/v2?key=${apiKey}`, {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ q: text, target: targetLanguage })
  })
    .then(response => response.json())
    .then(data => {
      document.getElementById("translation-result").innerHTML =
        "النص المترجم: " + data.data.translations[0].translatedText;
    })
    .catch(error => console.error("خطأ في الترجمة:", error));
</script>

نصائح مهمة

راقب حدود الاستخدام (Quotas) لتجنب تجاوز الخطة المجانية.
لا تعرض API Key في الكود العام مباشرة لحمايته من سوء الاستخدام.
تأكد من تفعيل الخدمة المطلوبة من Google Cloud Console.

دليل شامل حول جميع أدوات Google APIs وطريقة استخدامها

دليل شامل حول جميع أدوات Google APIs وطريقة استخدامها

1. Google Maps API - خرائط Google

2. YouTube Data API - واجهة YouTube

3. Google Sheets API - جداول Google

4. Google Drive API - إدارة ملفات Drive

5. Cloud Translation API - الترجمة الآلية

سكريبت كود استخدام Google APIs

1. Google Maps API - عرض خريطة تفاعلية

2. YouTube Data API - جلب فيديوهات من قناة

3. Google Sheets API - جلب بيانات من جدول

4. Google Drive API - عرض ملفات Google Drive

5. Cloud Translation API - الترجمة الآلية

نصائح مهمة

دليل شامل حول PlayStation Plus

سكريبت أدوات متكاملة لتحرير النصوص وإدارتها بسهولة

الصفحات

GPLDROID

#buttons=(Accept !) #days=(20)

Contact form