<![CDATA[Alvaro Camillo Neto]]>https://alvarocamillont.devhttps://cdn.hashnode.com/res/hashnode/image/upload/v1560517105707/l2Pv0Oaep.pngAlvaro Camillo Netohttps://alvarocamillont.devRSS for NodeWed, 22 Apr 2026 18:28:54 GMT60<![CDATA[Construindo um App com IA: Um Guia com Angular, Genkit e o Poder do Gemini no Mundo de Naruto]]>https://alvarocamillont.dev/construindo-um-app-com-ia-um-guia-com-angular-genkit-e-o-poder-do-gemini-no-mundo-de-narutohttps://alvarocamillont.dev/construindo-um-app-com-ia-um-guia-com-angular-genkit-e-o-poder-do-gemini-no-mundo-de-narutoMon, 15 Dec 2025 12:18:47 GMTE aí, dev? Se você é fã de animes e de desenvolvimento de software, vai adorar este projeto. Que tal unir a força do universo Naruto com o poder da Inteligência Artificial para criar uma aplicação moderna?

Neste artigo, vamos construir o "Hokage Desk": um aplicativo onde você descreve uma missão ninja e uma IA, agindo como um mestre de Konoha, gera um pergaminho de missão completo. Para isso, usaremos Angular no front-end e, no back-end, a dupla dinâmica Genkit e a API do Gemini, a mais nova geração de modelos de IA do Google.

Prepare-se para mergulhar em um projeto que combina uma API de IA de ponta com um dos universos mais amados da cultura pop. Vamos nessa?

Pré-requisitos

Antes de começarmos nossa jornada ninja, garanta que você tenha as seguintes ferramentas instaladas em sua máquina:

Obtendo sua Chave de API do Gemini

Para que nossa IA funcione, precisamos de uma chave de API do Gemini. É grátis e fácil de conseguir.

  1. Acesse o Google AI Studio.

  2. Faça login com sua conta do Google.

  3. No menu à esquerda, clique em "Get API key".

  4. Clique em "Create API key in new project".

  5. Copie a chave de API gerada. Ela será seu passe para o mundo da IA.

Configurando a Variável de Ambiente

O Genkit precisa "ler" essa chave. Para isso, crie uma variável de ambiente em seu sistema chamada GOOGLE_API_KEY com a chave que você copiou.

GOOGLE_API_KEY=<SUA_API_KEY>

1. Criando o Projeto Angular: A Fundação da Aldeia

Vamos começar erguendo as estruturas da nossa aplicação com o Angular CLI. Vamos criar um projeto já com Server-Side Rendering (SSR) ativado, o que é uma ótima prática.

ng new hokage-desk --ssr

Quando perguntado sobre o sistema de CSS, escolha Tailwind CSS, pois ele nos dará a agilidade necessária para estilizar nossa aldeia digital.

Com o projeto criado, instale as dependências que usaremos para o Genkit e o servidor Express:

cd hokage-desk
npm i genkit
npm i express@^4.21.1
npm i @genkit-ai/express
npm i @genkit-ai/google-genai
npm i zod@^3.25
npm i uuid

2. Configurando o Fluxo do Genkit: O Cérebro da Operação

Agora, vamos para a parte mais legal: criar o cérebro de IA que irá gerar nossas missões.

Crie o Arquivo de Fluxo

Dentro da pasta src/, crie um novo arquivo chamado flows.ts. É aqui que a mágica vai acontecer.

Definindo o Fluxo

Abra o arquivo src/flows.ts e cole o código a seguir. Este é o coração da nossa funcionalidade.

import { genkit } from 'genkit';
import { z } from 'zod';
import { googleAI } from '@genkit-ai/google-genai';
import { v4 as uuidv4 } from 'uuid';

const ai = genkit({
  plugins: [googleAI()],
  model: googleAI.model('gemini-2.5-flash', {
    temperature: 0.8,
  }),
});

// Define input schema
export const MissionDefinitionSchema = z.object({
  definition: z.string().describe('Definition of the mission'),
});

// Define output schema
// Final schema for the Ninja Mission
export const missionSchema = z
  .object({
    id: z.string().describe('Unique identifier for the mission'),
    title: z.string().describe('A creative and fitting title for the mission.'),
    difficulty: z
      .string()
      .describe(
        'Classify the mission into one of the following ranks, based on its complexity and danger: D, C, B, A, or S.'
      ),
    missionValue: z
      .string()
      .describe(
        "Define a reward in Ryō. The value must be consistent with the mission's difficulty (e.g., Rank-D missions are low-value, Rank-S missions are very high-value)."
      ),
    detailedDescription: z
      .string()
      .describe(
        "Create a detailed, narrative-style mission briefing based on the user's initial input. It should include the background context, a clear primary objective, known risks or enemy intel, and the mission's location. This should read like an official mission scroll given to the team leader."
      ),
    ninjaTeamLevel: z
      .string()
      .describe(
        'Based on the mission\'s difficulty, suggest the team\'s rank. Use standard Naruto ranks like Genin, Chunin, Jonin, or ANBU. For legendary missions, you could even specify Sannin ou Kage-level.'
      ),
    assignedTeam: z
      .string()
      .describe(
        "Assign a suitable team. If a known, official team from the Naruto or Boruto universe fits the mission and members (e.g., 'Team 7', 'Ino-Shika-Cho', 'Team Guy'), use its official name. If no existing team is a perfect fit, create a new, thematic squad name (e.g., 'Sand Village Barrier Unit', 'Mist Village Cipher Squad')."
      ),
    teamMembers: z
      .array(
        z.object({
          name: z
            .string()
            .describe(
              "Select a real character from the Naruto or Boruto anime who would be suitable for this mission's rank and objective."
            ),
          specialty: z
            .string()
            .describe(
              "State this character's known signature jutsu or primary skill (e.g., 'Rasengan', 'Sharingan', 'Byakugan', 'Shadow Possession Jutsu')."
            ),
        })
      )
      .describe(
        'A list containing exactly 3 members for the ninja team. The members chosen must be real characters from Naruto or Boruto.'
      ),
  })
  .describe('The complete mission file in JSON format.');

// Define a recipe generator flow
export const missionGeneratorFlow = ai.defineFlow(
  {
    name: 'missionGeneratorFlow',
    inputSchema: MissionDefinitionSchema,
    outputSchema: missionSchema,
  },
  async (input) => {
    // Create a prompt based on the input
    const prompt = `
        You are a mission assignment expert from Konohagakure, with deep knowledge of every shinobi and official team from both the Naruto and Boruto eras.
        Your primary task is to take a brief mission concept and expand it into a complete, official mission file. The initial concept from the user is: "${input.definition}".
        All generated content must be in the same language as the user's input.
        IMPORTANT LOGIC:
        1.  Generate a creative and fitting title for the mission.
        2.  Elaborate on the user's concept to create a detailed mission description, including background, objectives, and known risks.
        3.  Select REAL characters from the Naruto or Boruto universe for the team. The team composition must be logical for the mission's assigned difficulty. Do not assign Kage-level shinobi to a D-rank mission.
        4.  For the team name, prioritize using an official team name (e.g., 'Team 7') if the members align. Otherwise, create a fitting squad name.
        Generate the output in the requested JSON format.
      `;

    // Generate structured recipe data using the same schema
    const { output } = await ai.generate({
      prompt,
      output: { schema: missionSchema },
    });

    if (!output) throw new Error('Failed to generate recipe');

    return {
      ...output,
      id: uuidv4(),
    };
  }
);

O que este código faz?

  1. Configura o Genkit: Dizemos ao Genkit para usar o plugin da Google AI e especificamos o modelo gemini-2.5-flash, que é rápido e poderoso.

  2. Define um "System Prompt": Damos instruções detalhadas ao Gemini, dizendo a ele para atuar como um especialista em missões de Konoha.

  3. Usa Zod para Validação: Criamos esquemas de validação (schemas) com Zod. Isso é incrível porque garante que a entrada do usuário e, mais importante, a saída da IA, sigam uma estrutura JSON exata que definimos. É como um contrato com a IA.

  4. Cria o missionGeneratorFlow: Este é o nosso fluxo principal. Ele recebe a definição da missão, envia para o Gemini com o nosso prompt e o schema, e retorna um objeto JSON completo e validado.

3. Criando o Endpoint da API: Conectando o Back-end

Com nosso fluxo de IA pronto, precisamos de uma porta de entrada para ele em nosso servidor Angular.

Abra o arquivo src/server.ts e adicione o seguinte trecho no início do arquivo:

import {
  AngularNodeAppEngine,
  createNodeRequestHandler,
  isMainModule,
  writeResponseToNodeResponse,
} from '@angular/ssr/node';
import express from 'express';
import { missionGeneratorFlow } from './flows';
import { join } from 'node:path';

