DEV Community: Felipe Marques

Deploy an API REST .Net 5 to Google Cloud Run using Github and Google Cloud Build

Felipe Marques — Wed, 24 Aug 2022 01:03:00 +0000

Create a new ASP.NET Core Web API project.

Give a name to the project and put it Github repo root folder.

Select .Net version.

The version you choose here will reflect in dockerfile, so be free to change .net version but remember to adapt your dockerfile.

Select webapi option to run.

Run the project, make a GET resquet at /weatherforecast endpoint just to test if everthing its fine.

Program.cs

Change your Program.cs to be like this code:


 csharp
using System;
using Microsoft.AspNetCore.Hosting;
using Microsoft.Extensions.Hosting;

namespace webapi
{
    public class Program
    {
        public static void Main(string[] args)
        {
            CreateHostBuilder(args).Build().Run();
        }

        public static IHostBuilder CreateHostBuilder(string[] args)
        {
            var port = Environment.GetEnvironmentVariable("PORT") ?? "8080";
            var environment = Environment.GetEnvironmentVariable("ASPNETCORE_ENVIRONMENT") ?? "Development";

            if (environment == "Development")
            {
                return Host.CreateDefaultBuilder(args)
                    .ConfigureWebHostDefaults(webBuilder => { webBuilder.UseStartup<Startup>(); });
            }
            else
            {
                var url = new[]
                {
                    string.Concat("http://0.0.0.0:", port)
                };
                return Host.CreateDefaultBuilder(args)
                    .ConfigureWebHostDefaults(webBuilder => { webBuilder.UseStartup<Startup>().UseUrls(url); });
            }
        }
    }
}

In this code, its importante to set up 0.0.0.0 IP when its running in a container, because when we use Google Cloud Run, we are running or code inside a container. In my case, I put it for every environment except the Delopment environment.

Dockerfile

Create the Dockerfile file in the root folder of your repo. Check if all your project files are in the root, if not, move to the root folder.

Edit your Dockerfile with the following code:


 dockerfile
FROM mcr.microsoft.com/dotnet/sdk:5.0 AS build-env
WORKDIR /app

COPY . ./
RUN dotnet publish -c Release -o out

FROM mcr.microsoft.com/dotnet/aspnet:5.0
WORKDIR /app
COPY --from=build-env /app/out .

ENV ASPNETCORE_ENVIRONMENT Production

ENTRYPOINT ["dotnet", "webapi.dll"]

Remember to change de DLL file name in the last line, this name must be exactilly the name of your project main .dll file.
If your project you another folder structure, maybe you'll need make changes in your dockerfile.

Save all files and commit.

GCP Cloud Run

If you like, create a new project.

Search for Cloud Run, open Cloud Run product. Create a new service.

If you created a new project or is your first time using Cloud Build, maybe its necessary to Enable Cloud Build API, like me.

Select Continuously deploy new revisions from a source repository and click Setup With Cluod Build

Important: I connected my Github account previously, therefore, I couldn't take prints in this step, but if its your first time, you need to connect your Github and GCP accounts.

Select your Github repository to be published.

Proceed to the second step and check Dockerfile option. In Branch field, keep the standard value ^main$, this way every commit at branch main will trigger a new build at Cloud Build to be published in Cloud Run. Keep in mind that its possible to change to another branch.

Fill the Service name, I just kept default value. Choose a region, again I kept default.

At Autoscaling option I choose zero as minimum instances, because this reduces costs, but if you wish reduce latence and improve response time, keep in mind that probabily you will need at least one instance.

As well as minimum instances, to limit the cost I choose just 1 instance at maximum. If you wish improve availabillity and reliabillity, consider increase this number according with your traffic volume

Lastly, select Ingress and Authentication settings, for this tutorial I choose Allow all traffic and Allow unauthenticated invocations. But, for production applications, consider restrict your traffic and unauthenticated request.

Optional: Open Container, Connections, Security menu and ajust your container capacity.

For this deploy its not necessary to be concerned about this, and you can change this latter.

Save and create your service. Wait.

With everything done, you must get a result like bellow image:

The highlighted URL is provided by GCP and is the public URL to access your service. Try to access your /weatherforecast endpoint.

URL: https://democsharpgcpcloudrun-lwy2plkqfa-uc.a.run.app/weatherforecast

Conclusion

With this configuration, every new commit in your branch main in Github repository will trigger a new build at Google Cloud Build and if the build success, a new version of your application will be deployed in Google Cloud Run.

The Cloud Run has a resource called Reviews that allow us to rollback a version if the new one breaks our API.

In addition to allowing us to manage the traffic between version, witch allow us to deploy using canary method. Unfortunately, until now, I couldn't configure that canary to be automated with deploy, If you know how to automate traffic management during the deploy, please put in the comments.

Thank you for reading and I hold this was useful.

Como publicar uma API REST .Net 5 no Google Cloud Run usando Github e Google Cloud Build

Felipe Marques — Wed, 24 Aug 2022 00:28:00 +0000

Crie um novo projeto ASP.NET Core Web API

Nomeie o projeto e coloque-o dentro da pasta raiz do repositório do Github.

Selecione a versão do .net.

Aqui vale uma observação, a versão que você usar do .net vai influenciar como o arquivo dockerfile deverá ser configurado, se quiser escolher outra versão, fique à vontade, mas será necessário adaptar o dockerfile.

Selecione a opção webapi para execução.

