3D

O que se pode fazer com JavaScript hoje em dia?

Olá, Web Developers!

O JavaScript inicialmente foi criado como um complemento para o navegador da Netscape. Por muito tempo foi visto como uma linguagem ruim, bagunçada e lenta (e estavam certos).

Mas o JavaScript evoluiu muito. Hoje em dia é bem mais organizado, rápido e possui várias funcionalidades que nos facilitam criar várias coisas. Além disso, a linguagem não se limita mais apenas aos navegadores.

Vamos conhecer algumas áreas onde podemos atuar com JavaScript além do seu uso comum e até além dos navegadores. Dessa maneira você poderá usar seus conhecimentos em JavaScript e escolher entrar em alguma área além da web, como desenvolvimento de jogos, robótica, automação, etc.

Observação: esse post não incentiva o uso de JavaScript para tudo. Há de se ponderar a melhor ferramenta/tecnologia para o problema que se precisa resolver.

Node.js

Node.js

Não tem como começar essa lista sem falar do Node. Ele é basicamente uma ferramenta que executa o JavaScript fora do navegador. Quando instalado, chamamos o Node.js pelo terminal. Como não estamos executando o JavaScript em um navegador, os cuidados com segurança são diferentes.

Há várias funcionalidades disponibilizadas para o Node.js, fazendo com que possamos fazer coisas com JavaScript que não conseguimos fazer quando o nosso ambiente é o navegador.

Um exemplo é o acesso a arquivos. Um código JavaScript no navegador não consegue acessar os arquivos do usuário, pois seria uma falta de segurança você entrar em um site e ele vasculhar seu computador.Como o Node.js está instalado em sua máquina, o JavaScript tem liberdade de acessar os arquivos contidos no HD.

O Node.js possibilitou a criação de várias outras ferramentas para podermos usar JavaScript fora do navegador, e hoje em dia é um conhecimento obrigatório para quem quer trabalhar com JavaScript.

https://nodejs.org/

npm

O Node.js vem com o “npm” (node package manager). Com ele podemos gerenciar as dependências de nossos projetos.

Um exemplo: caso queira usar jQuery em seu projeto, ao invés de ter o trabalho de fazer download do jQuery, basta executar o comando:

$ npm install jquery

Caso queira atualizar a versão do jQuery em seu projeto, basta executar o comando:

$ npm update jquery

O npm também pode ser usado para instalar outros programas que podem nos auxiliar no desenvolvimento de nossas aplicações e executar comandos.

https://www.npmjs.com/

Testes

Quando estamos escrevendo código é preciso fazer muitos testes para assegurar que nossas funções estão retornando o valor esperado. É bom sempre testar a mesma função passando vários valores diferentes, inclusive valores que a função não aceita para ver se há necessidade de criar um tratamento para a aplicação não quebrar.

Acontece que qualquer alteração em uma função pode afetar outras funções. Então há ferramentas que facilitam a criação de testes.

Os mais famosos são: QUnit, Mocha e Jasmine.

Qualidade de Código

Quando estamos escrevendo nosso código, é muito importante mantê-lo com qualidade. Uma característica de um código de qualidade é mantê-lo uniforme.

