JavaScript

O que é Ionic?

O Ionic é um Framework Open Source gratuito sobre a licença MIT para desenvolvimento de aplicações mobile híbridas.

Aplicações híbridas são aplicativos móveis construídos de maneira alternativa a aplicações nativa. São construídos, geralmente, utilizando HTML+CSS+JavaScript, desta maneira se tornaram extremamente populares, pois permite o desenvolvimento multiplataforma, utilizando o mesmo HTML para diferentes sistemas operacionais.

Aqui no Blog possuímos um artigo “App Nativo x App Híbrido: existe o melhor?” onde você pode conferir mais detalhes.

Caso você não saiba o que é um Framework

O framework é um facilitador no desenvolvimento de diversas aplicações e, sem dúvida, sua utilização poupa tempo e custos para quem utiliza, pois de forma mais básica, é um conjunto de bibliotecas utilizadas para criar uma base onde as aplicações são construídas, um otimizador de recursos. Tem como principal objetivo resolver problemas recorrentes com uma abordagem mais genérica. Ele permite ao desenvolvedor focar nos “problemas” da aplicação, não na arquitetura e configurações.

Aqui no blog também possuímos um artigo sobre “Para que serve um Framework”.

Sendo assim, o que é o Ionic?

Desenvolvido por Max Lynch, Ben Sperry e Adam Bradley da Drifty Co., sua primeira versão teve seu lançamento em 2013 e atualmente encontra-se na versão 4.

Como dito acima, é um Framework para criação de aplicações móveis e desktop de alto desempenho e qualidade, que utiliza as tecnologias web HTML, CSS e JavaScript.

Como diz em seu site, o Ionic ajuda as equipes a criarem e distribuírem belos aplicativos híbridos em várias plataformas, possuindo foco na experiência do usuário ou interação do usuário com o aplicativo (controles, interação, gestos, animações).

Projetado para funcionar e ser exibido em diferentes plataformas, possui um design limpo, simples e funcional, com componentes padrões, tipografia, paradigmas interativos e diversos templates.

Além disso, possui um cliente de linha de comando (CLI) para gerenciar todo projeto criado com o Ionic. O CLI é uma ferramenta que cria aplicativos Ionic de forma rápida e fornece vários comandos úteis para facilitar o desenvolvimento utilizando o Framework. Possui um servidor de desenvolvimento integrado, ferramentas de compilação e depuração, entre outros benefícios.

Para instalar o Ionic CLI basta clicar aqui.

Por que aprender Ionic?

Além da principal vantagem no desenvolvimento de aplicações híbridas, muitas outras vantagens podem ser listadas quando pensamos no Ionic, dentre elas:

  • Estabilidade na criação de aplicações híbridas: Apesar de utilizar HTML, CSS e JS para o desenvolvimento das aplicações, o Ionic entrega um produto altamente estável e com desempenho similar ao de aplicativos nativos;

  • Multiplataforma: Com o Ionic, podemos desenvolver um único código que seja executado em diferentes sistemas operacionais, diminuindo o tempo de desenvolvimento de novas aplicações.

  • Menor tempo de desenvolvimento: Por criar aplicações multiplataforma, o tempo no desenvolvimento dessa aplicação se torna algo vantajoso em relação às aplicações nativas, uma vez que todo código criado será reutilizado para qualquer sistema operacional móvel, diminuindo assim o tempo de desenvolvimento;

  • Menor custo: Uma vez que poupamos o tempo em seu desenvolvimento, estamos poupando os custos desta aplicação, fazendo com que, criar aplicações multiplataforma torne-se algo mais rentável e menos custoso;

  • Prototipação: Criar telas no Ionic é extremamente fácil, pois possui uma ferramenta para esta finalidade, o Ionic Creator, que é uma ferramenta de “arrasta e solta” para facilitar as ideias de criação de suas aplicações que pode ser acessada neste link;

  • Documentação: Além de possuir uma grande comunidade, a documentação do Ionic é bastante completa, entre outras.

O futuro do Ionic

Como dito acima, o Ionic Framework encontra-se na versão 4, lançado no ano de 2019. Esta versão mais recente foi reprojetada para funcionar como uma biblioteca independente de componentes da web, com integrações para os mais recentes frameworks JavaScript, como o Angular, Vue e React. Ou seja, com a nova versão do Ionic, podemos criar aplicativos híbridos utilizando qualquer framework javascript, como Vue, Angular e React.

O Ionic é um excelente framework que, com certeza, poderá ser utilizado para criar aplicativos dos mais diversos segmentos. Sendo assim, este framework é um forte candidato a ser o seu próximo queridinho no desenvolvimento de aplicativos móveis.

JavaScript: você sabe o que são e por que usar Symbols?

Olá web developers!

Desde o ES2015 nós temos um novo tipo primitivo no JavaScript, os Symbols. Este tipo já existe em outras linguagens como o Ruby, onde é muito utilizado (no JavaScript seu funcionamento é um pouco diferente). Porém, no JavaScript ele ainda é pouco conhecido. Vamos conhecer melhor os Symbols e onde eles podem ser usados.

O que são Symbols?

De modo bem simples e direto, Symbol (símbolo) é um tipo primitivo que armazena um valor único. Seu propósito é esse, servir como um identificador único.

Pense neles como as suas digitais: até irmãos gêmeos idênticos possuem o mesmo DNA mas possuem digitais diferentes, significando que cada dedo é único.

Como os Symbols funcionam?

Para declarar um Symbol basta usar a função Symbol().

const meuSymbol = Symbol();

Também podemos passar para esta função um parâmetro que indica uma descrição do Symbol. Isso serve apenas para nos ajuda na hora de debugar o código, para sabermos melhor sobre do que se trata aquele Symbol. Não muda nada em sua criação.

const meuSymbol = Symbol('meu simbolo');

Como Symbols são únicos, mesmo que a gente os crie de forma igual teremos Symbols diferentes.

Symbol('meu simbolo') === Symbol('meu simbolo'); // false

Onde usar Symbols?

E por que usar Symbol? Onde seria interessante o seu uso? Vamos ver alguns casos:

Eficiência no uso de memória

Imagine que a gente tenha um objeto com uma propriedade nome:

const meuObjeto = {'nome': 'TreinaWeb'};

Sempre que chamarmos meuObjeto['nome'] estaremos criando uma String nova na memória, 'nome'. Em um sistema grande com várias chamadas a propriedades de objetos, onde a otimização do uso de memória é essencial, usar Symbols poderia ajudar, já que cada Symbol é único e, portanto, ocupa um único lugar na memória.

const nome = Symbol();
const meuObjeto = {[nome]: 'TreinaWeb'};

Agora sempre que acessarmos a propriedade nome iremos usar o Symbol que está armazenado na variável nome, nos ajudando a melhorar o consumo de memória.

Porém, a gente poderia fazer isso com Strings salvas em constantes, não é mesmo? Acessando a mesma variável também teremos acesso ao mesmo elemento na memória.

const nome = 'nome';
const meuObjeto = {[nome]: 'TreinaWeb'};

Vamos ter o mesmo resultado, mas como agora estamos usando String, um outro programador pode muito bem escrever direto meuObjeto["nome"] para acessar a propriedade, criando uma nova String na memória e jogando no lixo a melhoria que tentamos fazer.

Com Symbols o programador seria forçado a usá-los para acessar as propriedades pois, por serem únicos, não tem como criar um outro idêntico.

Sim, eu sei que o programador poderia escrever meuObjeto.nome e não estaria criando uma nova String, mas isso é só para o exemplo.