Execute o projeto, faça um GET no /weatherforecast apenas para validar que está tudo funcionando.

Vamos às adaptações necessárias no Program.cs

Program.cs

Faça as alterações necessárias no seu Program.cs para ficar como o do código abaixo:

using System;
using Microsoft.AspNetCore.Hosting;
using Microsoft.Extensions.Hosting;

namespace webapi
{
    public class Program
    {
        public static void Main(string[] args)
        {
            CreateHostBuilder(args).Build().Run();
        }

        public static IHostBuilder CreateHostBuilder(string[] args)
        {
            var port = Environment.GetEnvironmentVariable("PORT") ?? "8080";
            var environment = Environment.GetEnvironmentVariable("ASPNETCORE_ENVIRONMENT") ?? "Development";

            if (environment == "Development")
            {
                return Host.CreateDefaultBuilder(args)
                    .ConfigureWebHostDefaults(webBuilder => { webBuilder.UseStartup<Startup>(); });
            }
            else
            {
                var url = new[]
                {
                    string.Concat("http://0.0.0.0:", port)
                };
                return Host.CreateDefaultBuilder(args)
                    .ConfigureWebHostDefaults(webBuilder => { webBuilder.UseStartup<Startup>().UseUrls(url); });
            }
        }
    }
}

No código é importante notar o bloco do else, nele estamos dizendo que quando o ambiente não for "Development" a aplicação deverá subir usando o IP 0.0.0.0, isso é necessário para que a aplicação fique visível fora do container quando publicarmos no Cloud Run.

Dockerfile

Crie o Dockerfile na raiz do repositório. Verifique se o seu projeto também está na raiz do repositório, se não tiver, mude para a raiz.

Preencha seu dockerfile com o código abaixo:

FROM mcr.microsoft.com/dotnet/sdk:5.0 AS build-env
WORKDIR /app

COPY . ./
RUN dotnet publish -c Release -o out

FROM mcr.microsoft.com/dotnet/aspnet:5.0
WORKDIR /app
COPY --from=build-env /app/out .

ENV ASPNETCORE_ENVIRONMENT Production

ENTRYPOINT ["dotnet", "webapi.dll"]

Importante alterar a última linha, o nome do arquivo .dll deve ser exatamente igual à DLL principal do seu projeto.
Se seu projeto tiver uma estrutura de pastas diferente do meu, talvez precise alterar outros pontos do dockerfile.

Salve tudo e faça commit.

Cloud Run no GCP

Se desejar, crie um projeto novo.

Pesquise por cloud run na barra de pesquisa no meio da barra do topo. Abra o produto Cloud Run. Crie um novo serviço.

Se você criou um projeto novo ou é a primeira vez que está usando o Cloud Build, talvez precise ativar o Cloud Build API.

Selecione Continuously deploy new revisions from a source repository e clique em Setup With Cluod Build

Importante: eu já tinha minha conta do Github conectada ao GCP, portanto, não consegui tirar prints dessa etapa, mas se for a primeira vez sua, você terá que vincular a sua conta do Github com o GCP.

Selecione o projeto que você quer publicar.

Avance para segunda etapa e marque a opção Dockerfile. No campo Branch deixe o valor padrão ^main$ para que o Cloud Build seja acionado apenas quando houver commit na branch main do seu repositório, se quiser outra branch, fique à vontade.

Preencha o Service name, eu deixei o valor padrão. Escolha uma região, para exemplo deixei a padrão.

Na opção de Autoscaling deixei a quantidade mínima de instâncias como zero, isso aumenta o tempo de resposta a um request, mas reduz custos, que no meu caso é mais importante. Se você quiser reduzir o tempo de resposta da sua aplicação deixe pelo menos 1 no mínimo e faça ajustes de acordo com a sua volumetria.

Assim como o mínimo, deixei o máximo em 1 instância, porque novamente o mais importante para mim não é performance e sim custo. Se quiser melhorar a performance avalie aumentar o limite máximo de instâncias, mas lembre-se que isso gerará custos.

Por último, é preciso selecionar as configurações de Ingress e Authentication, para fins educativos deixei aberto para Allow all traffic e Allow unauthenticated invocations. Para aplicações em produção considere buscar mais informações para restringir o tráfego e as requisições sem autenticação.

Opcional: Abra o menu Container, Connections, Security e faça ajustes no seu container em relação à memória, timeout, requests máximos por container.

Para o deploy automático essas configurações são irrelevantes e você poderá alterá-las no futuro.

Crie seu serviço e aguarde.

Quando estiver concluído se tudo deu certo ficará como o da imagem abaixo.

O quadro em destaque na imagem acima é a URL pública gerada pelo GCP, com ela é possível acessar nossa API no endpoint /weatherforecast.

URL: https://democsharpgcpcloudrun-lwy2plkqfa-uc.a.run.app/weatherforecast

Conclusão

A partir de agora todo novo commit na main do seu repositório Github será publicado no Cloud Run

O Cloud Run tem um recurso chamado Revisões, com ele é possível fazer rollback caso uma nova versão quebre algum aspecto da sua API.

Além de permitir que você gerencie o tráfego entre duas ou mais versões, podendo fazer deploy canário. Infelizmente, até o momento não consegui configurar um deploy canário automático, se você souber como faz, coloca nos comentário, por favor.

Obrigado por ter ficado até o fim.

How to publish an Angular app to Firebase Hosting using Github Actions

Felipe Marques — Sun, 21 Aug 2022 23:42:00 +0000

