Forem: David

Add i18n to your Angular App

David — Sat, 17 Feb 2024 19:48:45 +0000

Hello guys, the other day in my job I had to add multilanguage support to our current Angular App that we are developing, was the first time I had to include this kind of feature to an Angular App, so I had to investigate how to do this implementation and I thought that was amazing share that I learn with you.

First, we need to include the @angular/localize to our angular application.

ng add @angular/localize

We can configure all i18n settings in angular.json

"projects": {
    "angular-localize-example": {
      ................................................
      "i18n": {
           "sourceLocale": "en-US",
           "locales": {
              "es": {
                "translation": "src/locale/messages.es.xlf"
              }
           }
       },
     ................................................

In the "sourceLocale" attribute, we can specify the default language that our application will use, in this case "en-US". In the "locales" attribute we will define the language that our application will support, for example Spanish "es" and the path of the translation file, usually in "src/locale" folder.

The next step is adding the i18n attribute to the HTML where we want to add a translatable text.

<p i18n>Welcome to my app!</p>

Once we have finished placing the attributes where we want. We had to extract the translations with the next command

ng extract-i18n --output-path src/locale

The --output-path parameter specified where will store the generated translation file.

If we open the generated messages.xlf file, we will see something like next

<?xml version="1.0" encoding="UTF-8" ?>
<xliff version="1.2" xmlns="urn:oasis:names:tc:xliff:document:1.2">
  <file source-language="en-US" datatype="plaintext" original="ng2.template">
    <body>
      <trans-unit id="856378210155557077" datatype="html">
        <source>Welcome to my app!</source>
        <context-group purpose="location">
          <context context-type="sourcefile">src/app/app.component.html</context>
          <context context-type="linenumber">1</context>
        </context-group>
      </trans-unit>
    </body>
  </file>
</xliff>

Now we can copy the file and renamed it like we indicated in angular.json. For the Spanish translation will be messages.es.xlf and edit the text with the translation.

<?xml version="1.0" encoding="UTF-8" ?>
<xliff version="1.2" xmlns="urn:oasis:names:tc:xliff:document:1.2">
  <file source-language="es" datatype="plaintext" original="ng2.template">
    <body>
      <trans-unit id="856378210155557077" datatype="html">
        <source>¡Bienvenidos a mi APP!</source>
        <context-group purpose="location">
          <context context-type="sourcefile">src/app/app.component.html</context>
          <context context-type="linenumber">1</context>
        </context-group>
      </trans-unit>
    </body>
  </file>
</xliff>

When we will have all ready we can build our application, but with one new parameter

ng build --localize

This will generate the build app but separated in the languages that our application support.

Full Code
https://github.com/davidzcode/angular-localize-example

How to: Create an API Rest with Express - Basic

David — Sat, 17 Feb 2024 02:16:10 +0000

Hi everyone, I want to bring you a quick tutorial/example of make an API Rest with Express and create a Dockerfile for building a container image.

First, we need to initialize an NodeJS project

npm init

In this step, we will ask for the next parameters for creating the package.json of the project:

Package Name: This is the name of your package. It should be unique within the npm ecosystem. It's used to install the package via npm and to identify it in package listings.

Version: This specifies the version of your package. It follows the semantic versioning format (major.minor.patch). It's used by npm to determine which versions of a package to install, among other things.

Description: This is a brief description of what your package does. It helps users understand the purpose of your package when browsing package listings.

Entry Point: Specifies the main entry point of your package, which is the starting point for your code when it's imported or required by other modules. This entry point is typically a JavaScript file that exports the main functionality of your package. When users install your package, this is the file that will be executed or imported first.

Test Command: This is the command that should be run to execute your package's tests. It's typically used during development to ensure that your package behaves as expected.

Git Repository: This is the URL of the Git repository where your package's source code is hosted. Including this information allows users to browse the source code and contribute to your project.

Keywords: These are keywords or tags that describe your package. They help users discover your package when searching npm's package registry.

Author: This is the name (and optionally email) of the package's author. It's typically used to credit the creator of the package

License: This specifies the license under which your package is distributed. It's important for users to know what rights they have when using your package.

then we have to install the Express library for creating the ⚡magic⚡

npm install express --save

And the time arrive, time to code. We have to create our "main" JS file like we had specified in the Entry Point parameter in the previous step, in my case, index.js , and we will start by importing the express module to our file.

const express = require('express');
const app = express();

After this line, we could access to all Express functions to create and develop our API, using the const 'app'. Ant the most import part of an API it is ROUTES of course, so we will create one.

app.get('/', (req, res) => {
  res.send('Hello World!');
})

And finally we have to specify the port for the application, in this case we will use port 3000

app.listen(3000, () => {
    console.log('Server start')
})

Now we only have to execute the index.js with node command

node index.js

And if all is alright, we will see the log in the terminal

Now we can use Postman to check our new and beautiful endpoint working

And this all for now, we will see more in next posts 🔮

Full Code
https://github.com/davidzcode/express-basic-api

Google Cloud: Artifact Registry

David — Mon, 06 Sep 2021 16:48:59 +0000

Welcome to my first post, I hope this helps you for your future projects.

Recently in my company we have started to migrate everything to Google Cloud Platform. In this process, we have found a new service that we did not know about it. This service is Artifact Registry.

After searching for information about the service, it seems that it is an upgrade from an old service, that it's called Container Registry which is basically a Docker image repository.

The new thing is that it adds support for language packaging for Java, Node.js and Python, even OS packages like Debian.

That was interesting, in my company we work with Java and Spring and this can be useful for storage artifacts and have our own artifacts repository for Maven and Gradle.

I suppose there will be many people who already know it, but I have wanted to do a post writing about it because if someone does not know it yet, can be useful.

A greeting!

Link to Artifact Registry