Forem: Fernando Raposo da Camara Silva

Docker + VSCode to Easily Set Up Dev Environment

Fernando Raposo da Camara Silva — Mon, 30 Aug 2021 22:55:16 +0000

You've already gone through this: You're going to start with a project and to do so, you'll have to go through the journey that is to configure the entire development environment. Download and install Dev IDE,required libraries, necessary tools... Ask one guy, ask another one... Until 8 hours later (hopefully) you finally managed to get the environment up.
Docker together with a VSCode extension called Remote Development can facilitate and speed up the installation of these environments, even if the dependency stack is large.
This article will be divided into 3 parts:

Docker + VSCode + Remote Development extension;
Set up a development environment with a large dependency stack;
Test Effectiveness.

Docker + VSCode + Remote Development Extension

Docker is a powerful tool, I've already written about it here (in Portuguese), with it you can create different types of environment isolated from a host machine. To install Docker enter here.

Remote Development Extension

This extension allows a file on the host computer to be opened inside a Container, either on a remote machine or in WSL if you are on Windows. What are the benefits of this?

Develop on the same operating system where the system will be deployed, or use faster and more specialized hardware than what is on your local machine. - Keep in mind that a Docker Container may be running on your machine locally, or anywhere in the world. So, if you have a slow computer, but someone provides you a external more "powerful" container, it can even reduce costs for companies that instead of providing high-end computers for their employees, could provide a more modest (and cheaper configuration) and focus on providing the development Containers.
Fasten the learning curve of new employees by standardizing the creation of development environments (as the little story I told at the beginning).

Although the first topic is an almost limitless subject, it is also complex, so in this article I will focus on the second topic.

Set up a development environment with a large dependency stack;

The preconditions for creating this environment are:

Have Docker and VSCode installed;
Add the Remote Development extension in VSCode;
Have the need to create a specific development environment.

To install Docker and VSCode just go to the links that was already presented. Once the VSCode is open, go to install an extension (CTRL+Shift+X) called Remote Development, as seen in the figure below.

Next, let's think about a development environment that has dependencies that we don't have originally on the host machine, or that are in different versions than those needed for development. It could be a specific version of JAVA, but I thought of something more complex to test the "limits" of this approach.

Development Stack

Let's imagine that we are going to develop a mobile App, using Ionic. To run Ionic, we need:

Node (latest version)
Angular (latest version)
Ionic (latest version) Let's see how my local machine is: As can be seen, Ionic is outdated (it says that there is a newer version), Angular is also old (in version 10), as well as Node (which is in v10.17 when there is v14 by any less). Okay, am I going to spend precious time trying to update all this? NOT! Even because it may be the case that other projects I'm working on need these apparently outdated dependencies. ### Putting Dependency Stack on a Container The first step we have to do is open a folder in VSCode and write a Dockerfile describing the to-do items that need to be installed in our development environment, whether they are: Node (and npm), Angular and Ionic. And let's run all of this inside Alpine which is a very small version of Linux. The Dockerfile might look like this:

FROM alpine:3.14

WORKDIR "/home"

RUN apk add --update nodejs npm

RUN npm install -g @angular/cli

RUN npm install -g @ionic/cli

CMD [""]

Keeping in mind that this folder where the Dockerfile is saved will be opened inside a Container with the dependencies that are described in it, click on the green button on the left side of the VSCode. An option box will open and from the existing ones choose "Open Folder In Container..."

Then what happens is that the VSCode and the extension will download the image, create the Container and leave it running ready to start the work.
NOTE: Yes, this process can take a few minutes depending on your internet connection.

Testing Effectiveness

After the time of creating the Container and installing the dependencies, the result will look something like this:

Let's test it in the Container's terminal to see if the dependencies are different from the host:

Everything seems to be in agreement, one important thing to remember is that there is now a Docker Container running under the hood, you can check this with the command
$docker ps
there will be a line like this:

Closing VSCode will not close the Container, it will be running until you finish it!
That's it, you can start creating your Ionic project, just type
$ionic start
And start making the App with the dependencies you want, and if any of your colleagues need the same thing, just send him the Dockerfile you have.

Docker + VSCode para Montar Ambientes de Desenvolvimento Facilmente

Fernando Raposo da Camara Silva — Sat, 28 Aug 2021 15:47:31 +0000

Você já passou por isso: Vai iniciar em um projeto e para tal, terá que passar pelo caminho das pedras que é configurar todo o ambiente de desenvolvimento. Baixar e instalar a IDE de dev, bibliotecas diversas, ferramentas necessárias... Pergunta para um, pergunta para outro até que 8 horas depois (com sorte), finalmente conseguiu levantar o ambiente.
Pois o Docker em conjunto com uma extensão do VSCode chamada Remote Development pode facilitar e agilizar a instalação destes ambientes, mesmo se a pilha de dependências grande.
Este artigo vai ser dividido em 3 partes:

Docker + VSCode + Extensão Remote Development;
Criar Ambiente de desenvolvimento com uma pilha de dependências;
Testar Efetividade da solução.

Docker + VSCode + Extensão Remote Development

O Docker é uma ferramenta poderosa, já escrevi sobre ela aqui, com ela você consegue criar diversos tipos de ambiente de forma isolada em uma máquina hospedeira. Para instalar o Docker entre aqui.
O VSCode é ultimamente uma das IDEs mais populares para desenvolvimento de software, sendo leve, gratuito e intuitivo, além de ter diversas extensões para facilitar a vida enormemente. Ele está sendo o que o Eclipse foi uns anos atrás (não que o Eclipse não seja legal também!). Uma extensão do VSCode que me chamou a atenção foi a Remote Development.

Remote Development Extension

Esta extensão permite que um arquivo no computador hospedeiro seja aberto dentro de um Container, ou em uma máquina remota ou no WSL caso você esteja no Windows. Quais os benefícios disso?

Desenvolver no mesmo sistema operacional em que se implantará o sistema, ou utilizar hardware mais rápido e especializado do que o que está na sua máquina local. - Tenha em mente que o Container do Docker pode estar rodando na sua máquina de forma local, ou em qualquer lugar do mundo. Assim, se você tem um computador meio fraquinho, mas alguém te prover este container mais "poderoso" isso pode até reduzir os custos das empresas que ao invés de proverem computadores topo de linha para seus funcionários, poderiam prover uma configuração mais modesta (e barata) e focar em prover os Containers de desenvolvimento.
Acelerar novos membros da equipe a se tornarem mais produtivos padronizando ambientes de desenvolvimento mais uniformes e estruturados (conforme a historinha narrei no início).

Apesar do primeiro tópico ser um assunto quase ilimitado, ele também é complexo, assim neste artigo vou focar no segundo tópico.

Criando Ambiente de Desenvolvimento Padronizado

As precondições para a criação deste ambiente são:

Ter o Docker e o VSCode instalados;
Adicionar no VSCode a extensão Remote Development;
Ter a necessidade de criar um ambiente de desenvolvimento específico.

Para instalar o Docker e o VSCode basta ir nos links já passados anteriormente. Uma vez com o VSCode aberto, busque e instale uma extensão (CTRL+Shift+X) que se chama Remote Development, como visto na figura abaixo.

A seguir vamos pensar em um ambiente de desenvolvimento que tenha dependências que não temos originalmente na máquina host, ou que estejam em versões diferentes das necessárias para o desenvolvimento. Poderia ser uma versão específica de JAVA, mas pensei em algo mais complexo para testarmos os "limites" desta abordagem.

Pilha de Desenvolvimento

Vamos imaginar que vamos desenvolver um App mobile, utilizando o Ionic. Para rodar o Ionic, precisamos:

Node (versão mais recente)
Angular (versão mais recente)
Ionic (versão mais recente) Vamos ver como está a minha máquina local: Como pode ser visto, o Ionic está defasado (ele mesmo diz que há uma versão mais recente), o Angular também está antigo (na versão 10), assim como o Node (que está na versão v10.17 quando já há a v14 pelo menos). Certo, vou gastar tempo precioso tentando atualizar tudo isso? NÃO! Até por que pode ser que outros projetos que estou trabalhando precisem destas dependências aparentemente defasadas. ### Colocando Pilha de Dependências em um Container O primeiro passo que temos que fazer é abrir uma pasta no VSCode e escrever um arquivo Dockerfile descrevendo as pendências que precisam ser instaladas no nosso ambiente de desenvolvimento, sejam elas: Node (e npm), Angular e Ionic. E vamos rodar tudo isso dentro do Alpine que é uma versão bem pequena do Linux. O Dockerfile pode ser assim: ```

FROM alpine:3.14

WORKDIR "/home"

RUN apk add --update nodejs npm

RUN npm install -g @angular/cli

RUN npm install -g @ionic/cli

CMD [""]

Tendo em mente que esta pasta em que o Dockerfile está salvo será aberta dentro de um Container com as dependências que estão descritas nele, clique no botão verde que fica no lado esquerdo do VSCode. Uma caixa de opções será aberta e dentre as existentes escolha "Open Folder In Container..."
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wnv7wl3fh4ofozyg1jvo.png)
Depois o que acontece é que o VSCode e a extensão tratarão de  baixar a imagem, criar o Container e deixá-lo rodando pronto para o início do trabalho.
OBS: Sim, este processo pode levar alguns minutos a depender da sua conexão de internet. 