Mesmo sendo um caso de uso, não fica muito bonito ter que ficar declarando várias propriedades antes, seja por Symbols ou constantes com Strings. Mas há momentos em que realmente precisamos declarar vários valores que serão constantes, e é aí que entra algo comum em várias linguagens, Enums.

Enums

Enuns são muito usados quando precisamos definir várias constantes.

Imagine que a gente vai desenvolver um jogo e queremos criar constantes para definir as direções que o nosso personagem poderá andar.

// nosso Enum de direções
const directions = {
    RIGHT: Symbol('Right'),
    LEFT: Symbol('Left')
}

/* função a ser chamada
quando o jogador
apertar algum botão,
recebendo a tecla que
foi pressionada
*/
function onButton(key){
    /* lógica para movimentar
    o personagem */
    switch(key){
        case directions.RIGHT: x++; break;
        case directions.LEFT: x--; break;
    }
}

Com Symbols nós obrigamos o programador a utilizá-los. Se usássemos Strings ele poderia escrever em algum lugar case "RIGHT", o que criaria uma nova String. Para termos de manutenção, testes e performance, é melhor evitar ficar escrevendo valores literais pelo código.

Colisão de Nomes

Como Symbols são únicos, é impossível haver colisão de nomes.

Imagine que a gente tenha um módulo JavaScript com um objeto. Esse objeto possui uma propriedade contador que foi criada com Symbol e temos uma função que incrementa o nosso contador.

const contador = Symbol();
export const meuObjeto = {
    [contador]: 1,
    incrementar(){
        meuObjeto[contador]++;
    }
};

Podemos importar nosso objeto e executar o método incrementar(). Porém, mesmo se criarmos uma outra variável contador com Symbol(), não estaremos sobrescrevendo o contador do módulo. Como todo Symbol é único, nossa variável contador de um módulo é diferente da variável contador do outro módulo.

import { meuObjeto } from 'meuArquivo';

meuObjeto.incrementar(); // podemos incrementar

const contador = Symbol();
meuObjeto[contador] = 55; // esta propriedade será outra

Assim evitamos colisões de nomes acidentalmente. Isso pode acontecer caso você utilize duas bibliotecas que armazenam algo no escopo global.

Outro uso interessante para isso é poder acrescentar algo a um objeto já existente em um código, como uma biblioteca. Se você simplesmente alterar algo em um objeto de uma biblioteca, corre o risco de sobrescrever algo importante deste objeto e fazer a biblioteca parar de funcionar corretamente. Mesmo que você escolha um nome que não esteja em uso, há o risco de lançarem uma atualização utilizando exatamente este nome de propriedade.

Há bibliotecas que criam variáveis com "@@" ou "__" como prefixo de nomes de propriedades que não devem ser usados. Com Symbols não há como haver esse perigo de algo ser acessado ou sobrescrito sem querer, pois ao criar seu Symbol ele será único.

Separar propriedades do objeto

Quando criamos propriedades em objetos usando Symbols podemos dizer que estas propriedades são “escondidas”. Onde isso poderia ser interessante?

Imagine que a gente possua os seguintes objetos com algumas informações:

const minhaLista = [
    {nome: 'maçã', total: 15, ativo: true},
    {nome: 'banana', total: 28, ativo: true}
];

Object.keys(minhaLista[0]); // ['nome', 'total', 'ativo']

Agora pense que a gente queira jogar os campos “nome” e “total” em uma tabela usando um código que gera uma tabela automaticamente. Cada coluna da tabela deve ser uma propriedade do objeto, então basta pegar um dos objetos e passar para Object.keys() que receberemos um Array com o nome das propriedades. Porém isso nos trará o campo ativo junto, que é um campo que não queremos.

Se criarmos esse campo ativo com Symbols ele não será retornado.

const ativo = Symbol();

const minhaLista = [
    {nome: 'maçã', total: 15, [ativo]: true},
    {nome: 'banana', total: 28, [ativo]: true}
];

Object.keys(minhaLista[0]); // ['nome', 'total']

Esse é um exemplo bem simples, mas que pode ser muito interessante caso você esteja trabalhando com metaprogramação. Para obter uma lista com os Symbols podemos usar a função Object.getOwnPropertySymbols().

Erros sobre Symbols

Propriedades Privadas? NÃO!

Há um certo engano sobre Symbols. Como eles são únicos, algumas pessoas pensam que podemos tentar usá-los para evitar que algo seja acessado.

Imagine que a gente crie um objeto dentro de um módulo. Esse objeto possui uma propriedade criada com um Symbol.

const contador = Symbol();
export const meuObjeto = {
    [contador]: 1
};

/*aqui conseguimos
acessar a propriedade
criada com o Symbol
*/
meuObjeto[contador];

Como o Symbol não foi exportado, não conseguiremos acessar a propriedade de fora do módulo (será mesmo?).

import { meuObjeto } from 'meuArquivo';

meuObjeto[?????]; // não tem como acessar

Mas lembre-se que podemos obter os Symbols de um objeto, então há sim como conseguirmos acessar as propriedades “ocultas”.

import { meuObjeto } from 'meuArquivo';

const meuSymbol = Object.getOwnPropertySymbols(meuObjeto)[0];
meuObjeto[meuSymbol]; // conseguimos pegar o Symbol e acessar a propriedade que armazena o contador

Devido ao fato de podermos recuperar Symbols, eles não garantem propriedades privadas. Há outros meios para se fazer isso.

É impossível haver conflito de Symbols? Nem sempre

Se você criar Symbols como mostrado nesse post (utilizando a função Symbol()), realmente você terá um Symbol único. Mas há outra forma de criá-los.

Symbol('a') === Symbol('a'); // false
Symbol.for('a') === Symbol.for('a'); // true

Symbol.for() é um outro meio de se criar Symbols, mas ele os cria em um tipo de registro global. Então se você criar algo com Symbol.for() e passar um mesmo valor pelo parâmetro tanto em um Service Worker e um iFrame, por exemplo, teremos exatamente o mesmo Symbol.

Então, já que a ideia dos Symbols é serem únicos, prefira evitar o uso de Symbol.for().

Conclusão

A função de Symbols é apenas uma: servir como um identificador único.

Então podemos usá-los muito bem com objetos onde usaríamos alguma String para criar certas propriedades (como os Enums), utilizá-los para inserir metadados ou acrescentar algo em um objeto já existente sem o perigo de sobrescrever algo que possa ser importante para seu funcionamento.

10 Truques do NPM – Você conhece todos?

Olá Web Developers!
Se você trabalha com JavaScript, provavelmente já teve que usar o NPM. Mas normalmente as pessoas usam essa ferramenta apenas para baixar bibliotecas ou frameworks.

Vamos ver alguns truques que podemos fazer com o NPM.

1 – Crie ferramentas executadas diretamente da linha de comando

Com o NPM nós podemos criar ferramentas executadas diretamente do terminal inteiramente com JavaScript.
Já tivemos um post aqui ensinando como fazer isso, que você pode conferir neste link.

2 – Atalhos para os comandos mais comuns

É sempre bom saber o nome curto de um comando, permitindo escrever menos:

Comando Atalho
install i
list ls
test t
--global -g
--save -S
--save-dev -D

3 – Abrir o site do projeto

O comando home permite abrir o site de alguma biblioteca ou framework em seu navegador.

O código abaixo irá abrir o site do jQuery em seu navegador:
$ npm home jquery.

4 – Abrir o repositório do projeto

O comando repo permite abrir o site do repositório de alguma biblioteca ou framework em seu navegador.

O código abaixo irá abrir o repositório do lodash em seu navegador:
$ npm repo lodash.

5 – Procurar por pacotes não declarados no package.json