const browserDistFolder = join(import.meta.dirname, '../browser');

const app = express();
const angularApp = new AngularNodeAppEngine();

app.use(express.json());

app.post('/api/mission', async (req, res) => {
  try {
    const result = await missionGeneratorFlow(req.body);
    res.json(result);
  } catch (error) {
    console.error(error);
    res.status(500).json({ error: (error as Error).message });
  }
});

// O código do servidor continua aqui...

Este código cria uma rota POST em /api/mission. Quando o front-end envia uma definição de missão para este endpoint, ele aciona nosso missionGeneratorFlow e devolve a missão completa gerada pela IA. Simples assim!

4. Criando o Serviço de Missões no Angular: Gerenciando o Estado

De volta ao front-end, vamos criar um serviço para cuidar do estado das nossas missões e da comunicação com o back-end.

Gere o Serviço

Use o Angular CLI para criar um novo serviço:

ng generate service mission

Implemente o Serviço

Abra o arquivo recém-criado src/app/mission.service.ts e adicione este código:

import { HttpClient } from '@angular/common/http';
import { Injectable, computed, inject, signal } from '@angular/core';
import { take } from 'rxjs';

export interface Mission {
  id: string;
  title: string;
  difficulty: string;
  missionValue: string;
  detailedDescription: string;
  ninjaTeamLevel: string;
  assignedTeam: string;
  teamMembers: {
    name: string;
    specialty: string;
  }[];
}

@Injectable({
  providedIn: 'root',
})
export class MissionService {
  missions = signal<Mission[]>([]);
  loading = signal(false);

  private readonly http = inject(HttpClient);

  createMission(definition: string) {
    this.loading.set(true);
    this.http
      .post<Mission>('/api/mission', { definition })
      .pipe(take(1))
      .subscribe((response) => {
        this.missions.update((missions) => [...missions, response]);
        this.loading.set(false);
      });
  }

  getMissionById(id: string) {
    return computed(() => this.missions().find((mission) => mission.id === id));
  }
}

Por que este serviço é importante?

  1. Reatividade com Signals: Ele usa um signal (missions) para armazenar a lista de missões. Qualquer componente que usar este signal será atualizado automaticamente quando uma nova missão chegar.

  2. Estado de Carregamento: O loading signal nos ajuda a mostrar um feedback visual para o usuário enquanto a IA está "pensando".

  3. Comunicação com a API: O método createMission faz a chamada POST para o nosso back-end e atualiza o signal de missões com a resposta.

  4. Busca por ID: O getMissionById nos permite encontrar uma missão específica na lista, o que será útil para a nossa página de detalhes.

5. Criando os Componentes da Interface: O Rosto da Aplicação

Chegou a hora de dar vida à nossa interface.

Configurando o index.html e o Tema

Primeiro, vamos preparar nosso index.html e o tema com Tailwind.

Abra src/index.html e deixe-o assim:

<!doctype html>
<html lang="en" class="dark">
<head>
  <meta charset="utf-8">
  <title>HokageDesk</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
</head>
<body class="bg-background-dark font-display text-gray-100">
  <app-root></app-root>
</body>
</html>

Agora, crie um arquivo src/theme.css com as variáveis de cor e fontes:

@theme {
  --color-primary: #4A6741;
  --color-background-light: #FDFBF5;
  --color-background-dark: #2D2D2D;
  --color-card-dark: #3C3C3C;
  --color-leaf-green: #4A5C43;
  --color-leaf-green-dark: #3A4A35;
  --color-text-light: #2D3748;
  --color-text-dark: #E2E8F0;
  --font-display: "Space Grotesk", sans-serif;
  --radius: 0.25rem;
  --radius-lg: 0.5rem;
  --radius-xl: 0.75rem;
  --radius-full: 9999px;
}

Finalmente, abra src/styles.css e importe tudo:

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap');
@import "tailwindcss";
@import "./theme.css";

Gere os Componentes

Vamos usar o Angular CLI para gerar os dois componentes principais da nossa UI:

ng generate component dashboard
ng generate component detail

Configurando as Rotas

Abra src/app/app.routes.ts e defina as rotas para nossos novos componentes. Usaremos loadComponent para carregá-los de forma assíncrona (lazy loading).

import { Routes } from '@angular/router';

export const routes: Routes = [
    { path: '', loadComponent: () => import('./dashboard/dashboard').then(c => c.Dashboard) },
    { path: 'detail/:id', loadComponent: () => import('./detail/detail').then(c => c.Detail) },
];

Limpe o src/app/app.html, deixando apenas o router-outlet:

<router-outlet></router-outlet>

Implementando o Dashboard

Este será nosso painel principal, com o formulário para criar missões e a lista de missões geradas.

src/app/dashboard/dashboard.ts

import { ChangeDetectionStrategy, Component, inject, signal } from '@angular/core';
import { MissionService } from '../mission';
import { FormsModule } from '@angular/forms';
import { RouterLink } from '@angular/router';

@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.html',
  styleUrls: ['./dashboard.css'],
  changeDetection: ChangeDetectionStrategy.OnPush,
  standalone: true,
  imports: [FormsModule, RouterLink],
})
export class Dashboard {
  private readonly missionService = inject(MissionService);
  missionDefinition = signal('');
  missions = this.missionService.missions;
  loading = this.missionService.loading;

  createMission() {
    this.missionService.createMission(this.missionDefinition());
    this.missionDefinition.set('');
  }
}

src/app/dashboard/dashboard.css

.avatar-stack > div {
  margin-left: -0.75rem;
}

.avatar-stack > div:first-child {
  margin-left: 0;
}

src/app/dashboard/dashboard.html

<div class="min-h-screen w-full p-4 sm:p-6 md:p-8">
  <div class="mx-auto max-w-5xl">
    <header class="text-center mb-8 md:mb-12">
      <h1 class="text-3xl sm:text-4xl md:text-5xl font-bold text-white">Genkit-Jutsu: Mission Generator</h1>
    </header>
    <main>
      <section class="mb-10 md:mb-16">
        <div class="bg-card-dark p-6 sm:p-8 rounded-xl shadow-lg">
          <form class="space-y-6">
            <div>
              <label class="block text-sm font-medium text-gray-300 mb-2" for="mission-directive">Mission Directive</label>
              <textarea
                [ngModel]="missionDefinition()"
                (ngModelChange)="missionDefinition.set($event)"
                [disabled]="loading()"
                class="w-full border rounded-lg border-gray-600 bg-gray-700/50 focus:border-primary focus:ring-primary placeholder:text-gray-500 py-2 px-3 "
                id="mission-directive"
                name="mission-directive"
                placeholder="Describe the mission objectives, targets, and any special considerations..."
                rows="4"
              ></textarea>
            </div>
            <button
              (click)="createMission()"
              [disabled]="loading()"
              class="w-full bg-primary text-white font-bold py-3 px-4 rounded-lg hover:bg-primary/90 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-card-dark focus:ring-primary transition-colors"
              type="button"
            >
              @if (loading()) {
              <div class="flex items-center justify-center">
                <svg class="animate-spin -ml-1 mr-3 h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                  <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                  <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                </svg>
                <span>Generating...</span>
              </div>
              } @else {
              <span>Generate Mission Scroll</span>
              }
            </button>
          </form>
        </div>
      </section>

      <section>
        <h2 class="text-2xl sm:text-3xl font-bold mb-6 text-white">Generated Mission Scrolls</h2>
        @defer (on immediate) {
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
          @for (mission of missions(); track mission.id) {
          <a [routerLink]="['/detail', mission.id]" class="bg-background-light p-6 rounded-xl shadow-md flex flex-col space-y-4 cursor-pointer hover:bg-primary/10 transition-colors">
            <div class="flex-grow">
              <div class="flex justify-between items-start mb-2">
                <h3 class="text-xl font-bold text-gray-800">{{ mission.title }}</h3>
                <span class="inline-block bg-blue-200 text-blue-800 text-xs font-semibold px-2.5 py-0.5 rounded-full">Rank {{ mission.difficulty }}</span>
              </div>
              <div class="flex items-center space-x-2">
                <p class="text-sm text-gray-600">Assigned Team: {{ mission.assignedTeam }}</p>
              </div>
            </div>
          </a>
          }
        </div>
        } @loading {
        <div class="flex justify-center items-center">
          <svg class="animate-spin -ml-1 mr-3 h-10 w-10 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
          </svg>
        </div>
        }
      </section>
    </main>
  </div>
</div>

Implementando o Detail

Este componente mostrará todos os detalhes de uma missão quando o usuário clicar em um dos cards do dashboard.