## Testando Efetividade
Depois do tempo de criação do Container e instalação das dependências, o resultado será mais ou menos este:
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eq72lo7b0z7emuu6ni8g.png)
Vamos testar no terminal do Container para ver se as dependências estão diferentes das do host:
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bnznjldl6kd8x4be5js2.png)
Parece que está tudo de acordo, uma coisa importante é que lembre-se que há agora por baixo dos panos um Container Docker rodando, você pode comprovar isso com o comando 
`$ docker ps`
haverá uma linha assim:
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/va7402q5tr3dhxdu1dz9.png)
Fechar o VSCode não vai encerrar o Container, ele ficará rodando enquanto você não terminá-lo!
É isso, você pode começar a criar o seu projeto Ionic, basta digitar
`$ionic start`
E começar a fazer o App com as dependências que quiser, e se algum colega seu precisar da mesma coisa, é só mandar pra ele o Dockerfile que você tem.

Utilizando Docker em App WEB Spring Boot

Fernando Raposo da Camara Silva — Mon, 16 Aug 2021 22:51:38 +0000

Certo, muito se fala hoje em dia em Docker... A minha experiência recente é de puro fascínio, como demorei tanto para utilizá-lo? Realmente não sei...
Neste artigo tentarei sintetizar meus entendimentos de Docker e como utilizá-lo para "rodar" um sisteminha Web bem básico. Assim divido tudo em partes:

Conceito do Docker e o que ele tenta resolver;
Um pequeno sistema WEB utilizando Spring Boot;
Juntando tudo: o sistema WEB rodando dentro do Docker;

O que é o Docker?

Analise estes cenários:

Lembra aquela vez em que você queria usar um aplicativo no seu computador e instalando dependências necessárias para tal acabou por "quebrar" outros aplicativos no computador?
Ou quando para evitar esse tipo de coisa descrita acima você tentou levantar um outro Sistema Operacional virtualizado rodando por cima do seu S.O e no final tudo isso rodando junto ficou tão lento e ocupou tanto espaço que você desistiu!
Lembra aquele sistema que você desenvolveu, roda legal na sua máquina mas quando você coloca em produção você passa a noite inteira para fazer funcionar?

Para facilitar a resolução dos três cenários acima a resposta é Docker, Docker e Docker! Vamos primeiro tentar entender a diferença entre um sistema rodando no Docker e rodando numa virtualização de sistema operacional olhando a figura abaixo:

Para entender Docker precisamos entender o conceito de Containers. Pelo próprio site do Docker, um container é: "Uma peça padrão de software que empacota código e suas dependências de forma que as aplicações rodem rapidamente e de forma confiável de um ambiente computacional para o outro." Neste site há uma comparação legal, que compara o Docker a um condomínio de apartamentos e um sistema virtualizado a uma casa alugada.
Enquanto que em um condomínio os recursos (a piscina, a academia, garagem, água...) são compartilhados entre os vizinhos. Em uma casa alugada nada é compartilhado, ou seja tudo é exclusivo, e sabemos que essa exclusividade tem um custo.
Resumindo: Containers são menores que imagens virtuais, podem ser mais facilmente construídos (e destruídos) e eles compartilham recursos com o S.O em que estão rodando. Em contrapartida, sistemas virtualizados não compartilham nada um com o outro e também não compartilham recursos no S.O em que estão rodando.

OBS: Informações sobre como instalar o Docker podem ser encontradas no site oficial.

1. Docker

1.1. Dockerfile

O Docker entende uma receitinha de bolo que explica como construir o Container, essa receita é um arquivo sem terminação chamado Dockerfile. Se você vai usar um Linux bem pequeno chamado alpine para rodar o seu programa, você tem que dizer isso no Dockerfile. Se vai precisar instalar uma ferramenta/ dependência que o seu sistema precisa dizer isso também no Dockerfile.

1.2 Docker Image

O Dockerfile é só a receita do Container. É necessário construí-lo fisicamente em uma imagem (na verdade aquele Linux chamado Alpine que é pequeno e que você pode usar também é uma imagem), ou seja, imagens específicas são compostas de outras mais genéricas.

1.3 Container

Depois que temos o Dockerfile e a imagem construída, colocamos o Container baseado naquela imagem para rodar. Se fizermos a analogia com JAVA, imagine o Dockerfile como se fosse o arquivo *.java, a imagem como se fosse o *.class ou o *. jar gerado e o Container como o aquivo jar rodando. E como sabemos, para rodar um jar muitas vezes precisamos passar parâmetros, com os Containers não é diferente, por exemplo, se queremos acessar uma porta do Container, precisamos passar isso como parâmetro.

2. Sistema WEB com SpringBoot

2.1. http://localhost:8080

Crie uma pasta chamada docker e abra o VSCode nela e pressione CTRL+SHIFT+p



$mkdir docker
/docker$ code .

Escolha Spring Initializr: Create a Maven Project

Depois escolha a versão mais recente que houver do SpringBoot, no caso, estou usando 2.5.3