É um grande problema quando alguém esquece de indicar uma dependência no package.json. Mas não tem problema, pois com o seguinte comando você poderá ver quais são os pacotes utilizados no seu projeto que não estão listados:
$ npm prune

6 – Inicie um pacote rapidamente

O comando $ npm init nos permite iniciar um pacote, criando o arquivo package.json de acordo com certas respostas que damos às perguntas feitas.

Mas você pode pular as perguntas, fazendo com que o arquivo package.json seja criado imediatamente. Basta adicionar -y ao comando:
$ npm init -y

7 – Analisar dependências desatualizadas

Também podemos verificar se há dependências desatualizadas em nosso projeto. Basta executar o comando
$ npm outdated

8 – Trave a versão de suas dependências

Se quiser travar a versão das dependências do seu projeto, simplemente execute o comando
$ npm shrinkwrap

Isso irá criar um arquivo npm-shrinkwrap.json. Ao instalar as dependências do projeto, as versões definidas neste arquivo que serão levadas em consideração.

9 – Instalação de produção

No package.json nós podemos salvar as dependências em dependencies e devDependencies. Esta última é a lista de dependências usadas apenas durante o desenvolvimento.

Caso você não vá desenvolver nada onde está instalando seu projeto, com o seguinte comando é possível instalar as dependências do projeto, ignorando as dependências de desenvolvimento:
$ npm install --production

10 – Lista de pacotes instalados

Podemos ver uma lista de pacotes instalados com o comando:
$ npm ls --depth 0

Esse comando é ainda mais útil quando queremos saber quais módulos globais possuímos instalado em nossa máquina:
$ npm ls -g --depth 0

Conclusão

O NPM é uma ferramenta que muitos usam mas poucos sabem usar totalmente o seu poder. Para mais informações, confira nosso Curso de NPM.

Criando módulos globais do NPM

Olá Web Developers!

Que tal criar seus próprios programas que rodem diretamente do terminal usando JavaScript?
Com o NPM é muito simples de se fazer isso!

O que é NPM?

Se você trabalha com JavaScript, provavelmente já teve (ou terá em algum momento) que usar o Node.js. O gerenciador de bibliotecas mais comum é o NPM, que também pode servir para outras coisas, como mostramos em nosso curso de NPM.

O que são módulos globais?

Além de códigos de terceiros, o NPM também nos permite instalar em nossa máquina programas que são executados a partir do terminal feitos inteiramente com JavaScript.

Esses programas, que podem ser executados pelo terminal de qualquer parte de seu computador, são chamados de módulos globais.
Os mais comuns são ferramentas como o Angular CLI, que nos ajudam a criar e gerenciar projetos Angular.

Imagine então poder criar um programa feito com JavaScript que pode ser facilmente instalado com o NPM e executado pelo terminal?
Você pode criar coisas como um servidor, um conversor de arquivos, um automatizador de tarefas, etc.

São várias possibilidades que vão depender da sua imaginação. Vamos criar um exemplo bem simples em 5 passos!

1 – Crie seu código principal

Vamos começar pelo código que será executado. Será bem simples: ele irá imprimir o texto “Olá Web Developers!”.

Para já deixarmos tudo organizado, vamos criar um diretório para nosso módulo. Eu vou chamar de meu-modulo.

Dentro deste diretório crie um outro diretório para guardar seus códigos. Isso não é obrigatório, mas nos ajuda a deixar tudo mais organizado.
Vamos criar um diretório chamado lib.

Dentro de lib vamos finalmente criar o arquivo que terá nosso código. Você pode dar qualquer nome. Vamos chamá-lo de index.js.
Terá o seguinte código:

function ola(nome){
    const texto = `Olá ${nome || 'web developer'}!`;
    console.log(texto);
}

exports.ola = ola;

Criamos um arquivo comum para Node.js. Temos uma função ola() que ao ser executada imprime “Olá web developer!” caso nenhum nome seja passado. Se tivermos algum nome, ele substituirá “web developer”.

No final exportamos esta função para poder utilizá-la em outro arquivo.

2 – Prepare o seu módulo

Vamos preparar nosso módulo agora.
No diretório raiz (meu-modulo), execute o comando $ npm init -y. Isso irá criar automaticamente o arquivo package.json para nós. Ele é muito importante para a sua biblioteca saber o que ela precisa instalar e os comandos disponíveis para serem executados.

Você pode editar o package.json para arrumar algumas coisas e adicionar mais informações. Ele ficará com o conteúdo parecido com o mostrado a seguir:

{
  "name": "meu-modulo",
  "version": "1.0.0",
  "description": "meu modulo global",
  "main": "./lib/index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "hanashiro",
  "license": "MIT"
}

3 – Crie os arquivos do módulo global

Agora chegou o momento de criarmos o arquivo que o terminal irá executar quando chamarmos nosso programa.

Primeiro crie um novo diretório chamado bin dentro de meu-modulo. Lembrando que isso não é obrigatório, estamos seguindo isso para tudo ficar mais organizado.

Dentro de bin crie o arquivo meu-modulo-legal.js com o seguinte conteúdo:

#!/usr/bin/env node

const ola = require('../lib/index.js').ola;
ola();

Nós simplesmente importamos a nossa função e a executamos. O que temos de diferente aqui é a primeira linha com o #!/usr/bin/env node.
Esta linha é fundamental para que o NPM gere um executável corretamente.

Lembre-se que este arquivo meu-modulo-legal.js que será executado.

4 – Configure a instalação global

Precisamos indicar qual o nome do comando ficará exposto para ser chamado no terminal e qual arquivo este comando deverá executar.

Para isso, adicione o seguinte código ao package.json:

{
    ...
    "bin": {
      "diga-ola": "./bin/meu-modulo-legal.js"
    },
    ..-
}

Isso permitirá que quando a gente abrir o terminal, possamos executar o comando diga-ola, e ele irá executar o arquivo meu-modulo-legal.js.

Lembre-se que as pessoas podem acabar instalando o seu módulo localmente. Se a sua ferramenta for algo que é melhor utilizada como um módulo global, você pode adicionar a seguinte linha ao package.json:

{
    ...
    "preferGlobal": true,
    ..-
}

Com esta linha o usuário ainda poderá instalar o seu módulo localmente, mas ele receberá um aviso indicando que é melhor instalar globalmente.

5 – Instale seu módulo globalmente para testá-lo

Agora só falta testarmos. Acalme-se, pois você não precisa publicar o seu módulo em algum repositório como o NPM ou Github para poder fazer o teste.

Para instalar globalmente o seu módulo, basta executar o comando npm install -g junto com o caminho do diretório que criamos (meu-modulo).

Ex: $ npm install -g C:\Users\seu-usuario\Desktop\meu-modulo

Ao instalar você já estará pronto para executar diretamente de seu terminal (de qualquer parte de seu computador) o comando $ diga-ola.

Extra: Parâmetros

Algo muito comum em programas executados pela linha de comando é permitir que a gente passe alguns parâmetros para configurar a função que será executada.

Lembra que nossa função permitia receber um nome? Pois vamos permitir que o usuário escreva o nome que ele quiser pela linha de comando.

Mude o arquivo meu-modulo-legal.js para ficar da seguinte maneira:

#!/usr/bin/env node

const args = process.argv.splice(process.execArgv.length + 2),
    nome = args[0];

const ola = require('../lib/index.js').ola;
ola(nome);

Primeiro pegamos os parâmetros passados no comando, e então pegamos o primeiro parâmetro e jogamos em uma constante chamada nome, passando-a para a nossa função ola().

Agora instale o seu módulo novamente para que o módulo instalado globalmente seja atualizado.

