Node.js projelerinde Google Spreadsheet ile Localization Kullanımı

Son yıllarda yazılım dünyasındaki otomasyon trendleri, geliştirme süreçlerini hızlandırma ve hatasızlaştırma noktasında önemli adımlar atmamıza olanak sağladı. Çeviri işlemlerini otomatize ederek, küresel ölçekte çalışan projelerde büyük kolaylıklar elde etmek mümkün.

Yazılım geliştirme süreçlerinde, bir ürünün farklı coğrafyalardaki kullanıcılarına hitap edebilmesi, dil opsiyonlarını başarıyla barındırabilmesine bağlıdır. Bu önemli konu, genellikle iki farklı yaklaşımı içerir. Birincisi, ücretli yazılımların kullanılması ve ikincisi ise sıfırdan farklı katmanlardan oluşan yeni yazılım modülleri oluşturarak bu süreci yönetmektir. Bu iki yaklaşım da kendi avantajlarına sahip olsa da, her ikisi de ciddi bir emek ve maliyet gerektirmektedir.

Bu makalede, Google Spreadsheet üzerinde tuttuğumuz çevirileri Node.js ile okuyarak projemize uygun bir maliyetle entegre edeceğiz.

1. Google Dokumanlar adresine gidiyoruz ve yeni bir Google E-Tablo oluşturuyoruz.
2. Oluşturduğumuz tablonun başlığını ve sheet name’ini değiştiriyoruz.
3. Ardından A1 kolonuna key B1 kolonuna value, C1 kolonuna da language değerlerini giriyoruz ki, tablomuz anlaşılabilir olsun.
4. İçerisine birkaç tane key ekliyoruz. Obje olarak eklemek istediğimiz keyleri arasına . (nokta) koyarak ekliyoruz.

1. Sağ üst köşedeki Paylaş buttonuna basıyoruz.
2. Genel Erişim alanının altındaki Kısıtlanmış alanına tıklıyoruz.
3. Bağlantıya sahip olan herkes olarak işaretliyoruz.

Uyarı: Sağ tarafta bulunan rolün Görüntüleyen olduğundan emin olun.

Geliştirme bölümüne gecebiliriz.

Environment variable’larımızı okuyabilmek için projemizde dotenv paketinin kurulu olmasi gerekli. Eğer kurulu değilse

npm i dotenv -save-dev

komutunu çalıştırarak projemize dahil ediyoruz.

Sonrasında Google Spreadsheet dosyamız ile ilgili değerleri .env dosyamızın içerisine ekliyoruz.

# .env
GOOGLE_SHEET_ID=1zJf8zo3HrCx1vIaddi8FrIRrVMkMqZRMzUGQTVcj-bE # Google Spreadsheet URL'inizdeki orta bölüm.
GOOGLE_SHEET_NAME=Web_App_Translations # Spreadsheet'deki sheet name'iniz
GOOGLE_RANGE=A:C # Okuma yapılacak kolon aralığı
GOOGLE_API_KEY=XYZ # Google console'dan aldığınız API keyiniz.

Spreadsheet API ile ilgili daha fazla bilgi için Google Spreadsheet API

⚠️ Önemli Uyarı: Google API key’inin açık olarak .env dosyasında paylaşılması potansiyel güvenlik riskleri oluşturabilir. Bu key’i yalnızca geliştirme ortamında saklamanız ve dışarıya açık bir şekilde paylaşmamanız büyük önem taşımaktadır.

Sonrasında translation dosyalarımızı okuyacak JavaScript dosyamızı oluşturuyoruz ve kodlarımızı ekliyoruz.

// ./scripts/fetch-translations.js

// Gerekli 3rd party kütüphaneleri ekliyoruz.
const fs = require("fs").promises;
const path = require("path");

require("dotenv").config();

// Çevirilerimizi çekmek için kullanacağımız URL'i oluşturuyoruz.
const REQUEST_URL = `https://sheets.googleapis.com/v4/spreadsheets/${process.env.GOOGLE_SHEET_ID}/values/${process.env.GOOGLE_SHEET_NAME}!${process.env.GOOGLE_RANGE}?key=${process.env.GOOGLE_API_KEY}`;

// Yanlış yazım veya geliştirme durumundaki çevirileri de dahil etmemek adına destek verdiğimiz dilleri tanımlıyoruz.
const SUPPORTED_LANGUAGES = ["tr", "en", "de"];

// Verileri çeken Promise fonksiyonumuzu tanımlıyoruz.
// Node v21 ile fetch fonksiyonu globalde stable olarak kullanılabiliyor. Kullanamadığınız durumlarda https://www.npmjs.com/package/node-fetch paketini indirip, kullanabilirsiniz.
const fetchData = async () => {
  try {
    const response = await fetch(REQUEST_URL);
    if (!response.ok) {
      throw new Error(`HTTP Error. Status: ${response.status}`);
    }
    return await response.json();
  } catch (error) {
    throw error;
  }
};

// Çevirileri kaydedeceğimiz konumu döndüren fonksiyonu yazıyoruz.
const getTranslationPath = (language) =>
  path.resolve(__dirname, `../public/assets/i18n/${language}.json`);

// Çeviriyi dil adında kaydeden fonksiyonu yazıyoruz.
async function saveTranslationFile(translations, language) {
  await fs.writeFile(
    getTranslationPath(language),
    JSON.stringify(translations, null, 2)
  );
}

// Çevirilerimizi çeken fonksiyonumuzu yazıyoruz.
async function fetchTranslations() {
  try {
    const data = await fetchData();
    const rows = data.values;
    // Başlık bölümlerini siliyoruz.
    rows.splice(0, 1);

    // Desteklediğimiz dilleri çevirilerimizin doldurulacağı objenin içerisine ekliyoruz.
    const initialTranslations = SUPPORTED_LANGUAGES.reduce(
      (acc, language) => ({ ...acc, [language]: {} }),
      {}
    );

    if (rows.length) {
      // Çeviriler dil kontrolünden geçerek listeye ekleniyor.
      const translations = rows.reduce((acc, translationRow) => {
        const [key, value, language] = translationRow;

        if (!SUPPORTED_LANGUAGES.includes(language)) {
          console.log(
            `Unsupported language: ${language}. Skipping "${key} : ${value}" translation.`
          );
          return;
        }

        acc[language][key] = value;
        return acc;
      }, initialTranslations);

      // Desteklenen her dil için ilgili çevirileri kaydediyor.
      await Promise.all(
        SUPPORTED_LANGUAGES.map(async (language) => {
          await saveTranslationFile(translations[language], language);
          console.log(`${language}.json saved successfully.`);
        })
      );
    } else {
      console.info("No data in the table.");
    }
  } catch (error) {
    console.error("An error has occurred. Details: ", error);
  }
}

fetchTranslations();

Translation dosyalarımızın kayıt olacağı klasörü oluşturuyoruz.

mkdir -p ./public/assets/i18n

Translation’larımızı kolayca okuyabilmek için package.json dosyamiza script olarak da ekliyoruz.

{
  //...
  "scripts": {
    //...
    "translation": "node ./scripts/fetch-translations.js"
    //...
  }
  //...
}

Terminalde translation komudunu çalıştırıyoruz.

npm run translation

Çalıştırdıktan sonra ./public/assets/i18n dizininde tr.json, en.json ve de de.json dosyalarımızı görüyoruz.

Author: Berk Baskı

Tags