Escolha a linguagem JAVA e mantenha as opções que vem sendo apresentadas (com.example) e (demo). No packaging type, escolha Jar e na versão JAVA eu estou trabalhando com a 8.
Por fim escolha apenas a dependência do Spring Web (a última da foto)

Após isso o seu VSCode deve estar assim com a classe DemoApplication.java criada:

O programa ainda não tem muita função, precisamos de um acesso para este retorne informações quando o sistema receber requisições externas. Vamos criar uma classe chamada Serviço (Servico.java) dentro de uma package chamada service que é bem simples, ela só retorna "Hello World":



package com.example.demo.service;

import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
public class Servico {

    @RequestMapping("/hello")
    public String hello() {
        return "Hello World";
    }

}

Volte na classe DemoApplication e no método main clique em Run para executar a aplicação.
Quando ela acabar de levantar, vá no browser e escreva http://localhost:8080/hello
O resultado será o abaixo, e isto quer dizer que o seu sistema WEB está rodando localmente com acesso ao serviço /hello na porta 8080.

Falamos antes de Docker e agora temos uma aplicação WEB rodando. Como criar um Container rodando esta aplicação? É o próximo desafio.

3. Aplicativo Rodando no Container

3.1. Construindo Dockerfile

Temos o nosso aplicativo construído na seção 2, vamos agora pensar em como seria o ambiente para executá-lo. Primeiramente, vamos executá-lo em um Container Linux, então vamos considerar o Alpine, mais informações sobre ele aqui. Lembrem que eu escolhi o Java 8 quando estava criando o aplicativo? Então este é outro ponto a se considerar.
Crie um arquivo Dockerfile (sem extensão) no mesmo diretório criado (docker) e no mesmo local onde o projeto JAVA está criado e irei comentar linha a linha este arquivo Dockerfile.

Linha 1: Diz que precisaremos de uma imagem do Linux Alpine e que deve vir com um jdk versão 8 já instalado (prático, não precisamos instalar JAVA);

Linha 3: Diz qual será o diretório de trabalho no Container, no caso será o /home;

Linha 5: Diz para copiar tudo que estiver neste diretório em que estamos e mandar para o WORKDIR definido (no caso /home);

Linha 7: Como a versão Alpine do Linux é bem básica, precisamos instalar o Maven (lembrem que criamos um Maven Project lá no VSCode), é isto que este comando faz;

Linha 9: Após a linha 3 executar passamos a ter um diretório /demo dentro de /home, setamos então /home/demo como sendo o novo diretório de trabalho;

Linha 11: Rodamos o comando para fazer o MAVEN gerar o Jar do App que desenvolvemos, este jar é criado em uma pasta /home/demo/target

