Broken Duck Media Logo Broken Duck

About Services Products Resources

Localization Key Manager

Admin → Standard
💰 $500

Centralized editing of text strings for multilingual support.

Technology iconTechnology iconTechnology icon

Localization Key Manager Overview

The Localization Key Manager is a crucial tool designed to streamline the management of text strings across multiple languages, ensuring consistency and efficiency in multilingual applications.

Purpose

This module centralizes the editing and organization of localization keys, making it easier for developers to manage text strings across various languages. It provides a unified interface to update, track, and maintain translations, reducing fragmentation and enhancing control over the localization process.

Benefits

Usage Scenarios

The Localization Key Manager is an essential tool for developers aiming to maintain efficient, consistent, and scalable localization practices in their applications.

Key Features of Localization Key Manager Module

Centralized Key Repository

Version Control Integration

Multi-Language Support

String Management Tools

Conflict Detection

Export/Import Functionality

Access Control

Audit Logs

Cross-Environment Sync

Integration with External Tools

Here’s a comprehensive implementation of the Localization Key Manager with code samples:

1. FastAPI Endpoint

from fastapi import APIRouter, Depends
from typing import List, Optional
from pydantic import BaseModel
import sqlalchemy as sa

router = APIRouter()

# Assuming we have database access via SQLAlchemy
Session = sessionmaker(bind=engine)
db = Session()

class Language(BaseModel):
    language_code: str
    translation: str

class LocalizationKeyResponse(BaseModel):
    id: int
    key: str
    translations: dict[str, str]
    created_at: datetime.datetime
    last_modified_at: Optional[datetime.datetime]

class KeyFilterParams(BaseModel):
    page: int = 1
    limit: int = 50
    search_term: Optional[str] = None
    language: Optional[str] = None

@router.get("/localization-keys", response_model=List[LocalizationKeyResponse])
def get_localization_keys(
    filter_params: KeyFilterParams = Depends(),
):
    """
    Get all localization keys with their translations.
    Filters can be applied based on search term and language.
    """
    query = db.query(LocalizationKey).order_by(LocalizationKey.id)

    if filter_params.search_term:
        query = query.filter(
            LocalizationKey.key.ilike(f"%{filter_params.search_term}%")
        )

    if filter_params.language:
        # Assuming translations are stored in a related table
        query = query.join(Translation).filter(Translation.language == filter_params.language)

    page_result = query.paginate(filter_params.page, filter_params.limit)
    
    return [LocalizationKeyResponse.from_orm(item) for item in page_result.items]

2. React UI Snippet

import React, { useState, useEffect } from 'react';

interface Translation {
  language: string;
  value: string;
}

interface LocalizationKey {
  id: number;
  key: string;
  translations: Record<string, string>;
  created_at: Date;
  last_modified_at?: Date;
}

const LocalizationManager: React.FC = () => {
  const [keys, setKeys] = useState<LocalizationKey[]>([]);
  const [loading, setLoading] = useState(true);
  const [selectedKey, setSelectedKey] = useState<number | null>(null);
  const [searchTerm, setSearchTerm] = useState('');
  const [activeLanguage, setActiveLanguage] = useState('en');

  useEffect(() => {
    fetch('/api/localization-keys')
      .then(res => res.json())
      .then(data => setKeys(data))
      .finally(() => setLoading(false));
  }, [searchTerm]);

  const handleEditTranslation = (keyId: number, newTranslation: string) => {
    // Implement the API call to update translation
  };

  return (
    <div>
      <input 
        type="text" 
        placeholder="Search keys..." 
        value={searchTerm}
        onChange={(e) => setSearchTerm(e.target.value)}
      />
      
      {loading ? (
        <div>Loading...</div>
      ) : (
        <table>
          <thead>
            <tr>
              <th>Key</th>
              <th>Translations</th>
              <th>Last Modified</th>
              <th>Actions</th>
            </tr>
          </thead>
          <tbody>
            {keys.map((key) => (
              <tr key={key.id}>
                <td>{key.key}</td>
                <td>
                  <div style={{ display: 'flex', gap: '10px' }}>
                    <select 
                      value={activeLanguage} 
                      onChange={(e) => setActiveLanguage(e.target.value)}
                    >
                      <option>en</option>
                      <option>es</option>
                      <option>fr</option>
                    </select>
                    <input
                      type="text"
                      value={key.translations[activeLanguage]}
                      onChange={(e) => handleEditTranslation(key.id, e.target.value)}
                    />
                  </div>
                </td>
                <td>{new Date(key.last_modified_at).toLocaleString()}</td>
                <td>
                  <button onClick={() => setSelectedKey(key.id)}>Edit</button>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      )}
    </div>
  );
};

3. Data Schema (Pydantic)

from pydantic import BaseModel
from datetime import datetime

class Translation(BaseModel):
    language: str
    value: str

class LocalizationKey(BaseModel):
    id: int
    key: str
    translations: dict[str, str]
    created_at: datetime
    last_modified_at: Optional[datetime] = None

class KeyFilterParams(BaseModel):
    page: int = 1
    limit: int = 50
    search_term: Optional[str] = None
    language: Optional[str] = None

This implementation provides a centralized system for managing localization keys across multiple languages, allowing developers to edit translations through a RESTful API and an interactive React UI.

Localization Key Manager Module Documentation

Summary

The Localization Key Manager module provides a centralized interface for managing and editing text strings used in multilingual applications. It allows developers to maintain translation keys and their corresponding values across multiple languages efficiently.

  1. User Management: For managing user accounts and permissions.
  2. Role-Based Access Control (RBAC): To define access levels for different users or roles within the system.
  3. Internationalization/Localization: Handles language-specific configurations and integrates with translation services.
  4. Audit Logs: Tracks changes made to localization keys for compliance and debugging purposes.
  5. REST API: Exposes endpoints for programmatic interaction with the Localization Key Manager.

Use Cases

1. Centralized Translation Management

2. Import/Export Translations

3. Versioning and Auditing

4. Collaboration

Integration Tips

  1. API Endpoints:

    • Use the provided REST API to integrate with other modules or external systems.
    • Example endpoint: /api/localization/keys.

  2. Locale Handling:

    • Ensure proper handling of locale codes (e.g., en-US, es-MX).
    • Implement fallback mechanisms for missing translations.

  3. Data Consistency:

    • Synchronize translation keys across environments (development, staging, production) regularly.
    • Use webhooks or polling to keep data in sync.

Configuration Options

Configuration NameDescriptionDefault ValueExampleNotes
enable_localizationEnable/disable the localization feature.true-Set to false if you want to disable multilingual support entirely.
default_localeThe default locale for the application.en-US"es-MX"Used when no specific locale is provided.
translation_filesPaths to translation files../locales/**-Supports JSON or CSV file formats.
cache_ttlCache expiration time for translations.3600"86400"Set to 0 for development mode (no caching).
translation_serviceThird-party translation service provider.null"google-cloud"Supports services like Google Cloud Translation or DeepL.

Conclusion

The Localization Key Manager module streamlines the process of managing translations, ensuring consistency and efficiency across multilingual applications. By integrating with related modules and leveraging its API endpoints, developers can maintain a robust localization workflow.