src/app/detail/detail.ts

import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { MissionService } from '../mission';

@Component({
  selector: 'app-detail',
  templateUrl: './detail.html',
  styleUrls: ['./detail.css'],
  changeDetection: ChangeDetectionStrategy.OnPush,
  standalone: true,
})
export class Detail {
  private readonly route = inject(ActivatedRoute);
  private readonly missionService = inject(MissionService);

  mission = this.missionService.getMissionById(
    this.route.snapshot.paramMap.get('id')!
  );
}

src/app/detail/detail.component.css

.custom-red-chip {
  background-color: #991b1b;
}

.custom-blue-chip {
  background-color: #1e3a8a;
}

src/app/detail/detail.html

<div class="min-h-screen flex items-center justify-center p-4">
  @if (mission(); as vm) {
  <main class="w-full max-w-4xl bg-primary text-text-light dark:bg-gray-800 dark:text-text-dark rounded-xl shadow-lg p-6 md:p-8">
    <header class="mb-6">
      <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
        <h1 class="text-3xl md:text-4xl font-bold text-leaf-green dark:text-leaf-green-dark">{{ vm.title }}</h1>
        <div class="flex items-center gap-3">
          <span class="custom-red-chip text-white text-xs font-bold px-3 py-1 rounded-full">Rank {{ vm.difficulty }}</span>
          <span class="custom-blue-chip text-white text-xs font-bold px-3 py-1 rounded-full">{{ vm.ninjaTeamLevel }}</span>
        </div>
      </div>
    </header>
    <div class="space-y-8">
      <section>
        <h2 class="text-xl font-bold mb-2 text-leaf-green dark:text-leaf-green-dark">Mission Briefing</h2>
        <p class="text-gray-600 dark:text-gray-400 leading-relaxed">
          {{ vm.detailedDescription }}
        </p>
      </section>
      <section>
        <h2 class="text-xl font-bold mb-2 text-leaf-green dark:text-leaf-green-dark">Mission Value</h2>
        <div class="flex items-center gap-2">
          <span class="material-symbols-outlined text-2xl text-leaf-green dark:text-leaf-green-dark">
            account_balance_wallet
          </span>
          <p class="text-lg font-bold text-gray-700 dark:text-gray-300">{{ vm.missionValue }}</p>
        </div>
      </section>
      <section>
        <h2 class="text-xl font-bold mb-4 text-leaf-green dark:text-leaf-green-dark">Assigned Team: {{ vm.assignedTeam }}</h2>
        <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6">
          @for (team of vm.teamMembers; track team) {
          <div class="flex flex-col items-center p-4 bg-background-light dark:bg-gray-700 rounded-lg shadow-sm">
            <h3 class="font-bold text-lg text-text-light dark:text-text-dark">{{ team.name }}</h3>
            <p class="text-sm text-gray-600 dark:text-gray-400">{{ team.specialty }}</p>
          </div>
          }
        </div>
      </section>
    </div>
  </main>
  }
</div>

Conclusão e Próximos Passos

Parabéns, shinobi do código! Você construiu com sucesso uma aplicação Angular completa que utiliza Genkit e a API do Gemini para gerar conteúdo dinâmico de IA. Você viu como é fácil integrar um back-end de IA diretamente em um projeto Angular SSR.

Para rodar sua aplicação e ver a mágica acontecer, execute:

npm start

Acesse http://localhost:4200 em seu navegador, descreva uma missão como "Proteger um construtor de pontes" ou "Infiltrar-se na base da Akatsuki", e veja a IA criar um pergaminho de missão completo para você!

E agora? O céu é o limite! Aqui estão algumas ideias para evoluir o projeto:

  • Adicionar Autenticação: Permita que diferentes "Hokages" façam login e gerenciem suas próprias missões.

  • Salvar Missões em um Banco de Dados: Integre um banco de dados como Firebase ou Supabase para persistir as missões geradas.

  • Explorar Mais a Fundo a API do Gemini: Experimente com diferentes prompts, adicione mais campos ao seu schema Zod (como "Itens Recomendados" ou "Plano de Fuga"), ou até mesmo use a capacidade multimodal do Gemini para gerar uma imagem para cada missão.

Espero que você tenha se divertido construindo este projeto tanto quanto eu me diverti escrevendo este guia. Agora é sua vez de expandir suas habilidades e criar seus próprios "jutsus" de IA.

Todo o código fonte está nesse repositório: GITHUB

Até a próxima

]]><![CDATA[De Angular a Fullstack: Por que "Kotlin for Java Developers" deve ser sua próxima leitura]]>https://alvarocamillont.dev/de-angular-a-fullstack-por-que-kotlin-for-java-developers-deve-ser-sua-proxima-leiturahttps://alvarocamillont.dev/de-angular-a-fullstack-por-que-kotlin-for-java-developers-deve-ser-sua-proxima-leituraSun, 23 Nov 2025 22:35:46 GMTOlá, comunidade! Hoje trago um review muito especial de um livro que recebi gentilmente da editora Packt: "Kotlin for Java Developers", escrito por José Dimas Luján Castillo e Ron Veen.

Como especialista em Angular e alguém que advoga constantemente pelo crescimento em "T" (o profissional T-Shaped), sempre recebo a pergunta: "Qual o próximo passo na minha carreira além do Frontend?". A resposta, muitas vezes, reside em dominar uma linguagem de backend robusta ou explorar o desenvolvimento mobile. É aqui que este livro brilha, e vou explicar por que ele é uma leitura estratégica, mesmo que o título mencione "Java Developers".

Sobre o Livro

"Kotlin for Java Developers" não é apenas um manual de sintaxe; é um guia de transição. Os autores focam em ensinar como escrever código Kotlin idiomático, seguro e conciso, aproveitando o ecossistema da JVM. Ele cobre desde os fundamentos de tipos e nulabilidade até conceitos avançados como Coroutines e DSLs. A abordagem é prática, comparando como as coisas eram feitas (no estilo verboso do Java) e como são resolvidas elegantemente no Kotlin.

Para quem é este Livro?

Embora o título seja direcionado a desenvolvedores Java, o conteúdo é extremamente valioso para desenvolvedores TypeScript/Angular. Por que? Porque o Kotlin e o TypeScript compartilham muitos conceitos de design de linguagem moderna. Se você já entende tipagem estática, generics e programação funcional no Angular, a leitura deste livro será fluida. Ele serve para:

  • Iniciantes: Que querem começar no backend com o pé direito.

  • Veteranos: Que desejam modernizar sua stack e sair da verbosidade do Java legado.

O Caminho das Pedras para o Desenvolvedor Angular

Para nós, que vivemos no mundo dos Observables, Componentes e Tipagem Estrita, selecionei os capítulos que considero essenciais para fazer a ponte mental entre o TypeScript e o Kotlin:

  1. Capítulo 3: Null and Non-Nullable Types

    • A conexão Angular: Assim como ativamos o strictNullChecks no TypeScript para evitar erros em tempo de execução, o Kotlin trata a nulabilidade como parte do sistema de tipos. Este capítulo é fundamental para entender como o Kotlin elimina o temido NullPointerException (o equivalente ao nosso undefined is not a function).

  2. Capítulo 7: Data and Sealed Classes

    • A conexão Angular: Sabe aquelas interfaces ou tipos que criamos para representar nossos modelos de dados no front? As Data Classes do Kotlin são a versão turbinada disso para a JVM, com métodos como equals, toString e copy gerados automaticamente. Já as Sealed Classes são perfeitas para gerenciamento de estado (pense em NgRx ou Signals), permitindo modelar hierarquias restritas de forma segura.

  3. Capítulos 8 e 9: Functional Programming & Lambdas

    • A conexão Angular: Quem trabalha com Angular respira programação funcional (RxJS). Aprender como o Kotlin trata funções como "cidadãos de primeira classe" e o uso de Lambdas fará você se sentir em casa. A sintaxe é surpreendentemente similar e poderosa.

  4. Capítulo 11: Coroutines

    • A conexão Angular: Gerenciar assincronicidade é nosso dia a dia (HTTP requests, eventos). Enquanto no JS usamos Promises e Async/Await, o Kotlin usa Coroutines. Este capítulo é vital para entender como escrever código assíncrono de forma sequencial e leve, sem bloquear a thread principal (algo crítico tanto no Backend quanto no Mobile).

A Importância Estratégica: Backend e Mobile