Linha 13: Este comando expõe a porta 8080 (que é a porta que o App Web utiliza para receber requisições

Linha 15: Este comando representa o que deverá ser rodado no prompt deste Container quando ele for iniciado, que são o comando java, com os parâmetros "-jar" e o arquivo jar a ser executado /home/demo/target/demo-0.0.1-SNAPSHOT.jar

3.2. Gerando Imagem

Lembrem que o Dockerfile é como se fosse o arquivo .java, então temos que gerar o .jar dele para podermos rodá-lo. Para fazer isso, utilizamos o comando build e com isso geraremos a imagem com tudo que está descrito no Dockerfile. Assim, na mesma pasta em que estão o Dockerfile e a pasta /demo com o nosso projeto Spring, digite:
docker build . -t java-spring
O que isso vai fazer? Vai ler o Dockerfile que está nesta pasta, vai ler o projeto Spring criado e gerar a imagem que terá o nome de "java-spring". Aguarde a imagem ser criada e depois digite o comando docker image list para constatar que a imagem foi criada.

Isso quer dizer que a imagem (o nosso jar) foi criado. Temos que pô-lo para rodar.

3.3. Criando Container

Como foi dito, da mesma forma como temos que passar parâmetros para rodar um arquivo jar, para rodar um Container também temos a mesma lógica. Para executarmos o Container e conseguirmos acessá-lo do browser da mesma forma que acessamos quando rodamos localmente precisaremos fazer um mapeamento de portas. Recorde-se que na Linha 13 foi exposta a porta 8080, precisamos agora mandar informações para esta porta mapeando uma porta no S.O host para a porta do Container. Veja o comando abaixo para gerar o Container
docker run --name java-container -d -p 8080:8080 java-spring
traduzindo os parâmetros para:

--name: o nome do Container (java-container);
-d: Modo dettached (isso quer dizer que após o container começar a rodar, ele ficará rodando em background e o terminal ficará livre para o usuário);
-p: é o mapeamento de portas PORTA_HOST:PORTA_CONTAINER, quer dizer que uma requisição no host para a porta 8080 irá ser enviada para o host na porta 8080.

O parâmetro a seguir é justamente a imagem java-spring que foi criada, seria como se fosse o nome do jar que vamos rodar.

Após solicitar que o Container inicie-se pode ir no Browser e digitar http://localhost:8080/hello, o efeito será o mesmo de quando executávamos o app web no host, justamente a palavra Hello World.

3.4. Comandos Adicionais Docker

Listar Containers rodando

$docker ps

Listar Containers existentes

$docker ps -a

Iniciar um Container

$docker start <nome_container>

Derrubar um Container

$docker stop <nome_container>

Reiniciar um Container (stop seguido de um start)

$docker restart <nome_container>

Listar Imagens Máquina Local

$docker image list

Remover Imagem

$docker rmi <nome_imagem>

Enviar um comando para um Container rodando

$docker exec -it <nome_container> <comando>

Considerações

O Docker é um aliado poderoso, vale a pena aprender e usá-lo. O app e o Dockerfile estão aqui para quem quiser baixar.

Scrolling to an Element Only After It Appears using Angular

Fernando Raposo da Camara Silva — Thu, 08 Jul 2021 00:51:45 +0000

This is an evolution of my previous article. Let's suppose you have the following requirement:

In a long page, wait for a specific HTML Element to appear, and only after its generation scroll to it.

It looks simple right? But imagine that this Element exibition could take some time, for instance, it could be a grid with some information provided from a web service, or some data from a slow SQL query. Nevertheless, there's no reason to scroll before the data is already shown. So how can we do it? My goals are:

Create a button that will generate a grid at the bottom of a long page;
After the button is clicked, some mechanism is needed to simulate random time;
Scroll to the grid only after it was added to the page.

comment: The table to be scrolled is not added to the page by default. This is possible by using a *ngIf statement. As you can see bellow, this is achieved by setting the variable showTable to false at startup. This DOM concept is important to understand, because if you have decided to use hidden attibute instead of *ngIf strategy, the table would be already on your page and DOM, the only thing is that it would be hidden.

1. Button

Let's create a button that will call a fake backend. Let's also add a Spinner just to illustrate time. Here is a good place where you can find cool CSS Spinners to add to your page.
Bellow you can see that after clicking the button a function named waitAndGoDown() is called. This will be described in details next.



<div style="text-align: center">

  <button (click)="waitAndGoDown()">Wait Random time and go Down</button>

  <p>

  <div *ngIf="showSpinner" class="loader">Loading...

  </div>

</div>

Fake Backend

By default, after clicking the button we want to turn the Spinner on and wait some random time until finally exibit the grid. A fake backend can be simulated by using a setTimeout method. Look inside waitAndGoDown() function:

As it can be seen on Stackblitz, simulateBackend() function uses a random setTimeout limited to 5 seconds to randomize the return of the fake Backend. This means that after a while the Spinner is turned off and the grid is allowed to appear.
comment: Remember that everything is asynchronous, as a result, the program doesn't wait simulateBackend to return to invoke waitForElement. That's why there's a need for some mecanism to monitor when the table appears (or when the DOM mutates) and eventually when to scrool to it.

3. Monitoring the Grid

Check bellow how the monitoring is done line by line, notice that the id 'myTable' of the table to be presented is passed as an argument.

Lines 39-43: Checks if the element is already there. If it is, scroll to it and return.
Line 44: Creates an observer that monitors nodes added to the DOM. Every time the DOM mutates, the changes are observed.
Lines 47-54: It checks if the newest mutation contains the element we are looking for (the table!). If it is, scroll to it.
Lines 56-59: Defines what kind of nodes are going to be observed (the entire childList of the root component)

The function that does the scrolling is one of the options presented here.

There's also a Stackblitz with this example.

Hope this can help someone!

Fonts:
https://projects.lukehaas.me/css-loaders/
https://codepad.co/snippet/wait-for-an-element-to-exist-via-mutation-observer

Google Maps on Your Ionic4 Project w/ Angular

Fernando Raposo da Camara Silva — Fri, 25 Jun 2021 02:11:30 +0000

Ionic

The advantage of Ionic is that if you have knowlegde of some Web Development Framework (e.g.: Angular, React, Vue or pure Javascript), then you can start creating Cross-Platform Mobile Apps right away. This means a reduced learning curve and increased productivity.
Nevertheless, some people may say that an Ionic App is not a native one, and also that it can generate an app that is slower than a "real" native one made with Flutter or Kotlin. Ok... But we cannot forget that phrase commonly used in informatics: "It really depends...". It depends on your team, it depends on your timeline, it also depends on the devices you will be running the apps.

Objectives

My goals in this article are:

Set up a project using Ionic 4 and Angular;
Integrate Google Maps into the project;
Exercise some Maps features like centering, maps inputs and outputs;

1. Project Setup

The basic dependencies to start your project are: Node.js and Angular. If you do not have Node.js, go here. If you do not have Angular installed, go here. After installing both, you need to install Ionic. Just type:
npm install -g @ionic/cli
or go here for further details.
Finally, let's create our Ionic 4 project. Type:
ionic start
and next select Angular as framework.

Next, give a name to your project and as starter template choose sidemenu as seen bellow:

Next, if a question: "Integrate your new app with Capacitor to target native iOS and Android? (y/N)" is prompted, Choose (y) and wait until the template is completely generated.
There is only one more dependency to be added and we are ready to go. Go to your project's folder and install this dependency by typing:
npm install @angular/google-maps
Next type: code . To open the project on VSCode, and, once inside it, type on terminal ionic serve to check if our template is up and running. If everything went ok, you'll see at http://localhost:8100 this image which emulates a mobile device on browser after pressing F12 key:

2. Google Maps Integration

Google Maps is just perfect! However, in order to use it integrated to an application we have to pay for it. There's no free lunch right? Google has detailed instructions about billing and how to use Maps API here. After the payment process (do not worry you don't have to pay anything in advance) you'll receive an API KEY, which allows us to consume the Map services provided and billed by Google.

