Is Lokalise your favorite TMS? In this tutorial, you’ll learn how to process JSON files in Lokalise with our instructor Carlos.
Carlos García Gómez
Hi everybody and welcome to a new video of this CAT tool and TMS video series. In this tutorial We’re going to see a new tool that is used in localization and this TMS is going to be Lokalise. Let’s dive in. Alright, so this is the dashboard for Lokalise and right now I have an empty dashboard because I didn’t create any project We’re going to create a new project and we’re going to see all of the details So we can click on get started and In this tutorial, we’re going to process a JSON file.
So we’re going to specify web and mobile We’re going to give it a name. So for example, let’s say Tutorial engineering and then we’re going to specify the base language, which is the source language It’s going to be English EN and we can specify the target language. Let’s just say for example Spanish Spain So ES ES We’re going to create just a basic project one source language and just one target language and we can click on create project Now in here we’re going to see a few tabs and we’re going to Work on some of these tabs during these videos for this TMS Now the important thing here is that we are going to first upload the JSON file However before uploading the file we’re going to see these settings All right So if we click on this upload tab we’re going to see that this is the place where we would upload the JSON file and These are the settings that we have now as far as I know and as far as I have tested this tool there is some limitations when it comes to processing JSON files depending on the File as such.
All right, so if it’s a basic file, then you wouldn’t have any issues But we’re going to work with this JSON file that you might be familiar With if you have followed the previous videos of this series. All right, so in this JSON file We have a few things So for example, we have some placeholders, which is some embedded content that needs to be protected Okay, so this student is a placeholder Encapsulated in curly brackets we also have some others here like course title or field and Some others down here, right? So instructor name For example, this placeholder protection can be done with localize with no issues Okay, we just need to use an app or a plugin that we will see later on. However, this JSON file It’s a bit more complex.
All right So in here for the metadata and then the code itself, we have the code key and the value is enrollment underscore 001 this is a value that is not going to be translated. All right, and the same happens for type we have enrollment Underscore notification and this should actually be excluded from translation the same happens down here So meta code type as you can see the structure is the very same and we have another value But again, these values are not going to be included for translation and the same down here and down here So as far as I know and if you know any Way of doing this you can just leave a comment below the video There is no way to actually exclude a specific key or specific keys from a JSON file all right, so what we need to do is to pre-process this file and We’re going to then Convert the full value into a placeholder Okay, we’re going to use regular expressions for this and we’re going to do this all together here in this video Now a separate thing that needs to be done is that in this JSON file we have some context so in this case We have context underscore D and T which stands for do not translate and we have this string Notification sent to a student when enrolling in a course this sentence or this string Should not be translated. All right, it’s just a context D and T key Which means that it should only be used for context for the linguist.
All right, so Here we have this key value pair, but down here. We also have another context D and T Down here. We have another one and Finally, we have another one.
So if we process the JSON file with the filter as it is Okay with these settings and just uploading the JSON file we’re going to include those context strings for translation Okay, again, we don’t have any settings here in localize in order to specify just a context key and the context value So we’re going to do a similar thing we’re going to pre-process the JSON file with some replacements using regular expressions and then we’re going to Block or protect the whole value as a placeholder Okay, again, we’re going to see this all together Now what we are going to do is the following. So first off we are going to specify with regular expressions that we want the code and the type so these Values to be excluded and in order to do so we’re going to actually Convert this full value into a placeholder type the placeholder type in this case is Encapsulated in curly brackets. Okay, and let me just actually go to the project itself And what we’re going to do is to use an app.
Okay an app in localize is basically a plugin So if we click on apps in here for this project We’re going to see a list of all the apps and a good thing with localize is that it has a lot of integrations with some other systems Okay, so if you are using localize in your company or if you are using localize on your own Job, and you need to use integrations with other systems. You can always play around or check the apps from here The app that we’re going to use is called custom placeholders So in here for the search box, you can just type place and it will pop up here We can click on this one custom placeholders here. You are going to see an explanation and you need to click on install Okay, so once we click on install, we’re going to get this window Okay, and this is just the configuration the configuration I would say is very basic very limited Okay, because it would only process One start with and one ends with okay, we don’t have a way to specify multiple configurations But for now, let’s just use the curly brackets okay, we are going to start with this curly bracket and We’re going to end with the closing curly bracket.
So everything that is found inside is going to be treated as a placeholder Okay Basically with this app, we don’t need to use regular expressions to select for example I don’t know like any character one or more times and then the question mark for instance Okay, we don’t need to do this with this app It’s just a starts with and ends with here for file format. We’re going to use all supported formats We could actually specify JSON, but let’s just use all supported formats and let’s click on enable Now This is now enabled something that I would like to show you is that when you click on upload There is a way to convert to universal placeholders and I would like to show you this page Okay, so if you click on this label and you go to universal placeholders It’s going to open the documentation for localized and here you’re going to see a few things now if your JSON file is using this Notation so two curly brackets for the placeholder then you don’t need to use this app All right, you don’t need to use this app. You can just click on convert to universal placeholders It’s going to process these couple of curly brackets for the beginning and for the end and it will treat it as a placeholder and Then once you prepare the file the translator does the job Reviewer as well when you try to download or export the file It’s going to put this same format for the placeholder Now the thing is what if you have a JSON file with any other kind of placeholder? So for example in our case, we have only one curly bracket You could also have actually any other type of style All right Now if you’re processing an XML and you have this style You can also use the universal placeholders and then down here.
You’re going to see a few more Okay, so the print TF iOS ICU net so depending on the file format that you are processing if you are using the standard let’s say type of Using placeholders then you can use the universal placeholders But if you would like to create a customized one then that’s the way that you would do it with the app as we have seen and then you just enable the app with the Opening curly bracket in this case and the closing curly bracket Otherwise if you have any other placeholder, for example, like this one and if you use the universal Placeholder one like the option then once you process this placeholder is going to be processed Alright, but then for the download or for the export is going to transform the placeholder into a different variant Okay, so that’s not something that you would like to do You would like to keep the same placeholder that we have in the source in the localized files Okay, so that’s just an explanation of the convert to universal placeholders We’re not going to use it here because we are using the app itself now we’re going to again come back to it and Transform these values only for code and type into a placeholder like this one Okay But then after processing the file after translating and after exporting the localized file We would like obviously to revert this placeholder back into the original format into what we have right now So we need to do something unique Okay We can’t use just the curly bracket for the opening and the curly bracket for the end because otherwise Then we wouldn’t know what to replace afterwards now something that we can do is Let’s use the find Option here with placeholders. Okay, we need to activate the regular expression Option for placeholders and in case you are not familiar with regular expressions Below this video you’re going to find the localization engineer course it’s going to have a link to the engineer course and First you will start with a preview, but you are going to see a full explanation of regular expressions So most of the things that we’re going to cover here. It’s all explained in that course in case you are interested now, let’s just actually Try to identify the code or The type keys.
Alright, so something that we can do is just use for example here Let’s say code or type and I am encapsulating this in a group I will explain this later on so it’s going to be literal quote then either code or type and Then just a quote. Okay here. We’re going to have the column space and Then inside quotes, we’re going to see the value for this key Okay, so the value for this key is always going to be in this case at least it’s going to be either a letter and Underscore a number.
Okay. So what we can do is just to say Backslash W which is a shorthand character class for any letter any number or any underscore One or more times now for now and I suggest you that once you build your regular expression you Type anything and then click on find next just in case you are missing anything Okay, so you make sure that it’s working fine. Okay, so it’s capturing all of the things that we want really Okay, it’s good for now.
Now what we need to do is we need to do a Replacement. All right, and in this replacement we would like to keep Everything except for the thing that we have in the value itself and the thing in the value is going to be this one So something that we can actually do is to make this part a group So from the very beginning until the first quote of the value, which is this one, okay So the quote is included in the group and let me actually transform this group into a non-capturing group Okay, this is because then for the back reference. This is not going to be taken as a group itself that can be referenced Okay.
Now this is going to be the first group This part is going to be the value that we have in here And lastly we have just the quote, okay for the quote We don’t actually need to capture this in a group, but but let me just add it in a group okay, so that we can just back reference the whole group itself and What we are going to do is to capture the value itself in a group Because we would like to simply transform this value into a placeholder type and adding custom or code at the very beginning Let’s try first that it’s still working. Okay, so find next it’s still capturing the whole thing Now we would like to replace this with the first group. So in the end is going to transform The first group is capturing this.
Okay. So from the very beginning until after the quote Okay, so the quote is in here and the quote is here So we are capturing the full group now before the second group and the second group Remember that is everything that we have inside. Okay, so all of this part Before this group, we’re going to add The placeholder type.
Okay, so it’s going to be captured in a curly brackets and we’re going to say something like code and then Group number two. So this part is going to be taken as a literal string Then we’re going to have the group itself Okay, so in this case, we’re going to have enrollment Underscore 0 0 1 and then we’re going to have the third group, which is only the code Okay, again, we can just do this and then just keep the quote Okay, but just for reference purposes, we’re going to use Groups and back references. Okay.
It’s just the very same thing Now, let’s try to see well actually after the second group So after the end of the value itself, we would like to close the placeholder. Okay, so after the backslash To we’re going to close this placeholder that is started in here Okay, so what we are going to do again is just to click on find next and now we’re going to do a replace Okay, so in this case, we are keeping the code key We’re keeping the quotes and the colon itself, but we’re transforming the value itself into a placeholder In this case, we are adding the curly bracket for the opening and the closing curly bracket and we are saying code Column. Okay.
This is just a way to identify that. This is a specific code Okay that we need to replace back after translation so we can find next replace Okay, we can see that it’s doing the very same thing. So replace all All right so right here we have now all of these keys that have to be excluded from translation converted into a value whose Content is actually a placeholder itself now We’re going to handle the context underscore TNT because this is just a very similar thing Okay, so instead of now saying the code or type We’re going to keep the quotes but inside the quotes we’re going to say context underscore TNT Okay, it’s the very same thing we don’t need to change anything because the structure of the JSON is the same key and value separated by a colon and then with quotes the keys and values so context TNT and then just this part we need to modify it because now it’s a full string Okay, so we have notification sent to a student when enrolling in a course So now we can’t just use the shorthand character class Backslash W because we would have maybe spaces we can also have commas whatever so we can do something like this any character Okay in here one or more times But then we’re going to make it lazy until we find the quote and we can even Force it to have the comma.
Okay, because otherwise if we have a quote Inside the string it’s going to be a caught it does we don’t have any quotes in here Okay, so in the context strings, we don’t have any quotes, but in order to make it more robust We’re going to say coma after the column, which is basically this coma added at the very end Okay, we always have a coma at the very end for the context the NTS. Okay So we can say something like this. Let’s just find next.
Okay, it’s doing the job by next. It’s also doing the job correct Now we’re going to replace this with the first group So again, we’re going to keep the context the NT key now instead of saying code I would like to say context because I want the linguists when they are translating in the editor I would like them to know that this is context and it’s not code like something just to be Completely excluded. Okay, it needs to be context, but you can’t say anything else Okay, it’s just for reference.
Then we’re going to keep the content itself. So of the second group, which is this one Then we’re going to finish or close the curly bracket And then we’re going to have the third group, which is the code and the code. So let’s find next replace We’re replacing the value itself with again a placeholder type with context colon at the very beginning so fine next and Then just do replace all for the others.
I have done this for the first one. So let me just remove it That’s why it has added it twice. And let me actually remove the closing and one It’s just because I did it once and then I clicked again and did that same thing again Okay.
So right now we have the context which is Now protected well at least transformed in the preprocessing. We have the code the code Another context we have the code the code context code code Context here and then just the last quotes a code. Sorry, so we can save this file Okay.
Now it should be ready to be ingested into the tool. So let’s click on the own select file let me actually get the path from here and Select file I Depend already here’s okay. So message is dot JSON and It’s going to be imported.
So it’s in here. It reads all of the keys and the number of words Remember that we have activated and enabled the app itself the custom placeholders so we can click on import files We get the messages here Now something that is very important for localize and that is different in other tool that we have seen for example In phrase or in memo queue is that when we work with? Localized. Okay when we work with localized There is something that needs to be taken into account.
So Although we import a file in here in the editor. We’re going to see a list of keys So if you import multiple files, you’re going to see all of the keys in here It’s not going to be separated between files themselves, although you can see them here Alright, you can always see the the source file But you are going to see in the editor a list of the keys and the corresponding values Okay. So now something that we’re going to do is The following so down here.
We’re going to see the Text itself and well for the code it has processed this correctly So right now we have the code that has been protected. Okay, and It is just in here. So we have the code itself Now we have this code in here.
So Although we were not able to specify a key to be excluded We were able to pre-process this value and then transform it into a placeholder Now what we can see is that the full thing the full value itself has been protected Okay, so if we click here you’re going to see that this is a full placeholder Okay, you can always modify it, but then it’s supposed to be not to be modified. That’s why we have a tag here. Okay So the linguist is supposed to leave this code as it is Okay, just copy to the source the same happens here for code course LE001 Then instructor name.
This is not taken from any code. This is just the instructor name from this part However for the context itself, you can see that the if you click in here Okay, we have only protected this part and this part is basically that it’s protecting Just the context here. Okay now something that is quite Notorious is that when we set up the app itself We selected that we wanted the opening curly bracket and the closing curly bracket So anything that is inside is supposed to be a placeholder but as we can see here, this is context and you can click on it and see that this part and this part has been locked the thing here is that just the Percentage and the S has been transformed into a placeholder because this in the end is saying that it’s a placeholder itself But again, you can modify it.
Okay, so that’s something that might need to be Looked into maybe my localize or just as a tip as an opinion. Okay from an user Okay, even when we have a full Placeholder that is actually protected. There is a way to modify it Okay, so I don’t know if there is a setting that I am missing So again, if you know this setting to fully protect the part itself so that it cannot be modified Just let me know because I would like to know it but for the context itself as we can see we have a number one here and the context is just Beginning.
Okay. So before this we don’t have anything. Okay, but the full Context and that’s the important thing the full context that we have protected is now Encapsulated in square brackets in here in the editor So this is like a way to say the linguists that we shouldn’t actually Modify the context.
Okay. It’s the best way that I have found for localized for this tool again If you know any other way of processing this type of context keys Just let me know because I would love to know it. We can just specify in the app What is the start and what is the end? We can’t use a full thing for example saying something like like this like Cooley bracket Cooley bracket and then something like this.
Okay, fine. Next fine. Next by next Okay, and in here I missed it.
Okay in here There is no way in localized as far as I know to specify the full thing okay, so all we can do is just to specify the beginning and the end and we are supposed to Let the linguist know that whenever they find this it shouldn’t be protected It shouldn’t be modified sorry because it’s kind of protected with this square brackets Okay, and you can see that the square brackets are not found in other strings For example go from 0 to engineering various file types of projects, etc. Because this is a string for translation I hope this is clear. And again, if you find any other way of processing this just please let me know So basically this is it.
Alright, so we have protected the normal placeholders so these placeholders which are quite easier to protect and By the way something that I missed is that whenever the linguist is working on the translation for these keys values They’re going to see this context Okay, but actually the order of the keys and the values is not the same order that we can see here Okay, so it’s not starting by high student up here. So a very important tip I think is there’s that you should be sorting by instead of last added should be sorted by first added Okay, and this way the first string is high student so we can see high student in here We can see the placeholder that has been protected very nicely then welcome to localization Academy. Okay, which is the next part? The next one is you have successfully enrolled in whatever so when whenever the linguist see The context it’s going to be here.
It’s going to be in the same order as the source file okay, so they will know that whenever they are translating this key or the surrounding keys or Values, let’s say because we are actually translating the values not the keys, but you you get what I mean. I hopefully The context is going to be here So they will say okay So anything that is before or after should be taken into consideration in this case Notification sent to a student when enrolling in a course and here the previous string is saying you have successfully enrolled In the course title course get ready to dive into field and expand your knowledge okay, so this is just acting as a context, but it’s not something to be translated and Then if you scroll down you’re going to see that everything has been protected The placeholders have been protected the code itself here has been protected because we didn’t have a way to Exclude the full keys from the JSON file. So this at least has been protected and then lastly we have the context Okay, again, the context has a full string So that’s why it appears a little bit different compared to the code itself But you can see the square bracket in here.
Okay, and those are supposed are not supposed to be Modified by the linguist. Alright, so that’s all for this tutorial I hope it has been useful for you. And at least I hope that you have found and understood the Limitation that we have with localized again There might be some other alternatives to process a JSON file like this one in localized.
But if you have any Comments any tips or whatever. Just let me know. Please.
I have processed this file the best way I know If we have a basic JSON file Then that would have been easier because you can just process the file Directly with localized with the universal placeholders with no keys to be excluded and without any context but I am trying to Use the same file that I have used for other tools like memo queue and phrase So at least this is a way for you to compare different tools and at least to compare the way that we can have To process this JSON file. Okay, so thank you for watching and I will see you in the next video.