Se executar $ diga-ola você terá a resposta “Olá web developer!”, mas se executar $ diga-ola TreinaWeb terá “Olá TreinaWeb!”.

Conclusão

Agora você já sabe como criar seus próprios módulos globais, permitindo criar ferramentas com JavaScript e executá-las diretamente do terminal.

Agora basta você publicar no repositório do NPM para que outras pessoas possam usar.

Criou alguma ferramenta? Nos conte aí nos comentários!

TW Entrevista 12: Loiane Groner

Hoje trazemos para vocês uma entrevista com a Loiane Groner, que já escreveu diversos livros publicados internacionalmente e possui os títulos GDE (Google Developer Expert) e Microsoft MVP (Most Valuable Professional).

Se você ainda não viu, o Diego Eis foi o último entrevistado por nós.

Fale um pouco sobre você (de onde é, onde mora, o que faz, onde trabalha atualmente, etc)

Me chamo Loiane, trabalho há 10+ anos na área de TI como desenvolvedora, formada em Ciência da Computação, natural do Espírito Santo, porém nos últimos 9 anos morei em São Paulo (2 anos em Campinas e 7 na capital). Trabalho atualmente no Citibank como desenvolvedora e analista de negócios, e recentemente me mudei para os Estados Unidos.

Tenho um canal no Youtube onde publico tutoriais e cursos sobre desenvolvimento, já publiquei alguns livros em inglês pela Packt (editora Novatec traduziu o último livro lançado para o português) e já tive a oportunidade de palestrar em eventos no Brasil e EUA.

Quando e como você começou a se interessar pela área?

Essa parte é engraçada porque tudo foi uma decisão de qual curso fazer vestibular. Quando era adolescente sempre quis ser advogada/juíza, e perto do vestibular decidi fazer Ciência da Computação por gostar mais de responder perguntas e estudar a parte de exatas pro vestibular.

A decisão pelo curso de computação foi simplesmente por sempre ter sido curiosa por computadores (meu primeiro computador vivia no conserto por tentar comandos na linha de terminal, vivia estragando o sistema operacional por conta disso).

Naquela época pouco se falava sobre cursos de exatas e as informações não eram tão fáceis assim como hoje, onde temos quase tudo disponível na internet. Entrei na faculdade sem saber o que era algoritmos, custei a entender lógica de programação no primeiro semestre, mas depois me apaixonei e hoje não me arrependo da decisão.

Como foi seu primeiro trabalho na área?

Arrumei o primeiro trabalho/estágio ainda na faculdade, quando estava no segundo ano (quarto semestre). A faculdade tinha (até hoje tem) parceria com empresas e uma delas precisava de dois estagiários. Me inscrevi junto com um amigo e a coordenação do curso nos ajudou a conseguir as vagas.

Sabia apenas o básico do básico de Java (controles de fluxo e o básico de Orientação à Objetos). No estágio deram um treinamento pra gente de XML, SQL, controle de versão, web services e outros conceitos básicos.

Depois foram passando tarefas de desenvolvimento básicas e à medida que ia aprendendo, iam passando tarefas mais complexas. Trabalhei 2 anos nessa empresa. Me sinto muito sortuda pois tive dois mentores excelentes, que foram pacientes e me ensinaram muito. Trabalhei com Java backend, um projeto Java desktop (Swing), projetos Java web (com JSON e Ajax, que na época era super novidade, onde foi meu primeiro contanto com web também), relatórios, SQL e até um projeto .NET.

Como é a experiência como escritora? Ainda mais de livros que são distribuídos internacionalmente. Tem algum conselho para quem quer começar a escrever?

Comecei em 2009, quando publiquei meu primeiro post no blog loiane.com. Criei o blog para mim mesma, uma espécie de documentação e notas para que eu pudesse usar depois como referência e documentar o que estava escrevendo.

Depois que comecei a trabalhar numa multinacional e comecei a usar inglês no dia a dia, senti a necessidade de praticar mais a parte escrita, e como forma de praticar, criei um blog em inglês também. Escrevia os posts (tutoriais) em inglês e depois reescrevia o mesmo em português.

Depois de alguns anos, o blog começou a ganhar mais visibilidade e a editora entrou em contato com o convite para escrever um livro. Nunca imaginei que fosse ter tal oportunidade. A editora gostou da didática e depois foi convidando para escrever outros títulos também. Já convidaram até por conta de um repositório de exemplos no github.

Não tenho palavras para descrever o sentimento de ver uma pessoa lendo um livro seu e ver que aprendeu algo lendo o que você escreveu. É muito gratificante ver pessoas de diferentes partes do mundo consumindo seu conteúdo. Tenho guardado algumas teses de mestrado de universidades européias e canadenses que usaram algum livro meu como referência – isso não tem preço pra mim.

Os livros também foram incentivo para criar o canal no youtube. Como foram escritos em inglês, começaram a me puxar a orelha por não ter criado conteúdo em português, e aí decidi começar a fazer vídeos dos assuntos em português. É legal que são duas experiências bem diferentes: criar conteúdo escrito e em vídeo.

Algumas dicas:

  • Comece escrevendo para você mesmo. Hoje em dia existem diversas ferramentas que você não precisa se preocupar com domínio, hospedagem, etc. Publique algum tutorial ou algo que seja útil para você e depois compartilhe nas redes sociais (se te ajudou, pode ser que ajude outras pessoas também). Com o tempo você toma gosto e não consegue parar! rs
  • Algumas editoras pedem para ver conteúdo escrito já publicado (blog, etc) para ter uma noção do estilo de escrita, então a primeira dica é bem valiosa! rs
  • Você não precisa ser “O” expert no assunto para escrever. A motivação é sempre por compartilhar conhecimento. Até porque a gente aprende muito sobre o assunto enquanto escreve.
  • O público gosta muito de exemplos práticos. Mas é sempre bom colocar um pouco de teoria também, pois teoria é sempre a base e vai te ajudar a dar mais fundamento também.

Você é GDE (Google Developer Expert) e Microsoft MVP (Most Valuable Professional). Como conseguir esses títulos, quais as responsabilidades para mantê-los e que dicas dá para quem quer consegui-los?

Esses títulos são títulos de reconhecimento dados pelas respectivas empresas/comunidades a membros das comunidades que compartilham conteúdo sobre produtos dessas empresas.
Geralmente são pessoas ativas na comunidade que compartilham posts de blog, cursos, publicam livros, apresentam palestras em eventos, contribuem em projetos open-source, etc. A responsabilidade é continuar fazendo o que já vinha fazendo antes de receber o título, ou seja, compartilhar conhecimento porque gosta de fazê-lo!

Não tem uma receita de bolo para conseguir o título. Geralmente a pessoa já é um GDE ou MVP mesmo sem o título. Acaba vindo naturalmente. Esse post é bem legal sobre o assunto e pode ser aplicado a outros títulos também:

https://medium.com/@frosty/preparing-to-become-a-gde-752b551c88df.

Participar de comunidades é muito gratificante. É uma forma de aprender junto. Cada um compartilha o pouco que sabe e você aprende com outras pessoas que também estão compartilhando o que aprenderam. Além disso, participar de comunidades é uma ótima maneira de aumentar o networking. Já conheci várias pessoas em eventos, tive oportunidade de conhecer pessoalmente pessoas que apenas conversava pela internet e fiz amizades!

Quando estuda algo novo, qual a sua maior dificuldade e o que faz para contornar?

Sempre tento consumir diferentes tipos de conteúdo. Se for um framework novo por exemplo, primeiro acesso a documentação, e sigo os tutoriais. Gosto muito de ler livros também, pois fornecem uma base teórica muito boa.