Por que um Dev Angular deveria investir tempo nisso?

  1. O Backend Moderno: O ecossistema Spring Boot abraçou o Kotlin como linguagem de primeira classe. Dominar Kotlin permite que você construa BFFs (Backend for Frontend) ou microsserviços robustos usando uma sintaxe que não causa "choque cultural" para quem vem do TypeScript.

  2. Mobile e KMP: O Kotlin não é apenas para Android nativo. Com o Kotlin Multiplatform (KMP), a lógica de negócios que você escreve pode ser compartilhada entre Android, iOS e até Web. Aprender Kotlin abre a porta para você se tornar um desenvolvedor verdadeiramente multiplataforma.

Conclusão

"Kotlin for Java Developers" é um recurso excelente para solidificar sua base na JVM moderna. Para o profissional que deseja ir além do navegador e ter autonomia para construir soluções de ponta a ponta, este livro é um investimento certeiro. Agradeço à Packt pelo envio e recomendo fortemente a leitura.

E você, já pensou em expandir sua stack para o ecossistema Kotlin? Vamos conversar nos comentários!

]]><![CDATA[GitHub Foundations Certification Guide: um aliado para quem já vive o ecossistema e quer elevar o nível]]>https://alvarocamillont.dev/github-foundations-certification-guide-um-aliado-para-quem-ja-vive-o-ecossistema-e-quer-elevar-o-nivelhttps://alvarocamillont.dev/github-foundations-certification-guide-um-aliado-para-quem-ja-vive-o-ecossistema-e-quer-elevar-o-nivelMon, 06 Oct 2025 00:41:52 GMTPara quem atua com desenvolvimento Angular em ambientes colaborativos, dominar Git e GitHub vai muito além do versionamento básico. Branching estruturado, pull requests eficientes, automações com segurança, integração com times e, mais recentemente, o uso estratégico de IA e GitHub Copilot fazem parte do dia a dia de quem entrega software com qualidade. O livro GitHub Foundations Certification Guide, de Ayodeji Ayodele, publicado pela Packt, reúne esses elementos de forma objetiva, atualizada e com uma proposta prática que conversa diretamente com profissionais experientes.

Embora seja voltado à preparação para a certificação GitHub Foundations, ele funciona também como um guia sólido de revisão e aprimoramento. O autor organiza o conteúdo de maneira progressiva, mas sem subestimar o leitor. O material cobre desde fundamentos essenciais até práticas de colaboração, permissões, governança, automação e integração com ferramentas modernas — tudo com base nas exigências reais de equipes técnicas.

A certificação GitHub Foundations, apesar de ser classificada como nível introdutório na trilha da plataforma, tem forte apelo para profissionais que desejam comprovar domínio operacional sobre os recursos mais utilizados em times de desenvolvimento. Ela abrange versionamento, colaboração, gestão de repositórios, fluxo de trabalho com branches, uso de issues e projetos, além de aspectos de governança e segurança — exatamente o tipo de proficiência que empresas esperam de um analista sênior.

O destaque do livro está na forma como ele equilibra teoria, prática e preparação. Os capítulos são estruturados em sprints, com exercícios, revisões e blocos de validação de conhecimento. Em vez de apresentar conceitos isolados, Ayodeji costura os temas com exemplos de uso cotidiano, o que facilita a aplicação imediata no contexto de trabalho. Para quem já atua com Angular ou frontend moderno, isso torna o aprendizado mais conectado com a rotina: criação e revisão de pull requests, fluxo de branches entre times, participação em projetos compartilhados e integração com pipelines e automações.

Outro ponto relevante é a abordagem de IA e Copilot. O autor não trata o tema como um acessório, mas como parte do ecossistema GitHub. Ele explora os diferentes modos de uso do GitHub Copilot — IDE, chat, web, terminal — e discute produtividade, segurança e boas práticas no uso da ferramenta. Para desenvolvedores Angular e outros profissionais que lidam com alta demanda de entrega, essa combinação entre versionamento, automação e IA representa ganho real de velocidade e redução de atrito no desenvolvimento, especialmente em tarefas repetitivas ou na criação de padrões de código.

Mesmo para quem não tem como objetivo imediato prestar a certificação, o livro funciona como uma atualização estratégica. Ele ajuda a consolidar boas práticas, reduz atritos do fluxo diário e eleva o nível de maturidade no uso do GitHub. Para quem já executa atividades de liderança técnica, mentoria de time ou code review, o conteúdo também serve como referência para padronização e melhoria de processos.

Por tudo isso, o livro se posiciona não apenas como material de estudo, mas como ferramenta de evolução profissional contínua. Ele atende quem deseja certificar-se, quem quer revisar fundamentos com profundidade e quem busca integrar IA ao desenvolvimento de forma consciente e útil.

E vale registrar um agradecimento à Packt Publishing por disponibilizar a obra. É raro encontrar material tão atual, coerente com as demandas do mercado e alinhado ao cotidiano de equipes de desenvolvimento modernas. Segue o link do livro para quem se interessar: https://www.packtpub.com/en-us/product/github-foundations-certification-guide-9781836206057

Se o objetivo é reforçar autoridade técnica, preparar-se para certificação ou simplesmente elevar a qualidade do trabalho com GitHub, esse livro entrega valor real — tanto na prova quanto no dia a dia.

]]><![CDATA[Review do Livro Python Object-Oriented Programming para Desenvolvedores Angular]]>https://alvarocamillont.dev/review-do-livro-python-object-oriented-programming-para-desenvolvedores-angularhttps://alvarocamillont.dev/review-do-livro-python-object-oriented-programming-para-desenvolvedores-angularSun, 30 Mar 2025 04:01:12 GMTIntrodução

Recebi um exemplar do livro Python Object-Oriented Programming da editora Packet e posso dizer que fiquei muito satisfeito com o conteúdo. O material é bem estruturado e atende desde desenvolvedores iniciantes até avançados, tornando-se um ótimo recurso para quem quer dominar Python de forma profissional.

Como desenvolvedores, muitas vezes ficamos presos ao nosso stack principal, mas sair da zona de conforto e aprender uma nova linguagem como Python pode agregar muito valor. Além de expandir nossa visão sobre paradigmas de programação, isso nos torna mais versáteis e preparados para diferentes desafios no mercado. No desenvolvimento web moderno, é comum que desenvolvedores Angular se concentrem no frontend, mas entender como o backend funciona pode elevar significativamente a qualidade e a eficiência das aplicações. Este livro sobre Python traz conceitos fundamentais para quem deseja ampliar sua visão full stack e otimizar a integração entre o frontend Angular e APIs em Python. Neste review, vamos explorar como o livro pode agregar valor a quem trabalha com Angular e destacar os capítulos mais úteis.

Visão Geral do Livro

O livro foca no paradigma de programação orientada a objetos em Python, explorando padrões de projeto, princípios SOLID e boas práticas para desenvolvimento de software. Além disso, muitos dos conceitos abordados são aplicáveis não apenas ao backend, mas também ao frontend com JavaScript e TypeScript, tornando-o um excelente material para desenvolvedores que trabalham com Angular e desejam aprofundar sua compreensão sobre arquitetura de software e código reutilizável.

O Que um Desenvolvedor Angular Pode Aproveitar

  1. Entendendo a Programação Assíncrona
    No mundo do Angular, lidamos o tempo todo com RxJS e assincronismo. O livro explora como Python implementa async/await e corrotinas, permitindo que desenvolvedores Angular compreendam melhor como o backend gerencia requisições concorrentes.

  2. A Importância dos Design Patterns
    Independente da stack utilizada, compreender padrões de projeto é essencial para escrever código escalável, reutilizável e de fácil manutenção. O livro explora diversos design patterns que podem ser aplicados tanto no backend em Python quanto no frontend com Angular, ajudando desenvolvedores a estruturar melhor suas aplicações e resolver problemas comuns de forma eficiente.

  3. Integração com Frontend
    Muitos desenvolvedores Angular trabalham em times onde o backend é feito em Python. O livro ensina padrões de comunicação entre frontend e backend, o que pode melhorar a qualidade da integração e evitar problemas como CORS, autenticação e versionamento de APIs.

  4. Manipulação de Dados e Automação
    Aplicações Angular frequentemente interagem com grandes volumes de dados. Python oferece bibliotecas poderosas para processamento e transformação desses dados antes de serem enviados ao frontend. Isso pode ser um diferencial para quem precisa lidar com dashboards dinâmicos, gráficos ou relatórios interativos.

Conclusão

Você pode adquirir o livro no seguinte link: Python Object-Oriented Programming - Packt. Este livro é um excelente recurso para desenvolvedores Angular que querem ir além do frontend e entender melhor a lógica por trás do backend em Python. Ele ajuda a criar uma ponte entre as duas tecnologias, permitindo um desenvolvimento mais eficiente, organizado e com maior controle sobre a comunicação entre cliente e servidor.