2.1 The App

Let's consider the following scenario: We'll adapt our generated template to a tourism App that presents points of interest to tourists from Cruise Lines. Our App will show points of interest near where the ship is anchored. Those points of interest will be divided in categories like (Restaurant, Must-See, Restroom, Tourist Info.).

2.2 Adaptations to Generated Sidemenu project

We will use Google Maps Component to ease the integration. First, go to index.html and

add the following script line:
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
Keep in mind that you will have to use that API KEY generated after Google's billing process is completed instead of the variable "YOUR_API_KEY".

Next, we need do adapt the template to the tourism context. Notice that the generated template looks like a mail box, so let's change its context. Replace "Inbox" with "Welcome", "hi@ionicframework.com" with "tourism@tourism.com", remove completely the Labels and adjust the itens and icons to present: All, Restaurant, Must-See, Restroom, Tourist Info.
As a result, the App now looks like below:

Go to Folder component, and on folder.module.ts file add GoogleMapsModule to imports.

Still, on Folder Component go to its template and inside the div with id=container replace the code with the following:

    <google-map
    height="500px"
    width="500px"
    >
    </google-map>

After that, theoretically, Google Maps should appear like this on the app:

3. Google Maps Features

You can see on previous pictures that when google maps doesn't know where to center, it goes "home". That's why the project is centered on GooglePlex, California at first. In order to change centering to a certain place, you need to discover this place's latitude and longitude (just click on the map and the coordinates will appear as shown bellow):

Create on folder.page.ts a variable center and set longitude and latitude attributes like this:
center = new google.maps.LatLng(-8.063242, -34.871048);
and update the template:

    <google-map
    height="700px"
    width="500px"
    [center]="center"
    >
    </google-map>

Now we can see that the map is centered according to the coordinates defined by center variable.

3.1 Points of Interest

Now, let's define some points of interest. In order to do it we can use this tool to generate a list of points interest and also add meaningful data associated to it.
For instance, if you click somewhere on the map, you can then add properties like a title and a category, and a json containing your definitions is generated on the right side.

Next, take the json points and create a file called points.json and import it on your file.
A possible points.json file is shown next:

{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "properties": {
        "marker-color": "#7e7e7e",
        "marker-size": "medium",
        "marker-symbol": "",
        "title": "Marco Zero",
        "cat": "mustsee"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          -34.871112406253815,
          -8.063165383068121
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "marker-color": "#7e7e7e",
        "marker-size": "medium",
        "marker-symbol": "",
        "title": "Malakoff Tower",
        "cat": "mustsee"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          -34.87082004547119,
          -8.060759318240265
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "marker-color": "#7e7e7e",
        "marker-size": "medium",
        "marker-symbol": "",
        "title": "Cais do Sertão Museum",
        "cat": "mustsee"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          -34.87032651901245,
          -8.061216099860022
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "marker-color": "#7e7e7e",
        "marker-size": "medium",
        "marker-symbol": "",
        "title": "Kahal-Zur-Israel Sinagoge",
        "cat": "mustsee"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          -34.87139403820038,
          -8.06174192922556
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {},
      "geometry": {
        "type": "Point",
        "coordinates": [
          -34.871858060359955,
          -8.061085970265072
        ]
      }
    }
  ]
}

In addition, to use the json file, go to tsconfig.json file and on compilerOptions add:

 "resolveJsonModule": true, "esModuleInterop": true

By doing this you'll be able to import the json file like this:
import points from './points.json'
Finally, we have to show markers for the points we have defined. Markers are defined using the following component:

    <map-marker
    *ngFor="let marker of markers"
    [position]="marker.position"
    [label]="marker.label"
    [title]="marker.title"
    [options]="marker.options"
  >
  </map-marker>

We have to filter each point of interest selected in order to show just some, or all the points. For instance, if we click on "All" or when opening the app at first time, the following points are shown:

However, if "Must See" is clicked, only those points are presented:

All the code is here I hope this article help someone!

Fonts:
https://timdeschryver.dev/blog/google-maps-as-an-angular-component

GUI Simples no Linux Utilizando Node.js e Zenity

Fernando Raposo da Camara Silva — Tue, 01 Jun 2021 02:12:53 +0000

(Este post é uma tradução deste original em inglês)
É impressionante a quantidade de ferramentas "secretas" do Linux que não são tão bem conhecidas até hoje. Outro dia mesmo esbarrei com o Zenity. Ele tem a ver com a geração de notificações através do Terminal do Linux. Ele pode permitir fazer scripts mais amigáveis exibindo caixas de diálogo. Usa-se ele tipicamente em scripts shell para aumentar a usabilidade.

Meus objetivos serão os seguintes:

Usar o Node.js para acessar dados financeiros relacionados a preços de títulos do Tesouro Direto;
Criar um mecanismo para de forma sistemática checar o preço dos títulos (minuto a minuto, ou hora por hora...);
Usar o Zenity para exibir uma notificação com o preço corrente do título.

Acessando Informações do Tesouro Direto

As informações do Tesouro Direto podem ser achadas aqui. Além disso, se apertarmos o F12 e checarmos a aba Network, veremos o seguinte json sendo recebido pelo browser:
https://www.tesourodireto.com.br/json/br/com/b3/tesourodireto/service/api/treasurybondsinfo.json
Podemos ver que este JSON contém as informações instantêneas de cotações do Tesouro Direto.
Assim, não há muito mais o que fazer além de usar o Node.js para fazer chamadas GET e capturar este arquivo json como visto abaixo:

const axios = require('axios');
const { exec } = require("child_process");
const https = require('https');



const instance = axios.create({
  httpsAgent: new https.Agent({
    rejectUnauthorized: false
  })
});

