Como aprender a programar em 1 dia!

Nesse tutorial vamos utilizar a tag “<canvas>” para fazer desenhos na página HTML.

Adicione a linha de código abaixo no seu arquivo “index.html”:

<canvas id='primeiro_canvas' width='500' height='500'
style='border:1px solid'></canvas>

Observe o resultado no navegador web.

Agora já podemos codificar desenhos dentro da nossa página HTML. O elemento Canvas cria um container isolado onde podemos enviar fórmulas matemáticas que geram desenhos geométricos dentro desse container.

Uma tag muito importante dentro de um código HTML é a tag “script”. É nela que adicionamos dinamismo e funcionalidades a um código html estático. É nela que vamos começar a codar de verdade!

Para começar exemplificando, vamos desenhar uma linha reta, no sentido diagonal, que vai do pixel (ou ponto) 0,0 do nosso canvas, até o ponto de coordenada (300,200) do canvas.

A linguagem de programação que utilizaremos dentro das tags “script” para dar dinamismo a um documento HTML chama-se JavaScript.

Comece copiando e colando o código abaixo para seu arquivo “index.html”. Esse código javascript será o reponsável por desenhar uma linha diagonal dentro do nosso elemento canvas.

Para podermos usar um código de alto nível como esse, foram necessárias várias camadas de abstração lógica, ou seja, outros códigos previamente criados e instalados internamente, para que um compilador web (o intérprete que fica dentro dos navegadores) seja capaz de entender e executar esse código HTML + JavaScript.

    var meu_canvas = document.getElementById("primeiro_canvas").getContext("2d");

    meu_canvas.moveTo(0, 0);

    meu_canvas.lineTo(300, 200);

    meu_canvas.stroke();

Agora é só recarregar a página “index.html” lá no navegador e conferir o resultado do seu primeiro script de código

Então vamos continuar desenhando um triângulo.

Copie e cole as linhas de código abaixo dentro do sua tag “script”:

var meu_canvas = document.getElementById("primeiro_canvas").getContext("2d");

var tamanho = document.getElementById("primeiro_canvas").width; meu_canvas.moveTo(tamanho / 2, 0);

meu_canvas.lineTo(0, tamanho);

meu_canvas.lineTo(tamanho, tamanho);

meu_canvas.lineTo(tamanho / 2, 0);

meu_canvas.strokeStyle = 'red';

meu_canvas.stroke();

A linha inicial busca o atributo “width” configurado para o próprio canvas dentro da tag HTML, ou seja, o valor da variável “tamanho” será igual a 500.

As demais linhas de configuração desenharão um triângulo equilátero no canvas, cuja largura e altura serão iguais ao próprio tamanho do canvas.

E a última linha vai pintar o triângulo desenhado com a cor vermelha.

Agora vamos reorganizar o código javascript que acabamos de criar. Vamos separar os trechos de código que podem ser reutilizados de alguma forma, ou seja, trechos de código que executam uma função específica e que podemos repetir sua execução sem precisar repetir a sua escrita.

Na prática, uma Função é definida como o exemplo abaixo:

function triangulo(tamanho) {

    meu_canvas.moveTo(tamanho / 2, 0);

    meu_canvas.lineTo(0, tamanho);

    meu_canvas.lineTo(tamanho, tamanho);

    meu_canvas.lineTo(tamanho / 2, 0);

}

var meu_canvas = document.getElementById("primeiro_canvas").getContext("2d");

var largura = document.getElementById("primeiro_canvas").width; //500

triangulo(largura);

meu_canvas.strokeStyle = 'red';

meu_canvas.stroke();

triangulo(largura / 2);

meu_canvas.strokeStyle = 'blue';

meu_canvas.stroke();

A função javascript de nome “triangulo()” é declarada no início do código acima, através da palavra chave “function” e limitada pelos caracteres de abertura e fechamento de chaves (“{” e “}”). Essa função recebe um parâmetro de nome “tamanho” cujo valor será manipulado como uma variável dentro do código da função.