Se você trabalha com Angular e deseja aprimorar suas habilidades full stack ou melhorar a integração das suas aplicações com APIs Python, esse livro é uma ótima escolha. Vale a pena conferir!

]]><![CDATA[Desmistificando IA para uma pessoa desenvolvedora web - Introdução]]>https://alvarocamillont.dev/desmistificando-ia-para-uma-pessoa-desenvolvedora-web-introducaohttps://alvarocamillont.dev/desmistificando-ia-para-uma-pessoa-desenvolvedora-web-introducaoSun, 25 Feb 2024 02:24:19 GMTA Inteligência Artificial (IA) transcendeu o mundo das pessoas desenvolvedoras e se tornou um tópico de interesse geral. O público em geral está descobrindo o poder dessa ferramenta e como ela pode otimizar nossas atividades.

A democratização da IA é um dos seus aspectos mais empolgantes. O acesso a modelos poderosos se tornou mais simples, permitindo a integração da IA através de serviços de chat e até mesmo na barra de endereço do navegador.

Para pessoas desenvolvedoras web, essa mudança representa uma oportunidade incrível. Sem a necessidade de montar infraestruturas complexas, é possível criar aplicativos com capacidades de IA, impulsionando a inovação e a produtividade.

O Google criou o serviço Gemini (https://gemini.google.com/) que disponibiliza um serviço de IA poderoso já pronto para consumir em nossas aplicações e nessa série de tutorial vamos montar uma aplicação com capacidades que somente a IA pode prover.

A arquitetura dessa aplicação será bastante simples e comum para uma pessoa desenvolvedora web:

Teremos os seguinte elementos:

  1. Aplicação Web desenvolvida em Angular(https://angular.dev/)

  2. Serviço de Back End desenvolvido em NestJS(https://nestjs.com/)

  3. A API do serviço do Gemini (https://ai.google.dev/)

Aqui vale a pena uma explicação, o serviço do Gemini possui capacidade de ser consumido diretamente da aplicação web, porém esse tipo de arquitetura não é muito segura pois iria expor sua API Key caso você decida publicar sua aplicação.

Essa informação é muito sensível pois caso ela seja vazada uma pessoa mal intencionada poderá realizar requisições indevidas e comprometer significativamente a sua fatura com a Google Cloud...

Nesse tutorial começaremos pelo item 3 e vamos configurar nossa conta para consumir a API do Gemini.

O primeiro requisito que você precisa é uma conta no serviço do Google Cloud Platform (https://console.cloud.google.com)

Uma vez autenticado, é preciso criar um projeto que consumirá o Gemini.

Na barra de pesquisa, busque por ("criar projeto") escolha um nome e confirme.

Vamos então ao site "Build with Gemini"(https://ai.google.dev/) e pedir a nossa API Key:

Selecione o projeto que você criou e você terá o código da sua API Key

Com essa configuração estamos prontos para criar o nosso serviço de back end no próximo artigo, até lá!

#GeminiSprint

Google Cloud credits are provided for this project.

]]><![CDATA[Angular v15 já está disponível!]]>https://alvarocamillont.dev/angular-v15-ja-esta-disponivelhttps://alvarocamillont.dev/angular-v15-ja-esta-disponivelThu, 17 Nov 2022 04:41:29 GMTTradução livre do artigo original: https://blog.angular.io/angular-v15-is-now-available-df7be7f2f4c8

No ano passado, foi removido o compilador legado e o pipeline de renderização do Angular, que permitiu o desenvolvimento de uma série de melhorias na experiência do desenvolvedor nos últimos meses. Angular v15 é o resultado disso com dezenas de refinamentos que levam a uma melhor experiência e desempenho do desenvolvedor.

Standalone API agora está estável e pronta para produção!

Na v14, foram introduzidas novas standalone APIs que permitem aos desenvolvedores criarem aplicativos sem usar NgModules. A equipe do Angular está feliz em compartilhar que essas APIs saíram da fase de preview e agora fazem parte da API estável do framework. A partir de agora ela será evoluída gradualmente seguindo o versionamento semântico.

Como parte de garantir que as standalone APIs estivessem prontas para serem utilizadas em produção, foram garantidos que os componentes standalone funcionem em todo ecosistema Angular e agora funcionem completamente com as APIs HttpClient, Angular Elements, router e mais.

As APIs standalone permitem que você inicialize um aplicativo usando um único componente:

import {bootstrapApplication} from '@angular/platform-browser';
import {ImageGridComponent} from'./image-grid';

@Component({
  standalone: true,
  selector: 'photo-gallery',
  imports: [ImageGridComponent],
  template: `
    … <image-grid [images]="imageList"></image-grid>
  `,
})
export class PhotoGalleryComponent {
  // component logic
}
bootstrapApplication(PhotoAppComponent);

Router and HttpClient tree-shakable standalone APIs

Você pode criar um aplicativo de multi-rotas usando as novas APIs standalone do router! Para declarar a rota raiz, você pode usar o seguinte exemplo:

export const appRoutes: Routes = [{
  path: 'lazy',
  loadChildren: () => import('./lazy/lazy.routes')
    .then(routes => routes.lazyRoutes)
}];

Onde lazyRoutes são declarados em:

import {Routes} from '@angular/router';

import {LazyComponent} from './lazy.component';

export const lazyRoutes: Routes = [{path: '', component: LazyComponent}];

e finalmente, registre o appRoutes na chamada bootstrapApplication:

bootstrapApplication(AppComponent, {
  providers: [
    provideRouter(appRoutes)
  ]
});

Outro benefício da API ProvideRouter é que ela pode ser tree-shakable! Os Bundlers podem remover recursos não utilizados do roteador em tempo de compilação. Em testes com a nova API, foi descoberto que a remoção desses recursos não utilizados do pacote resultou em uma redução de 11% no tamanho do código do router no bundle do aplicativo.

API de composição de diretivas

A API de composição de diretivas traz a reutilização de código para outro nível! Esse recurso foi inspirado pela solicitação de recurso mais popular no GitHub, solicitando a funcionalidade de adicionar diretivas a um elemento host.

A API de composição de diretivas permite que os desenvolvedores aprimorem os elementos do host com diretivas e adiciona ao Angular com uma poderosa estratégia de reutilização de código, que só é possível graças ao compilador do Angular. A API de composição de diretivas funciona apenas com diretivas independentes.

Vejamos um exemplo rápido:

@Component({
  selector: 'mat-menu',
  hostDirectives: [HasColor, {
    directive: CdkMenu,
    inputs: ['cdkMenuDisabled: disabled'],
    outputs: ['cdkMenuClosed: closed']
  }]
})
class MatMenu {}

No trecho de código acima, aprimoramos MatMenu com duas diretivas: HasColor e CdkMenu. MatMenu reutiliza todas as entradas, saídas e lógica associada com HasColors e apenas a lógica e as entradas selecionadas do CdkMenu.

Esta técnica pode lembrá-lo de herança múltipla ou traços em algumas linguagens de programação, com a diferença de que temos um mecanismo para resolução de conflitos de nomes e é aplicável a primitivas de interface de usuário.

A diretiva de imagem agora está estável!

Foi anunciada a preview da diretiva de imagem Angular que foi desenvolvida em colaboração com o Chrome Aurora na v14.2.

image.png

Agora ela está estável! A Land's End experimentou esse recurso e observou 75% de melhoria no LCP em um teste no lighthouse.

A versão v15 também inclui alguns novos recursos para a diretiva de imagem:

  • Geração automática de srcset: a diretiva garante que uma imagem de tamanho apropriado seja solicitada gerando o atributo srcset para você. Isso pode reduzir o tempo de download de suas imagens.

  • Modo de preenchimento [experimental]: este modo faz com que a imagem preencha seu contêiner pai, eliminando a necessidade de declarar a largura e a altura da imagem. É uma ferramenta útil se você não souber os tamanhos de suas imagens ou se quiser migrar imagens de plano de fundo CSS para usar a diretiva.

Você pode usar a diretiva NgOptimizedImage diretamente em seu componente ou NgModule:

import { NgOptimizedImage } from '@angular/common';

// Include it into the necessary NgModule
@NgModule({
  imports: [NgOptimizedImage],
})
class AppModule {}

// ... or a standalone Component
@Component({
  standalone: true
  imports: [NgOptimizedImage],
})
class MyStandaloneComponent {}

Para usá-lo em um componente, basta substituir o atributo src da imagem por ngSrc e certifique-se de especificar o atributo de prioridade para suas imagens LCP.

Você pode encontrar mais informações na documentação.

Guarda de rotas funcionais

Junto com as APIs de router independentes e tree-shakable, foi trabalhado o boilerplate das guardas de rota. Vejamos um exemplo onde definimos uma guarda que verifica se o usuário está logado:

@Injectable({ providedIn: 'root' })
export class MyGuardWithDependency implements CanActivate {
  constructor(private loginService: LoginService) {}

  canActivate() {
    return this.loginService.isLoggedIn();
  }
}

const route = {
  path: 'somePath',
  canActivate: [MyGuardWithDependency]
};

LoginService implementa a maior parte da lógica e na guarda só invocamos isLoggedIn(). Mesmo que o guard seja bem simples, temos muito boilerplate.

Com as novas guarda de rotas funcionais, você pode refatorar esse código para:

const route = {
  path: 'admin',
  canActivate: [() => inject(LoginService).isLoggedIn()]
};

Expressamos toda a guarda dentro da sua declaração. As guardas funcionais também podem ser compostas — você pode criar funções do tipo factory que aceitam uma configuração e retornam uma função de guarda ou resolver. Você pode encontrar um exemplo para executar proteções de roteador em série no GitHub.

O roteador desempacota as importações padrão

Para tornar o roteador mais simples e reduzir ainda mais o boilerplate, o roteador agora desempacota automaticamente as exportações padrão durante o carregamento lazy.

Vamos supor que você tenha o seguinte LazyComponent:

@Component({
  standalone: true,
  template: '...'
})
export default class LazyComponent { ... }

Antes dessa alteração, para fazer o carregamento lazy de um componente independente , você precisava:

{
  path: 'lazy',
  loadComponent: () => import('./lazy-file').then(m => m.LazyComponent),
}

Agora o roteador irá procurar por uma exportação padrão e se encontrar, usará automaticamente, o que simplifica a declaração de rota para:

{
  path: 'lazy',
  loadComponent: () => import('./lazy-file'),
}

Melhores stack traces

A equipe do Angular recebe muitos insights das pesquisas anuais com desenvolvedores, por isso queremos agradecer a você por dedicar um tempo para compartilhar seus pensamentos! Entramos de cabeça nas dificuldades com a experiência de depuração que os desenvolvedores enfrentam, descobrimos que as mensagens de erro poderiam ser melhoradas.

image.png

Problemas de depuração para desenvolvedores Angular

Foi feita uma parceria com o Chrome DevTools para corrigir isso! Veja um exemplo de stack trace que você pode trabalhar em um aplicativo Angular:

ERROR Error: Uncaught (in promise): Error
Error
    at app.component.ts:18:11
    at Generator.next (<anonymous>)
    at asyncGeneratorStep (asyncToGenerator.js:3:1)
    at _next (asyncToGenerator.js:25:1)
    at _ZoneDelegate.invoke (zone.js:372:26)
    at Object.onInvoke (core.mjs:26378:33)
    at _ZoneDelegate.invoke (zone.js:371:52)
    at Zone.run (zone.js:134:43)
    at zone.js:1275:36
    at _ZoneDelegate.invokeTask (zone.js:406:31)
    at resolvePromise (zone.js:1211:31)
    at zone.js:1118:17
    at zone.js:1134:33

Este snippet sofre de dois problemas:

  • Há apenas uma linha correspondente ao código que o desenvolvedor criou. Todo o resto vem de dependências de terceiros (framework Angular, Zone.js, RxJS)
  • Não há informações sobre qual interação do usuário causou o erro

Não há informações sobre qual interação do usuário causou o erro

A equipe do Chrome DevTools criou um mecanismo para ignorar scripts provenientes de node_modules anotando source maps por meio da CLI do Angular. Também foi criada uma API de marcação de pilha assíncrona que nos permitiu concatenar tarefas assíncronas agendadas e independentes em um único stack trace. Jia Li integrou o Zone.js com a API de marcação de pilha assíncrona, o que permitiu fornecer stack traces vinculados.

Essas duas mudanças melhoram drasticamente o stack trace que os desenvolvedores veem no Chrome DevTools:

ERROR Error: Uncaught (in promise): Error
Error
    at app.component.ts:18:11
    at fetch (async)  
    at (anonymous) (app.component.ts:4)
    at request (app.component.ts:4)
    at (anonymous) (app.component.ts:17)
    at submit (app.component.ts:15)
    at AppComponent_click_3_listener (app.component.html:4)

Aqui você pode acompanhar a execução do botão pressionado no AppComponent até o erro. Você pode ler mais sobre as melhorias aqui.

Lançamento de componentes baseados em MDC para produção

Estamos felizes em anunciar que a refatoração dos componentes de material Angular com base no Material Design Components for Web (MDC) está concluída! Essa mudança permite que o Angular se alinhe ainda mais com a especificação do Material Design, reutilize código de primitivas desenvolvidas pela equipe do Material Design e nos permite adotar o Material 3 assim que finalizado os tokens de estilo.

Para muitos dos componentes, atualizamos os estilos e a estrutura DOM e outros reescrevemos do zero. Mantivemos a maioria das APIs TypeScript e seletores de componentes/diretivas para os novos componentes idênticos à implementação antiga.

Migramos milhares de projetos do Google, o que nos permitiu facilitar o caminho da migração externa e documentar uma lista abrangente das alterações em todos os componentes.

Devido ao novo DOM e CSS, você provavelmente descobrirá que alguns estilos em seu aplicativo precisam ser ajustados, principalmente se seu CSS estiver substituindo estilos em elementos internos em qualquer um dos componentes migrados.

A implementação antiga de cada novo componente agora está obsoleta, mas ainda está disponível a partir de uma importação “herdada”. Por exemplo, você pode importar a implementação do botão mat antigo importando o módulo de botão legado.

import {MatLegacyButtonModule} from '@angular/material/legacy-button';

Visite o guia de migração para obter mais informações.

Mudamos muitos dos componentes para usar tokens de design e variáveis CSS internamente, o que fornecerá um caminho mais tranquilo para os aplicativos adotarem os estilos de componentes do Material 3.

Mais melhorias nos componentes

Resolvemos o 4º problema mais votado - suporte à seleção de intervalo no controle slider.

Para obter uma entrada de intervalo, use:

<mat-slider>
  <input matSliderStartThumb>
  <input matSliderEndThumb>
</mat-slider>

Além disso, todos os componentes agora têm uma API para personalizar a densidade que resolveu outro problema popular do GitHub.

Agora você pode especificar a densidade padrão em todos os seus componentes personalizando seu tema:

@use '@angular/material' as mat;

$theme: mat.define-light-theme((
  color: (
    primary: mat.define-palette(mat.$red-palette),
    accent: mat.define-palette(mat.$blue-palette),
  ),
  typography: mat.define-typography-config(),
  density: -2,
));

@include mat.all-component-themes($theme);

As novas versões dos componentes incluem uma ampla gama de melhorias de acessibilidade, incluindo melhores taxas de contraste, tamanhos de alvo de toque aumentados e semântica ARIA refinada.

CDK Listbox

O Component Dev Kit (CDK) oferece um conjunto de primitivas de comportamento para a construção de componentes de interface do usuário. Na v15, introduzimos outra primitiva que você pode personalizar para seu caso de uso — a listbox CDK:

image.png

O módulo @angular/cdk/listbox fornece diretivas para ajudar a criar interações de caixa de listagem personalizadas com base no padrão de caixa de listagem WAI ARIA.

Ao usar @angular/cdk/listbox, você obtém todos os comportamentos esperados para uma experiência acessível, incluindo suporte a layout bidi, interação com teclado e gerenciamento de foco. Todas as diretivas aplicam suas funções ARIA associadas ao elemento host.

Melhorias no suporte de esbuild experimental

image.png

Na v14, anunciamos o suporte experimental para esbuild em ng build para permitir tempos de compilação mais rápidos e simplificar nosso pipeline.

Na v15, agora temos Sass experimental, modelo SVG, substituição de arquivo e ng build --watchsupport ! Por favor, tente esbuild atualizando os builder angular.json de:

"builder": "@angular-devkit/build-angular:browser"

para 

"builder": "@angular-devkit/build-angular:browser-esbuild"

Se você encontrar algum problema com suas compilações de produção, informe-nos registrando um problema no GitHub.

Importações automáticas no language service

O language service agora pode importar automaticamente os componentes que você está usando em um template, mas não adicionou a um componente independente ou a um NgModule.

image.png

Melhorias na CLI

Na CLI Angular, introduzimos suporte para APIs estáveis independentes. Agora você pode gerar um novo componente independente via ng g component --standalone.

Também temos a missão de simplificar a saída de ng new. Como primeiro passo, reduzimos a configuração removendo test.ts, polyfills.ts e ambientes. Agora você pode especificar seus polyfills diretamente em angular.json na seção polyfills:

"polyfills": [
  "zone.js"
]

Para reduzir ainda mais os arquivos de configuração, agora usamos .browserlist para permitir que você defina a versão de destino do ECMAScript.

Destaques da contribuição da comunidade

Estamos gratos em compartilhar que, desde o lançamento da v14, recebemos contribuições de mais de 210 pessoas em framework, componentes e CLI! Nesta seção, gostaria de destacar dois deles.

Fornecida a capacidade de configurar opções padrão para DatePipe

Esse recurso permite que você altere globalmente a configuração de formatação padrão para DatePipe. Aqui está um exemplo com a nova API bootstrapApplication:

bootstrapApplication(AppComponent, {
  providers: [
    {
      provide: DATE_PIPE_DEFAULT_OPTIONS,
      useValue: { dateFormat: 'shortDate' }
    }
  ]
});

A configuração acima habilitará o formato shortDate para todos os locais em que você usa DatePipe em seu aplicativo.

Adicionada a tag de pré-carregamento para imagens prioritárias durante o SSR

Para garantir que as imagens prioritárias sejam carregadas o mais rápido possível, Jay Bell adicionou uma funcionalidade à diretiva de imagem para incluir uma tag <link rel="preload"> para elas ao usar o Angular Universal.

Não há necessidade de ação do seu lado se você já ativou a diretiva de imagem. Se você especificou uma imagem como prioridade, a diretiva irá pré-carregá-la automaticamente.

Descontinuações

Os lançamentos major nos permitem evoluir a estrutura em direção à simplicidade, melhor experiência do desenvolvedor e alinhamento com a plataforma da web.

Depois de analisar milhares de projetos no Google, encontramos alguns padrões raramente usados que, na maioria dos casos, são mal utilizados. Como resultado, estamos descontinuando o providedIn: 'any' é uma opção que tem uso muito limitado, além de um punhado de casos esotéricos internos ao framework.

Também estamos descontinuando o providedIn: NgModule . Ele não tem amplo uso e, na maioria dos casos, é usado incorretamente, em circunstâncias em que você deve preferir providedIn: 'root'. Se você deve realmente definir o escopo de provedores para um NgModule específico, use NgModule.providers.

Com o layout em evolução em CSS, a equipe deixará de publicar novos lançamentos de @angular/flex-layout. Continuaremos fornecendo correções de segurança e compatibilidade de navegador para o próximo ano. Você pode aprender mais sobre isso na primeira postagem do blog da nossa série “CSS moderno”.

Animado com o que vem por aí!

O lançamento do Ivy em 2020 permitiu muitas melhorias em geral que você pode encontrar já sendo lançadas. O NgModules opcional é um ótimo exemplo. Ele ajuda na redução dos conceitos com os quais os iniciantes precisam lidar como parte de sua jornada de aprendizado básica e também suporta recursos avançados, como API de composição de diretivas por meio de diretivas independentes.

Em seguida, estamos abordando melhorias em nosso pipeline de renderização do lado do servidor e reatividade, trazendo melhorias de qualidade de vida em geral!

Mal posso esperar para compartilhar com vocês o que está por vir!

]]><![CDATA[Podcasts para pessoas desenvolvedoras]]>https://alvarocamillont.dev/podcasts-para-pessoas-desenvolvedorashttps://alvarocamillont.dev/podcasts-para-pessoas-desenvolvedorasFri, 25 Oct 2019 22:51:06 GMTUm dos recursos mais valiosos que eu utilizo no dia a dia é o podcast.

A brincadeira é que todo o ano será o ano do podcast, mas eu ouso dizer que estamos chegando nesse ponto!

Aqui estão os podcasts que eu escuto no dia a dia para me atualizar e estudar

Podcast de desenvolvimento e TI

Totvs Developers - Podcast de tecnologia da Totvs que fala de vários assuntos sobre desenvolvimento, carreira em TI e mais. Alerta auto jabá, mas assina lá é feito com amor :)

Adventures in Angular - Podcast em inglês semanal focado no framework Angular.

JavaScript Jabber - Podcast em inglês semanal focado em JavaScript e todo o seu ecossistema.

The Deep Dive - Podcast em inglês focado em tópicoas avançados de desenvolvimento web.

The Angular Show - Podcast do pessoal que organiza a ngconf sobre Angular e seu ecossitema.

Angular Air - Podcast em inglês focado em Angular, o seu lançamento é irregular mas os assuntos são muito interessantes.

BrazilJS - Podcast em português do pessoal da BrazilJS. Além dos programas no formato de podcast, tem notícias rápidas que não necessariamente foram para o Youtube.

Castalio Podcast - Podcast em português focado em Python e em todo ecossistema.

DevShow - Podcast em português focado em desenvolvimento, e ecossistema Microsoft.

Django Chat - Podcast em inglês focado no framework web Django.

ElemenCast - Podcast em português que cobre temas de FrontEnd.

Faaala, Neto - Podcast em português que discute temas de desenvolvimento de aplicativos móveis e desenvolvimento em geral.

Hipsters.tech - Podcast em português referência para diversos temas na área de TI.

Lambda3 - Podcast em português de tecnologia com excelentes discussões. Recomendo a série sobre Microserviços.

Modern Web podcast - Podcast em inglês sobre desenvolvimento Web e JavaScript

Python Bytes - Podcast em inglês sobre as últimas notícias do ecossistema Python.

Real Talk JS - Podcast em inglês sobre o ecossistema JavaScript.

Shop Talk - Podcast em inglês que fala sobre desenvolvimento web e aspectos de negócio e do dia a dia de gestão de startups

Podcast.init - Podcast em inglês sobre o ecossistema Python.

Carreira e Negócios

Carreira sem fronteiras - Podcast da família do Hipsters.tech focado em carreira profissional, não apenas em tecnologia.

Código Aberto - Podcast em português de entrevistas com líderes de TI das maiores empresas do país.

Dev and Community Cast - Podcast em português focado em comunidades de tecnologia

Notícias, Política e Diversidade

AntiCast - Podcast sobre política e atualidades com muito conteúdo.

Boa Noite Internet - Podcast Good Vibes do Cris Dias, bem curtinho mas muito bem produzido.

HQ da Vida - Podcast focado sobre diversidade com temas muito importantes e interessantes para nosso momento atual.

Minha primeira vez - Podcast em português onde o Caio pega uma obra de entretenimento que nunca viu e descreve a sua reação.

Naruhodo - Podcast sobre ciência onde toda semana uma pergunta é respondida com muito embasamento e fontes científicas, mas com um discurso leve e simples.

Necton - Podcast sobre economia, investimentos e finanças pessoais da Necton corretora.

O Assunto - Podcast da Globo que fala sobre as últimas notícias com comentários com especialistas.

Poucas - Podcast de entrevistas com diversas personalidades da internet comentando assuntos do momento.

Projeto Humanos - Podcast de storytelling onde o Ivan destrincha em um trabalho muito cuidadoso histórias brasileiras. Cuidado pode acionar alguns gatilhos psicológicos.

Segunda Chamada - Podcast sobre política e atualidade realizado pelo pessoal do MyNews, canal de notícias que recomendo muito também.

Games

Jogabilidade - Podcast sobre games, trazendo as últimas notícias da indústria e críticas de lançamentos. Além disso eles têm programas sobre filmes, animes e franguinho!

]]><![CDATA[Apresentação TDC - Melhore a produtividade do seu time com o Angular Schematics]]>https://alvarocamillont.dev/apresentacao-tdc-melhore-a-produtividade-do-seu-time-com-o-angular-schematicshttps://alvarocamillont.dev/apresentacao-tdc-melhore-a-produtividade-do-seu-time-com-o-angular-schematicsSun, 21 Jul 2019 02:29:09 GMTNesse sábado dia 20/07/2019 eu tive a honra de palestrar no TDC São Paulo na trilha de Modern Web para conversar sobre Angular Schematic