Pra mim é importante saber usar uma ferramenta/framework, mas é importante saber como funciona também – e a base teórica vai me fornecer isso – saber como funciona ajuda muito nos casos complexos, e vai te ajudar a se diferenciar de outros profissionais também.

E cursos online: sempre tem algo ou um ponto de vista diferente que um instrutor pode te ensinar. Dificilmente consumo um curso ou leio um livro e saio sem aprender nada – mesmo achando que já saiba a tecnologia. Sou assinante de 2 portais de cursos e na empresa que trabalho também tem um grande portal de cursos liberado para os funcionários. E se for uma dúvida pontual, posts de blogs ajudam muito, principalmente com exemplos práticos também!

Resumo: estudar com diferentes formas de conteúdo sempre ajuda. Mas é importante saber o que funciona para você, pois cada um tem uma forma que aprender mais fácil.

Se pudesse falar com você mesma no começo de sua carreira, o que gostaria de falar? Teria algum conselho? Algum medo que gostaria de ter encarado ou alguma situação que poderia ter evitado?

Todos nós temos medo de algo, medo de tentar por achar não ser bom o suficiente ou achar que não tem mais idade pra isso (ou é muito novo). Não deixe de tentar por medo ou insegurança. O “não” você já tem.

E tenha paciência. Muita paciência. Algumas coisas na vida demoram, mas não perca o foco ou determinação. E as coisas acontecem para diferentes pessoas em diferentes momentos. Você vai ouvir muitos “nãos”, mas não deixe que isso te impeça de fazer algo ou de tentar novamente.

O que você considera que caracteriza um desenvolvedor raiz e um desenvolvedor Nutella?

Já vi alguns memes sobre o assunto. Mas acredito que todos nós nos dias de hoje somos uma versão híbrida. Hoje temos muitas ferramentas ao nosso dispor para solucionar problemas de forma mais fácil e rápida. Independente de título (programador, desenvolvedor, software engineer, etc), nosso trabalho é resolver problemas usando tecnologia, de forma a entregar a melhor solução para o cliente.

Como já disse anteriormente, aprenda a base, a teoria. Sim, é chato, é demorado, ir direto pra prática é muito mais legal. Mas depois tudo se torna mais fácil. Seja primeiro um dev raiz, para que você possa se tornar um dev nutella mais tranquilo e mais produtivo!

Como você explica a sua profissão para as pessoas que não são de TI?

Essa parte é sempre complicada. Geralmente falo que desenvolvo sistemas, que é basicamente falar para o computador o que precisa ser feito, uma sequência de passos, como uma receita de bolo. E existe uma forma especial de passar essa receita para o computador, que é através de uma língua que nós (humanos) podemos aprender que o computador também entende.

Escrevendo essa receita nessa língua, o computador entende o que precisa fazer e consegue executar os passos muito mais rápido que nós.

Fique Ligado!

Para seguir a Loiane Groner:

TW Entrevista 11: Diego Eis

Olá, Web Developers!

Hoje trazemos para vocês uma entrevista com o Diego Eis, fundador do Tableless, um dos maiores sites sobre desenvolvimento web do Brasil.

Se você ainda não viu, o Jaydson Gomes foi o último entrevistado por nós.

Fale um pouco sobre você (de onde é, onde mora, o que faz, onde trabalha atualmente, etc)

Sou de São Paulo, tenho 34 anos e faz um tempão que trabalho com Internet e coisas relacionadas. Atualmente trabalho na Easynvest como Product Manager, mudando o jeito com que as pessoas lidam com investimentos e dinheiro.

Quando e como você começou a se interessar pela área?

Eu sempre me interessei por internet e nunca fiz outra coisa. Meu primeiro computador veio de uma escolha difícil: Ir para a Disney na formatura de 8 série ou ter um computador. Naquela época o dólar era 1 pra 1 e o valor da viagem era o mesmo de um computador. Minha mãe economizou o ano inteiro para eu ter a viagem, mas acabei querendo o computador. O recibo está guardado em algum lugar. Custou uns R$1000… Dinheirão na época. De lá para cá não fiz mais nada fora do mundo digital. E ainda cheguei tarde… Quase nem mexi no Windows 3.1, indo quase que direto pro Windows 95.

Como eu, meus amigos também estavam iniciando nesse mundo de ter computador e internet… No início queria o computador só para jogar… Me lembro até hoje eu tentando fazer rodar os vários disquetes do Golden Axe! Junto com os meus amigos, nós começamos aprender a mexer com HTML, depois que o CSS foi publicado, pulamos pro CSS, JS e assim por diante… O resto é história. 😉

Como foi seu primeiro trabalho na área?

Eu ganhei meu computador em 98 (quando me formei na oitava série). Fiquei 3 anos só brincando e aprendendo HTML e tudo mais. Quando me formei em 2001, arranjei um emprego de Assistente de Web Designer numa pequena agencia de publicidade. Fiquei pouco tempo lá, depois fui para uma empresa recém criada por amigos, chamada Atípico. Lá eu fiquei uns 5 anos. Depois abri minha própria empresa, chamada Visie (depois de 6 anos fui pra Locaweb, e depois de 5 anos na Locaweb fui para Easynvest).

Em 2003 eu abri o Tableless. Se eu me lembro bem o domínio era .kit.net (se alguém lembrar, vai entregar a idade), depois eu migrei para .cjb.net.. E pouco tempo depois, ganhei desse meu amigo, dono da Atípico, o domínio .com.br. Como naquela época (hoje ainda?) pra ter .com.br era necessário um CNPJ, como ele tinha uma empresa, ele me deu o domínio de presente. Presente nerd, né?! Faz tempo que não tenho contato dele… Se ele morrer, lascou… nem sei como faço pra ser dono do domínio. O.o

Voltando ao primeiro emprego… A maioria do trampo era implementação de site mesmo. Onmouseover direto no código HTML. Código JavaScript pra funcionar no IE e outro código pra funcionar no Netscape. Testes de layout em todos os IEs possíveis… Validação de HTML… e todas essas coisas legais que fazíamos antes do mercado front-end se tornar o que se tornou hoje. Naquele tempo era só criar um arquivo .html e começar o projeto. A grande dúvida era como iríamos chamar a pasta onde ia ficar as imagens (img, images, i…). Hoje você não começa nada sem ter que instalar um milhão de coisas na máquina. Mas desse mimimi todo mundo já tá cansado. 😉

Claro que sempre há a preocupação em entregar um produto de qualidade para o cliente. Mas você acha que na Easynvest, por mexer diretamente com o dinheiro das pessoas, acaba tendo mais pressão?

Com certeza. Não é simples você mexer com o dinheiro das pessoas, porque na verdade você não mexe com o dinheiro delas, você mexe com o futuro e os objetivos que ela quer alcançar com aquele dinheiro. Essa pressão existe em qualquer tipo de produto digital. E existe outros pontos que os Product Owners e Product managers precisam pensar, como ética, transparência, etc… São pontos que quase nunca falamos, mas que há momentos em que esses valores precisam ser contados ao pensar numa feature, mostrar ou não uma determinada informação, etc.

O Tableless é um dos sites mais importantes da comunidade brasileira de desenvolvimento web. Qual a sensação de ter tamanha responsabilidade e compromisso sobre algo tão importante para as pessoas?

Eu acho incrível ter criado um site onde os devs e outras pessoas me param nos eventos e outros lugares pra dizer que o site as ajudou na formação da carreira ou em algum problema especifico. Mas não é uma tarefa muito fácil. O site ocupa bastante tempo e é difícil encontrar pessoas realmente dispostas a ajudar. Mesmo assim, foi um marco pra o site quando eu abri para que outros autores pudessem escrever. Isso não ajuda o site a ter mais conteúdo, mas também ajuda a esses autores a expressarem sua opinião, a aprenderem a compartilhar conhecimento, a exporem seu trabalho etc… Foi o site que me trouxe até onde eu estou hoje e me sinto muito agradecido por conta disso.

