Quasar & Vue 3: So I Created a CLI Tool for Quasar! (Real World App #5)

in this series i'm documenting my journey creating a real world quasar app for jit 2 using quasar 2 view 3 and the composition api an app that will ultimately be deployed to the ios android mac and windows app stores and in this episode i'll be explaining how i created quasalank a global cli tool which makes it super easy for me and any other quasar developer to generate all of the i18n language files that your app needs instantly from a simple easy to manage csv file like this one make sure you subscribe and click the bell so you don't miss any of the videos in this series uh check out the link to the whole playlist in the description so in terms of progress this week not much has changed in fuji except that i've added 10 different languages to the app in addition to french which i already had so i've added japanese chinese simplified hindi russian korean german spanish portuguese and indonesian and the reason i've added these 10 particular languages if you just google best languages for app localization i found this medium article here and if we scroll down it tells us the most impactful languages that we should translate our app into now i don't know for sure if these are the best languages to translate my app into but i'm just going to use these as a starting point and i've also now translated every single bit of text in the app to all of these different languages so if i change it to french you can see absolutely everything is now translated so all of the page names all of the different settings sections and all of the field names for each setting and even all of the values as well in the selects and the radio fields and stuff like that and if i jump to the other pages all of the buttons as well have all been translated but i've spent most of the week creating quasalang a global cli tool which allows you to generate all of your i18n language files so if i just open up my sidebar basically everything that you find in this i18n folder including the main index file and all of the folders for each language based on a single csv file like this one and i've also published this tool to npm so make sure you check it out at github.com dannyconnell quasalang [Music] so before i get into how and why i created quasalang i'm just going to quickly show you how to use it in a new quasar project so i'm just going to run quasar create quasar line test and because quasar 2 is still in beta i'm just going to run branch next to create a quasar 2 project and i'll just leave the project name i'll leave the product name leave the description and i'll just put my name for the author i'll choose scss although it doesn't really matter for this i'll disable yes lin and we need to make sure we enable view i18n i'll choose yes with npm to install the dependencies it's finished creating the project so i'm going to drag it into vs code open up the terminal and just launch it with quasar dev and it's now running in the browser and if we go into the source folder quasar has already generated the i18n folder and we just have a simple language file for english here with two different phrases so now i'll just jump to the quasar line page on github so first we want to install this globally so i'm going to open up a new terminal to do this i'll just run npm install gquasalang and that's installed so now we just want to make sure we're in the root of a quasar project which we are and to help us get started we can generate a sample csv file so i'm just going to run quasalang create csv and that's created this translations.csv file in the root we can edit this csv file with a standalone csv editor but i've been using a vs code extension called edit csv so i'll just jump to the extensions page search for edit csv and you can find that extension here and i have to give a huge shout out to janice dd who created this because this extension is absolutely amazing i downloaded countless standalone csv editors and this vs code extension is better than all of them and once that's installed we can just open a csv file and then we see this edit as csv option and we can click on that and we get this amazing csv editor so all we need to do now is add all of our phrases all of our keys and all of our different languages and we just need to make sure that in the header row we use the format language comma and then the locale code like you can see here and in this sample csv we just have three different phrases um three different languages so now all we need to do is generate our language files with the generate command so we just need to run quasar lang generate or we can just run quasar line g and it says the source folder exists so we just have to confirm this overwrite and it says here it wrote four files the main index file and the three different language files and if we look in the i18n folder and the index file we can see it's generated this file for us which is importing all of the different language files and it's also generated a folder for each language with all of the different phrases in this index file and so if we want to add a new phrase all we need to do is add a new row to our csv file so i'll just add a row to the bottom of this uh let's say we want to add the phrase butt hair i'll just set the key to bot hair and set the english phrase and then i'll just copy this i'll just jump to google translate so i'll just search for english to french paste that in and then copy this phrase paste it in the french column and then we'll get the german so i'll copy that paste it in here and we can just save this csv file and run the generate command again and if we now jump to our language files we can see the new phrase and we have a few different options here for this generate command so we can change the input path and the output path and we can force it to write the files without showing this prompt and we can also remove this watermark but i won't show you these options because they're pretty straightforward but one option that's really handy is that we can watch for changes and automatically regenerate our files so we just need to add this watch option so i'll just run this again quiz along generate but i'll add this watch option and it's regenerated the files and it says watching translations.csv for changes so if i jump back to the csv file and change one of these phrases and save it we can see that it's regenerated the files again so we can now just leave this running in the background without worrying about it and another thing we can do is add empty rows to our csv like this to separate our phrases into sections so if i jump back to the csv uh let's add a row at the top here um i'll add a row here and then another row at the bottom so if i save that let's regenerate the files and if we jump to one of the language files we can see equivalent new lines in this file as well we can also use comments to organize our phrases into different sections so if i jump back to the csv file uh i'll add a new row here and to add a comment we just use the hash symbol so i'll add a comment here that just says greetings i'll create a new row here add a comment that just says hair related and if i save that it's regenerated the files and if we jump to one of them we can see equivalent comments in our language files so let's quickly just use some of these phrases in our app and add a little language switcher so that we can switch language so i'll just jump to the index file so pages index.view and i'll remove these flex classes this image and we'll just add some buttons here so q dash button and i'll set the label to one of our phrases so our keys are hello goodbye thanks and butt hair so to use the translation helper we can just do dollar t parentheses and then the key name so hello i'll duplicate this a few times and we'll add the goodbye phrase the thanks phrase and the butt hair phrase save that and we can see those buttons on the page in english and i'll just add a bit of padding to this page so let's add a language switcher to the page i'll jump to the quasar site go to options and helpers and app internationalization and i'll jump down to create language switcher and i'll copy this q select i'll just add it to the top of the page i'll copy this script section and paste it over this script section and save that and i'll just make this a filled cue select so replace borderless prop with filled i'll just add a break tag underneath save that and reload there does seem to be some issues with the hot reload in quasar 2 but hopefully that'll be fixed soon i'll just zoom in a little bit here so we already have english and german set up so if i choose german we can see all of our phrases change and we can actually use quasar lang to generate the options array for our select switcher so basically generate these options here so if i jump back to the quasar line page and scroll down so we have a standalone command that we can use this lang switcher command or we can get it to spit out our language switcher array every time we run the generate command and generate our files so i'm just going to kill this process here and we'll add this lang switcher option uh we can see it's generated our files and it's also spit out our language switcher array so i'm just going to copy this and jump to index.view i'll just paste those in here save that and reload and we now have options for all of our languages and you can see we can translate these phrases into french and german and english as well and one more thing that we can do with quasar lang is find a locale code so if i jump back to the quasar land page we can run this list codes command and we can search for a language such as italian and it will give us all of the italian codes or we can just display all of the code so i'll just kill this process here and run quasalang list dash codes and if i just hit enter then it will spit out all of the different language codes alphabetized but if we want to search for a particular code then we can just enter a phrase so let's say we want to add italian to our app we can just search for italian and we can see the code for italian there so we can just copy this and then jump to our csv file and add a new column and paste that in there and then we can just add our italian phrases and a nice little trick that i've found is we can just select all of our english phrases like this copy those jump to google translate select our destination language and we can just paste those phrases in here and it will translate all of them and we can just copy these jump back to our csv file and paste them in and you can see it maintains all of our empty lines so now all we need to do is hit save and generate our files again and it's generated our italian file and it spits out our language switcher array so we can just copy that jump back to index.view and paste that in here save that and we now have italian phrases in our app as well so why the flip did i create quasalang well obviously i want budget 2 to work in many different languages at least 10 to begin with but maybe 20 different languages later on and i'm only really just getting started with this app and i already have almost 100 different phrases in the app so i would guess that eventually there'll be 400 different phrases in the app maybe more so if i've got 400 unique phrases and 20 different languages then that's 8 000 individual fields that i would need to manage in all of these language files which would just be completely unmanageable so i realized that if i want to support all of these languages then i needed a simple way of generating all of these files and there are a few libraries already out there which will generate i18n language files from a csv but none of them are made specifically for quasar projects none of them had some of the features that i wanted such as the ability to add comments to separate the phrases into sections and the ability to use strings as the keys instead of variable names which is what i'm doing here in fudgie so i decided to create my own tool uh to begin with i just created a single node.js javascript file in the root of my project called something like translate.js and i was just running that in the terminal by running nodetranslate.js and i got that working pretty well generating all of the language files from a csv file but then i realized that other developers could benefit from this functionality as well and i also realized that it could really benefit from having options on various different commands so then i decided to take my node.js file and convert it into a global cli tool and i've never created a cli tool before this and so to get started i watched a video from the man the legend brad travis so if you just search for node command line interface then you can find this video here build a command line interface with node and mongodb from travesty media and this video really helped me to get started so if you want to create your own command line tool then i would highly recommend that you watch this video so i'll just briefly try to explain how quasalang works so this is my quasalang project here and i'll jump to package.json first so because this is best as a global package i've added this prefer global true property and to make a node package and executable we need to add this bin property and set it to our entry file which is commands.js and if i jump to that this is using a package called commander which makes it really easy to set up your cli tool and all of your different commands so if i just scroll down a bit in this bit here we're just setting up the cli tool adding a description for it and adding the package version which i'm just grabbing from my package.json file which i'm pulling in here and then i'm just adding some additional help text which will be appended to the default help text which is generated by commander automatically so if i just run quasalang without adding any commands or options then we see all of this help text which tells us all of the different commands with descriptions and commander will generate all of this stuff automatically so all we need to do is add our different commands so i'm adding my generate command which is the main command which generates all of the language files and we can add an alias like a short version of the command and then we can just add all of our options uh we can give each option a long name and a short name we can give it a description and we can give it a default value so i'm adding all the different options the input path output path force right no watermark line switcher and watch then i'm also adding a description for the command and this action method will be fired when the user runs this command and it will pass all of the options into this action method as an object and then we can just trigger our own method which can be in this file or it can be outside of this file and i've created separate files for all of my methods to make it simpler and then we can pass all of those options along and trigger all of the code that we need to trigger so yeah i'm just setting up my generate command my create csv command which generates the sample csv then the line switcher command which outputs the lang switcher array then the list codes command which allows us to search and list the i18n local codes and if i just jump to my explorer so all of the code for my commands is in here so the create csv command all this is doing is setting an output path for the sample csv file and it's checking if that file already exists and if it does exist we fire a prompt asking the user if they want to overwrite that and i'm doing that using the inquirer package which is also super handy for setting up all different kinds of prompts so you can do simple yes no prompts or you can do input prompts where you ask the user to type something in you can do multiple selection prompts and all sorts of stuff and then if the user confirms then we're basically just copying the sample translations csv file which is in this sample csv folder here i'm just copying it to the user's current folder so that's nice and simple so then i'll jump to the generate command so what i'm doing here is setting up a watermark to be added to the generated files then i'm sanitizing the input and output paths and then i'm basically just reading in the csv file using a package called csv parser which will convert the data in the csv file into an array that we can work with like this and then i'm using a utility function here to create an object with all of the languages and codes that we can work with and that's in this utils folder so this is just going to generate an array of objects with each object having the language the code the code as a variable because some of these codes have a dash in them so we need to remove that dash for the variable name which is used in our main index file in the i18n folder such as you can see here and i'll just jump back to generate.js so then we're just setting up a string for our main index file code then we add the watermark to that if they've not disabled it then we're just generating all of the import statements these statements here then we're generating our export statement this statement here by just looping through that array of languages and codes that we created then i'm checking to see if the output folder exists and if it does exist we prompt the user if they want to overwrite it if they've not enabled the force option then we just delete the output folder and once that's all done we fire this write files function and this will then create the output folder and then write the file the main index file this file here using the code in this main index file string that we've been generating and then i'm just generating all of the individual language folders and files so if the language folder doesn't exist we create it then we set up a string for the code for the language index file so one of these guys and again we add the watermark if they haven't disabled it add a couple of blank lines then we add the opening export statement then i'm looping through all of the results which were generated by the csv parser package and if the current row in that data is not empty then we generate the code for the line and if it's comment and it starts with a hash then we add a comment and if it's not a comment then we add the key and phrase pair and if the row was empty in the data then we just add a empty line let me just finish the file with our closing brace this guy here then we just write the language file then i'm just creating an array of all of the files that have been written so that we can spit that out in a table at the end then we're just logging all of those messages so these messages that you see here and also the lang switcher options if they've enabled that and then i'm setting up a watcher in case they've enabled the watch option where i'm just using the fs.watch file method to watch the input file the input csv file and if that file changes we're just re-running the read csv and write method and doing all that stuff again so that's basically it for the generate command and the lang switcher command is again just using that utility method to generate that array of languages and codes then i'm just looping through that and generating the array that we can see here so that's pretty straightforward and finally the list codes method so this is pulling in an object from this index.js file here which is just an object with all of the locale codes as the keys and then the language for that locale code as the value so i'm pulling that in and then i'm converting it into an array that i can work with an array of objects where each object has the language and the code as properties and then i'm using inquirer again to prompt the user for a search string so they can either enter a search string or just hit enter to list all of the codes so if they do provide a search string then i'm triggering this filter codes by search method which is just going to filter the results by the phrase they searched for and if there are no results then i trigger this no results method which is just going to spit out no results found but if there are results or if the user just hit enter straight away then we fire this list codes function because this list of codes is so long i wanted to alphabetize it so if i just launch this code quasar line list dash codes you can see i've put all of the a's together and all the b's together i'm using a little bit of ascii art to write out these letters so i'm just setting up an array with the alphabet then i'm looping through each letter then filtering the locale codes and only grabbing the ones that start with the current letter and if there are any codes which start with that letter then we first of all print out this big ascii art character and i'm doing that using the figlet package and i'm also giving that some color using the colors package and then we just loop through all of the codes where the language starts with the current letter and spits out the language and the code and again i'm using the colors package to give these a little bit of color that's about it [Music] i'm going to show you how i can now use quasar line to add a new language to fudgie and almost 100 different phrases in a matter of seconds so i don't currently have italian so let's add italian i'm going to use the stopwatch here to see how long this takes so i'll start that first we want to grab the language code so i'm going to run quasar long list codes search for italian and grab the code there copy that and i'm going to add a new column paste that in and then i'm going to copy all of the english phrases copy that and jump to google translate so english to italian paste those phrases in there copy all of these phrases paste them in my italian column and save that and i have an npm script for running my quasar lang so i'll just run that and it's generated the files and it's given us the language switcher array so i'll update the array in my settings store paste that in save that uh reload and we're done and so in just 68 seconds we've added a new language to this app with almost 100 different phrases [Music] so what i'm going to do next is what i said i would do next in the last video before i got distracted by all that quasarlang tomfoolery which is work on the front end for this help section that's in the settings section this faq section and then hopefully i'll do the front end for this account section as well let me know in the comments if you would do any of this stuff differently uh check out the link to the full playlist in the description please hover over my face and click subscribe so you don't miss any of the videos in this series thanks for watching and i'll see you in the next one [Music]

Channel: Make Apps with Danny

Views: 2,619

Keywords: android, app design, app development, app development process, app ideas, app success, building an app, cordova, create a real world app, create an app, creating an app, css, electron, firebase, firebase cloud firestore, how to create a successful app, how to launch an app, how to start an app business, html, ios, javascript, mac, make money with apps, quasar, quasar framework, quasar framework tutorial, real app, real world app, successful app launch, vue, vue.js, vuejs, i18n, vue-i18n

Id: yrfSLSjq4-E

Length: 26min 8sec (1568 seconds)

Published: Wed May 05 2021