Seguem os slides da palestra:

https://slides.com/alvarocamillont/schematics
]]><![CDATA[Apresentação TDC - A primeira muralha! Segurança no front end!]]>https://alvarocamillont.dev/apresentacao-tdc-a-primeira-muralha-seguranca-no-front-endhttps://alvarocamillont.dev/apresentacao-tdc-a-primeira-muralha-seguranca-no-front-endSun, 21 Jul 2019 02:23:19 GMTNessa sexta-feira dia 19/07/2019 eu tive a honra de palestrar no TDC São Paulo na trilha de Software Security para conversar sobre segurança no front-end.

Seguem os slides da palestra:

https://slides.com/alvarocamillont/frontendsec
]]><![CDATA[Newsletters técnicos para pessoas desenvolvedoras.]]>https://alvarocamillont.dev/newsletters-tecnicos-para-pessoas-desenvolvedorashttps://alvarocamillont.dev/newsletters-tecnicos-para-pessoas-desenvolvedorasSun, 16 Jun 2019 03:38:41 GMTA única constante no desenvolvimento de software é que nada é constante. Enquanto você lê essa frase, 150 novos frameworks e linguagens foram criados e já estão sendo cobrados por nossos clientes e empresas.

Para se manter atualizado sem precisar ficar a manhã inteira buscando blogs e portais, segue uma lista de newsletters que entregam essas novidades fresquinhas na sua caixa de entrada.