Com a sua experiência com o tableless, palestras, trabalhos, treinamento de equipes, etc., o que você considera que mais falta em um profissional hoje em dia ? (como habilidades, atitudes e preparação para as mudanças)

Falta parar de pensar em código 100% do tempo. Eu bato nessa tecla o tempo inteiro. Seu trabalho está mais ligado a falar com as pessoas para conseguir resolver melhor os problemas do que ficar focado 100% do código. Quando um programador precisa fazer uma decisão importante de carreira, muitos acabam sucumbindo lá na frente, porque não “treinaram” antes esse relacionamento além código. Outro ponto é pensar no futuro. Quando eu escrevi um artigo falando que a profissão front-end como conhecemos hoje vai morrer, um monte de gente me criticou, mas com certeza eles não fizeram uma análise fria da sua profissão hoje e como ela é repetitiva, dispensável, sem propósito. Parece ser palavras fortes, mas você não muda sua vida nem a vida das pessoas fazendo crud entre API e interface. Acho que o profissional deve pensar em sua profissão de forma mais ampla, onde ele entende bem do negócio, mas também dos clientes, levando em consideração como sua relação com as outras pessas afeta a missão da empresa e seus objetivos pessoais.

Quando estuda algo novo, qual a sua maior dificuldade e o que faz para contornar?

Minha maior dificuldade é não poder contar com pessoas do lado para peguntar e tirar dúvida. Acho que é importante ter pessoas legais do seu lado para que você possa tirar dúvidas sempre que for necessário, sem medo de julgamentos ou etc. Hoje é quase que impossível você não conseguir encontrar respostas para qualquer tipo de dúvida técnica. Mesmo assim, sempre tem aquelas dúvidas onde alguém com mais experiência faz falta. Então, a dupla pesquisa + mentor é sempre a melhor saída.

Para quebrar o gelo

O que você considera que caracteriza um desenvolvedor raiz e um desenvolvedor Nutella?

Dev raiz escrevia código onde dava. Dev Nutella só escreve em editor que tem IDE escrito no nome. Dev raiz ficava horas procurando um cliente de FTP decente. Dev Nutella só sobe pra produção se tiver script de Build e tiver 3 ambientes de homologação. Dev raiz usa qualquer browser que tiver. Dev Nutella acha que abafa quando fala mal do IE. Dev raiz começa o projeto criando uma pasta com o index.html e entende que ele vai se tornar algo complexo lá na frente. Dev Nutella nem senta na cadeira se não encontrar a palavra NPM no ReadeMe do projeto.

Se estivéssemos em uma Matrix e você tivesse total controle dela, o que você faria?

Transformaria a Matrix inteira em Open Source, botava no GIT e já era.

Já usou seu conhecimento para resolver algo que tinha preguiça de fazer ou para trollar alguém? Se sim, o que?

Na época que o Bate-papo da UOL nasceu, eles não faziam validação do campo que você escrevia. Aí o que dava pra fazer: você manda um código HTML do tipo: <font style="font-family: webdings;">. Então, o texto ficava cheio de ícones e simbolos e etc… pra todo mundo na sala de bate papo.

Webdings

Aí você mandava um </font> no chat privado pra você mesmo. Todo mundo ficava sem entender nada, e você via normalmente os textos com as fonts. Era engraçado, mas durava só uns 30 segundos, porque ninguém conseguia mais entender e acabava saindo da sala. Hehehe.

Já “infectei” um cara mais velho na escola com um Trojan. Depois que ele instalou, eu ligava e desligava o monitor dele, abria o leitor de CD, abria programas, e essas coisas… mas tive que tirar porque ele ameaçou me bater no dia seguinte. Fazia scripts do autoexec.bat na escola para colocar mensagens quando o Windows estava ligando.

Script macro no word na biblioteca da escola para quando a galera abrir o word, ele fechar sozinho.

Fique Ligado!

Para seguir o Diego Eis:

TW Entrevista 10: Jaydson Gomes

Olá, Web Developers!

Hoje trazemos para vocês uma entrevista com o Jaydson Gomes, primo do Felipe Moura com quem fundou a Nasc e BrazilJS.

Se você ainda não viu, o Reinaldo Ferraz foi o último entrevistado por nós.

Fale um pouco sobre você (de onde é, onde mora, o que faz, onde trabalha atualmente, etc)

