Integrering av FBT + Crowdin + GitHub (Svenska)

Publicerad

(Jorge Dalmendray) (22 dec , 2020)

I en (tidigare artikel) skisserade jag hur man integrerar FBT-ramverket (Facebook-översättning) med din React Native-applikation. Jag avslutade den artikeln som förklarade hur vi hade ett gap i översättningen: själva översättningen.

Låt oss titta på översättningen lite närmare:

  1. Skriv kod medan du slår in dina strängar i fbt -taggar
  2. Extrahera alla strängar från källkoden och ha dem redo för översättning. Detta hanteras av ett enkelt skript i fbt-biblioteket
  3. GAP: Skicka strängarna för översättning
  4. GAP: Efter att översättningarna finns behöver vi ett sätt att sätta tillbaka dem i appen så fort som vi kan
  5. Vinna!

Ange Crowdin . Crowdin är en molnbaserad lösning som effektiviserar lokaliseringshanteringen för ditt team. Det är ett verktyg för att hantera dina strängar, anställa översättare och se till att översättningarna är korrekta och inom ramen för din app.

I den här artikeln förklarar jag hur du integrerar din GitHub-repo med Crowdin för att automatiskt ladda upp nya strängar för översättningar och hur man automatiskt skapar en Pull Request (PR) när dina översättningar är klara.

När du använder FBT kan du extrahera alla strängar från din källkod genom att köra två enkla skript:

  1. fbt-manifest: Detta skript hittar alla källfiler med fbt() samtal eller taggar i dem

  2. fbt-collect: Detta skript tar emot inmatningen från fbt-manifest skriptet, går igenom alla filer i det och extraherar strängarna och beskrivningen till en separat fil, låt oss kalla det .source\_strings.json

Vid denna tidpunkt måste du låta Crowdin veta var din .source\_strings.json -fil bor, den kommer då att läsa från det enligt ett schema som du har ställt in, lägg till dessa strängar på plattformen och varna översättare om de nya strängarna redo för översättning.

Steg för att integrera Crowdin med din GitHub repo

  1. Integrera din GitHub repo med Crowdin : Detta gör det möjligt Crowdin till r läs från din repo och skicka sedan PR för granskning. Obs: Om du inte använder GitHub, se andra Crowdin-integrationer
  2. Skapa en crowdin.yml konfigurationsfil i roten till ditt projekt. Här kommer du att berätta för Crowdin var du ska hämta källsträngarna och var du ska placera översättningarna när de är i. Ett exempel på filinnehållet nedan:
files:
- source: /i18n/fbt/.source\_strings.json
translation: /i18n/fbt/translations/\%two\_letters\_code\%/translation.json

För mer information om den här konfigurationsfilen, se Crowdins dokumentation .

Vid denna punkt när din .source\_strings.json -filen uppdateras genom att köra fbts skript, nya strängar importeras till Crowdins plattform beroende på det synkroniseringsschema som ställts in när den integreras med GitHub.

Du kan sedan beställa professionella översättningstjänster id = ”6c94aca96e”>

genom plattformen eller välj att använda maskinöversättningar , på något sätt när nya översättningar läggs till, Crowdin kommer att skapa en PR tillbaka i ditt repo. Vid den här tiden kan du manuellt acceptera och slå samman ändringarna eller skapa en GitHub-åtgärd för att automatiskt acceptera och slå samman ändringarna!

Konvertera Crowdin-utdata till ett läsbart FBT-format

Det sista steget före du kan använda översättningarna är att köra skriptet fbt-translate. Detta skript genererar en fil som FBT-plattformen förstår och är den fil som du så småningom kommer att ställa in i koden.

fbt-translate :

"translate-fbts": "fbt-translate --translations translations/*.json --jenkins > src/translatedFbts.json"

Användning i React :

init({
translations: require("../translatedFbts.json"),
hooks: {
getViewerContext: () => viewerContext,
},
});

Användning i React Native:

  • För React Native / Android vi måste konvertera utdata från fbt-translate -skriptet till en Android-resursfil. Ett skript hjälper dig med det här steget:

"generate-android-fbt": "babel-node i18n/scripts/generate-android-localizables-executor.js"

När du har kört detta är du redo att köra din Android-applikation.

  • För React Native / iOS måste vi konvertera utdata från fbt-translate skript till en iOS-strängresursfil .Det finns inget manus för att uppnå detta men vi är alltid öppna för bidrag 🙂

Slutliga tankar

Vid denna tidpunkt borde du kunna extrahera strängar från din app automatiskt ladda upp dem till Crowdin och få sedan en PR när översättningarna är klara. Som du kanske har märkt är några steg i denna process manuella. Några förslag:

Skapa GitHub-åtgärder, CircleCI-steg (eller vad du än använder för CI / CD) för att utföra:

  • fbt-manifest och fbt-collect varje gång du slår samman en PR
  • Sammanfogande PR skapas automatiskt av Crowdin
  • Kör fbt-translate efter att Crowdin PRs slås samman
  • För Android kör du generate-android-localizables-executor.js efter fbt-translate scrip