O código localizado fora da função, será executado automaticamente, e poderá fazer várias chamadas à função “triangulo()” criada, como no exemplo acima. Para cada chamada feita será repetida a execução de todas as linhas de código da função.

O comando de loop do tipo “for” é muito utilizado em programação para executar rotinas repetidamente de acordo com uma sequência pré-definida.

A partir do exemplo acima, vamos gerar vários triângulos em série utilizando o loop for.

Copie e cole o código abaixo dentro da sua tag “script”:

for (var i = 1; i < 15; i++) {
    triangulo(largura / i);
    meu_canvas.stroke();
}

O comando “for” é composto por três sentenças:

• var i = 1
  Nesta primeira declaração é iniciado o contador “i” com o valor inteiro 1.

• i < 15
  Na sentença do meio, é declarada a condição de execução do loop for. O bloco de comandos do loop, ou seja, tudo que estiver dentro das chaves (“{” e “}”), será executado enquanto o valor de “i” for menor que 15. Assim que a sentença “i < 15” for falsa, o bloco for deixará de se repetir em loop.

• i++
  Sentença de incremento. Nessa declaração, para cada repetição do loop for, o valor de “i” será acrescentado de 1 inteiro. É a mesma coisa que escrever “i = i + 1”.

  
  

Quando executar o código no navegador, observe a geração dos triângulos em sequência. O tamanho do triângulo diminuirá de acordo com os valores dinâmicos de “i” passados como parâmetro dentro do loop for:

triangulo(largura / i);

Um outro recurso altamente utilizado em programação é o comando
“if, then, else”.

Quando você precisa que um determinado bloco seja executado somente se uma determinada condição for verdadeira ou for falsa, então você usa o comando “if”.

Vejamos na prática. Copie o código a seguir e cole dentro do seu loop for, de acordo com o print em seguida:

if (i == 1 || i % 3 == 0) {
   triangulo(largura / i);
} else {
   triangulo(largura);
}

Na linha do comando do “if” temos várias coisas acontecendo.

A primeira condição de execução é a sentença “i == 1”. Dentro do loop for, os valores da variável “i” variam de acordo com a sequência de execução do loop, ou seja, a primeira vez que for executado, o valor de “i” será igual a 1, pois foi inicializado assim. A segunda vez que o loop for executado, o valor de “i” será incrementado em mais 1 inteiro, de acordo com a sentença “i++”, ou seja, o valor de “i” será igual a 2. A terceira vez o valor de “i” será igual a 3 e assim por diante, até que a sentença “i < 15” passe a ser falsa, ou seja, “i” chegue ao valor igual a 15.

Nessa primeira condição de execução do if, “i == 1”, o bloco interno do comando (o bloco “then” ou tudo que está dentro das chaves “{” e “}”), será executado somente se a condição for verdadeira, ou seja, as linhas de código dentro do bloco if só serão executadas quando o valor de “i” for igual a 1, ou seja, toda primeira vez que rodar o loop for.

Porém… existe ainda mais uma cláusula dentro da linha de comando if, a segunda cláusula “i % 3 == 0”. Essa é uma operação matemática chamada Módulo, que verifica o resto da divisão entre “i” e 3. Se for igual a 0 (zero), então a condição “i % 3 == 0” é verdadeira e o bloco de comando “then”, que fica entre as chaves do if ,será executado.

Mas… ainda existe mais um detalhe na linha de comando if do exemplo acima, que é a operação conjuntiva “OU”, que em JavaScript é determinada pelo símbolo “||”. Essa operação determina que somente uma das duas sentenças antes ou depois do símbolo “||” precisa ser verdadeira para que o bloco de comando if seja executado. Ou seja, se qualquer uma das sentenças
“i == 1” OU “i % 3 == 0” for verdadeira, o bloco “then” será executado.

E por último existe o bloco “else”, que é executado caso a condição final do comando if seja completamente falsa, ou seja, o valor corrente de “i” não é igual a 1 e nem o resto da divisão entre “i” e 3 não é igual a zero.