Meu nome é Jaydson Gomes e sou de Porto Alegre, cidade onde ainda vivo atualmente. Desde 2015 (https://jaydson.com/novos-rumos-2015/) me dedico 100% ao meu próprio negócio, a Nasc, empresa responsável, entre outras coisas, pela BrazilJS.

Quando e como você começou a se interessar pela área?

O primeiro video-game que tive foi um Atari, na época que o MasterSystem era o que existia de mais legal. Quando o Nintendo estava bombando, eu tive uma MegaDrive.

De certa forma entrei tarde na área. Foi só aos 16/17 anos que fui ter o meu primeiro computador (um belo K62 ❤️ com incríveis 16MB de memória RAM, puro luxo).

Meu primeiro contato com a área mesmo foi quando consegui meu primeiro emprego na empresa de um amigo. O job era montar e consertar computadores. Foi aí que aprendi toda a base de como as coisas funcionavam e logo me dei conta que eu não gostava muito de hardware. Então comecei lentamente a migrar para o desenvolvimento de software.

Um ponto importante é que esse processo foi lento, devido ao que mencionei acima. Eu nunca achei que seria capaz de entender como um computador funcionava e muito menos fazer software, parecia algo de outro mundo pra mim. Mas cá estou. 😀

Como foi seu primeiro trabalho na área?

Nessa empresa do meu amigo aprendi muito. Aprendi como não fazer muita coisa e também aprendi a base da computação.

Serei eternamente grato pela oportunidade que tive na época, foi um aprendizado para a vida. No primeiro emprego com carteira assinada eu fazia muita coisa na área de TI e tinha tempo para estudar e aplicar o que aprendi desenvolvendo pequenas ferramentas, isso também me ajudou bastante.

Somando essas duas experiências, consigo ver nitidamente o quanto amadureci em pouco tempo e o quanto isso contribuiu para a minha formação. Fazer experimentos é algo que ajuda muito e mantenho esse hábito até hoje.

Nesses anos de experiência, tem algo que você deixou de fazer por algum receio e que hoje enxerga que poderia ter sido uma grande oportunidade?

Uma das poucas coisas que deixei de fazer durante o caminho da minha carreira foi deixar algumas coisas que gostava muito de fazer de lado, justamente pelo receio de não conseguir me sair bem na área, acabei focando 100% em tecnologia. Não recomendo.

É preciso tempo para entender. Nossa sociedade é estruturada de maneira que apenas um caminho profissional deve ser seguido e assim somos doutrinados e condicionados. O que tu quer ser quando crescer? Hoje tento me dedicar a tudo que gosto de fazer e faço tudo com paixão.

A vida é muito curta para fazer uma coisa só, e sim, é possível exercer mais de uma profissão, ter hobbys, se divertir, etc. Se tu não consegue equilibrar isso é por falta de gerenciamento de tempo.

“Não tenho tempo para ver séries”, “Não tenho tempo para praticar um esporte”, “Não tenho tempo para aprender um instrumento”, “Não tenho tempo para tomar aquela cerveja com amigos/amigas” Tudo bullshit.

Como é seu trabalho hoje e o que você considera de maior aprendizado adquirido na Nasc e BrazilJS?

Minha principal função na Nasc é conectar empresas e comunidade. Na BrazilJS, é levar conteúdo inédito e relevante para a comunidade. Comunidade é a palavra chave, mesmo.

Nosso business só existe por conta do nosso envolvimento com a comunidade desde o início de nossas carreiras.

O aprendizado é constante e diário. Posso elencar dois grandes. Um deles é comercial. Vender coisas nunca foi minha ambição, mas hoje essa é uma das minhas atividades principais, e esse foi um grande aprendizado. Manter a BrazilJS não é uma tarefa fácil, mas posso dizer que estamos indo bem.

O outro aprendizado que julgo como um dos mais importantes é sobre a própria comunidade. Mesmo fazendo parte e tendo interesse desde o início de minha carreira, somente há uns 4 ou 5 anos é que comecei a notar que existia algo mais forte.

Está em nossas mãos o poder de mudar a realidade e a sociedade. Comunidades de tecnologia são como um espelho da sociedade, se conseguimos muda-las, mudamos um pouco do todo.

Eu só aprendi sobre diversidade e sobre sua importância por conta do trabalho que fazemos.

O que você sente de maior prazer em trabalhar com tecnologia?

Não é em toda área que se tem o poder de transformar uma ideia em realidade em tão pouco tempo. Pra mim, esse é um dos maiores prazeres de se trabalhar com tecnologia.

Outro ponto importante é estar conectado com o futuro. Trabalhar com tecnologia me permite viajar no tempo, estar sempre pensando no que ainda não existe e no que é possível ou impossível, esse é um prazer imenso.

Durante sua carreira, quais pontos você enxerga que amadureceu e que ainda precisa amadurecer profissionalmente?

O maior amadurecimento, no meu ponto de vista, é saber que nunca se é maduro o suficiente, por mais paradoxal que isso pareça. Todo ano eu tento fazer tudo diferente, não somente por querer fazer diferente, mas por saber que pode e deve ser melhor.

Quer deixar um recado para os nossos colegas ou para quem está começando?

Mais caos e menos burocracia. Acredito que somente processos caóticos contribuem para a evolução e inovação constante. Claro, o equilibrio é sempre a melhor dose, mas a transformação verdadeira não virá de coisas estáticas e escritas em pedra.

Foquem na carreira, mas não esqueçam do que gostam de fazer e se possível, foquem também em outras áreas de interesse. Diversidade é importante e ponto final. É importante em eventos, em empresas, onde for.

Tecnologia é massa, mas é só o meio do caminho, às vezes nem isso. Não seja idiota, ninguém gosta de gente idiota.

Fique Ligado!

Para seguir o Jaydson Gomes:

Gerando sons com a Web Audio API do JavaScript

Olá, Web Developers!

Sabiam que podemos gerar sons com JavaScript? Isso graças à Web Audio API, que nos fornece poderosas funcionalidades para se trabalhar com áudio. Podemos fazer coisas como adicionar efeitos a um arquivo de áudio ou criar músicas a partir do JavaScript.

Começando com um beep

Para começar, vamos gerar um simples beep.

let context = new AudioContext(),
   oscillator = context.createOscillator();

oscillator.type = 'sine';
oscillator.connect(context.destination);
oscillator.start();

Primeiro nós instanciamos o AudioContext, que é o principal objeto para podermos gerar um som. A partir dele nós criamos um oscilador, que é responsável por emitir um sinal contínuo, que será o nosso som.

Precisamos indicar o tipo de onde que nosso oscilador irá gerar. Indicamos que queremos uma onda senoidal (sine).

Depois conectamos o nosso oscilador ao context.destination, que representa o destino final do áudio. Se você está no computador, provavelmente isso indica as suas caixas de som.
Por fim, executamos a função start() para iniciar o som.

Para parar o som, basta executar oscillator.stop().

Ao parar o som você pode notar um pequeno clique. Isso acontece basicamente quando paramos o som em um lugar qualquer que não seja o ponto zero da onda, como mostrado na imagem abaixo.

Onda Senoidal

Encerrando o som

Um modo de acabar com esse som de clique ao pararmos o som (e que pode ser bem desconfortável) é alterar a nossa onda, como se estivéssemos diminuindo ela.

Para isso, usamos a função exponentialRampToValueAtTime(), que vai alterando de forma exponencial o valor do nosso som.

Vamos então fazer uma pequena alteração em nosso código:

let context = new AudioContext(),
   oscillator = context.createOscillator(),
   contextGain = context.createGain();

oscillator.connect(contextGain);
contextGain.connect(context.destination);
oscillator.start(0);

Agora criamos um ganho, um objeto que nos permitirá trabalhar com a função exponentialRampToValueAtTime(). Ligamos ele ao oscilador e depois ligamos ao destino de saída do som.

Para parar o som, ao invés de simplesmente executarmos a função stop(), vamos executar o seguinte código:

contextGain.gain.exponentialRampToValueAtTime(
    0.00001, context.currentTime + 0.04
    )

O que fizemos aqui foi alterar o valor do ganho, que basicamente seria como se estivéssemos abaixando o volume aos poucos.

Veja que o primeiro parâmetro que passamos é bem próximo de zero. Isso porque essa função não pode receber um valor zerado ou negativo.

O segundo parâmetro é o tempo em que queremos que a alteração seja feita.

Abaixo você pode conferir que não importa mais em que momento pare o som, ele não terá mais aquele clique.

Efeitos ao parar o som

Quando paramos o som, passamos um tempo bem pequeno para que a alteração no ganho fosse realizada (0.4).

Dependendo do tempo que passarmos, podemos ter efeitos interessantes.

Isso acaba nos dando sensações diferentes. E essa sensação fica ainda mais evidente quando iniciamos e já encerramos o som logo em seguida.

Sons bens mais agradáveis do que aquele som contínuo, não é mesmo?

Diferentes ondas, diferentes osciladores

O que criamos até agora foi um som a partir de um oscilador usando uma onda senoidal. Há outros tipos de ondas, como podemos ver na seguinte imagem:

Para alterar o tipo de onda, basta passarmos um dos seguintes códigos:

oscillator.type = 'sine';
oscillator.type = 'square';
oscillator.type = 'triangle';
oscillator.type = 'sawtooth';

Tocando notas

Até o momento nós só tocamos um simples beep. Mas se quisermos tocar algo, precisamos tocar notas musicais diferentes.

Cada nota é um som emitido a uma determinada frequência. Abaixo temos uma tabela que indica cada nota e sua respectiva frequência:

Para alterar a frequência, basta indicar um valor em oscillator.frequency.value. Para tocar um “Dó” (C4):

const C4 = 261.6,
    D4 = 293.7,
  E4 = 329.6,
  F4 = 349.2,
  G4 = 392.0,
  A4 = 440.0,
  B4 = 493.9;

oscillator.frequency.value = C4;

No exemplo, passei a frequência para uma constante apenas para o nosso código ficar mais legível. É bem mais simples e legível deixar o nome das notas do que deixar o número da frequência.

Evoluindo

Caso queira se aprofundar, procure saber mais sobre bibliotecas e frameworks como o Tone.js, uma ferramenta completa com várias funcionalidades para se trabalhar com música interativa no navegador.

Criando APIs com o Strapi.io

O uso de APIs vem em constante crescimento nos últimos anos, e isso se deve a grande quantidade de aplicações clientes que precisam consumir dados de um mesmo banco de dados. Essas aplicações clientes vão desde aplicativos desktop até aplicações mobile, fazendo com que mais e mais serviços sejam criados diariamente.

Devido a esse cresimento, cada dia mais tecnologias surgem para auxiliar os desenvolvedores a criar estas APIs. Uma destas tecnologias é o Strapi.io e é sobre ela que vamos falar neste artigo.

O que é o Strapi.io?

O Strap.io é uma ferramenta que visa facilitar a criação de serviços REST através de um painel administrativo totalmente funcional. Desenvolvido em node.js, o Strap.io é open-source e bem simples de se utilizar. Toda a sua documentação pode ser encontrada em sua página principal.

Instalando o Strapi.io

Para instalar o Strapi.io, precisamos apenas do node em nosso computador. Para isso, podemos baixar seu instalador na página oficial da ferramenta. O processo de instalação é bem simples e intuitivo, o famoso “next, next, finish”.

Após instalar o node, estamos aptos a instalar o strapi.io. Para isso, no Terminal (ou CMD, se você usa o Windows), digitamos o seguinte comando: npm install strapi@alpha -g. O comando vai baixar e instalar o strapi em seu SO e o retorno deve ser o seguinte:

Criando o projeto

Após instalar o Strapi.io, chegou a hora de criar nosso projeto. Para isso, abrimos o terminal e digitamos o seguinte comando: strapi new my-project. Este comando irá criar um projeto novo do strapi com o nome “my-project”.

Durante o processo de criação do projeto, precisamos selecionar qual banco de dados vamos utilizar (MySQL, Postgree ou MongoDB), o nome do BD, o Host, Porta de acesso para o BD, nome de usuário e senha do banco de dados selecionado, como mostra a imagem abaixo:

Feito isso, navegamos até seu diretório e executamos seu servidor com os comandos abaixo:

cd my-project
strapi start

Feito isso, seremos redirecionados para a página de registro de usuários do strapi, uma área administrativa com a seguinte URL: http://localhost:1337/admin/plugins/users-permissions/auth/register. Nela inserimos os dados de cadastro e clicamos no botão “Pronto para começar”, conforme visto na imagem abaixo:

Criando nossa API

Após configurar o usuário de acesso à área Administrativa, somos redirecionados para o dashboard do Strapi, onde temos acesso a todos os seus recursos. Agora, o primeiro passo é criar as tabelas do banco de dados que irão armazenar os dados da nossa aplicação. Para isso, clicamos no link “Construtor de conteúdo”. É lá que criamos as tabelas que vamos utilizar em nosso serviço REST:

Na próxima tela, selecionamos a opção “Adicionar Tipo de Conteúdo” e determinamos as configurações da tabela a ser criada:

Feito isso, clicamos no botão “Adicionar Novo Campo” e determinamos os campos que nossa tabela irá possuir, assim como seu tipo. O Strapi provê diversos tipos de campos, conforme visto abaixo:

Ao selecionar o tipo do campo, determinamos o nome do campo e clicamos em “continuar”. Vale lembrar que cada campo tem suas configurações particulares, então a tela abaixo pode variar conforme o tipo de dados que você está criando:

Após determinar todos os campos da tabela, clicamos no botão “Salvar” e a tabela será criada no banco de dados que configuramos anteriormente.

Com isso, estamos quase prontos para consumir nossa API. O último passo é configurar o nível de acesso e quem é permitido a consumir os recursos da API. Para isso, vamos até o menu “Papeis e Permissões” e selecionamos a permissão “Public”.

Observação: Esta permissão é responsável por configurar o acesso público da nossa API, ou seja, qualquer um que possuir a rota da nossa API, poderá consumir nosso serviço REST, então é muito importante que você reveja a necessidade do seu projeto antes de liberar a sua API para o público. Como estamos em um ambiente de desenvolvimento, não vamos nos atentar a isso.

Agora, na sessão “Permissões”, determinamos os métodos que os usuários que possuírem a permissão pública poderão efetuar em nossa tabela de clientes:

Vamos deixar todas as opções como ativas. E é isso, finalmente temos nosso serviço de manipulação de clientes ativo e funcionando, chegou a hora de testar!

Testando nosso serviço

Agora podemos testar nossa API de clientes. Para isso, é só fazer uma requisição para a rota http://localhost:1337/clientes. Neste teste, vou utilizar o Postman, uma ferramenta para envio de requisições HTTP.

Sendo assim, enviando uma requisição POST para a rota mencionada acima e passando a idade e o nome no corpo da requisição, temos um novo cliente cadastrado, como podemos ver nas imagens abaixo:

Podemos também fazer todos os outros métodos básicos de um CRUD, como editar e remover um cliente do nosso banco de dados utilizando, respectivamente, os métodos PUT e DELETE:

Concluindo

Então é isso. Neste artigo vimos uma ótima ferramenta para criação de APIs de forma fácil, rápida e intuitiva. Vale ressaltar que esta ferramenta possui todos os métodos para controle de acesso e permissão e que tudo isso pode ser visto na sua documentação oficial

3 linguagens de programação que continuam em alta

Você provavelmente já se pegou pensando em qual linguagem você deve focar seus estudos. Seja se você está iniciando ou não, é sempre bom ver o que o mercado está pedindo. Claro que não devemos avaliar apenas o mercado, mas também suas preferências. A ideia é fazer uma junção dessas duas coisas: escolher uma linguagem em alta, mas que dentre elas, você escolha a que mais se identificar.

No começo deste ano fizemos um post sobre as linguagens promissoras para se estudar neste ano. Mas como na área de TI tudo muda muito rápido, será que agora, perto do final do ano, essas linguagens ainda estão no topo? Vamos focar hoje nas 3 principais do momento.

1) JavaScript