The purpose of this post is to publish an Angular application within a Firebase project using the Firebase Hosting product. To automate the deploy we will use a Github Actions pipeline that will be triggered in every commit on the main branch.

To follow this tutorial, you will need to have:

Firebase account
Google account
Firebase CLI installed, see more here
Github account
Previous knowlodge of git and github

Firebase Project

Go to console.firebase.google.com and create a new project.

I'll use demoangulargithubactions

I choose to disable Google Analytics, since it's irrelevant for this tutorial.

Wait until the project creation finish.

As soon as the project is available, you will see a lot of products available for you. For now, keep this tab and let's go to the next step.

Github repository and Angular project

In this tutorial I'll create a new repository called demogithubactions and a new angular project using ng new angular-tour-of-heroes, but this step is optional. If you already have a project, use it.

Clone your repo locally.

Create the angular project.

The project will be create inside the folder angular-tour-of-heroes, as image below.

I prefer to move all code to the root folder. Just because it simplify or Github Actions pipeline.

Firebase configuration

Now we have our project and repo, let's configurate our firebase project.

If you don't have the Firebase CLI installed, do it.

Run firebase init hosting and choose Use an existing project.

Choose your project in the list.

Anwser the questions, be free to anwser or not like me:

Chosse the folder that will be publish, this need to be the same folder that the one generate when we run ng build, in my case will be dist.

Next, I choose No.

Again, I choose No, because I prefer to do the conections between Github and Firebase using my own script.

Done. If everthing is ok, you will receive a message like the image below.

Commit everything.

Github Actions

To configure Github Actions, first we need an auth token from Firebase, generate this token using firebase login:ci. Follow the instructions and authenticate.

A token will be displayed, like image below. For now, keep this token safe, we'll put it in a Secret in your Github repo.

Access your repo, go to Settings -> Secrets -> Actions e create a New repository secret.

Put the name FIREBASE_TOKEN e paste your token in the value field. Add the Secret.

Go to Actions, search for Manual e click in Configure in the Manual workflow box.

A page will be create with lots of code, replece everthing with the code below.

name: Deploy-To-Firebase

on: 
  push:
    branches: 
      - main

  workflow_dispatch:

jobs:
  build:

    runs-on: ubuntu-latest

    steps:
    - uses: actions/checkout@v1
    - name: Use Node.js 16.13
      uses: actions/setup-node@v1
      with:
        node-version: 16.13    
    - name: Install dependencies
      run: npm install
    - name: Build
      run: npm run build -- --prod
    - uses: w9jds/firebase-action@master
      with:
        args: deploy
      env:
        FIREBASE_TOKEN: ${{ secrets.FIREBASE_TOKEN }}

To save the file, click in Start Commit, follow the instructions.

Click in Actions again, if not exist a worflow running, go to Deploy-To-Firebase and click Run workflow.

Optionally, open the deploy and follow step by step. After script execution all steps need to be green, like bellow image.

Go back to the Firebase tab console.firebase.google.com and refresh. Click All products and then Hosting.

Open one link in a new tab. Maybe you'll see something like next image, if thats the case, we need to ajust a configuration

Go to angular.json, at line 23, the value of outputPath configuration is different than what was informed previouslly in firebase init.

Here we have two options, change file angular.json and use "outputPath": "dist" or change file firebase.json and use "public": "dist/angular-tour-of-heroes". I choose to change angular.json.

Do a new commit. Follow Github Actions pipeline, refresh your Firebase console and you will see something like next image.

Open your project link and see your project published.

Conclusion

I holp that this tutorial could help you to configure a Github Action pipeline to deploy your angular project to Firebase Hosting.

If you like this tutorial, try adding a Telegram notification with Github Actions step to your pipeline.

Como publicar uma aplicação Angular no Firebase usando Github Actions

Felipe Marques — Sun, 21 Aug 2022 23:01:00 +0000

O objetivo desse post é publicar uma aplicação Angular dentro de um projeto do Firebase utilizando o produto Hosting do Firebase. Para fazer automatizar a publicação configuraremos um script do Github Actions para ser executado sempre que houver um commit na branch main do repositório.

Para acompanhar os passos desse post, será necessário que você tenha:

Conta do Firebase
Conta do Google
Firebase CLI instalado, veja como aqui
Conta do Github
Conhecimento para criar e trabalhar com um repositório no Github

Projeto no Firebase

Acesse o console do Firebase em console.firebase.google.com e crie um novo projeto.

No meu caso vou usar o nome demoangulargithubactions

E vou optar por não habilitar o Google Analytics, uma vez que é irrelevante para esse tutorial.

Aguarde alguns instantes até que o projeto seja criado.

Assim que o projeto estiver disponível você terá a opção de utilizar alguns produtos, por hora deixe essa aba aberta e vamos para a próxima etapa.

Criar repositório no github e projeto Angular

Para esse tutorial vou criar um repositório novo chamado demogithubactions e um projeto angular novo usando ng new angular-tour-of-heroes, mas essa etapa é opcional. Se você já tem um projeto, continue com ele.

Faça o clone do seu repositório localmente.

Crie o projeto angular

O projeto será criado dentro da pasta angular-tour-of-heroes como na imagem abaixo.

No meu caso vou mover todo o código para a pasta raiz. Se você quiser organizar de outra forma, lembre-se que o script do Github Actions precisará de algumas alterações.

Configuração do Firebase

