Remote Config & Localization for mobile apps

Sergiu Rosu
Flutter Community
Published in
4 min readFeb 24, 2021

You will be surprised how many very big companies have no management for configuration files and they edit and deploy them manually… we try to avoid that because humans do mistakes !

humans do mistakes !

This article is not focused on the mobile app, but on how to create and manage configuration files very easy and deploy them both in the app and in the cloud (and other destinations).

What is important for us:

  • easily edit the configurations.
  • avoid errors in configuration files.
  • deploy very easily.
  • deploy in multiple locations (source code, web server, git, etc)

What we need:

  • Google account for creating a spreadsheet.
  • a local machine with nodejs, ssh and git available.
  • a webserver if you want to deploy on server.
  • a repository (also ssh key on github) if you want to also commit the changes for history (which I strongly support).

The configuration files

You can have as many configuration files as you want, there should be a balance between the number and the size/complexity, in my case i’m using something like this:

  • Localization (one file for each language)
  • Colors, all colors used in the app are specified here.
  • Email and notification templates.
  • AppConfig, all generic settings are here, e.g.: number of results per page, location search distance, placeholder image url, etc.

Beside all configuration files you will also have a “manifest” file which will store the version of each file, that way if the version on the server changes the file will be downloaded again so we don’t have to download them all the time.

As for format I’m always using JSON format, mainly because it’s very easy to use, there are many tools for editing and it’s not related to a specific platform, can be used on any os, but for this article we will be using google spreadsheets to edit the configuration files and the JSON will be actually generated, that way we make sure that the document is valid.

High level overview

Here is how it works:

  1. we add all our content in a spreadsheet
  2. we expose the spreadsheet to the web as csv
  3. on our local machine there is a nodejs script which downloads csv
  4. parse csv and create json files locally
  5. create manifest file locally
  6. copy json files to project folder (mobile app source code)
  7. upload json files to server
  8. commit the json files to repo (and push to repo) so we have history, for this to work you have to setup a ssh key you your github account.

Getting started

It’s as easy as creating a new spreadsheet, here is an example of what i’m using:

this is my localization file, seems simple but offers all the flexibility I need, I can add as many languages as I want, it’s just a matter of adding another column.

We will now add a script to this spreadsheet (you have the full code at the end, you can copy that now in here):

also first time you run it it will ask for permissions but that is ok.

Column B is generated from the other ones:

=CONCATNOTEMPTY(C33,D33,E33,F33)

the code above is part of the main google script file, you will see it there if you look at the big code at the end.

The colors is based on the same principle, it’s just the same for all languages and has some helper functions to easily visualize the colors.

After entering all the content we will be running our script to generate the content and put it on the final sheet:

What this does is generate a json file from the content you entered, and populate a single row on the “Final Values” sheet, will also increment the version for that file, we can also see the generated content, in case we want to copy it.

Now that we have all the sheets that we need we can export it to web:

Download and generate single files

The last step is pretty straight forward, just a nodejs script which downloads the csv file and generates single json files from each line in the csv file:

and now we have a bash script which does the rest:

just run the bash script and you are done.

And finally here is the full script for the google spreadsheet, please note that this works for specific column numbers that I have there, if you adapt the structure, make sure to edit the script so the columns will match.

There are also some “bonus” functions for checking if you missed any texts and visualisation the colors for easier management.

that’s all folks !

--

--

Sergiu Rosu
Flutter Community

Software engineer, mainly on iOS with Swift, also working with Flutter for iOS and Android.