O que são e como criar Promises:

Você sabe o que são promises?

Promises vem do termo “promessa”, que representa um valor que pode estar disponível em algum momento no futuro, no presente, ou nunca estar disponível. Ele é um objeto utilizado em processamento assíncrono. Um promise representa um proxy para um valor não necessariamente conhecido, permitindo uma associação de métodos de tratamento para eventos em uma ação assíncrona na hipótese de sucesso ou falha, permitindo que o método assíncrono retorne uma “promessa” ao valor em algum momento no futuro.

Quais são os estados de um promise?

  • pending (estado: pendente): O promise ainda não foi rejeitada, nem realizada. É o estado inicial;
  •  fulfilled (estado: realizado): O promise obteve sucesso na operação;
  • rejected (estado: rejeitado): O promise falhou na operação;
  • settled (estado: estabelecido): O promise foi estabelecido. Significa que o promise foi realizado ou rejeitado.

Sintaxe:

new Promise (/* executor */ function (resolve, reject) { … });

O executor é uma função que recebe os argumentos resolve e reject. O executor é chamado antes que o construtor de Promise retorne o objeto criado. As funções resolve e reject, quando chamadas, resolvem ou rejeitam (respectivamente) a promessa. Quando estiver concluído o trabalho assíncrono, o executor chama as funções resolve ou reject para definir o estado da promise.

Uma promise pode se tornar realizada ou rejeitada. Com a ocorrência de algum desses estados, o método them do Promise é chamado, e ele chama o método associado ao estado (resolved ou rejected).

O que é composição?

São métodos encadeados. Isso pode ocorrer com os métodos Promise.prototype.then e Promise.prototype.catch, já que ambos retornam promises que podem ser encadeadas.

Métodos:

  • Promise.all(lista): Retorna uma promise que é resolvida quando todas as promises no argumento forem resolvidas ou rejeitada quando uma das promises do argumento for rejeitada. É um método útil para agregar resultados de múltiplas promises.
  • Promise.race(lista): Retorna uma promise que resolve ou rejeita assim que uma das promises do argumento resolve ou rejeita.
  • Promise.reject(motivo): Retorna um promise que foi rejeitado por algum motivo.
  • Promise.resolve(valor): Retorna um promise que foi resolvido com dado valor. Se o valor for thenable (possuindo um método then), a promise retornada seguirá este metodo. Caso contrário, a promise será realizada com o valor.

Criando uma promise:

// Vejamos se a mãe está feliz. Utilize true para sim e false para não
let maeEstaFeliz = false;

// primeira promise que criaremos
let ganharTelefoneNovo = new Promise(
    (resolve, reject) => {
        if (maeEstaFeliz) {
            let telefone = {
                marca: 'iPhone',
                cor: 'Branco'
            };
            resolve(telefone);
        } else {
            let razao = new Error('Mãe não está feliz');
            reject(razao);
        }

    }
);

// Agora criaremos a segunda promise
async function mostrarTelefoneNovo(telefone) {
    return new Promise(
        (resolve, reject) => {
            var message = 'Hey cara, eu tenho um novo ' +
                telefone.marca + ' ' + telefone.cor;

            resolve(message);
        }
    );
};

// chamando nossa promise
async function perguntarParaMae() {
    try {
        console.log('Antes de perguntar para a mãe');

        let telefone = await ganharTelefoneNovo;
        let message = await mostrarTelefoneNovo(telefone);

        console.log(message);
        console.log('Depois de perguntar para a mãe');
    }
    catch (error) {
        console.log(error.message);
    }
}

(async () => {
    await perguntarParaMae();
})();

Gostou deste artigo? Comente abaixo!

Referências:

 

Nossos Cursos na Udemy

Precisando aprender JavaScript? Confira então nossos cursos na Udemy

Introdução ao JavaScript