Pronto, agora que já temos o projeto Angular e o repositório prontos, vamos configurar o Firebase.

Se você ainda não fez, faça a instalação do Firebase CLI e o login na sua conta.

Depois, execute o comando firebase init hosting e escolha a opção Usar um projeto existente (talvez esteja em inglês: Use an existing project)

Será mostrado a lista de projetos da sua conta, escolha o projeto que você quer fazer o deploy.

A partir de agora, serão feitas algumas perguntas, vamos lá:

Escolha a pasta que será publicada, essa é a mesma pasta onde o comando ng build gera os arquivos de publicação, no nosso caso será a pasta dist.

Em seguida perguntam se quer configurar sua página como single-page app, eu sempre opto por N, não sei qual a influência dessa opção no roteamente do angular, se alguém souber, me fala nos comentários, por favor.

Aqui também marco que não, porque nosso script já vai fazer a conexão com o Github Actions.

Pronto, se as configurações foram criadas com sucesso, você terá uma mensagem similiar com a da imagem abaixo.

Faça commit de tudo.

Configurando o Github Actions

Para configurar o Github Actions vamos precisar primeiro de um token de autenticação do Firebase, gere esse token executando o comando firebase login:ci. Uma tela do browser deve abrir e você precisará se autenticar.

Se tudo der certo um token será gerado, na imagem abaixo eu pintei a linha, mas é possível ver que é uma string, guarde esse token por enquanto, vamos colocá-lo em um Secret do repositório no Github.

Acesse o seu repositório no Github, vá em Settings -> Secrets -> Actions e crie um New repository secret.

Coloque o nome de FIREBASE_TOKEN e no valor cole o token gerado na etapa anterior. Adicione o Secret.

Acesse a aba Actions, pesquise por Manual e clique em Configure na caixa do Manual workflow.

A página que será aberta já vem com algum código, substitua tudo pelo código abaixo.

name: Deploy-To-Firebase

on: 
  push:
    branches: 
      - main

  workflow_dispatch:

jobs:
  build:

    runs-on: ubuntu-latest

    steps:
    - uses: actions/checkout@v1
    - name: Use Node.js 16.13
      uses: actions/setup-node@v1
      with:
        node-version: 16.13    
    - name: Install dependencies
      run: npm install
    - name: Build
      run: npm run build -- --prod
    - uses: w9jds/firebase-action@master
      with:
        args: deploy
      env:
        FIREBASE_TOKEN: ${{ secrets.FIREBASE_TOKEN }}

Salve o arquivo clicando em Start Commit e faça o commit.

Clique em actions novamente e veja se já existe algum workflow sendo executado, se não tiver, vá em Deploy-To-Firebase e clique em Run workflow.

Opcionalmente, abra o deploy e acompanhe a execução de cada etapa. Se tudo funcionou, você terá uma tela com todas as etapas verdes, como a imagem abaixo.

Volte na aba do Firebase console.firebase.google.com que você deixou aberta e atualize. Clique em All products e depois em Hosting e você verá uma tela similar à da próxima image. Com dois domínios disponíveis e o pacote que foi publicado.

Abra um dos domínios e você deve ver uma imagem como a abaixo. Se isso aconteceu com você, é porque precisamos de um ajuste de configuração.

Abaixo você pode ver o conteúdo do meu arquivo angular.json, na linha 23, a configuração outputPath está configurado para um diretório diferente do que foi informado na hora que configurei o firebase.

Aqui temos duas opções, alterar o arquivo angular.json e colocar "outputPath": "dist" ou alterar o arquivo firebase.json e colocar "public": "dist/angular-tour-of-heroes". Eu preferi alterar o meu angular.json. Fique à vontade.

Faça a correção e um novo commit. Você verá que foi gerado um novo build. Se tudo correu bem, um novo pacote foi entregue no seu projeto firebase, como na imagem abaixo.

Observe que agora você tem dois pacotes e existe a opção de voltar para o pacote anterior clicando no botão no início da linha do deploy mais antigo.

Observe também que o número de arquivos do último deploy está zero. Isso acontece porque há uma certa demora para o Firebase atualizar esse número.

O mais importante é que se você acessar um dos dois domínios, deve ver o projeto publicado, como na imagem a seguir.

Conclusão

Espero que esse passo a passo tenha ajudado a configurar um projeto do angular no firebase.

Aproveite e adicione uma etapa de notificação no seu pipeline do Github Actions utilizando o Telegram

Como iniciar em C# e Angular - Referências

Felipe Marques — Thu, 04 Aug 2022 03:32:08 +0000

Recentemente um amigo me pediu ajuda para iniciar na área de desenvolvimento de software, ele queria ajuda para procurar cursos, livros e outros materiais.

Após conversarmos, também ficou claro que ele precisaria de ajuda para criar um roadmap de estudos.

Após coletar algumas indicações de outros amigos com os quais já trabalhei, ao invés de enviá-las por Whatsapp para meu amigo, decidi escrever esse post para que todas as recomendações fiquem reunidas e minimamente organizadas para consultas futuras, não só do meu amigo, mas para todas as pessoas que também desejam começar a programar, especialmente se o foco for desenvolvimento Web com C# e Angular.

O objetivo é desse material é evoluir com indicações, então ajude-nos colocando indicações e sugestões nos comentários.

Lógica de Programação

Embora seja um pouco teórico e aparentemente chato para quem está começando, é um assunto super importante e será necessário independente da linguagem que você for programar. Então investe um tempo nesse curso.