Esse texto é um complemento ao post do Idexo (link) que divulgou excelentes listas sobre negócios e ideias inovadoras. Esse post é para você que precisa colocar essas ideias no ar. 😃

Newsletters Front-End

O ditado diz que a primeira impressão é a que fica, por isso é fundamental que a interface da sua aplicação seja bonita e rápida, sem esquecer nunca da acessibilidade. Aqui estão algumas listas interessantes:

BrazilJS Weekly

A BrazilJS é atualmente uma das maiores comunidades não apenas de JavaScript, como desenvolvimento em geral. Sua lista tem excelentes artigos da comunidades brasileiras e internacionais.

Angular Weekly

Esse é um newsletter com MUITO conteúdo para quem utiliza o framework Angular e as tecnologias do seu ecossistema (TypeScript/RXJS).

Ponyfoo

O Ponyfoo é um site com conteúdo focado em desenvolvimento web em geral, com bastante recursos sobre React e JavaScript.

Alligator.io

Site com treinamentos online que possui um newsletter quinzenal com as últimas notícias em desenvolvimento web no front-end e back-end.

Angular Top 5

Toda sexta feira, esse newsletter traz as 5 maiores notícias do mundo Angular.

React Weekly

Excelente lista para o pessoal do React e seu ecossistema (Redux, React Native).