Grátis!!
Curso para inicantes que desejam aprender os fundamentos da programação JavaScript
O que você aprenderá:
  • Variáveis
  • Condicionais
  • Loops
  • Funções
  • Tipos de Dados
O curso inclui
  • Vídeo sob demanda de 2 horas
  • 4 recursos para download
  • 8 exercícios de programação
  • Acesso total vitalício
  • Acesso no dispositivo móvel e na TV

 

JavaScript Básico

R$39,99

Aprenda JavaScript do zero, descubra como manipular websites e faça 2 projetos práticos

O que você aprenderá
  • Será ensinado dos fundamentos de JavaScript
  • Será capaz de manipular websites e apps
  • Conseguirá criar eventos para ações em para elementos HTML
O curso inclui
  • Vídeo sob demanda de 6,5 horas
  • 11 recursos para download
  • 28 exercícios de programação
  • Acesso total vitalício
  • Acesso no dispositivo móvel e na TV
  • Certificado de Conclusão

 

Atualização JavaScript: ES2019 e ES2020

R$39,99
Aprenda sobre as atualizações do ECMAScript 2019 e 2020
O que você aprenderá
  • Implementações do ECMAScript 2019
  • Implementações do ECMAScript 2020
O curso inclui
  • Vídeo sob demanda de 1 hora
  • 4 artigos
  • 2 recursos para download
  • Acesso total vitalício
  • Acesso no dispositivo móvel e na TV
  • Certificado de Conclusão

 

Introdução ao jQuery

Grátis!!

Aprenda do zero sobre as funcionalidades essenciais do jQuery
O que você aprenderá
  • Fundamentos de jQuery
  • Criação de eventos
  • Manipulação do DOM
  • Animações simples
O curso inclui
  • Vídeo sob demanda de 1,5 horas
  • Acesso total vitalício
  • Acesso no dispositivo móvel e na TV

 

JQuery Prático

R$39,99

Aprenda sobre os métodos mais comuns do JQuery e JQuery UI que você encontrará na vida real

O que você aprenderá
  • Fundamentos de JQuery
  • Os métodos do JQuery mais utilizados em websites
  • Jquery UI
Este curso inclui
  • Vídeo sob demanda de 3,5 horas
  • 2 artigos
  • 1 recurso para download
  • 14 exercícios de programação
  • Acesso total vitalício
  • Acesso no dispositivo móvel e na TV
  • Certificado de Conclusão

JavaScript é a linguagem mais demandada

JavaScript é a linguagem mais exigida em 2020, segundo um relatório da DevSkiller, o JavaScript substitui o Java na comparação com o relatório do ano anterior. Sendo que agora o SQL está em segundo lugar e ele caiu de primeiro para terceiro.

O crescimento na popularidade do JavaScript mostra que existe uma grande necessidades dos desenvolvedores de criar aplicativos web em contraste com o declínio de grandes sistemas focados no back-end.

Segue abaixo as 5 linguagens mais procuradas:

  1. JavaScript
  2. SQL
  3. Java
  4. HTML/CSS
  5. .NET/C#

Outras observações que são importantes destacar:

  • 72% das empresas procurando estão procurando por desenvolvedores com conhecimento de JavaScript. Seguido por 55% que estão procurando profissionais com conhecimentos de SQL e 53% de desenvolvedores Java.
  • React, Spring, ASP.NET, MySQL e HTML são as tecnologias mais populares para as linguagens mais populares.
  • Para desenvolvedores Python, análise de dados é o termo mais comum sendo procurado. Seguido por Django e NumPy.

Phaser.js #7 – Criando jogo Final!

Estamos chegando ao final de nosso projeto com Phaser pessoal! Lembrando que vocês podem acessar o projeto original em inglês na documentação diretamente no site do Phaser (deixarei o link no final do post).

Pontuação

O que é um jogo sem uma pontuação, não é mesmo? Como saberemos quantas estrelas coletamos?