Lógica de Programação
Disponível no Youtube (gratuito)

Quando já tiver visto toda a teoria, que tal tentar um curso que aplica lógica de programação na prática usando C#?

C# - Lógica de Programação
Disponível no Youtube (gratuito)

E para se aprofundar, porque não mergulhar nesse livro C# e Orientação a Objetos - Caelum distribuido gratuitamente pela Caelum.

Após ter alguma familiaridade com os temas acima, indicaria um curso Fullstack e por indicação deixo o link abaixo.

Fullstack com .Net Web API e Angular
Disponível na Udemy (pago)

Versionamento de código

Paralelamente ao aprendizado da linguagem de programação, eu indico ainda ir se familiarizando com versionadores de código, principalmente o Git. E para isso indico usar o Github, por ainda ser a plataforma mais difundida.

Git e Github para iniciantes
Disponível na Udemy (gratuito)

Referências

Além do conteúdo acima, vou deixar algumas referências aqui.

Carreira Desenvolvedor Backend .NET - balta.io
Conteúdo free e pago

Carreira Desenvolvedor Frontend Angular - balta.io
Conteúdo free e pago

Visual Studio breakpoint com condições

Felipe Marques — Wed, 29 Jun 2022 13:00:48 +0000

🇺🇸 English version

Essa é uma dica simple e rápida, talvez você já conheça, mas eu não conhecia, mesmo após 10 anos trabalhando diariamente com o visual studio e o C#.

Se você já teve que debugar um código que é executado várias vezes buscando avaliar o comportamento do seu código em apenas uma determinada condição, você já precisou de algo como um breakpoint com condições. E como o próprio nome diz, é esse recurso que o VS fornece para nós.

Para exemplificar, fiz um código simples que imprime 10 números aleatórios em um console.

Console.WriteLine("Begin");
var rnd = new Random();

for (int i = 1; i <= 10; i++)
{
    Console.WriteLine($"{i}: {rnd.Next(10)}");
}

Console.WriteLine("End");
Console.ReadLine();

Se você colocar um breakpoint, como na imagem abaixo, o debug vai parar nele em todas as 10 execuções do loop.

Entretanto, você pode querer observar apenas o compotamento do loop quando a variável i==5, nesse caso, clique com o botão direito em cima do breakpoint e adicione uma condição.

As condições são informada como na linguagem e você pode qualquer variável disponível naquele escopo, nesse caso, estou usando a variável i.

Aqui tem um vídeo de exemplo do processo todo.

Espero que tenha gostado e se você não conhecia esse recurso, comenta aí.

Visual Studio breakpoint with conditions

Felipe Marques — Wed, 29 Jun 2022 12:59:48 +0000

🇧🇷 Versão em português

This is a simple and quick tip, maybe you already know it, but I don't, even after 10 years working daily with visual studio and C#, so I decided write about it.

If you've ever had to debug code that takes several attempts to evaluate behavior on just a certain condition, you already needed something like a breakpoint with conditions. And as its name says, VS provides this feature for us.

To exemplify, I made a simple code that prints 10 random numbers on a console.

Console.WriteLine("Begin");
var rnd = new Random();

for (int i = 1; i <= 10; i++)
{
    Console.WriteLine($"{i}: {rnd.Next(10)}");
}

Console.WriteLine("End");
Console.ReadLine();

If you put a breakpoint, as in the image below, the debug will stop at it all 10 executions of the loop.

However, you can must observe the loop behavior just when the condition is i==5, in this case, right click on the breakpoint and put your condition.

The conditions are specified as in the language and you can use any variable available in that scope, in this case I'm using the i variable.

Here is a simple example video of the whole process.

I hope you like and if you don't know this feature, comment there.

Telegram notification with Github Actions

Felipe Marques — Mon, 08 Nov 2021 15:01:42 +0000

🇧🇷 Versão em português

Use the following script to receive Telegram notifications always your Github Actions is running.

    - name: Send Telegram Message Ok
        uses: appleboy/telegram-action@master
        env:
          GITHUB_CONTEXT: ${{ toJSON(github) }}
        with:
          to: ${{ secrets.TELEGRAM_ID }}
          token: ${{ secrets.TELEGRAM_TOKEN }}
          format: markdown
          message: |
            *1st line of your message with bold*
            *2nd line of your message with bold, too*
            Application: *Write something to be put inside your message*. The below lines still are part of your message.          
            Branch: *${{ github.ref }}*
            Repository: *${{ github.repository }}*
            Owner: *${{ github.repository_owner }}*

If you want to go deeper into this component, go to project's github repository

As we can see, to use this component we need two important informations, the TELEGRAM_ID and the TELEGRAM_TOKEN.

To get your TELEGRAM_TOKEN, you will need to create a telegram's bot, do that starting a conversation with BotFather. Start a new conversation and search for @botfather.

You can start the conversation sending a /help message to see all options allowed. But if you want to skip this step, just send /newbot and follow the instructions. When finish bot's creation, you will receive a message with your bot's token, as show below:

Good job! Now you got your TELEGRAM_TOKEN, in this example it is 2063069520:AAE7Gcummn9fSp_xLQH7dBGihpzOyWQCm9g.

Now, let's find out your TELEGRAM_ID. Just search for @userinfobot and start a conversation with /star message. The result message will be like that:

@your_telegram_username
Id: 12345678
First: <Your Firstname>
Last: <Your Lastname>
Lang: en-US