instance.get('https://www.tesourodireto.com.br/json/br/com/b3/tesourodireto/service/api/treasurybondsinfo.json')
.then(x => {...

Nota: Este rejectUnauthorized: false tem que ser setado, caso contrário você receberá erro de certificado.

Agendador de Tarefas

Um cron job é um comando Linux usado para agendar (ou schedular) tarefas a serem executadas em algum momento do futuro. Esta funcionalidade é exatamente o que é necessário para podermos checar as taxas a cada hora. Assim, iremos usar um cron job para chamar o nosso script Node e assim recuperar as taxas do tesouro direto a cada hora.
Para criar um Cron Job vá em:
/var/spool/cron
E acesse a tabela cron do usuário escrevendo no prompt:
crontab -e
O README apresenta orientações sobre como agendar comandos usando a crontab adicionando uma expressão seguida pelo comando que se deseja executar periodicamente.
Por exemplo, se você quiser rodar seu programa a cada minuto entre dez da manhã e cinco da tarde todos os dias úteis da semana escreva o seguinte na crontab:
* 10-17 * * 1-5 <comando>
Para facilitar esta tarefa existe um site chamado crontab.guru que ajuda a construir a expressão.
Nota: Para agendar o cron para rodar o seu script DE HORA EM HORA, DE SEGUNDA A SEXTA das dez da manhã às cinco da tarde a expressão é: 0 10-17 * * 1-5

Lembre-se de adicionar o caminho completo do Node e do seu script para que o job na cron tab funcione corretamente.

Notificações Usando Zenity

O Zenity é uma ferramenta que permite a geração de notificações através de comandos no terminal. Notificações que se parecem com isso:

Você pode gerá-las escrevendo no Terminal assim:

zenity --notification\ --window-icon="info" \ --text="There are system updates necessary!"
Há uma boa chance do Zenity já estar instalado na sua máquina (no Ubuntu está). Mas se você não tem, por favor escreva:
sudo apt-get update -y
depois, escreva:
sudo apt-get install -y zenity
Para concluir os objetivos nós precisamos que o Node execute comandos Shell de alguma forma. Isto é alcançado utlizando a biblioteca exec como demonstrada abaixo:

  exec('zenity --notification --window-icon="info" --text="Taxa Atual TD 2035: IPCA+"' + taxa, (error, stdout, stderr) => {
    if (error) {
      console.log(`error: ${error.message}`);
      return;
    }
    if (stderr) {
      console.log(`stderr: ${stderr}`);
      return;
    }
  });

O projeto inteiro no GitHub está aqui.

Fontes:
https://help.gnome.org/users/zenity/stable/index.html.en
https://www.howtoforge.com/how-to-display-gui-dialogs-in-bash-script-using-zenity/
https://crontab.guru/

Simple GUI on Linux Using Zenity and Node.js

Fernando Raposo da Camara Silva — Thu, 27 May 2021 23:42:59 +0000

It is incredible the amount of "secret" features on Linux that are not well known until today.
I came across a tool called Zenity the other day. It is related to sending UI notifications on Linux.
Zenity is an open-source tool for displaying simple GUI in shell scripts. It makes scripts more user-friendly by displaying GTK+ dialogs. It is tipically used on shell scripting to improve its usability.

My goal is to do the following:

Use Node.js to access financial data related to Brazilian Treasury Bonds (Tesouro Direto in Brazil);
Create a mechanism to sistematically check instant treasury rates;
Use Zenity to pop-up a notification to user;

Acessing Tesouro Direto Data

Tesouro Direto Rates can be found here. In addition, if you press F12 and check Network Tab, you'll see that the following json is received by the browser: https://www.tesourodireto.com.br/json/br/com/b3/tesourodireto/service/api/treasurybondsinfo.json
We can see that it contains all the current treasury rates up to date.
So, there's not much to do other than to use Node.js to make GET commands and capture that json file as shown bellow:

const axios = require('axios');
const { exec } = require("child_process");
const https = require('https');



const instance = axios.create({
  httpsAgent: new https.Agent({
    rejectUnauthorized: false
  })
});

instance.get('https://www.tesourodireto.com.br/json/br/com/b3/tesourodireto/service/api/treasurybondsinfo.json')
.then(x => {...

Note: That rejectUnauthorized: false is important to be set, otherwise you will get a certificate error.

Task Scheduler

A cron job is a Linux command used for scheduling tasks to be executed sometime in the future. This feature is exactly what is needed to check the desired rates every hour. So, we will use a cron job to call our Node script to get the treasury bond rates every hour.
To create your Cron Job go to:
/var/spool/cron
And access user's cron tab by typing:
crontab -e
The README presents orientation about how to schedule commands using crontab by adding some expressionfollowed by the command that needs to be executed.
For instance, if you want your program to run every minute from 10AM to 17PM every weekday, write the following:
* 10-17 * * 1-5 <command>
In order to ease this task, there is a site called crontab.guru that helps us to construct the expression.
Note: To schedule cron to run your script EVERY HOUR of EVERY WEEKDAY from 10AM to 17PM, the expression is: 0 10-17 * * 1-5

Remember to add the full path of Node and script to make the cron tab job to work properly.

Notifications Using Zenity

Zenity is a tool that enables the generation of dialogs from terminal commands. Notifications look like this:

You can generate them by typing on Terminal:
zenity --notification\ --window-icon="info" \ --text="There are system updates necessary!"

There's a good chance that Zenity is alredy installed on your machine (In Ubuntu it is). If you do not have it, please type:
sudo apt-get update -y
next, type:
sudo apt-get install -y zenity
To conclude our goals we need a way to make Node run shell commands and process their I/O. This is achieved by using exec library as shown bellow:

  exec('zenity --notification --window-icon="info" --text="Taxa Atual TD 2035: IPCA+"' + taxa, (error, stdout, stderr) => {
    if (error) {
      console.log(`error: ${error.message}`);
      return;
    }
    if (stderr) {
      console.log(`stderr: ${stderr}`);
      return;
    }
  });

The entire Github project is available here.

Fonts:
https://help.gnome.org/users/zenity/stable/index.html.en
https://www.howtoforge.com/how-to-display-gui-dialogs-in-bash-script-using-zenity/
https://crontab.guru/

Tree Ways to Scroll to an Element using Angular

Fernando Raposo da Camara Silva — Sun, 02 May 2021 02:30:00 +0000

Recently I was implementing in Angular a requirement that demanded the following:

"After pressing a button, if some specific data is returned, present a warning with a link saying that the specific data exists. After clicking on that link, scroll down to the grid containing the data".

First, I tried the simplest solution, which was the use of DOM commands like Element.scrollIntoView(), or
document.getElementById("<yourTarget>").scrollIntoView({ behavior: "smooth", block: "start", inline: "nearest" });
(Remeber to add id="<yourtarget" where you want to scroll)
It worked on development, and it was quite easy, but after deploying to production environment I noticed that the scroll was not working!

So, I tried another way, using Angular's ViewportScroller.
In order to do that, you have to inject ViewportScroller at Component's constructor, like constructor(private scroller: ViewportScroller) and just call this.scroller.scrollToAnchor("<yourTarget>");. Again, no big deal, and again it was NOT WORKING on production environment.

The third way to do it, is to use Router to provide navigation to the anchor I wanted. Similarly to the last option, inject Router to constructor, like constructor(private router: Router), and use the command:
this.router.navigate([], { fragment: "<yourTarget>" });
Finally it DID WORK on production environment! I don't know for sure why the previous methods failed, I read some sources that says Angular Material blocks scrolling, but I'm not sure.
In order to present the different options there's a Stackblitz as an example.
There you can click on tree buttons, each one using a different method to scroll down to some anchor.

Hope it helps someone :)