Na prática, o triângulo vermelho será desenhado quando o loop for executado a primeira vez, com o contador “i” sendo igual a 1, e depois será executado a cada múltiplo de 3, sendo que o tamanho do triângulo corrente será dividido pelo valor de “i”. Mas caso o valor de “i” não seja um múltiplo de 3, então o programa executará a cláusula “else”, que desenha um triângulo vermelho de tamanho inicial, por cima do primeiro triângulo já desenhado.

Veja todo o código final que escrevemos até agora aqui nesse repositório do GitHub:

https://github.com/allineo/primeiro_app/blob/main/index.html

Agora vamos continuar iterando nosso código com o objetivo de desenhar Fractais na tela do computador.

Um fractal é um objeto geométrico que pode ser dividido em partes, cada uma das quais semelhante ao objeto original. Os fractais têm infinitos detalhes, são autossimilares e podem ser gerados por um padrão repetido infinitamente, num processo recursivo.

Não se preocupe se você não entende o que é exatamente um fractal neste momento. É só um recurso divertido que usaremos para ilustrar o aplicativo que desenvolveremos juntos aqui.

Um dos fractais mais simples que existe é o Triângulo de Sierpinski.

Crie um novo arquivo html no seu editor de código e cole o código do link abaixo para gerar o fractal de Serpinski:
https://github.com/allineo/primeiro_app/blob/main/sierpinski.html

Agora é só executar o código no navegador.

Um outro exemplo muito bonito é o famoso Fractal de Mandelbrot.

Crie dois novos arquivos, um de extensão .html e outro .js, e cole o código dos links abaixo para gerar o fractal de Mandelbrot:

https://github.com/allineo/primeiro_app/blob/main/mandelbrot.html
https://github.com/allineo/primeiro_app/blob/main/mandelbrot.js

Os scripts de seu aplicativo podem ficar em arquivos separados do HTML através do atributo “src” da tag “script”. Observe como é feito no exemplo do código do fractal de Mandelbrot:

script src=”mandelbrot.js”

Quando executar o arquivo html no seu navegador, veja como fica bonito o resultado.

Dê dois cliques no canvas para visualizar os vários níveis de zoom do fractal.

Agora vamos continuar programando nosso aplicativo para que possamos navegar de uma página a outra através de botões.

A tag “<button>” desenha um botão na página HTML, como no exemplo a seguir:
<button type=”button”>Sierpinski</button>

Uma das estratégias para a navegação web que vamos utilizar aqui, é colocar em volta do botão uma tag “<a>”, de âncora, para fazer a mágica de navegar o usuário para outro link.

<a href=”sierpinski.html”>
<button type=”button”>Sierpinski</button>
</a>

Ou:
<p>

   <a href="sierpinski.html"><button type="button">Sierpinski</button></a>

   <a href="mandelbrot.html"><button type="button">Mandelbrot</button></a>

</p>

Observe como fica a página html por completo no código fonte de exemplo abaixo:

https://github.com/allineo/primeiro_app/blob/main/index.html

Além das tags “<button>” e “<a>”, adicionamos também outras tags interessantes à página html, como por exemplo a tag “<h1>” de título.

Veja como fica o resultado no navegador.

Clique nos botões para ir para as outras páginas.

Agora vamos fazer o mesmo com os outros dois códigos html. Vamos colocar botões de navegação nas outras páginas de nosso aplicativo.

https://github.com/allineo/primeiro_app/blob/main/sierpinski.html
https://github.com/allineo/primeiro_app/blob/main/mandelbrot.html

E vamos continuando acrescentando mais interação ao nosso aplicativo.

Para que usuário interaja com a página web utilizamos tags do tipo “<input>”.

Vamos requisitar que os usuários possam digitar a quantidade de níveis que o nosso triângulo equilátero se repetirá na tela, em nosso exemplo inicial.

Observe o código abaixo:

<input type=”number” id=”niveis_triangulo”>

