Conheça MelonJS, a biblioteca para criação de jogos JavaScript

Você conhece a biblioteca melonJS para criação de jogos em HTML5 e JavaScript?

Conheça o MelonJS, um mecanismo de desenvolvimento de jogos em HTML5 que capacita desenvolvedores e designers a se concentrarem no conteúdo.

A biblioteca fornece uma coleção de entidades compostas e suporte para ferramentas de terceiros, dando-lhe ima combinação poderosa que pode ser usada por atacado ou fragmentada.

O melonJS possui os seguintes recursos:

  • Um novo e leve mecanismo baseado em sprites 2D;
  • Biblioteca autônoma (não depende de mais nada, exceto de um navegador compatível com HTML5);
  • Compatível com a maioria dos principais navegadores (Chrome, Safari, Firefox, Opera, IE) e dispositivos móveis;
  • Renderização rápida de Canvas e WebGL em computadores e dispositivos móveis;
  • Resolução de alta DPI e dimensionamento automático de tela;
  • Suporte de áudio HTML5 multicanal e Web Audio em dispositivos suportados;
  • Leve implementação físic, garantindo baixos requisitos de cpu;
  • Algoritmo de colisão baseado em polígono (SAT) para detecção e respostas precisas;
  • Detecção rápida de colisão de fase ampla, usando particionamento espacial;
  • Suporte a ferramentas de terceiros para definição de corpo físico (PhysicEditor, Physic Body Editor);
  • API de matemática avançada para vetor e matriz;
  • Efeitos de interpolação;

Continue lendo “Conheça MelonJS, a biblioteca para criação de jogos JavaScript”

PixiJS adiciona suporte a WebGL.

PixiJS é uma biblioteca que permite criar gráficos interativos sem precisar merhulhar na WebGL API e é despreocupada em lidar com a compatibilidade do navegador e dispositivo. Ela tem suporte completo ao WebGL e volta à tela do HTML5.

É uma ferramenta ideal para criação de conteúdo dinãmico e interativo. Ela possui compatibilidade para multiplataforma. Com o PixiJS você cria experiências refinadas de forma rápida, evitando dores de cabeça relacionadas à inconsistências de navegadores.

Ele possui:

  • Renderizador WebGL;
  • Gráfico de cena completo;
  • API fácil de usar;
  • Suporte para atlas de textura;
  • Carregador de assets/sprites;
  • Deteca automaticamente qual renderizador usar;
  • Interação com mouse e multitoque;
  • Texto;
  • BitmapFont;
  • Renderiza texturas;
  • Desenhor primitivos;
  • Mascaramento;
  • Filtros e
  • Plugins de usuário.

O PixiJS possui uma API amigável e rica em recursos, permitindo que você se concentre ne produção enquanto a API cuida dos fundamentos. Se tratando em renderização 2D, o PixiJS é o mais rápido que existe e sempre será de código aberto.

O WebGL é uma API utilizada para renderizar gráficos 3D e 2D sem o uso de plugins. Além do navegador, a própria GPU também precisa oferecer suporte ao recurso.

Você pode fazer o download com npm ou usando uma URL da CDN:

npm install pixi.js
<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/5.1.3/pixi.min.js"></script>

A maneira correta de importar o PixiJS é:

import * as PIXI from 'pixi.js'

Continue lendo “PixiJS adiciona suporte a WebGL.”

Como criar um cartão de crédito com a biblioteca Card

Você já conhece a biblioteca Card criada por Jesse Pollak?

Esta biblioteca auxilia você a criar um cartão de crédito utilizando poucas linhas de código. Com ela, você possui acesso aos mais variados tipos de cartão de crédito, e consegue visualizar em tempo real as informações sendo inseridas no cartão, alterando seus dados conforme você digitar. Tudo nesta biblioteca foi criado com CSS, HTML e JavaScript puro, e não necessita de imagens adicionais.

A biblioteca reconhece diversas formas de cartão de crédito e você não precisa alterar nada (além dos dados a serem inseridos no cartão). Com ela, você terá uma pré-visualização em tempo real do seu cartão.

Usando sem jQuery:

Para utilizar a biblioteca Card, você precisará incluir o arquivo card.js no seu HTML. Não será necessário um link para o CSS, porque o arquivo JavaScript já fará isso por você.

<!-- no final do BODY -->
<!-- CSS está incluso no arquivo JavaScript -->
<script src="/path/to/card.js"></script>