Your TELEGRAM_ID is the number in second line, right between your username and firstname.

In this point you have all information to start sending notification messages at any pipeline in Github Actions.

Just add these information to repository secrets.

Angular: Environment

Felipe Marques — Mon, 01 Nov 2021 00:40:20 +0000

As variáveis de ambiente permitem que nós possamos incluir no nosso código condições, parâmetros e valores diferentes de acordo com nosso ambiente.

Imagine que você utilize uma API Rest de um serviço qualquer, seja ele criado internamente na empresa que você trabalha, seja ele de terceiros e que esse serviço ofereça um endpoint para homologação e outro para produção.

Uma abordagem inicial seria trocar os valores dessa api todas as vezes que quisermos publicar nossa aplicação em produção.

Uma abordagem muito mais elegante é configurar as variáveis de ambiente para que você não tenha que lembrar de trocar o conteúdo de nenhuma variável.

Aqui mostro como fazer isso utilizando o recurso de configuração de ambiente do Angular.

Projetos criados com Angular CLI possuem por padrão um arquivo de configuração chamado environment.ts disponível na pasta environments da sua aplicação.

environment.ts:



export const environment = {
  production: false
};

environment.prod.ts



export const environment = {
  production: true
};

Veja um exemplo de como usar o environment.



import { environment } from '../environments/environment';

environment = environment;



<div class="row justify-content-center" *ngIf="!environment.production">    
    <div class="auth-box text-center">
        <div class="row">
            <div class="col-md-12">
                <button type="button" (click)="LimparTudo()" class="btn btn-danger btn-md btn-block waves-effect text-center m-b-20">Limpar Memória</button>
            </div>
        </div>
    </div>
</div>

Publicação automática de um app flutter na PlayStore com Github Actions

Felipe Marques — Mon, 01 Nov 2021 00:02:16 +0000

O objetivo desse post é detalhar o passo a passo para publicar uma aplicação Flutter na Play Store.

Publicação da 1ª release do app

A primeira publicação deve ser feita manualmente e só depois de aprovado pela PlayStore que será possível fazer o deploy totalmente automatizado.

1. Crie a chave no Android Studio

Abra o Android Studio, acesse Build/Generate Signed Bundle or Apk, na próxima tela escolha Android App Bundle e clique em Next. Clique em Create new... para criar uma key store nova.

Lembre-se de guardar o conteúdo que for utilizado nos campos de senha e no campo Alias. Você vai precisar deles depois.
A imagem abaixo mostra um exemplo de como preencher os dados.

2. Gere o base64 da chave

Após concluir a geração da chave, abra o terminal do seu SO e execute os comandos abaixo. Obs: Se estiver no Windows, talvez precise instalar o openssl antes. Talvez esse link do StackOverflow possa te ajudar.

Uma vez que você esteja com o arquivo myapp.jks disponível, execute o comando:

openssl base64 < myapp.jks | tr -d '\n' | tee myapp.jks.base64.txt

Assim como as senhas e o Alias, você vai precisar do conteúdo desse arquivo quando for configurar os secrets do pipeline.

3. Crie um pipeline de build no gha

Nesse primeiro momento, o pipeline fará apenas o build do arquivo .aab, sem fazer o deploy para a Play Store.

O objetivo desse pipeline é criar o .aab assinado que você usará para subir na PlayStore. Mas você pode fazer isso pelo seu ambiente de desenvolvimento se quiser. Particularmente eu prefiro gerar pelo GhA para já testar essa etapa do script.

name: Build

on:
  push:
    branches:
      - main

# the follow line allow this script to be started manually.
  workflow_dispatch:

jobs:
  build:
    # This job will run on ubuntu virtual machine
    runs-on: ubuntu-latest
    steps:
      # Setup Java environment in order to build the Android app.
      - uses: actions/checkout@v1
      - uses: actions/setup-java@v1
        with:
          java-version: "12.x"

      # Setup the flutter environment.
      - uses: subosito/flutter-action@v1
        with:
          # channel: 'beta' # 'dev', 'alpha', default to: 'stable'
          flutter-version: "2.2.3" # you can also specify exact version of flutter

      # Get flutter dependencies.
      - run: flutter pub get

      # Build appbundle.
      - run: flutter build appbundle --target-platform android-arm,android-arm64,android-x64 --no-sound-null-safety

      - run: zip -d build/app/outputs/bundle/release/app-release.aab META-INF/\*

      - uses: r0adkll/sign-android-release@v1
        name: Sign app APK

        id: sign_app # ID used to access action output
        with:
          releaseDirectory: build/app/outputs/bundle/release
          signingKeyBase64: ${{ secrets.KEY }}
          alias: ${{ secrets.ALIAS }}
          keyStorePassword: ${{ secrets.KEY_STORE_PASSWORD }}
          keyPassword: ${{ secrets.KEY_PASSWORD }}

      # Upload generated apk to the artifacts.
      - uses: actions/upload-artifact@v1
        name: Upload Artifact
        with:
          name: release-aab
          path: build/app/outputs/bundle/release/app-release.aab

4. Configure os secrets do pipeline

Com o script criado, você vai precisar configurar as secrets. É nesse momento que você vai precisar das informações geradas nos passos 1 e 2.

Pelo site do Github, vá no repositório do projeto e acesse o menu Settings -> Secrets, abrirá uma página como da imagem abaixo.

Cadastre as secrets conforme as orientações abaixo:

KEY: conteúdo do arquivo myapp.jks.base64.txt
ALIAS: o valor que você preencheu ao criar a chave
KEY_STORE_PASSWORD: a senha que você usou ao criar a chave
KEY_PASSWORD: a senha que você usou ao criar a chave

Com todos os passos realizados, você deve ser capaz de executar seu pipeline com sucesso e isso irá gerar um arquivo .zip composto do seu .aab.

5. Crie um app dentro da Play Store Console

Acesse a Play Store Console e faça a criação do App.

Esse passo não será detalhado, porque cada tipo de aplicativo segue um fluxo diferente, podendo mudar de acordo com o público, o conteúdo, entre outros aspectos, portanto, siga os passos de acordo com as orientações da Play Store.

Quando terminar, você estará em um ponto onde será necessário subir o primeiro release do app, nesse ponto, suba o arquivo .aab gerado no passo anterior, suba as imagens de divulgação e envie seu release para aprovação.

Essa primeira aprovação pode demorar muitas horas, não tem muito o que fazer, apenas aguardar.

Publicação da 2ª release em diante

Legal, agora que seu app está publicado, altere o pipeline para fazer as publicações de forma automática para você.

1. Inclua autenticação na Play Store

Para fazer a autenticação, você vai precisar de uma Service Account com acesso para fazer publicações em seu nome na Play Store. Para criar uma siga os passos da documentação do Android.

2. Crie a Secret no GhA

Para usar de forma segura sua service account, suba o conteúdo do json em uma secret chamada SERVICE_ACCOUNT.

Aproveite que já está nas secrets e adicione uma nova secret chamada PACKAGE_NAME e informe o valor do applicationId do seu projeto. Essa informação fica no arquivo android/app/build.gradle. Ex: com.example.myapp

3. Altere o script

Adicione os passos a seguir para incluir a publicação na Play Store.

      - name: Create service_account.json
        id: createServiceAccount
        run: echo '${{ secrets.SERVICE_ACCOUNT }}' > service_account.json

      - name: Deploy to Play Store (Production)
        id: deploy
        uses: r0adkll/upload-google-play@v1.0.12
        with:
          serviceAccountJson: service_account.json
          packageName: {{ secrets.PACKAGE_NAME }}
          releaseFiles: build/app/outputs/bundle/release/app-release.aab
          whatsNewDirectory: whatsnew/

Acesse a documentação da task r0adkll/upload-google-play para entender melhor como funciona a configuração do whatsNewDirectory.

Conclusão

Não sei vocês, mas eu fico fascinado quando consigo automatizar tarefas massantes como essa. E com todos esses passos realizados, você deve ser capaz de liberar novas versões desse aplicativo de forma automatizada, aproveite o tempo extra para tomar um café, você merece.

Não seja como eu e lembre-se de atualizar o pubspec.yaml com a versão correta, se tentar submeter duas versões com mesmo número, sua publicação falhará.

Veja que após a primeira publicação, a tarefa que faz upload dos artefatos passa a ser desnecessária, minha recomendação é que você apenas comente ela, para que possa usar em outros aplicativos no futuro.

Notificação no Telegram pelo Github Actions

Felipe Marques — Sun, 31 Oct 2021 12:48:01 +0000

🇺🇸 English version

Para receber notificações no Telegram sempre que seu script executar no Github Actions, use o script abaixo:

    - name: Send Telegram Message Ok
        uses: appleboy/telegram-action@master
        env:
          GITHUB_CONTEXT: ${{ toJSON(github) }}
        with:
          to: ${{ secrets.TELEGRAM_ID }}
          token: ${{ secrets.TELEGRAM_TOKEN }}
          format: markdown
          message: |
            *1ª linha da mensagem*
            *2ª linha da mensagem*
            Applicação: *Preencha como quiser e com quantas linhas quiser* os asteriscos são apenas para deixar o conteúdo em negrito. As linhas abaixo também fazem parte da mensagem e foram escritas para o exemplo.          
            Branch: *${{ github.ref }}*
            Repository: *${{ github.repository }}*
            Owner: *${{ github.repository_owner }}*

Se quiser se aprofundar nesse componente, acesse o github do projeto

Para fazer o uso desse script, você vai precisar de duas informações importantes, o TELEGRAM_ID e o TELEGRAM_TOKEN.

Para conseguir o TELEGRAM_TOKEN, você precisa criar um bot do telegram, faça isso abrindo uma conversa com o BotFather. Inicie uma nova mensagem e procure por @botfather.

Você pode iniciar a conversa enviando um /help para ver todas as opções possíveis. Mas se quiser pular esse passo, pode enviar /newbot e siga as instruções. Ao finalizar a criação do bot, você recebe uma mensagem com seu token, como a imagem abaixo:

Legal, agora você já tem seu TELEGRAM_TOKEN, no exemplo seria 2063069520:AAE7Gcummn9fSp_xLQH7dBGihpzOyWQCm9g.

Agora, vamos descobrir o seu TELEGRAM_ID. Para isso, basta você procurar o bot @userinfobot e enviar a mensagem /star para ele. O retorno da mensagem deve ser algo como:

@seu_usuario_no_telegram
Id: 12345678
First: <seu nome>
Last: <seu sobrenome>
Lang: pt-br

O seu TELEGRAM_ID é o número na segunda linha.

Nesse ponto você já tem todas as informações para incluir a tarefa de envio de mensagem pelo telegram em todos os seus pipelines.