Essa tag cria um campo de entrada de dados na tela onde, no caso, o usuário poderá digitar apenas números no teclado.

Para buscar o valor digitado pelo usuário dentro do código JavaScript, usaremos a linha de comando abaixo:

var repeticoes = document.getElementById(“niveis_triangulo”).value;

Copie e cole todo o código no seu arquivo “index.html”:

https://github.com/allineo/primeiro_app/blob/main/index.html

Observe o parâmetro “onclick” na tag do botão “Enviar”. Esses parâmetros de eventos no html recebem uma função JavaScript como valor e executam essa função toda vez que o evento em questão acontecer na página web.

<button type=”button” onclick=”gerar_triangulos()”>Enviar</button>

No caso do nosso botão “Enviar”, a função “gerar_triangulos()” será executada toda vez que o usuário clicar no botão.

Brinque com o resultado do código acima no navegador.

As repetições do triângulo agora acontecem de acordo com o número digitado pelo usuário, em múltiplos de 3.

A última parte do nosso tutorial é fazer com que o seu aplicativo possa ser acessado por pessoas em qualquer lugar da Internet.

Vamos fazer que ele funcione não somente mais em seu computador, mas na Nuvem, ou seja, em uma hospedagem que possa ser acessada por qualquer pessoa.

O host que iremos utilizar aqui é o Firebase, por ser excelente e gratuito para aprendermos a programar.

Comece criando uma conta no console do Firebase:

https://console.firebase.google.com

E depois clique em “Add project”.

Dê um nome para seu projeto.

Depois do Google Analytics clique na opção “Hosting” no menu e habilite clicando no botão “Get Started”.

Clique no botão “Next” no console do Firebase.

E pronto, Firebase inicializado com sucesso.

Agora instale o “firebase-tools” em sua máquina local.

Para instalar a biblioteca do Firebase no seu computador você vai precisar de um instalador de pacotes como o “ npm” disponível através da linguagem de programação do “Node.js”.

Para instalar o Node faça o download da linguagem em seu computador e siga as diretrizes do próprio site deles:

https://nodejs.org/pt-br

Depois de instalado o Node.js, abra uma janela de comandos no seu computador e digite o comando abaixo:

npm install -g firebase-tools

Novamente na janela de comando, digite o comando para se autenticar no Firebase pela sua máquina local:

firebase login

Autorize o Firebase no seu computador e você estará logado com sucesso.

Dê então o comando de inicialização do Firebase :

firebase init

Nas funcionalidades do Firebase, navegue para baixo com a setinha e selecione a opãção “Hosting” utilizando a tecla espaço para habilitar.

E depois selecione a opção “Use an existing project”.

Com a setinha pra baixo, selecione o projeto “Primeiro App” que acabamos de criar.

Nas próximas opções, selecione o diretório “public” como padrão só clicando em “Enter”, depois digite “N” (No) para o “single page app” e “N” (No) para o "automatic builds do GitHub".

E pronto, Firebase inicializado com sucesso.

Voltando ao editor do Visual Studio, observe que o diretório “public” foi criado pelo “firebase init”, além de todos os demais arquivos de configuração do Firebase para seu projeto.

Selecione e arraste todos os quatro arquivos de código que geramos nesse tutorial para dentro da pasta “public”, inclusive sobrescrevendo o arquivo “index.html” gerado no firebase init.

O último passo da instalação do Firebase Hosting no console é então o deploy.

Digite a linha abaixo na janela de comando:

firebase deploy

Observe a URL pública gerada automaticamente para o seu app através do deploy do Firebase:

https://primeiro-app-2e4ba.web.app

Voilà! Seu primeiro app está armazenado em uma Nuvem (cloud) com uma URL pública.

Pegue seu celular e confira a URL gerada e armazenada na nuvem do Firebase em seu dispositivo móvel.

Prontinho! Distribua sua URL pública para família e amigos poderem visualizar seu app no celular deles e comemorar seu primeiro app com você!

:-D