Para isso, precisamos criar um objeto de jogo de texto. Vamos criar duas variáveis para conter uma pontuação e o objeto de texto:

var score = 0;
var scoreText;

O scoreText será configurado na função create():

scoreText = this.add.text(16, 16, 'score: 0', { fontSize: '32px', fill: '#000' });

A coordenada que exibiremos o texto score: 0 é na 16×16. A fonte padrão de textos do Phaser é a Courier.

Agora, precisamos modificar a função collectStar para que, quando o player coletar uma estrela, o contador seja aumentado, adicionando o nosso score:

function collectStar (player, star)
{
    star.disableBody(true, true);

    score += 10;
    scoreText.setText('Score: ' + score);
}

Deste modo, cada vez que coletamos uma estrela, o nosso contador, que é a variável score, é incrementada em 10, ou seja, a cada estrela coletada, +10 pontos para você 🙂

Você pode verificar isso no seu arquivo part9.html!

Continue lendo “Phaser.js #7 – Criando jogo Final!”

Phaser.js #6 – Criando jogo Parte 5

E aí pessoal, dando sequência ao nosso tutorial de Phaser.js, iremos dar um propósito ao nosso jogo agora.

Já temos as plataformas, já temos a gravidade implantada, e já temos o nosso player com seus comandos especificados (andar para as laterais e pular para as plataformas). Agora, iremos inserir algumas estrelas no nosso cenário, para que o nosso player as colete. Para isso, criaremos um grupo chamado stars e o preencheremos dentro de nossa função create():

stars = this.physics.add.group({
    key: 'star',
    repeat: 11,
    setXY: { x: 12, y: 0, stepX: 70 }
});

stars.children.iterate(function (child) {

    child.setBounceY(Phaser.Math.FloatBetween(0.4, 0.8));

});

Este é um processo muito parecido como quando criamos nosso grupo de plataformas, mas como as estrelas precisam se mover e saltar, elas são um grupo dinâmico de física.

Ok, mas o que faremos agora?

Bom, primeiramente precisamos definir a chave de textura (key) para a nossa imagem. Mas o que isso significa?

Significa que todos os objetos filhos criados como resultado do objeto de configuração estrela receberão as texturas de estrela por padrão. 

Ok, já criamos uma estrela, e agora? Agora precisamos definir o repeat. O repeat é o valor de repetição das estrelas. Precisaremos de 12 estrelas saltitando pelo nosso mapa, então precisamos repeti-la 11 vezes.

Feito isso, usaremos o setXY para definir a posição das 12 estrelas criadas pelo nosso grupo star. cada estrela (child) será colocada começando em x:12 e y:0, e com um passo x de 70.

Mas o que isso significa?

Isso significa que a primeira estrela será posicionada em 12 x 0, a segunda terá 70 pixels em 82 x 0, o terceiro em 172 x 0, aumentando 70 pixels proporcionalmente para cada uma das 12 estrelas. Com o valor de 70 pixels, as estrelas vão se espalhar perfeitamente espaçadas na nossa viewport.

Mas e o que a última parte deste código faz?

Bem, esta parte do código itera entre todas as estrelas criadas pelo grupo e fornece a elas um valor aleatório entre 0,4 e 0,8 no eixo Y. O intervalo de rejeição é entre 0 e 1, sendo 0 sem rejeição e 1, rejeição completa. Como as estrelas iniciam sem gravidade, elas são puxadas para o solo, até que ocorra colisão com alguma plataforma.

Continue lendo “Phaser.js #6 – Criando jogo Parte 5”

Conheça o Vue.js, um framework JavaScript:

Vue é um framework para construção de interfaces JavaScript. Ele é projetado para ser adotado de forma incremental. A biblioteca principal é focada na camada de visualização e é de fácil entendimento e integração com outras bilbiotecas ou projetos existentes.

Instalando:

Você pode incluir diretamente o vue em uma tag script, via cdn:

<!-- Utilize para fins de prototipagem ou aprendizado -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<!-- Utilize para produção um número de versão específico, para evitar quebras inesperadas -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.0"></script>

Se você estiver utilizando ES Modules:

<script type="module">
  import Vue from 'https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.esm.browser.js'
</script>

npm:

# latest stable
$ npm install vue

bower:

# latest stable
$ bower install vue

Começando:

Renderização Declarativa:

O vue nos permite renderizar declarativamente dados para o DOM:

<div id="app">
  {{ message }}
</div>
let app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

Com isso, já criamos o nosso primeiro aplicativo Vue! Os dados e o DOM agora estão vinculados e tudo é reativo.

<div id="app-2">
  <span v-bind:title="message">
    Hover your mouse over me for a few seconds
    to see my dynamically bound title!
  </span>
</div>
let app2 = new Vue({
  el: '#app-2',
  data: {
    message: 'Voce carregou esta pagina em ' + new Date().toLocaleString()
  }
})

Você verá a “message” pousando o mouse por cima do seu elemento renderizado no DOM.

Condicionais e Loops:

Continue lendo “Conheça o Vue.js, um framework JavaScript:”

Você sabe o que é Docker?

Neste artigo, imostrarei o que é Docker e os conceitos de containers.

O Docker é uma plataforma para criar, compartilhar e executar aplicativos com containers. Quando você utiliza containers para implantar os seus aplicativos, você utiliza a containerização.

Os containers são:

  • Flexíveis: Até as aplicações mais complexas podem ser containers;
  • Leves: os containers aproveitam e compartilham o kernel do host, tornando-os muito mais eficientes em termos de recursos do sistema do que as máquinas virtuais;
  • Portáteis: você pode criá-los localmente, implantar na nuvem e executar em qualquer lugar;
  • Fraco acoplamento: Containers são auto-suficientes e encapsulados, isto é, permitem substituir ou atualizar um sem atrapalhar outros;
  • Escaláveis: Você pode distribuir automaticamente réplicas de containers por um datacenter;
  • São seguros: aplicam restrições e isolamentos agressivos.

Mas o que é um container?

Bsicamente, não passa de um processo que está em execução, com o porém de ser isolado do host e de outros containers. Cada container interage com seu sistema de arquivos privado, sendo esse um sistema fornecido por uma imagem do Docker. Essa imagem incluirá tudo que for necessário para executar o aplicativo.

Ele difere de uma máquina virtual pois uma VM executa um SO completo, com acesso virtual a recursos do host. Já o Docker é executado nativamente no Linux e compartilha o kernel do Host com outros containers, executando um processo discreto, tornando-o leve.

Vantagens:

Com o Docker, temos uma alta portabilidade e podemos escalar nossos apps entre nuvens e datacenters, garantindo que esses aplicativos sejam executados da mesma maneira em qualquer lugar.

Orquestradores:

São ferramentas para gerenciar, dimensionar e manter aplicativos em containers. Os exemplos mais comuns são Kubernetes e Docker Swarm.

Continue lendo “Você sabe o que é Docker?”

Conheça o Meteor, um framework JavaScript.

O Meteor é um framework JavaScript completo para a criação de aplicativos Web e móveis moderno. Ele inclui um conjunto de tecnologias para a criação de aplicações reativar, uma ferramenta para construção, entre outros.

  • O Meteor permite o desenvolvimento JavaScript em ambientes de servidores de aplicativos, navegadores da web e dispositivos móveis;
  • Ele usa dados na conexão, ou seja, o servidor envia os dados, não HTML, e o cliente os processa;
  • Full Stack reactivity: Sua UI reflete perfeitamente o true world state com o mínimo de esforço de desenvolvimento.

Por onde começar?

O Meteor possui suporte para OS X, Windows e Linux.

No Linux e OSX, execute o seguinte comando:

curl https://install.meteor.com/ | sh