Basta incluir as duas variáveis no secrets do seu repositório e usá-las no pipeline.

Como desabilitar o cache no Angular

Felipe Marques — Sat, 09 Oct 2021 19:01:12 +0000

Um dos grandes problemas que enfrentei ao atualizar o frontend de aplicações angular foi o cache.

Praticamente todos os navegadores mantêm um cache da aplicação no computador do cliente para conseguir carregar a aplicação de forma mais rápida e com menor consumo de dados e isso é excelente. Entretanto, um efeito colateral é que as atualizações podem demorar para serem entregues para o cliente. Como consequência, o cliente pode ficar horas ou dias com uma versão com um bug que já foi corrigido.

Em sistemas internos de empresas, isso pode resultar em ligações ou tickets constantes para a equipe de suporte técnico, causando uma sobrecarga na equipe. Quando estamos falando de aplicações fornecidas para clientes externos à empresa, pode ser um ponto de frustração e insatisfação com o produto.

Nesse contexto, pode ser interessante desabilitar o cache das aplicações Angular. Veremos a seguir como fazer isso.

Index.html

A primeira opção para evitar o cache dos navegadores é simplesmente indicar ao navegador como ele deve se comportar. Para fazer isso devemos incluir 3 tags meta no arquivo index.html do projeto.


 html
<meta http-equiv="cache-control" content="no-cache, must-revalidate, post-check=0, pre-check=0">
<meta http-equiv="expires" content="0">
<meta http-equiv="pragma" content="no-cache">

Com isso, estamos dizendo ao navegador como ele deve tratar o cache, basicamente, dizemos para ele não fazer cache.

Angular Interceptor

Uma segunda opção é incluir no cabeçalho das requisições http a instrução para o navegador não fazer cache.

Se você não sabe como criar um interceptor no angular, veja o artigo a seguir:

Introdução ao Angular HttpInterceptor | by Matheus Bizutti | Matheus Bizutti | Medium

Matheus Bizutti ・ Sep 5, 2018 ・
Medium

Agora que você já sabe como criar o interceptor, vamos incluir nosso código no interceptor.



 ts

import { Injectable } from '@angular/core';

import {

  HttpRequest,

  HttpHandler,

  HttpEvent,

  HttpInterceptor

} from '@angular/common/http';

import { Observable } from 'rxjs';

@Injectable()

export class NoCache.InterceptorInterceptor implements HttpInterceptor {

constructor() {}

intercept(request: HttpRequest<unknown>, next: HttpHandler): Observable<HttpEvent<unknown>> {

    // inclua o código da linha abaixo logo no início do método intercept

    request = request.clone({

      setHeaders: {

        "Cache-Control": "no-cache",

        Pragma: "no-cache",

      },

    });

return next.handle(request);



}

}

--output-hashing=all

Uma outra forma de forçar a remoção do cache é compilar a aplicação usando o parâmetro --output-hashing=all. Assim ao fazer o build com esse parâmetro os arquivos que foram alterados receberão nomes diferentes, quebrando de forma proposital o mecanismo de cache dos navegadores.

ng build --output-hashing=all ou npm run ng build --output-hashing=all

Conclusão

Como podemos ver, as três opções são simples de implementar. Quando estamos falando de aplicações empresariais para uso interno, dentro da rede da empresa, não vejo motivos para não usar esse recurso, entretanto, se sua aplicação é utilizada por clientes que a consomem pela internet, use esse recurso com sabedoria, lembre-se que seu cliente pode estar acessando seu produto pelo smartphone com um plano limitado de dados e isso também pode ser um ponto de insatisfação em relação ao seu produto.

DEV Community: Felipe Marques

Deploy an API REST .Net 5 to Google Cloud Run using Github and Google Cloud Build

Program.cs

Dockerfile

GCP Cloud Run

Conclusion

Como publicar uma API REST .Net 5 no Google Cloud Run usando Github e Google Cloud Build

Program.cs

Dockerfile

Cloud Run no GCP

Conclusão

How to publish an Angular app to Firebase Hosting using Github Actions

Firebase Project

Github repository and Angular project

Firebase configuration

Github Actions

Conclusion

Como publicar uma aplicação Angular no Firebase usando Github Actions

Projeto no Firebase

Criar repositório no github e projeto Angular

Configuração do Firebase

Configurando o Github Actions

Conclusão

Como iniciar em C# e Angular - Referências

Lógica de Programação

Versionamento de código

Referências

Visual Studio breakpoint com condições

Visual Studio breakpoint with conditions

Telegram notification with Github Actions

Angular: Environment

Publicação automática de um app flutter na PlayStore com Github Actions

Publicação da 1ª release do app

1. Crie a chave no Android Studio

2. Gere o base64 da chave

3. Crie um pipeline de build no gha

4. Configure os secrets do pipeline

5. Crie um app dentro da Play Store Console

Publicação da 2ª release em diante

1. Inclua autenticação na Play Store

2. Crie a Secret no GhA

3. Altere o script

Conclusão

Notificação no Telegram pelo Github Actions

Como desabilitar o cache no Angular

Index.html

Angular Interceptor

Introdução ao Angular HttpInterceptor | by Matheus Bizutti | Matheus Bizutti | Medium

Matheus Bizutti ・ Sep 5, 2018 ・ Medium

--output-hashing=all

Conclusão

Matheus Bizutti ・ Sep 5, 2018 ・
Medium