Isso inclui sempre identar o código, padronizando a quantidade de espaços ou se será usado “tab”, se ao criar uma função você irá abrir chaves “{“ na mesma linha ou em uma linha nova, etc.

Há ferramentas como o JSLint e JSHint que analisam o nosso código e indicam se estamos mantendo as regras que foram definidas.

Automatização de Tarefas

Quando estamos desenvolvendo é comum precisarmos realizar certas operações para melhorar o nosso código. Um exemplo é minificar o nosso código, fazendo com que os arquivos fiquem menores, o que faz a aplicação ser carregada mais rapidamente pelo navegador.

Outras tarefas podem ser a execução de testes de qualidade, como o JSLint, ou testes de software, como o Jasmine.

Para nos auxiliar temos os automatizadores de tarefas. Os mais famosos são o Grunt e o Gulp. Podemos definir qualquer tarefa e pedir para que estas ferramentas as executem para nós.

Imagine que quando salvamos um arquivo, ele deve ser testado pelo Jasmine, analisado pelo JSLint e, se todos os testes passarem, iremos minificar o arquivo.

E mais! Podemos querer também que se tudo der certo, ele envie um E-mail para o nosso cliente dizendo que em breve iremos lançar uma nova versão da nossa aplicação!

Eles nos ajudam a automatizar o que quisermos, o limite é sua imaginação!

Servidores

Normalmente os códigos escritos no lado do servidor são feitos com linguagens como Java, PHP, Ruby, etc.

Com o Node.js foi possível começar a escrever código para o servidor com JavaScript. Já houve outras tentativas, mas o Node.js teve mais sucesso.

Os frameworks mais conhecidos para Node.js são: Express, Hapi e Koa.

Também podemos criar código Back End com o Meteor. O Meteor é uma plataforma de desenvolvimento fullstack (front e back end).

Bancos de Dados

O MongoDB é um banco de dados orientado a documentos. O console que usamos para acessar os dados executa JavaScript. Então se você sabe JavaScript, pode ter facilidade em aprender a gerenciar o MongoDB.

https://www.mongodb.com/

Aplicativos Mobile

Com JavaScript também podemos criar aplicativos mobile. A vantagem é usar uma única linguagem de programação para as diferentes plataformas. O modo mais conhecido é usando o Cordova/PhoneGap. Com eles nós criamos aplicações híbridas.

São chamadas de “híbridas” porque unem duas tecnologias diferentes. Por exemplo, o código nativo do Android é escrito em Java. Com o Cordova nós criamos aplicações web comuns, com HTML+CSS+JavaScript. Para acessar funcionalidades do dispositivo, há uma integração do código nativo em Java e nós acessamos essas funcionalidades pelo JavaScript.

Quando abrimos o aplicativo, estamos na verdade abrindo um navegador interno que irá apresentar a nossa aplicação e que pode acessar funcionalidades do dispositivo que não poderíamos acessar a partir de uma aplicação web comum.

Então a ideia de “híbrido” é porque estamos juntando tecnologia web com a tecnologia nativa.

http://facebook.github.io/react-native/

Também podemos criar aplicações nativas. As ferramentas mais conhecidas são o React Native e o NativeScript. Com eles nós criamos telas com XML ao invés de HTML, e podemos estilizar com CSS. Isso será convertido para uma tela nativa de cada plataforma, como Android e iOS. Já as ações são escritas com JavaScript mesmo.

A vantagem disso é que, por ser uma aplicação nativa ao invés de uma aplicação com um navegador, teremos melhor performance do que uma aplicação híbrida.

Outra vantagem é que as aplicações híbridas dependem do navegador padrão do sistema, então corremos o risco de criar um código que o navegador daquele dispositivo não suporte. Em uma aplicação nativa, já que não dependemos de navegadores, não precisamos nos preocupar se haverá suporte para as funcionalidades ou não.

Softwares Desktop

Com o Node.JS também é possível criar aplicações Desktop. Estas aplicações normalmente utilizam o Chromium, navegador de código aberto que está por trás do Google Chrome, e o Node.js.

As telas são feitas com HTML5 e CSS3, e o JavaScript pode se comunicar diretamente com o Node.js, que fica embutido na aplicação.

Atualmente o framework mais utilizado é o Electron, criado pela equipe do GitHub. Com ele já foram desenvolvidos famosos softwares como o Atom, Slack e Visual Studio Code.

https://electronjs.org/

SmartTVs

Também é possível criar aplicativos para SmartTVs. Você irá também usar HTML/CSS/JavaScript. As que dão maior suporte para isso são as TVs da Samsung.

3D

A partir do elemento canvas do HTML5 também temos uma API chamada WebGL. Ela nos ajuda a trabalhar com renderização de gráficos 2D e 3D.

Uma biblioteca que nos ajuda a trabalhar com 3D com JavaScript é o three.js.

https://threejs.org/

Jogos

Também é possível criar jogos com JavaScript. Isso graças ao elemento canvas do HTML5, que nos permite desenhar na tela com JavaScript.

Há várias bibliotecas que nos ajudam a criar jogos com JavaScript.
Uma das mais famosas é o Impact, que é paga. Uma outra famosa, que é gratuita, é o Phaser.

Como os jogos apenas usarão o elemento canvas do HTML5 e JavaScript, você poderá criar jogos para qualquer lugar que os suporte ou possua um navegador.

Pode-se usar ferramentas como o Cordova/Phonegap, mas também há outras ferramentas que ajudam a otimizar jogos feitos com JavaScript para dispositivos móveis.

Plugins

Há softwares que possibilitam a criação de plugins. Isso permite que as pessoas criem novas funcionalidades para eles. Normalmente esses plugins são escritos com linguagens de scripts.

Um exemplo é o PhotoShop. Ele aceita a criação de plugins escritos em JavaScript.

Sistemas Operacionais

Um sistema baseado no Node.js, escrito apenas com JavaScript, foi desenvolvido. É o NodeOS.

Qualquer pacote do npm é um pacote do NodeOS, o qual conta com mais de 475.000 pacotes. O objetivo do NodeOS é fornecer apenas o necessário e o npm cuida do resto. Já que qualquer um pode contribuir com o npm, qualquer um pode criar pacotes para o NodeOS.

Você pode ver mais em:

http://node-os.com/

Programação de Hardwares e Internet das Coisas

Com o Node.JS também é possível controlar hardwares. Podemos então usar o JavaScript para trabalhar além das telas dos computadores e celulares, como controlar drones.

Ao programar placas, podemos criar códigos para até mesmo integrar vários objetos, o famoso “Internet das Coisas” (IoT).
Imagine usar JavaScript para controlar as lâmpadas, portas e janelas de sua casa de acordo com a iluminação do ambiente. Ou que quando o GPS do seu smartphone perceber que você está chegando em casa ou no trabalho, ligue a cafeteira para que o café esteja pronto quando você chegar.

Um exemplo é o noduino, um framework para acessar os controles básicos do Arduino a partir de aplicações web usando HTML5, Socket.IO e Node.JS.

Também há o projeto Tessel. No próprio site você pode comprar as placas para montar o seu produto.

Outro famoso projeto é o Cylon.js. Ele é um framework voltado para robótica, computação física e Internet das Coisas.

Você pode ver mais em:

Hologramas

O JavaScript também é capaz de ser utilizado com hologramas.
Um exemplo é o HoloJS, da Microsoft, que é um framework para criar aplicações holográficas usando JavaScript e WebGL.

Realidade Virtual e Realidade Aumentada

Muito se fala sobre Realidade Virtual e Realidade Aumentada. Um exemplo para realidade aumentada é o JavaScript ARToolKit.

https://github.com/artoolkit/jsartoolkit5

Inteligência Artificial

Também podemos aproveitar o JavaScript na área da inteligência artificial. Há muitas bibliotecas e exemplos.

Uma biblioteca usada para isso é a “deeplearn.js”, que você pode conhecer melhor em:

https://deeplearnjs.org/ .

Concluindo

Hoje em dia várias linguagens de programação tentam estar onipresentes, como é o caso do JavaScript. Porém, nem sempre é algo bom. Não existe “bala de prata”. Há linguagens que estão mais evoluídas e adaptadas para certas áreas.

Mesmo que JavaScript seja minha linguagem principal, há momentos em que prefiro usar outras linguagens de programação, pois admito que possuem ferramentas melhores para se trabalhar e acabam entregando algo com mais rapidez e qualidade.

A vantagem que enxergo em utilizar uma única linguagem em várias áreas é possibilitar que uma pessoa com conhecimento em uma linguagem possa experimentar novas áreas, ou que uma pequena empresa possa reaproveitar os conhecimentos da equipe e códigos para trabalhar com outras tecnologias.

NavMesh na Unity 3D

Um assunto muito importante mas pouco discutido dentro do mundo dos desenvolvedores de jogos é a utilização do NavMash. O que é algo estranho, já que a não utilização dessa ferramenta pode desencadear uma porção incalculável de bugs que seriam uma vergonha para o resto da vida. Agora, você deve estar se perguntando sobre qual ferramenta é essa que estamos falando, né?

Vou explicar. Certamente você já deve ter jogado algum game onde um dos NPCs fica travado em algum lugar, porém, correndo como se estivesse competindo na São Silvestre.

Se você já assistiu o filme Detona Ralph sabe que essa cena faz uma piada com um bug, o que era comum na época mas que persiste até hoje que é o de um personagem ser barrado por uma parede ou qualquer outro objeto, mas mesmo assim continuar andando.

Esse bug já era tosco na época e continua sendo até hoje. Só que o mais estranho é que mesmo com o passar dos anos os desenvolvedores pensam mais em efeitos visuais do que em evitar coisas desse tipo. Não é difícil evitar uma bizarrice dessa, game engines atuais geralmente oferecem uma forma simples de se contornar esse problema.

Então, nesse artigo, veremos como evitar esse tipo de problema em uma das game engines mais conhecidas e usadas no mundo, a Unity.

Se você não conhece a Unity, aconselho que visite o seguinte site:

https://unity3d.com/pt

Dê uma olhada em tudo o que essa fantástica ferramenta pode te oferecer, e tenho certeza que vai adorar, depois faça o download e continue lendo.

Ah, claro, se tiver interesse, temos alguns cursos sobre essa maravilhosa engine no TreinaWeb:

Com a Unity instalada, você vai ter a opção de criar um projeto. Selecione “Projetos 3D” e depois defina um nome e um local para salvá-lo.

Feito isso, nosso projeto será criado e teremos como resposta a seguinte imagem:

Veja que o projeto está vazio, tendo apenas alguns poucos objetos dentro de cena, como uma câmera e uma Luz. Então, para reproduzir um efeito NavMesh precisamos criar um pequeno cenário, onde podemos usar uma Plane como chão, alguns cubos como obstáculos e um cilindro para representar um personagem. Então, mãos à obra!

Primeiro, para criar uma plane para chão, é necessário ir no menu superior na opção GameObject => 3D Object => Plane.

Feito isso, você vai ter uma plane adicionada à sua cena, como mostra a imagem abaixo:

Agora, para criar os cubos que vão servir de obstáculos, é preciso ir novamente ao menu superior em GameObject => 3D Object => Cube.

Isso fará com que um cubo seja criado dentro da nossa cena, como mostra a imagem abaixo:

Repita esse processo algumas vezes para criar um número de obstáculos que deixe o exemplo mais interessante.

Veja que no meu caso criei 4 cubos.

Ok, até esse ponto tudo andando perfeitamente, mas a visualização da cena esta muito ruim, então vamos criar materiais para dar uma cor para o chão e para os cubos. Para fazer isso, basta ir na aba Project, clicar com o botão direito do mouse sobre a pasta Assets (àquela que é criada por padrão dentro da Unity).

Clique com o botão direito sobre essa pasta e selecione a opção Create => Material.

Isso vai criar um material padrão com a cor branca.

Veja que para esse material dei o nome de “Chão”, seguindo essa mesma lógica, vou criar mais um material com o nome de “obstáculo”.

Veja:

Agora, basta mudar as cores de cada material e depois aplicar em cada objeto dentro da cena. Para mudar a cor do material é muito simples, clique na caixa de cor branca ao lado de Albedo.

Na caixa de seleção de cores escolha uma cor para o chão e depois repita esse processo para adicionar uma cor para o obstáculo.

Veja:

Agora, clique e arraste cada um desses materiais para seus devidos objetos em cena para que seja possível conseguir um resultado como o exibido na imagem abaixo:

Estamos com a nossa cena pronta. Vamos adicionar um caminho para ser percorrido. Para que isso seja feito é necessário antes de tudo determinar todos os objetos de cena como estáticos. Isso é feito selecionando cada um deles e deixando marcado a opção Static.

Agora nos resta criar o caminho a ser percorrido pelo personagem. Esse caminho é criado com auxílio da janela Navigation que se não estiver em evidência pode ser adicionada à interface da Unity clicando em Window => Navigation.

Prontinho! Agora essa janela estará disponível na Unity como podemos ver na imagem abaixo:

Para criar o caminho é muito simples, apenas clique em Bake e veja a mágica acontecer:

Veja que no chão da nossa cena foi criado um caminho em azul claro, isso significa que o personagem só vai andar sobre aquela região, sendo possível identificar os obstáculos e analisar as melhores rotas para chegar em um determinado local.

Agora, vamos criar um personagem para percorrer esse caminho. Crie um cilindro dentro dessa cena indo até o menu superior GameObject => 3D Object => Cylinder.

Vamos posicionar esse cilindro na cena, como mostra a imagem abaixo:

Para que tenhamos efeitos físicos nesse objeto, precisamos adicionar a ele um componente chamado RigidBody que oferece características físicas ao cilindro, fazendo com que o mesmo sofra com a força da gravidade, por exemplo.

Agora vamos adicionar o NavMeshAgen. Esse componente pode ser adicionado ao cilindro indo até o menu superior em Component => Navigation => NavMeshAgent.

Ele atribui ao cilindro algumas características como aceleração, velocidade entre outras que podemos notar na imagem abaixo:

Maravilha! Agora sim fechamos a etapa de construção do NavMesh de sua forma visual. Para finalizar, vamos criar um código para fazer com que tudo isso ganhe vida.

Para criar o código é necessário ir na aba Project dentro da pasta Assets e criar um arquivo de código C# ou JS, no meu caso vou criar um C# veja:

Veja que para criar um arquivo de código é muito simples, basta clicar com o botão direito sobre a pasta Assets, depois em Create e por fim escolhemos o tipo de código que o arquivo deve ter. Com o arquivo criado, podemos dar um nome para ele, no meu caso o chamei de NavScript.

Clique duas vezes sobre ele para abri-lo e escreva o seguinte código:

using UnityEngine;
using System.Collections;

public class NavScript : MonoBehaviour {
    private NavMeshAgent Agent;
    public Transform Alvo;

    void Start () {
        Agent = GetComponent<NavMeshAgent> ();
    }

    // Update is called once per frame
    void Update () {
        Agent.SetDestination (Alvo.position);
    }
}

Veja que a primeira coisa que fiz foi criar dois atributos onde um pega o NavMeshAgent e o outro pega o alvo que será o local onde o cilindro precisa chegar.

private NavMeshAgent Agent;
public Transform Alvo;

Depois em Start() é necessário pegar o componente do NavMeshAgent com a seguinte linha de código:

Agent = GetComponent<NavMeshAgent> ();

E por fim, em Update(), vamos adicionar o código que faz com que o cilindro se movimente até chegar no alvo.

Agent.SetDestination (Alvo.position);

Nesse momento, você deve estar um pouco confuso, não? Afinal, não falamos de nenhum alvo na construção da nossa cena, né? Mas, tudo bem, isso será criado agora!

Dentro da cena vamos criar um cubo que será o alvo. Veja:

Aí está! Esse cubo é o alvo do nosso cilindro. Agora vamos adicionar o código que criamos ao cilindro. Para fazer isso, basta “arrastar” o código sobre o cilindro. Depois disso, com o cilindro selecionado, vamos adicionar ao campo de alvo o cubo que acabamos de criar, também arrastando o cubo até o local apresentado na imagem abaixo.

Pronto! Agora é só executar o exemplo e ver tudo funcionando. Espero que tenham gostado dessa dica Gamer. =)

Até a próxima!

JUNTE-SE A MAIS DE 150.000 PROGRAMADORES