No Windows, primeiro instale o Chocolatey e, depois, use o seguinte comando no Prompt de Comando como Administrador:

choco install meteor

E agora?

Depois de instalado o Meteor, crie um projeto:

meteor create myapp

Depois de criado, execute-o localmente:

cd myapp
meteor npm install
meteor

Sua saída será algo como:

# Meteor server running on: http://localhost:3000/

O meteor já vem com o npm incluído, ou seja, você pode digitar meteor npm sem se preocupar se está instalado.

Agora, vamos criar um app simples:

Para criar um app, abra o seu terminal e escreva:

meteor create simples-todos

Isso vai criar uma nova pasta chamada simple-todos, com todos os arquivos que o aplicativo Meteor necessita:

client/main.js        # um arquivo de JavaScript carregado no cliente
client/main.html      # um documento HTML para definir seu templates[
client/main.css       # um arquivo CSS para definição de estilos
server/main.js        # um arquivo JS carregado no servidor
test/main.js          # um arquivo JS para testes
package.json          # um arquivo de controle para instalar pacotes npm
package-lock.json     # descreve a árvore de dependência npm
node_modules/         # pacotes instalados por nmp
.meteor/              # arquivos internos do Meteor
.gitignore            # um arquivo de controle para GIT

Para rodar o aplicativo criado:

cd simple-todos
meteor

Agora, abra o seu web browser e vá para http://localhost:3000 e veja o seu aplicativo rodando. Experimente colocar um <h1> dentro do seu client/main.html e veja a sua página ser atualizada com o novo conteúdo!

Você pode verificar a documentação original em inglês aqui: https://www.meteor.com/tutorials/blaze/creating-an-app

Gostou deste artigo? Comente abaixo!

Phaser.js #5 – Criando jogo Parte 4

Ok, já criamos a nossa colisão com os objetos, mas agora precisamos mover o player. Você pode utilizar um gerenciador de teclado embutido do Phaser:

cursors = this.input.keyboard.createCursorKeys();

Esse comando preenche o objeto cursors com as quatro propriedades: cima, baixo, esquerda e direita, que são todas as instâncias dos objetos-chave. Então, tudo que precisamos fazer é pesquisar isso dentro do nosso loop update:

if (cursors.left.isDown)
{
    player.setVelocityX(-160);

    player.anims.play('left', true);
}
else if (cursors.right.isDown)
{
    player.setVelocityX(160);

    player.anims.play('right', true);
}
else
{
    player.setVelocityX(0);

    player.anims.play('turn');
}

if (cursors.up.isDown && player.body.touching.down)
{
    player.setVelocityY(-330);
}

A primeira coisa a fazer, é verificar se a tecla esquerda está sendo pressionada. Se ela estiver, aplicaremos uma velocidade horizontal negativa e iniciaremos a animação “left”. Se a tecla pressionada for a direita, faremos o oposto e utilizaremos a animação “right”. Em cada frame, criaremos um estilo de movimento “stop-start”.

Agora, precisamos adicionar um pulo, para podermos ir para as plataformas suspensas, correto? Clicaremos na tecla com a seta para cima para pular, testando se ela está pressionada e se o player está no chão. Se ambas as condições forem atendidas, aplicaremos uma velocidade vertical de 330 px/s sq. O player voltará para o chão, devido à gravidade.

imagem

Esse é o resultado esperado para esta situação. Verifique isso em part7.html.

Você pode verificar o artigo original em inglês em: https://phaser.io/tutorials/making-your-first-phaser-3-game/part8

Está gostando desta sequência de artigos? Comente abaixo!

Azure DevOps + Docker + Node.js

Veja nesse artigo como automatizar o processo de deploy do seu projeto utilizando Docker e o Azure DevOps.

Dando continuidade ao meu artigo anterior: publicando imagem Docker no Azure Web App for Containers em 7 passos, hoje eu irei demonstrar como automatizar o processo de deploy demonstrando no artigo anterior, utilizando o Azure DevOps.