Assim que você incluir este arquivo, poderá inicializar o Card.

let cartao = new Card({
    // seleciona a classe #formCard
    form: '#formCard', 
    // seleciona o container que mostra
    // o cartão na tela
    container: '.card-wrapper',

Instalando a biblioteca Card por bower:

Se você está usando o bower, poderá instalar o card.js com este comando:

bower install card --save

Se você está usando npm, você poderá instalar o card.js assim:

npm install --save card

Criando os campos de preenchimento do cartão:

O cartão renderiza com espaços reservados para cada campo de preenchimento: número do cartão, nome, validade e cvc.

<form id="formCard">
    <div>
        <input type="text" name="number" placeholder="Numero Cartão" />
        <input type="text" name="name" placeholder="Nome" />
    </div>
    <div>
        <input type="text" name="expiry" placeholder="Data" />
        <input type="text" name="cvc" placeholder="CVC" />
    </div>
    <div>
        <input id="bt" type="submit" value="Enviar" />
    </div>
</form>

Criando um cartão:

let cartao = new Card({
    form: '#formCard',
    container: '.card-wrapper',
    // Altera o placeholder
    placeholders: {
        name: 'Seu nome aqui'
    }
});

Para traduzir o cartão para sua língua nativa, você pode alterar adicionando os objetos a seguir:

// Altera o placeholder
placeholders:{
    name: 'Seu nome aqui'
}
messages: {
    validDate: 'Data\nexpiração',
    monthYear: 'mes/ano',
},
O código deverá ficar assim:
<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Biblioteca Card</title>
</head>
<body>
    <script src="card-master/dist/card.js"></script>
    <div class='card-wrapper'></div>
    <form id="formCard">
        <div>
            <input type="text" name="number" placeholder="Numero Cartão" />
            <input type="text" name="name" placeholder="Nome" />
        </div>
        <div>
            <input type="text" name="expiry" placeholder="Data" />
            <input type="text" name="cvc" placeholder="CVC" />
        </div>
        <div>
            <input id="btn" type="submit" value="Enviar" />
        </div>
    </form>
    <script>
        let cartao = new Card({
            form: '#formCard',
            container: '.card-wrapper',
            // Altera o placeholder
            placeholders: {
                name: 'Seu nome aqui'
            }
        });
    </script>
</body>
</html>

Para mais informações sobre a biblioteca, acesse o link: https://github.com/jessepollak/card

E aí, gostou do artigo? Deixe seu comentário abaixo!

Gráficos Line e Bar com Chart.js

Criando gráficos com Chart.js

Os gráficos de linhas e barras são gráficos muito utilizados no mundo empresarial. O gráfico de linha é usado para mostrar tendências, comparar conjuntos de dados, mostrar evoluções e diminuições de algum fenômeno. Apresenta a variação de valores dos dados em determinado período.

Se você ainda não viu o artigo Iniciando com Chart.js, acesse-o no link:https://www.mundojs.com.br/iniciando-com-chart-js/

LINHA:

O gráfico de linhas é uma maneira de mostrar os pontos de dados em uma linha. O gráfico em linha permite que um número de propriedades seja especificado para cada um dos conjuntos de dados.

Ao criar o seu documento HTML base, você deverá adicionar um Canvas na sua página.

<!-- adicione a tag canvas no seu HTML -->
<canvas id="myChart"></canvas>

Com o Canvas adicionado, você precisará incluir a biblioteca Chart.js na sua página.

<!-- o link a seguir direciona para a biblioteca online do Chart.js -->
<!-- a biblioteca também está disponível para download no site do Chart.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.bundle.js"></script>

Para criar um gráfico do tipo Linha, você usará o seguinte código:

// criando um novo objeto, contendo o tipo, os dados
// e as opções que o gráfico terá.
let ctx = document.getElementById('myChart');

let chart = new Chart(ctx, {
    type: 'line',
    data: data,
    options: options
});

Onde:

Type:

É o tipo de gráfico que será feito;

Data:

Os dados que serão inseridos no gráfico.

Options:

As customizações que você fará no seu gráfico.

TYPE:

Este valor define de qual tipo será o gráfico. Você deve utilizar ‘line’ para o formato LINHA.

// type:'line'

DATA:

Para a construção do gráfico, é necessário que os datasets contenham os valores a ser inseridos no gráfico. Para isto, cria-se um vetor com os valores necessários.

Você também poderá inserir uma legenda (label) para a linha do gráfico.

// O objeto data possui os valores dispostos no gráfico
data: {
    // Legendas das Linhas
    labels: ['Janeiro', 'Fevereiro', 'Março', 'Abril', 'Maio', 'Junho', 'Julho'],
    datasets: [{
        // Legenda
        label: 'Meu primeiro gráfico',
        // Define-se a cor da linha.
        borderColor: 'rgb(245,222,179)',
        // Dados a serem inseridos nas barras
        data: [0, 10, 5, 2, 20, 12, 1],
    }]
}

OPTIONS:

Esse objeto define as opções a serem inseridas no seu gráfico. Confira as diversas customizações disponíveis para o seu tipo de gráfico em: https://www.chartjs.org/docs/latest/charts/line.html.

O exemplo a seguir utilizará a opção tension, que define se as linhas serão retas ou possuirão algum tipo de curvatura.

// Esta opção define se as linhas serão curvadas ou retas,
// use 0 para retas.
options: {
    elements: {
        line: {
            tension: 0
        }
    }
}

BARRAS:

O gráfico de barras mostra os valores dos dados com barras verticais. É muito utilizado para mostrar dados de tendências e comparação de vários conjuntos de dados. Cada barra retangular é correspondente a uma categoria e proporcional ao valor do dado na respectiva categoria.

De maneira semelhante à criação do gráfico em linhas, utilizaremos a mesma estrutura HTML para o gráfico de barras.

Para criar um gráfico do tipo Barra, você usará o seguinte código:

// criando um novo objeto, contendo o tipo, os dados
// e as opções que o gráfico terá.
let ctx = document.getElementById('myChart');
let myBarChart = new Chart(ctx, {
    type: 'bar',
    data: data,
    options: options
});

TYPE:

Este valor define de qual tipo será o gráfico. Você deve utilizar ‘bar’ para o formato BARRA VERTICAL e ‘horizontalBar’ para o formato BARRA HORIZONTAL.

// type: 'bar'
// type: 'horizontalBar'

DATA:

Assim como no gráfico em Linhas, é necessário que os datasets contenham um vetor com os valores a ser inseridos no gráfico. Você deve especificar também as cores de cada retângulo, sendo uma cor para cada valor no vetor. Também pode inserir legendas. Confira mais opções em: https://www.chartjs.org/docs/latest/charts/bar.html

// O objeto data possui os valores dispostos no gráfico
data: {
    // Legendas das Barras
    labels: ['Segunda', 'Terça', 'Quarta', 'Quinta', 'Sexta', 'Sábado'],
    datasets: [{
        // Legenda geral
        label: '$ em Vendas',
        // Dados a serem inseridos nas barras
        data: [10, 9, 12, 19, 21, 7],
        // Define as cores de preenchimento das barras
        // de acordo com sua posição no vetor
        backgroundColor: [
            'rgba(255, 99, 132, 0.2)',
            'rgba(54, 162, 235, 0.2)',
            'rgba(255, 206, 86, 0.2)',
            'rgba(75, 192, 192, 0.2)',
            'rgba(153, 102, 255, 0.2)',
            'rgba(255, 159, 64, 0.2)'
        ],
        // Define as cores de preenchimento das bordas das barras
        // de acordo com sua posição no vetor
        borderColor: [
            'rgba(255, 99, 132, 1)',
            'rgba(54, 162, 235, 1)',
            'rgba(255, 206, 86, 1)',
            'rgba(75, 192, 192, 1)',
            'rgba(153, 102, 255, 1)',
            'rgba(255, 159, 64, 1)'
         ],
         // Define a espessura da borda dos retângulos
         borderWidth: 1
    }]
},

OPTIONS:

Esse objeto define as opções a serem inseridas no seu gráfico. Você também pode conferir as diversas opções de customização na documentação do Chart.js.

Neste exemplo será utilizada a opção beginAtZero, que tem a função de começar a barra no valor 0 do eixo X.

// Customização que define onde irá começar a ser erguida a barra
// começando pelo ZERO, no eixo X.
options: {
    scales: {
        yAxes: [{
            ticks: {
                beginAtZero: true
            }
        }]
    }
}

 

Gráficos Pie e Doughnut com Chart.js

Criando gráficos com Chart.js

Os gráficos Donut(Doughnut) e Pizza(Pie) são, provavelmente, os gráficos mais utilizados atualmente. Eles são divididos em segmentos, e cada segmento é proporcional ao valor de cada dado. Esses segmentos são divididos na forma de arcos.

Se você ainda não leu o artigo Iniciando com Chart.js, acesse-o no link: https://www.mundojs.com.br/iniciando-com-chart-js/

Estes dois tipos de gráficos são excelentes para demonstrar as proporções entre os dados inseridos.

O gráfico do tipo Donut e do tipo pizza são do mesmo tipo no Chart.js, com a diferença de um único objeto, denominado cutoutPercentage. Este valor define o tamanho do espaço central vazio do gráfico, e possui como valor padrão 50%.

Ao criar o seu documento HTML base, você deverá adicionar um Canvas na sua página:

<!-- adicione a tag canvas no seu HTML -->
<canvas id="myChart"></canvas>

Com o Canvas adicionado, você precisará incluir o Chart.js na sua página.

<!-- o link a seguir direciona para a biblioteca online do Chart.js -->
<!-- a biblioteca também está disponível para download no site do Chart.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.bundle.js"></script>

Para fazer um gráfico do tipo Donut, você usará o seguinte código:

// Criando um novo objeto, contendo o tipo, os dados
// e as opções que o gráfico terá.
let meuDonutChart = new Chart(ctx, {
    type: 'doughnut',
    data: dados,
    options: opcoes
});
Onde:

type: É o tipo de gráfico que será feito.

data: Os dados que serão inseridos no gráfico.

options: Serão as customizações que você fará no seu gráfico.

TYPE:

Este valor define de qual tipo será o gráfico. Você deve utilizar ‘pie’ para o formato PIZZA e ‘doughnut’ para o formato DONUT.

// type: 'doughnut'
// type: 'pie'

DATA:

Para construir o gráfico, é necessário que os datasets contenham um vetor com os valores a serem inseridos. Estes valores serão somados em um total e calculados levando em consideração a proporção relativa de cada dado.

Você poderá inserir uma legenda (label) para cada pedaço do gráfico. Verifique a estrutura no código abaixo:

// Cria-se um objeto chamado dados onde:
let dados = {
    datasets: [{
        // cria-se um vetor data, com os valores a ser dispostos no gráfico
        data: [10, 20, 30],
        // cria-se uma propriedade para adicionar cores aos respectivos valores do vetor data
        backgroundColor: ['rgb(255, 99, 132)', 'rgb(255, 199, 132)', 'rgb(55, 99, 132)']
    }],

    // cria-se legendas para os respectivos valores do vetor data
    labels: ['Vermelho', 'Amarelo', 'Azul']
};

OPTIONS:

Este objeto define as opções a ser inseridas no seu gráfico. Confira as diversas opções de customizações para o seu gráfico no link: https://www.chartjs.org/docs/latest/charts/doughnut.html.

O exemplo a seguir utilizará a opção cutoutPercentage, que, juntamente com o atributo “type”, define se o gráfico será do padrão Pizza ou Donut. Se esta opção não estiver definida, trará como valor padrão 50%. Se você utilizar o valor 0, retornará um gráfico sem espaço central. Confira no código abaixo:

// Crie um objeto que defina as opções customizáveis
// do seu gráfico.
let opcoes = {
    cutoutPercentage: 40,
};

Confira o código completo realizando o download: Exemplo Chart.js

Neste artigo, foi realizada a configuração de dois gráfico, Pizza e Donut, utilizando a biblioteca Chart.js. Gostou? Comente ou tire suas dúvidas!

D3: Data-Driven Documents

D3.js é uma biblioteca JavaScript para manipular documentos com base em dados. O D3 ajuda você a dar vida aos dados usando HTML, SVG e CSS. A ênfase da D3 nos padrões da Web oferece a você todos os recursos dos navegadores modernos, sem vincular-se a uma estrutura proprietária, combinando poderosos componentes de visualização e uma abordagem baseada em dados à manipulação de DOM.

A D3 permite associar dados arbitrários a um DOM (Document Object Model) e, em seguida, aplicar transformações orientadas a dados ao documento. Por exemplo, você pode usar o D3 para gerar uma tabela HTML a partir de uma matriz de números. Ou use os mesmos dados para criar um gráfico de barras SVG interativo com transições suaves e interação.

Clique nas imagens para ver os exemplos

D3 não é uma estrutura monolítica que procura fornecer todos os recursos concebíveis. Em vez disso, o D3 resolve o cerne do problema: manipulação eficiente de documentos baseados em dados. Isso evita a representação proprietária e oferece uma flexibilidade extraordinária, expondo os recursos completos dos padrões da Web, como HTML, SVG e CSS. Com o mínimo de sobrecarga, o D3 é extremamente rápido, suportando grandes conjuntos de dados e comportamentos dinâmicos para interação e animação. O estilo funcional da D3 permite a reutilização de código por meio de uma coleção diversificada de módulos oficiais e desenvolvidos pela comunidade.

Para a utilização, você precisa apenas chamar o script:

<script src="https://d3js.org/d3.v5.min.js"></script>

Caso esteja trabalhando com node, instale atraves do código:

npm install d3

Como funciona o suporte com navegadores?

O D3 5+ suporta navegadores recentes, como o Chrome, Edge, Firefox e Safari. D3 4 e abaixo também suporta o IE 9+. Partes do D3 podem funcionar em navegadores mais antigos, já que muitos módulos do D3 têm requisitos mínimos. Por exemplo, a seleção do d3 usa o nível 1 da Selectors API, mas você pode pré-carregar o Sizzle para compatibilidade. Você precisará de um navegador moderno para usar as Transições SVG e CSS3. O D3 não é uma camada de compatibilidade, por isso, se o seu navegador não suporta padrões, você está sem sorte. Desculpa!

O D3 também é executado no Node e nos web workers. Para usar o DOM no Node, você deve fornecer sua própria implementação DOM; O JSDOM é recomendado. Para evitar a definição de um documento global, passe um elemento DOM para d3.select ou um NodeList para d3.selectAll, da seguinte forma:

const d3 = require("d3"),    
const jsdom = require("jsdom");

const document = jsdom.jsdom (),
const svg = d3.select(document.body).append ("svg");

Ao usar o D3 em um ambiente que suporta módulos ES, você pode importar o pacote D3 padrão como um namespace:

import * as d3 from "d3";

Se você quiser importar um módulo D3 que não esteja incluído no pacote padrão, atribua a ele um espaço para nome separado:

import * as d3 from "d3";
import * as d3GeoProjection from "d3-geo-projection";

Por esse motivo, o padrão preferido é importar símbolos diretamente dos módulos D3, em vez de usar o pacote padrão:

import {select, selectAll} from "d3-selection";
import {geoPath} from "d3-geo";
import {geoPatterson} from "d3-geo-projection";

Se você estiver usando um empacotador, verifique se o empacotador está configurado para consumir o ponto de entrada de módulos no pacote.json. Veja resolve.mainFields do webpack, por exemplo.

Você pode encontrar o exemplo acima no link da documetação do D3. A única desvantagem é que por lá está tudo em inglês.

Conclusão

O D3 é uma ótima biblioteca para resolver problemas especificos e criar belas apresentações. Vale a pena dar uma olhada em diversos exemplos fornecidos no próprio site para ver se ele atende a suas necessidades.

Aprendendo ReactJS: Parte 3

Este artigo é uma continuação da série Aprendendo ReactJS.

Para acessar primeiro o artigo, acesse: Aprendendo ReactJS: Introdução

Para acessar o anterior a este, acesse: Aprendendo ReactJS: Parte 2



Renderização condicional

A exibição de um componente funcional pode ser determinada baseado em suas propriedades. Por exemplo:

function Feature(props) {
    if (props.ativa == true) {
        return <h1>Esta funcionalidade está ativa.</h1>
    }
    else {
        return <h1>Esta funcionalidade está inativa.</h1>
    }
}

A mesma lógica pode ser expressada utilizado um operador ternário.

function Feature(props){
    return <h1>Está funcionalidade está {props.ativa? "ativa" : "inativa"}</h1>
}

Bloqueando a renderização

A exibição de um componente funcional pode ser evitada de renderizar como no exemplo abaixo:

function Feature(props) {
    if (props.ativa!) {
        return null
    }
    else {
        return <h1>{props.mensagem}</h1>
    }
}

Você também pode obter o mesmo resultado utilizando o operado &&:

function Feature(props){
    return (
        props.ativa && <h1>{props.mensagem}</h1>
    )
}

Com o operador && com um booleano e uma expressão, se o booleano for verdadeiro, ele executará a expressão. Caso ele seja falso, o JavaScript computa que falso e uma a expressão resultam sempre em falso e já sai do teste. Por isso ela não será renderizada.

Componentes de Classe

Além de poderem ser escritos como uma função, os componentes React podem também ser escritos usando as classes do ES6. Componentes de classe são diferentes dos components funcionais pois eles permitem ter métodos de ciclo de vida e estado. Eles também vem com duas propriedades instanciadas, this.state e this.props, que representam o estado e propriedades do componente.

Componentes React escritos usando classes ES6:

class BemVindo extends React.Component{
    render(){
        return <h1>Olá MundoJS!</h1>
    }
}

O código acima é o equivalente do seguinte componente funcional:

function BemVindo(){
    return <h1>Olá MundoJS!</h1>
}

Ambos components React podem ser escritos com seus nomes dentro de uma tag HTML:

let elemento = < BemVindo/>

Render()

O método render de um componente é usado para descrever qual tipo de elemento React será reotornado pelo componente de classe. É o equivalente ao valor passado no return do componente funcional. Por exemplo, o componente abaixo renderizará <h1> Olá MundoJS!</h1>:

class BemVindo extends React.Component {
    render() {
        return <h1> Olá MundoJS!</h1>
    }
}

//renderizará <h1> Olá MundoJS!</h1>
ReactDOM.render(
    < BemVindo />,
    document.getElementById("root")
)

Adicionando propriedades aos componentes de classe.

As propriedades de um componente podem ser acessadas através do atributo this.props. Isso difere levemente dos componentes funcionais onde elas precisam ser passadas como uma variável.

class BemVindo extends React.Component{
    render(){
        return <h1>Mensagem: {this.props.mensagem}</h1>
    }
}

Você pode fornecer as propriedades da mesma forma em ambos componentes.

<Welcome message="Olá MundoJS!"/>

Constructor(props)

O método contructor() é chamado antes do componente React ser montado e pode ser usado para configurar o estado inicial do componente. É importante chamar super(props) no começo do construtor pois senão o this.props poderá não funcionar corretamente. O primeiro argumento do construtor representará as propriedades sendo passadas para o componente.

class Counter extends React.Component{
    constructor(props){
        super(props)
    }
    render(){
        return <div>Componente</div>
    }
}

Adicionando um estado inicial para os components de classe

O estado inicial dos componentes de classe podem ser declarados dentro do método constructor(). O estado deste componenetes deve ser declarado como um objeto com atributos.

class Counter extends React.Component{
    constructor(props){
        super(props)
        this.valores= {
  foo:123,
  bar:456
  }
    }

    render(){
        return <div>foo:{this.valores.foo} bar:{this.valores.bar}</div>
    }
}

Atualizando o estado

O método setState(updater,[callback]) é utilizado para atualizar o estado do componente. Ele recebe um objeto “atualizador” e atualiza o estado do componente através de uma mescla superficial do atributos dos dois objetos de estado (atual e novo). Como este metodo atualiza o estado de forma assinacrona, existe uma opção de chamar uma função de callback uma vez que a atualização terminou. Para poder usar o setState(), ele precisa ser referenciado através da chamada this.setState().

O método setState ativará a fase de atualização no ciclo de vida do componente, causanda a rerenderização a não ser que a função shouldComponentUpdate() retorne falso.

class Msg extends React.Component{
    constructor(props){
        super(props)
        //estado inicial
        this.state = {mensagem:"Mensagem Inicial"}
    }

    // Este método é chamado após todos os element filhos e instancias do components tenham carregado no Native UI.
    componentDidMount(){
        //updating state
        this.setState({mensagem:"Nova Mensagem"})
    }
    
    render(){
        return <div>Mensagem:{this.state.mensagem}</div>
    }
}

Por hoje seria isso. Assim que montar mais uma parte deste tutorial estarei liberando ele aqui no site do MundoJS.

Caso você encontre algum erro, tenha um contribuição ou dica, deixe seu comentário aqui em baixo que irei responder o mais breve possível.

Bibliotecas JavaScript para autenticação de usuários

A autenticação serve para identificar usuários e fornecer diferentes direitos de acesso e conteúdo, dependendo do seu id. Como novos tutoriais aparecem na web e mais pessoas tentam entender a equação de custo-benefício para implementar sua própria solução versus usar uma biblioteca ou serviço, reunimos uma breve revisão do que está por aí. Confira abaixo algumas opções:

1. Passaport
O Passport é um middleware de autenticação compatível com o Express para o Node.js. O objetivo do Passport é autenticar solicitações, o que é feito por meio de um conjunto extensível de plugins conhecidos como estratégias. Ele não monta rotas nem assume qualquer esquema de banco de dados específico, o que maximiza a flexibilidade e permite que decisões do nível do aplicativo sejam tomadas pelo desenvolvedor. A API é simples: você fornece ao Passport uma solicitação para autenticação e o Passport fornece ganchos para controlar o que ocorre quando a autenticação é bem-sucedida ou falha.

O Passport não é apenas uma biblioteca user-auth amplamente usada, é provavelmente a maneira mais comum de usar uma biblioteca externa para autenticação do usuário por desenvolvedores JS. Basicamente, esta biblioteca oferece o Node.js middleware relativamente flexível e modular que pode ser integrado em qualquer aplicação web baseada no Express.

2. Permit
Antes da Permit, a única opção real para bibliotecas de autenticação no Node.js era o Passport.js. O Permit facilita a adição de uma camada de autenticação a qualquer API do Node.js. Ele pode ser usado com qualquer uma das estruturas de servidor populares (por exemplo, Express, Koa, Hapi, Fastify) e pode ser usado para qualquer tipo de API (por exemplo, REST, GraphQL, etc.) devido ao seu design simples e não animado.

Também, o Permit permite que você se autentique por meio dos dois esquemas que a maioria das APIs precisa: um único token de portador secreto ou um conjunto de credenciais de nome de usuário e senha. Como a bilbioteca não é fortemente acoplada a um framework ou modelo de dados, ela fornece controle total sobre como você escreve sua lógica de autenticação – exatamente da mesma maneira que você escreveria em qualquer outro manipulador de solicitações.

3. Grant
Uma biblioteca relativamente nova e promissora com mais de 180 fornecedores suportados e um playground ao vivo para Express, Koa e Hapi com o OAuth Middleware. Se você quiser usá-lo com seu provedor OAuth particular, poderá especificar a chave necessária. Embora esta biblioteca já tenha tração (+1 K estrelas), ela tem relativamente poucos recursos, então tente com cuidado.

4. Feathers
Feathers é uma estrutura open source para o NodeJS que permite controlar seus dados por meio de recursos RESTful, soquetes e plug-ins flexíveis em tempo real. O Feathers também oferece módulos de autenticação e gerenciamento de autenticação que permitem adicionar verificação, redefinição de senhas esquecidas e outros recursos para autenticar as penas locais.

A ideia geral é combinar vários métodos de autenticação em uma infraestrutura flexível sob o mesmo teto.

5. Autenticação do Firebase (para pequenos aplicativos)
A autenticação do Firebase é necessária para fornecer aos seus usuários privilégios de leitura/gravação por meio de regras de segurança. Ainda não abordamos as regras de segurança, mas sabemos apenas que as regras de segurança dependem do status de autenticação de um usuário.

O Firebase envia o Google, o Facebook, o Twitter e o GitHub com suas próprias integrações de email/senha auth e OAuth2. Você também pode integrar seus próprios autores a ele para fornecer aos usuários acesso aos dados sem forçá-los a criar uma conta fora dos sistemas existentes.

O Firebase pode não ser a solução de longo prazo para gerenciar a autenticação do usuário em sua plataforma de dimensionamento (ou é?). Mas é uma maneira muito útil de realizar seus aplicativos implantados com o Firebase de maneira rápida e fácil.

JQuery está perdendo espaço para o JavaScript puro?

Seguindo diversas ocorrências nos últimos meses, podemos observar que o JavaScript puro tem tomado o espaço em aplicações, bibliotecas e frameworks que antes utilizam o JQuery. Ao final do ano passado, o Github removeu qualquer traço do JQuery do seu front-end enquanto o Bootstrap informou a retirada da biblioteca e colocou um pull request para fazer o mesmo tipo de adaptação.

Agora você pode estar se perguntando, será que o Jquery está chegando ao seu fim?

É claro que não, nem de perto. Sites e sistemas que utilizam extensivamente a biblioteca não vão sair trocando agora algo que está funcionando por outra coisa que também estaria funcionando se não houver nenhum ganho de performance ou produção em cima disso.

Então o que está acontecendo?

A resposta é simples, o JavaScript está evoluindo e funcionalidades que antes eram exclusivas do Jquery, ou ele tornava muito mais fácil através de suas funcionalidades e bibliotecas prontas agora se tonaram redundantes. Itens como:

  • A manipulação de classes pode ser alcaçada através do Element.classList.
  • As animações visuais podem ser criadas com CSS3.
  • Os AddEventListeners estão mais estáveis entre os navegadores
  • Chamadas AJAX ficaram mais simples com o método Fetch.

Caso você tenha interesse em saber mais sobre a possibilidade de remover o JQuery do seu código, talvez seja o momento de fazer uma analise para saber o quanto da biblioteca você usa, ou se você apenas a tem por estar acostumado com alguns métodos. Um site legal para olhar alternativas é o http://youmightnotneedjquery.com/

Por outro lado, lembre-se que diversas implementações novas do Ecmascript 6+ ainda não são 100% implementadas por todos navegadores. Então lembre-se de conferir se você pode usar o método no site https://caniuse.com/ e se você estiver bem no inglês e tem um tempo de sobra, leia esse artigo da Google sobre os workarounds que o JQuery fornece que precisarão ser implementados caso você não o utilize

Conheça o Typed.js

O Typed.js é uma biblioteca JavaScript muito boa para simular um efeito de texto sendo escrito na tela, similar ao ato de digitar no console ou no Notepad.

Para acessar as funcionalidades do Typed.js, você precisa baixa-lo do site ou inserir uma tag script apontando para o link do CDN que eles disponibilizam conforme o exemplo abaixo.

<script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.9"></script>

Como Funciona?

É simples e irei mostrar em alguns exemplos que cobrirão a maioria das funcionalidades que você precisará da biblioteca. Mas primeiro, caso você já não tenha algo parecido, copie o código HTML abaixo

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
    <span id="texto"></span>
    <script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.9"></script>
</body>
</html>

Para evitar a necessidade de fazer um download, vou deixar com o link do CDN, mas sinta-se a vontade para altera-lo. Abaixo do script do Typed.js ou em um arquivo separado, adicione o seguinte código:

// A configuração que será passada ao instanciarmos o objeto Typed
let configuracao = {
    // A lista de frases que aparecerão
    // está string podem conter tags html
    strings: ["<i>Primeira</i> frase com Typed.js.", "Olá MundoJS!"],
    // A velocidade que é digitado
    typeSpeed: 40
}

// O Objeto precisará recebe 2 parametros,
// 1º: Uma string começando com # para id ou . para classe html
// 2º: o objeto de configuração
let typed = new Typed("#texto", configuracao);

Com isso você já verá um efeito simples, mas que mostra como funciona e como pode ser executado. Agora vamos ver alguns itens um pouco menos óbvios.


Configurando o Typed.js

Parando no meio da frase

Se na string você usar o acento circunflexo seguido de um valor numérico, quando chegar naquele ponto o Typed.js irá esperar aquele número em milissegundos antes de continuar.

let configuracao = {
            strings: ["<i>Primeira</i> frase ^1000 com Typed.js.", "Olá MundoJS!"],
        }

Retorno inteligente

Se o objeto de configuração tiver uma propriedade chamada “smartBackspace” igual com o valor true, então o texto irá voltar somente até a parte onde o texto diferente.

let configuracao = {
            // A parte "Olá" não será removida quando o texto for reescrever.
            strings: ["Olá MundoJS!", "Olá JavaScript!"],
            smartBackspace: true
        }

Tempo para iniciar e retornar

Através das propriedades startDelay e backDelay é possível definir (em milissegundos ) o tempo que levará para começar a escrever e retornar o texto.

let configuracao = {
            strings: ["Olá MundoJS!", "Olá JavaScript!"],
            startDelay: 2000,
            backDelay: 500,
        }

Customizar o cursor

É possível customizar o cursor ou remove-lo completamente através de duas propriedades conforme o exemplo abaixo. Lembrando que se você colocar showCursor como false, não conseguirá ver qualquer char que definir no cursorChar.

let configuracao = {
            strings: ["Olá MundoJS!", "Olá JavaScript!"],
            showCursor: true,
            cursorChar: '#'
        }

Conclusão

Como e possível ver, a biblioteca do Type.js é simples e fácil de usar. Caso você precise customizar mais coisas va-le a pena dar uma olhada no https://github.com/mattboldt/typed.js/#user-content-customization para ver se o que você precisa já está lá.