Assim como no começo do ano, o JavaScript aparece em primeiro lugar. Como é uma linguagem dinâmica pode ser utilizada para várias coisas. Temos um post que aborda justamente isso: O que se pode fazer com JavaScript hoje em dia?

O site Stack Overflow sempre realiza uma pesquisa para obter estatísticas da comunidade de desenvolvedores. E nas tecnologias mais populares, está ela, em primeiro lugar, com uma porcentagem de 69,8%.

O GitHub (site de compartilhamento de código) também diz que o JavaScript é o mais utilizado.

Como podemos ver acima, em segundo aparece a linguagem Python, que veremos a seguir.

2) Python

Desde o começo do ano ela era uma das linguagens mais promissoras, e ela ainda está no pódio. O Python é uma linguagem poderosa e que cada vez mais ganha popularidade em meio aos desenvolvedores.

Podendo ser utilizada por uma variedade de tarefas, desde desenvolvimento web, aprendizado de máquina, análise de dados e muitas outras.

Ainda na pesquisa do Stack Overflow, quase 40% dos usuários utilizam Python em seus projetos. E ainda tem mais: segundo o site TIOBE, podemos ver como o Python tem crescido.

3) Java

Muitas pessoas quando pensam em estudar uma linguagem, já pensam logo no Java. Se você gostar, porque não? Apesar de não ter aparecido como uma das linguagens mais promissoras para este ano, o Java voltou a ser um dos centros a partir de julho/2018.

Como é uma linguagem de programação bem versátil, você pode utilizá-la para diversas finalidades como desktop, web e até mobile. Para tudo isso, o Java atenderá suas necessidades.

Concluindo

Agora você pode estar se perguntando… “Ok, então eu tenho que escolher uma dessas três linguagens?” e a resposta é: não exatamente…

Por que não aprender as três? Essas são as linguagens mais bem classificadas pelos sites como pudemos ver acima.

Quanto maior o seu conhecimento, tanto na linguagem em si quanto na quantidade, pode abrir um leque de oportunidades. Você pode estudar uma por vez, para poder levar sua carreira a um próximo nível.

Até a próxima! 😊

JUNTE-SE A MAIS DE 150.000 PROGRAMADORES