Para os próximos passos será necessário ter uma conta no Azure. Caso você ainda não tenha uma, eu recomendo a leitura do seguinte artigo: Azure DevOps + Angular + GitHub Pages, nele eu demonstro a criação de uma nova conta e a criação de uma pipeline no Azure DevOps.

Com o passo da conta OK, a sua imagem no Docker hub (passo demonstrado no artigo anterior) e o seu projeto já publicado no Web App for Containers. Vamos agora criar a nossa pipeline no Azure DevOps. Para isso, siga os passos abaixo:

Clique em pipelines:

Criando pipeline no Azure DevOps

Em seguida clique em Create Pipeline:

Criando pipeline no Azure DevOps

Agora clique em Use the classic editor:

Selecione o local do seu repositório, para esse exemplo eu irei utilizar um projeto versionado no meu GitHubnode-azure-7-steps. Clique nos três pontos e selecione o seu projeto:

GitHub Azure DevOps

Em seguida selecione a sua branch:

Selecionando branch Azure DevOps

Agora selecione o template Docker container.

Docker no Azure DevOps

Esse template deve criar dois stepsBuild an Image para criar uma nova versão da imagem do seu projeto e Push an image, para publicar a imagem no no seu repositório de imagens, nesse artigo eu irei enviar para o Docker Hub.

Build imagem docker no Azure DevOps

Agora vamos dar permissão para pipeline subir uma nova versão da sua imagem no Docker Hub. Para isso, siga os passos abaixo:

Clique em Push an image, em Container Registry Type selecione Container Registry, em seguida selecione a sua conexão.

Caso não tenha uma conta registrada ainda, clique em + New e preenche a modal com os seus dados de acesso no Docker Hub.

Em seguida clique em Include Latest Tag:

E no nome da imagem coloque o seu usuário do dockerhub e o nome da sua imagem no passo de build e release:

Build

Release

Para verificar se tudo esta OK, clique em Save & queue e rode o processo:

build imagem doker no Azure DevOps

Quando esse processo finalizar você deve receber o resultado abaixo:

Build OK Azure DevOps

Com o processo do build OK, vamos criar a nossa release. Para isso, clique em Releases -> New pipeline e selecione o template Azure App Service deployment.

Clique em Artifacts e preencha conforme os passos abaixo:

  • Project: nome do projeto
  • Source (build pipeline): sua pipeline de build
  • Default version: versão que deve pegar
  • Source alias: nome do artefato

Criando relase node.js + docker no Azure DevOps

Agora clique em 1 job e forneça os dados do seu projeto no Azure Web App for Containers conforme lista abaixo:

  • Display name: nome da aplicação
  • Azure subscription: Subscription no Azure
  • App name: nome da sua aplicação no Azure
  • Image name: nome da imagem com o sufixo latest

Obs.: Esse sufixo garante que iremos sempre pegar a ultima versão da imagem criada.

Agora para verificar se todos passos anteriores estão OK, clique em Create release para gerar uma nova release do seu projeto:

Criando release Azure DevOps

Ao clicar em Create Release irá subir a seguinte mensagem:

Clique na sua Release para acompanhar o processo de deploy. Caso tudo esteja OK você deve receber o retorno abaixo:

Agora clique em Succeed:

Em seguida clique em Azure Wer App on Container Deploy:

E dentro do log copie a URL do seu projeto:

Agora para finalizar, cole a url no seu navegador e verifique se a ultima alteração do seu projeto esta nessa versão publicada:

Bom, a ideia desse artigo era demonstrar como automatizar o processo de deploy criado em um dos meus artigos anteriores.

Espero que tenham gostado e até um próxima artigo pessoal 😉

Confira o artigo original em: https://medium.com/xp-inc/azure-devops-docker-node-js-90cff720af22

Gostou deste artigo? Comente abaixo!