Web Design Weekly

Newsletter com foco em design e experiência de usuário (UX).

Newsletters Back-End

Além da fachada e do salão, um restaurante precisa ter uma cozinha muito bem organizada e eficiente para atender os clientes. Abaixo, temos listas que podem ajudar no desenvolvimento do back-end da sua aplicação:

Python Weekly

Esse newsletter tem foco em tutoriais e novidades da linguagem Python.

O’Reilly Programming

Lista de e-mail da editora O’Reilly (aquela dos livros com capas de bicho) que tem muitos artigos sobre Devops, Go, Java e outras linguagens.

Awesome Python

Esse newsletter nasceu de um repositório com os melhores recursos para desenvolvimento Python (link) e possui artigos interessantes sobre Data Science e desenvolvimento web.

Pycoders

Lista de artigos com foco em Python, desenvolvimento web e Machine Learning.

Newsletters de Cloud

Se você construir, eles virão, como dito no filme Campo dos sonhos (que fez 30 anos 👴🏻 👵🏻). E qual melhor lugar para construir do que a nuvem?!

Azure

Esse newsletter é feito pela comunidade que utiliza a nuvem da Microsoft e cria conteúdos e tutoriais sobre a plataforma.

AWS

Lista de e-mail da própria Amazon com novidades e dicas de uso dos serviços.

Bônus

Totvs Developers

Lista de e-mail com todas as novidades do desenvolvimento na plataforma da TOTVS, com tutoriais sobre o Design System (THF), dicas de desenvolvimento para o Protheus, RM e todos os produtos TOTVS. Além disso, tem muitas dicas de desenvolvimento em geral que podem ser úteis, mesmo se você não utiliza a plataforma.

Espero que esse post seja útil e te ajude no seu trabalho e estudos! Compartilhe com pessoal !

]]><![CDATA[Tratando vazamento de memória em aplicações Angular.]]>https://alvarocamillont.dev/tratando-vazamento-de-memoria-em-aplicacoes-angularhttps://alvarocamillont.dev/tratando-vazamento-de-memoria-em-aplicacoes-angularFri, 14 Jun 2019 03:18:53 GMTQuando começamos o aprendizado de uma aplicação Angular, aprendemos o básico de RxJS para criar nossos componentes, principalmente quando temos que realizar alguma requisição HTTP. ( link )

O conceito de Observable implementado no RxJS é poderoso e nos permite acessar um fluxo de dados (como uma requisição Http) de uma maneira fluída e organizada.

Nesse exemplo eu estou fazendo uma requisição na API e me inscrevendo (subscribe) no retorno para atribuir a um objeto que usarei na minha interface.

https://gist.github.com/alvarocamillont/ed98552e15c0efb45fe31dfc6170507f

Porém, nesse simples exemplo mora um perigo não muito claro, a ameaça silenciosa do vazamento de memória.

Quando esse componente não for mais utilizado, como por exemplo se o usuário ir para outra página, o Observable gerado por essa requisição HTTP ainda estará ativo pois o componente não se desinscreveu nele.

Como o componente já foi destruído, esse Observable ainda ativo virou um vazamento de memória(memory leak).

Isso causa uma degradação do desempenho, aumento do consumo de recursos da máquina e principalmente, perda de tempo do desenvolvedor, pois em uma aplicação grande esse tipo de erro é bem complicado de se localizar.

Então, o que podemos fazer ? Simples: garantir que meu componente se desinscreva sempre que ele não precisar mais do Observable!

OK, mas como fazer isso? Ah! Para isso temos algumas maneiras…

A Básica.

Para se desinscrever de um Observable basta você seguir dois passos:

  • Guardar a inscrição: O método subscribe tem como retorno um objeto do tipo subscription que representa a inscrição realizada.

  • Chamar o método unsubscribe do objeto subscription.

https://gist.github.com/alvarocamillont/6b647b229a9ac1b10b172ee10dda1e8b

Isso é simples, porém a questão é quando chamar o unsubscribe.

No Angular os componentes possuem métodos de ciclo de vida ( Lifecycle Hooks ), normalmente quando criamos via cli (ng g c) ele já vem de fábrica com o método OnInit.

https://gist.github.com/alvarocamillont/acb2b1af65b7d2590c7701fb32b54fba

Para desinscrever o componente do Observable antes dele ser destruído, podemos então utilizar o método OnDestroy.

https://gist.github.com/alvarocamillont/d7f6cee0dd18349f661e50c6627c5185

Pronto vazamento eliminado!

Porém nem sempre nossos componentes terão apenas um Observable,assim essa solução simples pode ficar um pouco feia …

Veja que adicionamos mais um Observable e tivemos que guardar mais uma Subscription e realizar mais uma condição no método onDestroy.

https://gist.github.com/alvarocamillont/b91817d12dc3f31140f59db5b2776a7c

Podemos melhorar?

O SubSink

Entra a biblioteca SubSink focada em facilitar a coleta e a desinscrição nos Observables.

Ela é muito simples e tem apenas um método e um atributo:

  • O atributo sink onde você adiciona a inscrição em uma lista que fica implícita.

  • O método unsubscribe que realiza a desinscrição de toda a lista do atributo sink.

Vamos ao exemplo anterior verificar como fica mais simples a administração dos Observables do componente.

https://gist.github.com/alvarocamillont/acb506eda3d9dc188a966d94136dd58b

Ainda temos mais uma alternativa. E essa já vem por padrão no Angular.

O pipe async.

Quando componentes utilizam Observables em seus templates HTML uma alternativa muito interessante é o pipe async ( | async).

Com ele o componente apenas passa para o template o observable. E o motor de renderização do Angular faz o trabalho de realizar a inscrição (subscribe) e atribuir o retorno a um objeto.

A melhor parte é que o Angular cuida da desinscrição para você!

Vamos ver como ficam o template e o componente:

https://gist.github.com/alvarocamillont/16b243ce9fcda1c4a485162aef7bc095
https://gist.github.com/alvarocamillont/78a92ebabea640f32773f1fd3ee08c3a

Veja que não temos que chamar o OnDestroy, o framework faz isso para você!

Para mais informações, segue o vídeo da Loiane sobre o tema( vídeo ).

Conclusão

Nesse artigo vimos os cuidados que temos que ter para evitar vazamento de memória (memory leaks) nas nossa aplicações Angular.

Resumindo:

  • Se seu componente utiliza observables para apresentar informações no template, utilize o pipe async.

  • Se você tem apenas um observable onde você precise fazer a inscrição(subscribe), guarde o objeto Subscription em uma variável e se desinscreva no método OnDestroy do componente.

  • Caso seu componente tenha vários observables, utilize a bibiloteca SubSink para seu código ficar mais limpo.

Código fonte do exemplo( link ).

Obrigado e compartilhe esse artigo com seus colegas para eles conhecerem esses cuidados na construção de componentes Angular.

]]>