Revista iMasters 26 - Maio by iMasters Redação

// MAIO 2018

R$24,00

3 // POR DENTRO DO W3C

// ANO 07

// EDIÇÃO 26 > P R O G R E S S I V E W E B A P P S

Progressive

Web Apps:

conheça parte do processo de evolução da web

CSS no JS em componentes React: vantagens x desvantagens

Foi-se o tempo em que UX Design era apenas uma escolha

Diga adeus à era do programador das cavernas!

React

iMasters #26 Maio 2018

UX Design

Falando em dev...

4 // POR DENTRO DO W3C

iMasters #26 Maio 2018

// 5

EDITORIAL

NESTA EDIÇÃO DA REVISTA IMASTERS, TROUXEMOS COMO MATÉRIA DE CAPA OS PROGRESSIVE WEB APPS. Loiane Groner abordou diversos aspectos do tema: utilidade, anatomia, aplicação, o futuro dos PWA... Para quem tem interesse no assunto, ou mera curiosidade, a matéria está vasta e completa! Estamos certos de que vai gerar uma discussão bacana e render boas reflexões. Bruna Ciafrei trouxe uma contribuição muito interessante para essa edição: a importância do UX designer em uma empresa hoje. “Para empresas e marcas que desejam aparecer e ter resultados, o UX Design é mais que necessário. É indispensável”. Por sua vez, Raphaell Maciel de Sousa falou dos carros autônomos com “sangue” brasileiro. Em seu artigo, o autor apresentou toda tecnologia brasileira que existe na área e como a gente tem potencial para estarmos na liderança do setor. Na coluna Falando em Dev..., Diego Pinho tratou do mito do programador das cavernas. Esse estereótipo de profissional está cada dia mais com os dias contados. Veja o porquê. Ainda temos Ricardo Ogliari falando sobre Geolocalização 360; A coluna da W3C tratando sobre a Web na era da Computação Cognitiva; Aline Bastos questionou: quais as vantagens e desvantagens do CSS no JavaScript em componentes React? e muito mais! Espero que vocês aproveitem a revista tanto quanto nós aprendemos nesse processo de construção desta edição!

Abraços e até a próxima! Mariana Anselmo Editora da Revista iMasters www.imasters.com.br | redacao@imasters.com.br

iMasters #26 Maio 2018

6 // EXPEDIENTE

// MAIO 2018

// ANO 07

// EDIÇÃO 26 > P R O G R E S S I V E W E B APPS

Tiago Baeta Publisher

CORPO EDITORIAL

Mariana Anselmo (MTB 0083858/SP) Jornalista Responsável Mariana Anselmo Editor

Mariana Anselmo Editor Nathália Torezani Revisão Reinaldo Silotto Conteúdo

Nathália Torezani Revisão Alex Lattaro, Aline Bastos, Bruna Ciafrei, Diego Pinho, Joselito Júnior, Loiane Groner, Kemel Zaidan, Raphael Maciel, Reinaldo Ferraz, Ricardo Ogliari e William Oliveira Colaboradores Zupi Projeto Gráfico e Diagramação Eskenazi Indústria Gráfica Gráfica Grupo iMasters Organização

Rodrigo PokemãoBr Conteúdo

Rua: Oscar Freire, 2379 Cep: 05409-012 Cerqueira Cesar +55 11 3063-5941 redacao@imasters.com.br @iMasters /PortaliMasters Os artigos assinados são de responsabilidade dos autores e não refletem necessariamente a opinião da revista. É proibida

1.800 exemplares ISSN 1981-0288

a reprodução total ou parcial de textos, fotos e ilustrações por qualquer meio, sem prévia autorização dos autores ou dos edi-

Errata: Na edição #25 da Revista iMasters, na matéria de capa, intitulada “A revolução do blockchain”, a ordem das duas imagens saiu invertida.

www.zupidesign.com +55 11 3926 0174

iMasters #26 Maio 2018

tores da publicação.

DROPS DO M E R CTECNOLOGIA AINOVAÇÃO DO

// 7

C U R S O S D E C U R TA D U R A Ç Ã O

NEGÓCIOS

CHATBOTS: DO ZERO AO COGNITIVO

TOGAF FOUNDATION NÍVEL 1

MINDFUL LEADERSHIP

BITCOIN E BLOCKCHAIN

BIG DATA SCIENCE MACHINE LEARNING E DATA MINING

CREATIVE ENGINEERING

CREATING DASHBOARDS FOR B.I.

FIREBASE ADVANCED MOBILE & IOT

UX - CREATING KILLER EXPERIENCES

DESIGN SPRINTS

INTELIGÊNCIA COMPETITIVA E COGNITIVA

BIG DATA COM ECOSSISTEMA HADOOP E SPARK

E MAIS 50 CURSOS ACESSE O NOVO:

www.fiap.com.br/shift

iMasters #26 Maio 2018

8 //

SUMÁRIO COLUNAS 24

RicardoOgliari MOBILIDADE É TUDO Geolocalização 360

William Oliveira MENTORIAS

Diogo Cortiz e Newton Calegari W3C A Web na era da Computação Cognitiva

Mentoria como meio de apoio à evolução dos nossos funcionários

Aline Bastos

Diego Pinho FALANDO EM DEV... Diga adeus à era do programador das cavernas!

REACT

CSS no JavaScript em componentes React: quais as vantagens e desvantagens?

Kemel Zaidan CÓDIGO ABERTO Mensageiros livres

Joselito Júnior

Alex Lattaro INTELIGÊNCIA NADA ARTIFICIAL A lógica sem lógica

iMasters #26 Maio 2018

JAVASCRIPT

Afinal, existe essa tal de fadiga no Javascript?

// 9

SEÇÕES

COMUNIDADES Tech Ladies

7MASTERS Encontro iMasters de especialistas

Bruna Ciafrei

POR AÍ Conheça o Developer Commerce Hub, o mais novo espaço de co-working para desenvolvedores

UX DESIGN

Ter um UX Designer na sua empresa já não é mais escolha, e sim necessidade!

Raphael Maciel CAROS AUTÔNOMOS

Carros autônomos com “sangue” brasileiro

Loiane Groner CAPA Progressive Web Apps (PWA) e a evolução da Web

ENTREVISTA com Ari Stopassola Junior

8 Computação forense: como ela permeia o mundo da TI

iMasters #26 Maio 2018

10 // ENTREVISTA

Computação forense: como ela permeia o mundo da TI Rodrigo PokemaoBr, para revista iMasters

DESDE O COMEÇO DO ANO, muito se tem falado sobre vazamento de dados, empresas vendendo perfis de usuários e hackers divulgando listas com informações sensíveis de milhares de pessoas. Criminosos estão se aperfeiçoando e usando computadores para lesar e tirar proveito de outrem. Muitos desses casos vão a tribunal, com ações movidas por vítimas que sofreram investidas em ambientes virtuais. Nesse contexto, a justiça tem dificuldades em analisar as situações por se tratar de uma nova área, que envolve tecnologia de ponta. Em tais circunstâncias, faz-se necessário um perito forense computacional, que vai analisar o caso e “traduzir” os conceitos e termos digitais ao juiz e às partes interessadas. Mas você conhece a área da informática que estuda a computação forense? Na entrevista de hoje, conversamos com Ari Stopassola Junior, que além de desenvolvedor, é perito judicial ‘ad hoc’ especializado em TI. Ele nos mostra o que é a computação forense, qual a importância desta área nos processos judiciais e o que um dev precisa conhecer para poder atuar na área.

iMasters #26 Maio 2018

// 11

Revista iMasters: O que é especificamente computação forense e por que você acha que esse tema tem ganhado muita visibilidade nos últimos anos? Ari Stopassola Junior: A tecnologia permeia nossa vida mais do que nunca, então é natural que atualmente as informações trafeguem massivamente por meio digital em dispositivos eletrônicos. Os recursos tecnológicos surgiram em prol das pessoas, seja na busca por conhecimento, para estreitar laços pessoais ou gerar negócios. Mas também trouxe efeitos colaterais, como a alta exposição do indivíduo nas redes sociais, fato que o torna mais visado, suscetível a golpes e correndo riscos que podem ocasionar transtornos e prejuízos. Em ambiente corporativo, cada vez mais as empresas têm sofrido com a má conduta de funcionários, furto de informações, invasões cibernéticas, disseminação de pragas (vírus e malwares), sequestro de dados e outras fraudes. Também ocorre que os crimes, antes praticados no mundo analógico, estão migrando para o espaço virtual. Em todos os casos mencionados, fazse necessário o parecer técnico de um profissional especializado em computação, papel do perito forense. A perícia cível trata de conflitos judiciais nos quais o juiz pode requerer mais esclarecimentos através de um profissional altamente técnico, que seja idôneo e imparcial. Então, ele e/ou as partes nomeiam um perito forense computacional, atividade liberal exercida por profissionais de nível superior que sejam autoridades no assunto. Em litígios envolvendo Tecnologia da Informação, o perito forense é o profissional que coleta as evidências, analisa o caso e dá um parecer técnico que será apreciado pela justiça.

As perícias criminais são outro cenário em que os peritos forenses são altamente requisitados, pois tratam de infrações penais em que o Estado assume a defesa do cidadão em nome da sociedade. Nesse caso, o perito – além de graduado na área – deve ser funcionário público concursado. Há também a figura do Assistente Técnico (Lei 11.690/2008), que pode ser chamado pelas partes para complementar a perícia, responder aos quesitos e quando a situação abranger mais de uma área, demonstrando ser mais complexa. Revista iMasters: Quem é Ari Stopassola Junior? E qual a sua ligação com a computação forense? Ari Stopassola Junior: Na informática, trilhei primeiramente o caminho acadêmico, tornando-me bacharel em informática com ênfase em Análise de Sistemas (Unisinos) e fiz mestrado ‘stricto sensu’ em Engenharia de Informática e de Computadores pelo Instituto Superior Técnico da Universidade Técnica de Lisboa (Portugal). Ainda na faculdade, sempre trabalhei em paralelo, portanto minha carreira começou cedo, focada em desenvolvimento web e treinamentos, especificamente no ecossistema PHP e software livre. iMasters #26 Maio 2018

12 // ENTREVISTA

A linguagem PHP impacta minha carreira desde o começo, tanto que me certifiquei Zend Certified Engineer (PHP 5.3) em 2012, depois Zend Certified PHP Engineer (PHP 5.5) em 2014, Zend Framework 2 Certified Architect (ZFCA) em 2015 e Rogue Wave Zend Certified Engineer 2017-PHP (PHP 7.1) no ano passado. Tive o privilégio de escrever o “Guia Preparatório para a Certificação PHP”, disponível em http://leanpub.com/certificacaophp/. O desenvolvimento ágil também me atrai bastante, e certifiquei-me internacionalmente como Certified ScrumMaster pela Scrum Alliance. Respondendo à pergunta sobre a minha ligação com computação forense e perícia digital, é importante frisar que quase todos os meus familiares são da área do Direito. Sempre prestei consultoria em TI para escritórios de advocacia (suporte e desenvolvimento), e boa parte do nosso círculo de amizade é de advogados. Foi quando, a partir de 2011, começaram a surgir perícias judiciais envolvendo computadores, smartphones, cartões de ponto e outros dispositivos. O volume de perícias ainda era modesto, mas senti que deveria me preparar. Para aumentar minhas habilidades, tornei-me Microsoft Certified Professional (MCP) e recentemente passei no teste como AccessData Certified Examiner v6 promovido pela empresa AccessData – fabricante da maior suíte de software especializado na área de computação forense: o FTK (Forensic Toolkit). No intuito de ter mais segurança e respaldo nas minhas perícias, em meados do ano passado, ingressei numa pós-graduação ‘lato sensu’ em Computação Forense & Perícia Digital. iMasters #26 Maio 2018

Revista iMasters: Quais as qualificações que um profissional deve ter para poder trabalhar com computação forense? Ari Stopassola Junior: Quanto aos requisitos, o Art. 145 §1º do Código de Processo Civil diz que “Os peritos serão escolhidos entre profissionais de nível universitário, devidamente inscritos no órgão de classe competente”. Porém, nas localidades onde não houver profissionais qualificados que preencham os requisitos, a indicação dos peritos será de livre escolha do juiz (segundo o art. 145, §3º do CPC). A busca do perito é responder aos questionamentos das partes do processo (através de seus procuradores) e atender ao magistrado quanto às dúvidas técnicas. O perito tem o poder de exigir documentos, mídias, dispositivos ou solicitar quaisquer recursos que o auxiliem na construção do laudo e desempenho de suas atribuições no processo (Art. 429 do CPC). Além da ética e postura neutra, o perito deve ter total proficiência no proceder das análises de evidências, com ações contundentes e esclarecedoras em tempo hábil. O laudo técnico requer conhecimento científico e total imparcialidade, auxiliando no livre convencimento dos magistrados. É importante mencionar que os peritos poderão sofrer pressões de alguma parte no processo para a realização de análises tendenciosas, distorcendo os fatos. Essa conduta gera “falsas perícias”, o que caracteriza crime!

// 13 Revista iMasters: Existe algum tipo de ferramenta que auxilie o trabalho com computação forense?

“A característica mais importante de um perito é a ética” Ari

Revista iMasters: Até onde vai a atuação de um perito “civil” e de um perito “oficial”? Ari Stopassola Junior: Os peritos ditos “oficiais” são policiais concursados graduados em informática. Porém, a demanda é crescente, e os peritos oficiais (funcionários públicos), sejam do IGP (Instituto-Geral de Perícias) ou da Polícia Federal, estão demasiadamente sobrecarregados, especialmente com crimes cibernéticos e aqueles de repercussão nacional. Em paralelo, cada vez mais o judiciário se depara com situações envolvendo tecnologia, nas quais o juiz tem dificuldade em julgar porque o caso requer conhecimentos bastante específicos de informática. Dentre eles podemos citar: violação de cartão-ponto (Justiça do Trabalho), fraudes bancárias (Cível), mensagens comprometedores de WhatsApp (Direito de Família), conflitos na entrega de um software customizado, calúnia/difamação/injúria em redes sociais, ataques em hospedagens web, propriedade intelectual, pirataria, pornografia infanto-juvenil, sonegação fiscal, disseminação de vírus, falsificação de documentos, tráfico de entorpecentes etc. Como esse tipo de conflito ou crime vem aumentando significativamente, os juízes têm a liberdade de nomear especialistas particulares de sua confiança. Para que o perito esteja habilitado e disponível para ser chamado, ele precisa se cadastrar no site do Tribunal ou manifestar interesse diretamente na Comarca com a qual ele tem proximidade.

Ari Stopassola Junior: O trabalho do perito digital consiste em quatro etapas: preservação, extração, análise e formalização. A preservação garante que os dados obtidos bit-a-bit do dispositivo não sejam alterados na fonte. A extração processa todos os dados do dispositivo, mesmo “camuflados”, corrompidos ou até apagados. A etapa de análise é onde encontramos e interpretamos as evidências. Por fim, a formalização expõe o resultado do exame através de um laudo pericial. Existem vários softwares (por linha de comando e interface gráfica) de diferentes desenvolvedores, especializados em alguma etapa individualmente. Sabe-se que é mais prática a utilização de uma suíte de ferramentas que contemplem todos os estágios, que trabalhem de forma integrada, com uma mesma identidade (visual e de nomenclatura). As ferramentas mais difundidas atualmente são soluções comerciais. A mais popular chama-se Forensic Toolkit (FTK), desenvolvida pela AccessData e também o EnCase, da Opentext (antiga Guidance), ambas pagas e que rodam sob plataforma Windows. Mas também existem soluções integradas interessantes em software livre, como Autopsy e IPED, baseados no The Sleuth Kit (TSK). Revista iMasters: Como um perito deve se portar durante o processo? Ari Stopassola Junior: O perito digital produz laudos que devem ser autoexplicativos aos leigos. Por vezes, os advogados das partes fazem perguntas, chamadas de quesitos, para que prestem seus esclarecimentos. Mas nada impede que os peritos sejam chamados à audiência para testemunhar. A característica mais importante de um perito é a ética. iMasters #26 Maio 2018

14 // REACT

CSS NO JAVASCRIPT EM COMPONENTES REACT: QUAIS AS VANTAGENS E DESVANTAGENS? Aline Bastos, desenvolvedora front-end, mentora e escritora Se você, assim como eu, já trabalha com desenvolvimento web há um tempo, provavelmente aprendeu que nunca devemos misturar nosso código JavaScript com o nosso código HTML, e sempre evitar colocar estilos diretamente nos elementos (estilo inline). Desde meados dos anos 2000, o conceito de padrões web determina que recursos de marcação, estilização e comportamento devem ser mantidos em arquivos separados. Dessa forma, aprendemos que o correto é separar cada um desses tipos de arquivos em diretórios distintos e apenas referenciá-los quando necessário através de imports e links, por exemplo:

<! -- importando js e css para uma página HTML --> <script src=”js/arquivo.js></script> <link rel=”stylesheet” type=”text/css” href=”css/style.css”>

iMasters #26 Maio 2018

Esse conceito se manteve por muito tempo e continua sendo usado para muitos projetos. No entanto, a forma de estruturar as páginas web, especialmente as aplicações web, começou a mudar nos últimos anos, quando o JavaScript se tornou uma linguagem mais robusta e ganhou maior visibilidade. A linguagem que antes só era usada no front-end, tornou-se extremamente flexível e mais poderosa através do ecossistema NodeJS, que é usado no back-end. Foi esse o marco para o surgimento no mercado de uma verdadeira infinidade de tecnologias e ferramentas baseadas em JavaScript. Esse “boom” começou a mudar alguns velhos paradigmas da programação, e um deles foi o de como devemos desenvolver aplicações web. Dentre as inúmeras bibliotecas e frameworks que surgiram nesse período, algumas delas se destacaram, como foi o caso do React. Essa tecnologia, desenvolvida e mantida pelo Facebook, hoje é a principal escolha quando se trata de desenvolvimento

// 15

front-end. Isso porque o React trabalha com a ideia de componentização, baseada na especificação de WebComponents. Neste artigo, vamos ver o que significa esse conceito de componentização utilizando o React e por que a ideia de misturar HTML, CSS e JavaScript já não é mais um absurdo. Componentização e estilos O conceito de componentização tem sido cada vez mais utilizado e, por consequência, muitas das diferentes opções para estilizar as aplicações vêm surgindo com o objetivo de deixar os componentes de uma aplicação web mais independentes. Como citado, a componentização nada mais é do que o processo de quebrar o código da sua aplicação em pedaços menores, independentes entre si, facilitando assim a sua (re)utilização e a manutenção. Não há maneira certa nem errada de se fazer isso, tudo depende do seu projeto. Por exemplo, poderíamos dividir a página do iMasters em três componentes:

Agora quando paramos para pensar em qual seria a melhor maneira de estilizar esses componentes, temos quatro opções: CSS Inline Styled Components CSS Módulos Folhas de estilo A seguir, vamos explorar cada uma das formas de usar o CSS embutido nos componentes utilizando o React como base dos nossos componentes. CSS Inline Existe um grande debate sobre o uso de estilos inline, e cada lado desse debate tem inúmeros argumentos defendendo se o seu uso seria uma prática boa ou ruim. Não vem ao caso neste artigo debatermos a respeito, mas é interessante gastar um tempo para ler a respeito desses argumentos e tirar as próprias conclusões.

Header

Artigos destaque

Artigos

Essa abordagem tem vários benefícios:

Geralmente, o uso de estilos inline acontece quando é realizada uma alteração dinâmica de uma propriedade CSS via JavaScript. Isso é feito com bastante recorrência pelas diversas bibliotecas JavaScript disponíveis no mercado. Exemplo de CSS inline:

Facilidade na hora de testar a aplicação Facilidade de reutilização do código Facilidade para dar manutenção Facilidade para identificar e remover código sem uso

iMasters #26 Maio 2018

16 // REACT

const divStyle = { margin: ‘30px 0’, padding: ‘15px’, border: ‘1px solid #ccc’ }; const pStyle = { fontSize: ‘16px’, textAlign: ‘center’ }; <div style={divStyle}> <p style={pStyle}>Inline styles</p> </div>

Um dos problemas que enfrentamos ao utilizar CSS puro inline, como mostrado no exemplo acima, é que você não terá acesso a determinados recursos nativos do CSS, como pseudo-selectors, pseudo-elements, media queries, keyframe animations, entre outros. Além disso, pode acabar sendo mais difícil estilizar as tags html e body utilizando esse recurso. Uma questão a ser observada é que o navegador gasta mais tempo com a renderização do CSS nos scripts, pois precisa mapear todas as regras de estilos passadas para o componente, sendo que a renderização com regras reais do CSS é muito mais rápida. Styled components Styled-components é uma biblioteca para React e React Native que permite que você use estilos em nível de componente em sua aplicação. Esses estilos são escritos com uma mistura de JavaScript e CSS. Ao contrário do CSS Inline, com styled-components é possível utilizar media queries de forma similar à que utilizamos com pré-processadores. Sem contar que também é possível utilizar elementos aninhados, pseudoelementos e inclusive estilizar as tags html e body. Assim como no CSS Inline, será necessário colocar o código CSS no mesmo arquivo do seu componente, tornando-o dessa forma completamente independente e desacoplado do restante da aplicação, o que pode ser uma excelente vantagem. Para utilizar styled-components, é necessário realizar sua instalação, seja via npm ou yarn. Uma vez instalados, a importação da biblioteca é realizada no arquivo do componente onde será utilizada, como se pode visualizar no exemplo abaixo: iMasters #26 Maio 2018

import React from ‘react’; import styled from ‘styled-components’; const DivStyle = styled.div` max-width: 1000px; margin: 0 auto; @media (max-width: 1020px) { padding: 0 10px; } `; const TextStyle = styled.p` font-size: ‘16px’, text-align: ‘center’, &:hover { color: red; } `; const Container = () => ( <DivStyle> <TextStyle>Styled Components</ TextStyle> </DivStyle> ) export default Container;

CSS Modules CSS Modules (ou Módulos de CSS, em tradução livre) são composições de arquivos CSS em que todos os nomes de classe e animações são definidos em um escopo local como padrão. O termo-chave aqui é escopo local. Guarde esse conceito. CSS Modules não são uma biblioteca ou ferramenta externa, mas sim um processo que se utiliza de uma arquitetura de componentização. Utilizando essa biblioteca, os nomes das classes CSS se tornam semelhantes a variáveis locais em JavaScript, o que facilita muito a utilização. Para que possa funcionar adequadamente, essa técnica requer uma configuração específica que deve ser feita via Webpack. Nesse caso, o Webpack será o responsável por executar toda a magia entre o HTML, o JavaScript e o CSS.

// 17

import React from ‘react’; import styles from ‘./Box.css’; const Box = () => ( <div className={styles.container}> <p className={styles.text}>CSS Modulos</p> </div> ); export default Box;

A premissa do CSS Modules é de que cada componente React possui seu próprio arquivo CSS, que está no escopo desse arquivo e componente. Na compilação (build), os nomes das classes locais são mapeados, gerados automaticamente e exportados como um objeto JS para ser utilizado no React. Folhas de Estilo A última forma de usar o CSS dentro de componentes React é o tradicional import de um arquivo externo CSS que concentra todas as regras de estilo.

import React from ‘react’; import ‘./Box.css’; const Box = () => ( <div className=”Box”> <p className=”Box_text”>Folhas de Estilo</p> </div> ); export default Box;

Como pode ser verificado no exemplo acima, basta importar o arquivo css ‘./Box.css’ para que seja possível ter um arquivo CSS separado para cada componente. Essa é a forma mais comum de utilização em qualquer aplicação, seja em React ou outro tipo de framework, e que mantém seus arquivos CSS independentes dos códigos HTML e JavaScript, além de não ter a necessidade de nenhuma instalação ou configuração. O que usar hoje? Como vimos no decorrer deste artigo, há várias opções disponíveis. Para quem gosta de CSS puro ou quer ser mais conservador, pode usar as Folhas de Estilo tranquilamente. Quem não quer se preocupar com conflitos de nomes de classe, vá de CSS Modules. Se você estiver desenvolvendo para React Native, styled-components é perfeito. Independentemente da tecnologia que você usar, o importante é ter uma arquitetura de estilos bem definida, sendo intuitiva para outros desenvolvedores que forem contribuir com o projeto. Por fim, espero que tenha te ajudado e gostaria de deixar um agradecimento especial a todos que me ajudaram a escrever este artigo: Andréa Zambrana, Talita Pagani, Adeonir Kohl e Diego Pinho.

Aline Bastos é desenvolvedora frontend, mentora e escritora. Trabalha há oito anos com desenvolvimento e ama tudo que seja relacionado a CSS e JavaScript.

alineabp@gmail.com iMasters #26 Maio 2018

18 // 7MASTERS

iMasters #26 Maio 2018

DROPS DO MERCADO

// 19

PLATAFORMA ABERTA ATENDE DIFERENTES DEMANDAS DO E-COMMERCE A API Cielo E-commerce, concebida pela Cielo com base nas premissas de conversão, segurança e integração, é uma plataforma modular que se adequa às diferentes necessidades dos lojistas. Entre suas funcionalidades estão a viabilização de pagamentos in-app ou a partir de dispositivos conectados da Internet das Coisas e integração entre as vendas no varejo físico e online, proporcionando uma experiência omnichannel. Outras possibilidades que a plataforma traz são a automatização de pagamentos recorrentes, a consulta de BINs, que identifica a bandeira do cartão, o tipo e a nacionalidade durante o preenchimento do número no checkout, tornando a experiência de compra muito mais rápida para o consumidor, e ainda gerenciamento de transações de forma objetiva: o lojista tem acesso no site da Cielo para configurar opções de pagamento e acompanhar vendas em tempo real. A Cielo ainda oferece suporte para que o lojista escolha as features mais adequadas às demandas do seu negócio e é líder em volume capturado no eCommerce Brasileiro.

HOSPEDAGEM PARA LOJA VIRTUAL: KINGHOST LANÇA SOLUÇÃO

Com planos a partir de R$ 26 mensais, a KingHost lança oficialmente a Hospedagem para Loja Virtual. Além de plataforma de e-commerce, a solução inova ao oferecer consultoria exclusiva e especializada. O benefício é um diferencial para ajudar quem está começando a investir no comércio eletrônico e quer alavancar as vendas. Para a Gerente de Marketing e Produtos da KingHost, Lívia Lampert, o diferencial deste lançamento está na gama de possibilidades que os clientes têm em mãos com esta nova solução. “Os planos não possuem limitação por quantidade de produtos e não há taxas para transações. Nossos clientes podem ter infinitas possibilidades para personalizar, criar e vender”, explica ela. Com foco na praticidade e segurança dos clientes, a novidade já vem com uma série de plugins instalados como PayPal, Mercado Pago, Shop to Facebook, Google Analytics, Correios entre outros.

HOSPEDAGEM DE ALTO DESEMPENHO PARA WORDPRESS

Velocidade de carregamento e segurança avançada são os principais atrativos da Hospedagem WordPress. O produto, lançado no ano passado pela HostGator Brasil - um dos principais provedores de hospedagem e serviços para presença online do mundo - oferece uma plataforma otimizada para a criação e gerenciamento de sites feitos em WordPress. O que coloca o produto à frente de uma hospedagem comum compartilhada é a presença do CDN/WAF, aplicação que já vem configurada para um site da conta. O pacote também conta com recursos como backups automáticos CodeGuard e varredura anti-spam e malware com o firewall do SiteLock TrueShield, além de contas de e-mail e domínio grátis (este último, a partir do ciclo anual de pagamento). Vale conferir!

NOVIDADE NO PORTFÓLIO RESELLERCLUB: HOSPEDAGEM WORDPRESS A ResellerClub, poderosa plataforma que oferece uma série de serviços web para revenda no modelo Whitelabel, traz um novo produto para os seus mais de 200 mil revendedores e profissionais web: Hospedagem WordPress. Essa hospedagem vem com o WordPress pré-instalado e configurado, além de contar com atualizações automáticas. Esse produto conta um painel exclusivo para gerenciar os sites dos seus clientes e outros serviços que eles contratarem. Pensando nas necessidades do desenvolvedor, oferecemos pacotes com segurança reforçada com SiteLock, que realiza escaneamento no site contra malware e o CodeGuard, que faz backups periódicos em nuvem.

iMasters #26 Maio 2018

20 // MENTORIA

MENTORIA COMO MEIO DE APOIO À EVOLUÇÃO DOS NOSSOS FUNCIONÁRIOS William Oliveira, desenvolvedor de software

Quando falamos de desenvolvimento profissional, o que vem à cabeça de quase todo mundo é o plano de carreira. Aquele modelo em que a empresa nos entrega um documento / diagrama / algo do tipo com as habilidades técnicas ou pessoais que precisamos desenvolver para crescer dentro dela. O plano de carreira é até efetivo, porém podemos aproveitar muito mais um processo mais próximo, no qual alguém da área em que trabalhamos - no caso, tecnologia - nos orienta a fim de evoluirmos profissionalmente. Imagine podermos ajudar uma pessoa de nossa equipe, alguém que está aqui do lado e enxergamos a sua performance, a evoluir e crescer muito em sua carreira? Não somente planos futuros, mas melhorias para o presente também. Podemos ajudar aquele desenvolvedor júnior ou estagiário a encontrar seus iMasters #26 Maio 2018

pontos fortes, entender onde está se perdendo em sua carreira e ele acabar sendo mais performáticos o mais breve possível. É isso que uma pessoa, seja alguém da área de programação, design, gestão, etc., em posição de mentoria pode fazer por nós no ambiente de trabalho. Mentores são aquele empurrão que nos falta para conquistar nossos objetivos ou até mesmo para descobrirmos que objetivos são esses. O que faz um mentor ou mentora Durante algum tempo, “prestamos suporte” para a carreira de desenvolvedores (as) iniciantes ou pessoas que querem entrar na área de desenvolvimento no Training Center, uma comunidade de pessoas da área que ajudam, com diversas iniciativas, quem precisa de apoio em sua carreira.

// 21

Um de nossos projetos é o Mentoria, no qual colocamos alguém que precisa de ajuda em contato com alguém que pode lhe guiar em nossa área, e percebemos que muita gente não entende o papel de um mentor ou mentora. É um papel muito confundido com coach ou mesmo com o cargo de professor. A pessoa que está mentorando não vai nos ensinar a programar, mas vai nos indicar conteúdo para aprendermos e estar lá para nos ajudar quando tudo estiver saindo dos trilhos. O mentor é a pessoa que, depois de um primeiro contato para saber quais são nossos objetivos de carreira, vai nos mostrar um caminho a trilhar e depois disso vai nos orientando para que não saiamos do caminho. Quando estávamos formulando o projeto Mentoria, o Danilo Vaz deu uma boa descrição do que faz um mentor: “Dois dos maiores mentores que já existiram podem nos guiar nessa definição. ∂ Always pass on what you have learned - Mestre Yoda

O mentor é uma pessoa que busca repassar seus conhecimentos e experiências, preparando o indivíduo para situações críticas e aconselhando para situações de sucesso na área de comum interesse. ∂ Jacket on, jacket off - Mr. Han O mentor faz isso através de disciplina contínua das partes envolvidas, buscando sempre incentivar o indivíduo a extrair o seu melhor e jamais deve humilhar, rebaixar ou desmerecer o pupilo por não conseguir alcançar os objetivos que lhe foram confiados.” Por que mentoria é importante no ambiente de trabalho A maior reclamação que coletamos de iniciantes (estágio ou juniores), tanto na área de desenvolvimento de software quanto em outras áreas, é o fato de parecer que as empresas não dão a mínima para a sua carreira. O sentimento que fica é de que só querem contratar mão de obra barata, jogar na frente do PC e iMasters #26 Maio 2018

22 // MENTORIA

NÓS NÃO ESTAMOS NO PAPEL DE MENTOR PARA DITAR REGRAS, COMO “SE VOCÊ QUER FRONT, QUEBRE A CABEÇA NO FRONT, E PRONTO”. NÓS SOMOS CONSELHEIROS

deixar que produzam sem nenhum direcionamento de onde podem crescer como profissionais, e esse é um dos motivos de nossos desenvolvedores estarem desmotivados em nossas empresas. Isso não acontece somente com pessoas em estágio inicial de carreira, mas também com gente com certo tempo de experiência. Todo mundo precisa de atenção por parte da empresa e dos companheiros de trabalho para saberem se estão evoluindo e se sentirem confiantes. O plano de carreira aqui acaba se tornando um documento que ninguém segue, pois as pessoas não se sentem confortáveis em seguir um check list sem ter um direcionamento se estão indo pelo caminho certo. O que acontece com nosso plano de carreira que está lá no “portal do colaborador” é: as pessoas leem, sabem o que têm que fazer, mas têm medo ou não sabem como dar os próximos passos. Às vezes, o RH vem até nós para traçar planos ou mesmo para mostrar os indicadores de performance que foram lançados por uma pessoa da gestão, liderança ou cargo do tipo, mas são pessoas que quase nunca estão do nosso lado quando temos dúvida sobre aqueles mesmos indicadores. É nesse cenário caótico que pessoas em posição de mentor são extremamente úteis para mudar toda a realidade da empresa e das pessoas dali. Como mentores podem contribuir para a melhoria do ambiente Como citado acima, o ambiente da maioria das empresas não é favorável aos planos de carreira, nem a profissionais no início. Uma pessoa que está disposta a nos ajudar, que pode nos tirar dúvidas, entende aonde queremos iMasters #26 Maio 2018

chegar e, acima de tudo, é alguém mais próximo da nossa realidade e conversa de modo descontraído (sem aquelas dinâmicas de RH) - é a pessoa que estará lá para nos dar uma injeção de ânimo sempre que precisarmos. Imagine o impacto que uma equipe motivada tem dentro de uma empresa. Nós, que analisamos isso para ajudar as pessoas ou quem trabalha em RH, sabemos da importância que a motivação exerce nas equipes de alta performance. É isto que um mentor irá fazer por nós: estar ao nosso nível de fala e nos direcionar para o melhor resultado possível. A responsabilidade pelo plano de carreira é minha, não do mentor Apesar de parecer que o mentor irá nos cobrar para que exercitemos os pontos fracos até nos tornarmos aquilo que almejamos, não é seu papel fazer isso. Mentores nos informam um caminho a seguir e nós, com nossas próprias pernas, é que nos movemos nesse caminho. O máximo que faremos é voltar para pedir ajuda quando aparecerem mais caminhos alternativos e não soubermos para onde ir. Um bom modo de se ter um bom plano de carreira baseado em mentoria seria criarmos um sistema, seja um quadro, um caderno de anotações ou coisa do tipo, onde lançamos tudo o que foi pontuado por nosso mentor e então vamos sempre seguindo em direção a cumprir os pontos. Um board no Trello, talvez. Porém, raramente o mentor vai nos cobrar por algo. Se ele fizer isso, é por sua boa vontade e não por “obrigação” de mentoria. Temos que tomar cuidado para não achar que receber mentoria significa ter um professor particular. Mentoria não é isso.

// 23

Como implementar um processo de mentoria em nossa empresa Implementar a mentoria em nossa empresa não pode ser algo forçado. Precisamos ter gente que realmente goste de ajudar as pessoas que estão ao lado. Líderes de equipes, normalmente, têm um perfil de mentor, pois conseguem observar muito bem o comportamento das pessoas e identificar pontos falhos. A grande diferença de termos um líder e um mentor é que o líder precisa gerenciar uma equipe inteira, enquanto um mentor só precisa ouvir uma pessoa por vez. Ao procurarmos por pessoas com perfil de mentoria em nossa empresa, seria bom analisarmos coisas como: Como essa pessoa trata estagiários e juniores da sua equipe? Como essa pessoa se comporta quando alguém tem uma dúvida que para os demais é “simples”? Como essa pessoa se comporta quando confrontada ou desapontada por outro membro do time?

Se em todos ou alguns desses pontos a pessoa tiver comportamento negativo, primeiro deve ser feito um trabalho com ela para lhe mostrar onde precisa melhorar. Mas se obtivemos respostas positivas, então essa pessoa tem um perfil compatível com o de um mentor. A paciência e a empatia são coisas primordiais para um mentor. O respeito às dificuldades das pessoas é outro ponto importantíssimo, e ter resiliência para enfrentar os problemas que podem aparecer sem estourar é outro ponto positivo necessário. Com esse “perfil” em mãos, podemos agora entrar em contato com esse membro do time e questionar se toparia contribuir com a carreira de alguém fazendo o papel de mentor e, se tudo correr bem, podemos então colocar mentor e mentorado em contato. O que acontece num bate papo   entre mentor e mentorado Agora que temos alguém em papel de mentor e outra pessoa que irá receber a mentoria, precisamos entender como é a conversa entre mentor e mentorado. iMasters #26 Maio 2018

24 // MENTORIA

O processo de mentoria é como um bate papo. Não é algo que siga roteiros ou que tenha que acontecer por um número de vezes calculado para dar certo. Cada mentor irá identificar o nível de ajuda que um mentorado precisa e pode agir e falar aquilo com que se sente mais confortável, mas temos algumas coisas que precisamos esclarecer durante a mentoria, para conseguirmos guiar nossos mentorados:

O máximo que fazemos é dizer que algo não está legal e aconselhar a melhorar dando algumas sugestões, mas não dizer exatamente o que a pessoa deve fazer. A decisão deve partir sempre da pessoa, pois, por N motivos, ela pode ter deixado de comentar algum plano pessoal enquanto a questionamos. Então nós só damos as cartas, o que a pessoa vai fazer com elas é decisão dela.

Qual o nível profissional dessa pessoa nesse momento? Qual o nível ou cargo em que ela deseja estar daqui a alguns anos? Ela tem objetivos claros sobre a própria carreira? O que ela já tem feito para alcançar seus objetivos?

Todo mundo deveria agir como mentor Não deveria ser necessário um “processo formal” dentro de uma empresa para que as pessoas se comportassem como mentores no ambiente de trabalho. A qualquer momento, podemos dar dicas para as pessoas que estão ao nosso lado. Podemos ajudar em forma de feedback ou mesmo questionando aos outros sobre seus objetivos e o que eles (as) têm feito para alcançá-los. É fantástico ver o quanto que uma pessoa que recebe mentoria pode evoluir e toda empresa deveria tentar algo desse tipo, pois, como vimos, as pessoas estão desmotivadas e precisando de apoio, e um mentor pode ser o diferencial em suas vidas. Que tal assumirmos o compromisso de apoiarmos mais as pessoas ao redor? Assim, a mentoria vai atingir níveis cada vez mais satisfatórios de maneira orgânica em nosso cotidiano.

Eu já mentorei uma pessoa que trabalhava e queria se aprimorar em frontend e, depois de uma conversa, identifiquei que ela gostava muito mais do mundo mobile (nativo mesmo), pois ela tinha muito mais curiosidade com isso do que com o mundo web. Incentivei a pessoa a buscar mais conhecimento sobre mobile e analisar se não seria legal mudar de área. A pessoa mudou para Android e foi muito feliz! Claro que, nesse caso, estava muito explícito que o que a pessoa mais curtia era Android, pois não podemos incentivar alguém a entrar ou sair de uma área sem que seja identificada a motivação para isso. Nesse acontecimento, a resposta para a terceira pergunta da nossa lista seria que “a pessoa não tinha objetivos claros sobre a própria carreira”. Isso pode acontecer, e nós não estamos no papel de mentor para ditar regras, como “se você quer front, quebre a cabeça no front, e pronto”. Nós somos conselheiros. Se vemos que algo pode estar em confusão na cabeça de nossos mentorados, devemos tentar jogar uma luz ali no meio. iMasters #26 Maio 2018

William Oliveira é desenvolvedor de software, apaixonado por web, mobile, Linux, comunidades e open source. Também falo pela internet sobre carreira, educação, JavaScript e Nodejs, Git e GitHub, produtividade e soft skills. Sempre em busca de aprender algo novo e compartilhar conhecimento.

williamozsouza@gmail.com

DROPS DO MERCADO UOL HOST LANÇA SERVIÇO DE WP COM HOSPEDAGEM DEDICADA UOL HOST, a empresa fornecedora de soluções para internet com o maior data center da América Latina, acaba de lançar um novo serviço de hospedagem com foco em WordPress. Com nome de WordPress Dedicado, o serviço oferece planos personalizados para profissionais autônomos e empresas especializadas em criação e hospedagem de sites. Por padrão, todos os planos contam com o painel Plesk, servidor 100% dedicado, certificados SSL, entre outros benefícios. O maior destaque, no entanto, é o WordPress ToolKit, um incrível conjunto de ferramentas que facilita backups, automatiza instalações e atualizações e muito mais. Ótimo para blogueiros ou criadores de conteúdo, os planos básicos permitem a hospedagem de até 30 sites, além do armazenamento de 50, 75 ou 100 GB. Para empresas, agências e desenvolvedores, os planos profissionais oferecem hospedagem ilimitada de sites e armazenamento de 100, 200 ou 300 GB. Todos os planos já estão disponíveis. Saiba mais em www.uol. com.br/wordpressdedicado.

CONHEÇA A PÓS-GRADUAÇÃO EM CLOUD COMPUTING DA FACULDADE IMPACTA

A Faculdade Impacta, referência em tecnologia, está com inscrições abertas para a sua pós-graduação em Cloud Computing, que é a utilização de diferentes aplicações pela internet através de qualquer lugar e plataforma. Com duração de um ano, o curso prepara o aluno para ser um profissional completo em TI. Ele vai aprender a desenvolver as melhores soluções baseadas na computação em nuvem e integrá-las com outras tecnologias que estão em alta, além de trabalhar na criação de nuvens privadas baseadas na solução mais utilizada do mercado, a OpenStack, que integra modernas práticas de gestão e disponibiliza a informação em quaisquer dispositivos usados atualmente, móveis ou não, inclusive virtuais. A pós em Cloud Computing é a melhor solução para o mercado do futuro, já que as empresas buscam profissionais qualificados para virtualizar suas soluções, e assim, tornam-se cada vez mais eficientes e competitivas no mercado.

// 25

PRODUTIVIDADE, USABILIDADE E PERFORMANCE: CONHEÇA A NOVA REVENDA CPANEL VPS

Com os novos planos de revenda com infraestrutura VPS, disco SSD e WHMCS inclusos, a Locaweb estabeleceu 3 pilares fundamentais: Produtividade: com a Locaweb responsável pela infraestrutura e atualizações periódicas, desenvolvedores e agências podem focar na gestão de seus clientes e projetos por meio do painel cPanel; Performance: garantida pela exclusividade no uso da memória e processamento para a aplicação e rapidez do disco SSD tanto para leitura/escrita no banco quanto para e-mail; Usabilidade: graças ao acesso SSH na camada de aplicação para agilidade na configuração e com a interface Camaleon Blue no RoundCube para maior praticidade no webmail. Vale ainda ressaltar que para agências e desenvolvedores que buscam uma solução de entrada, a Locaweb continuará oferecendo a revenda cPanel com infraestrutura compartilhada a partir de R$ 57,90. Para saber mais, acesse www.locaweb.com.br/revendacpanel

MUNDIPAGG INTEGRA VIA API COM OS VOUCHERS DA SODEXO E VR A Mundipagg agora conta com duas novas integrações: o pagamento por Sodexo e VR. Com essa novidade, os clientes que utilizam a plataforma poderão oferecer aos consumidores a opção de pagamento digital via voucher com as duas principais empresas de gestão de benefícios do mercado. Utilizando a Sodexo, o cliente poderá aceitar em seu e-commerce os vouchers online de Alimentação, Refeição, Premium, Combustível, Cultura e Gift. Já com a VR, ele poderá disponibilizar os de Alimentação, Refeição, Combustível e Cultura. Essa nova integração torna a solução de pagamento da Mundipagg ainda mais completa para todos os modelos de negócios em e-commerce.

iMasters #26 Maio 2018

26 // MOBILIDADE É TUDO

Geolocalização 360 Por Ricardo Ogliari, Engenheiro Android no BTCjam

O uso de geolocalização em aplicativo mobile é um dos pontos fortes desse tipo de plataforma. A sensibilidade ao contexto e à localização pode dar um poder incomparável às soluções de software para Android, iOS e similares. Historicamente, o uso do GPS (Global Position System) é a forma de georeferenciamento mais conhecida e mais utilizada pelos desenvolvedores. Diferentemente de alguns anos atrás, quando a obtenção e parser dos dados era um processo penoso, atualmente existem SDKs e bibliotecas que tornam esse processo indolor e transparente para nós, programadores. Porém, o uso de GPS tem algumas desvantagens, que em alguns momen-

iMasters #26 Maio 2018

tos podem se sobrepor à ideia de um dado de posição muito próximo da realidade. Vou listar alguns deles abaixo: Dificuldade de uso em ambientes indoor; Dificuldade de visada dos satélites em ambientes de mata fechada ou quando o tempo está cheio de nuvens; Dificuldade de visada dos satélites em túneis; Necessidade do usuário ativar a localização nas configurações do aparelho; Ao usar a biblioteca de geolocalização, o usuário da aplicação verá, de forma muito clara, que a aplicação está lendo sua posição latitude/longitude. Veja na figura o terceiro ícone da esquerda para a direita.

// 27 Mas talvez um dos pontos mais importantes sobre a não utilização do GPS em alguns momentos seja seu custo-benefício em relação a consumo de bateria e erro de posicionamento. Como sabemos, esse método traz o menor erro médio de posição no globo terrestre. Porém, também é o responsável pelo maior consumo de bateria em relação aos outros métodos (Cell ID, TDOA, dentre outros). Às vezes, o custo do consumo da bateria não vale a pena, conforme a necessidade de posicionamento. Por exemplo, imagine um sistema que coordena uma frota de caminhões de frete. Esses veículos viajam pelo país inteiro, e a necessidade dos gerentes é apenas saber, aproximadamente, onde estão - sendo que apenas a cidade e o estado são realmente necessários. Por que iríamos usar GPS e todo seu poder para algo tão simples? Pensando dessa forma, avançamos na linha de raciocínio. Ok, se o GPS pode não ser o método perfeito em um dado momento, que opções teríamos? Para responder totalmente a essa pergunta, seriam necessárias bem mais páginas. Seria necessário entrar a fundo no assunto de geoposicionamento, latitude, longitude e afins. Mas acredito que não seja preciso ir tão longe. Hoje, nós, desenvolvedores, temos acesso a uma biblioteca que nos dá suporte facilitado para o método de geoposicionamento conhecido como CellID. O Cellular IDentification é a identificação da célula onde seu aparelho está conectado. Ou seja, se soubermos onde essa estação está, é muito provável que estejamos a uma distância razoavelmente perto, a qual podemos considerar e informar ao usuário. A API a que me refiro é a Google Maps Geolocation API. Ela fornece uma API com chamadas através de requisições HTTP, semelhante a um serviço web REST - basta informar um JSON de envio com os dados das estações onde o dispositivo está conectado. O retorno também será um JSON.

Um exemplo de JSON de requisição seria este (envio via POST): { “radioType”: “gsm”, “cellTowers”: [ { “cellId”: 50108, “locationAreaCode”: 946, “mobileCountryCode”: 724, “mobileNetworkCode”: 5, “signalStrength”: -95 } ] }

E um exemplo de resposta do serviço seria: { “location”: { “lat”: -26.214344600000004, “lng”: -52.6781696 }, “accuracy”: 2619 }

Para formatar o JSON de envio, é utilizada basicamente a classe TelephonyManager, do pacote android. telephony. Seu método getPhoneType() traz um valor inteiro, que pode ser comparado com algumas das constantes da classe: PHONE_TYPE_GSM e PHONE_TYPE_CDMA, por exemplo. Para recuperar os dados das torres conectadas ao aparelho, existem dois métodos, cada um específico para uma versão do Android. Se o aparelho for uma versão menor que o Android Marshmallow, o método a ser chamado é o getNeighboringCellInfo(). Caso contrário, o método a ser chamado é o getAllCellInfo(). No primeiro caso, é retornada uma lista com instâncias de NeighboringCellInfo, enquanto que no segundo, uma lista de instâncias de CellInfo. Mas amiMasters #26 Maio 2018

28 // MOBILIDADE É TUDO bas têm métodos autoexplicativos que vêm ao encontro dos dados exigidos pela API do Google, como getCid e getLac no NeighboringCellInfo, e getCid, getMnc, getMcc e getLac no segundo caso. if (Build.VERSION.SDK_INT < Build.VERSION_CODES.M) { List<NeighboringCellInfo> neighCells = tel. getNeighboringCellInfo(); for (int i = 0; i < neighCells. size(); i++) { try { JSONObject cellObj = new JSONObject(); NeighboringCellInfo thisCell = neighCells.get(i); cellObj.put(“cellId”, thisCell.getCid()); cellObj.put(“lac”, thisCell.getLac()); cellObj.put(“rssi”, thisCell.getRssi()); cellList.put(cellObj); } catch (Exception e) { } } } else { List<CellInfo> infos = tel. getAllCellInfo(); for (int i = 0; i<infos.size(); ++i) { try { JSONObject cellObj = new JSONObject(); CellInfo info = infos. get(i); if (info instanceof CellInfoGsm){ CellSignalStrengthGsm gsm = ((CellInfoGsm) info). getCellSignalStrength(); CellIdentityGsm identityGsm = ((CellInfoGsm) info).getCellIdentity(); cellObj.put(“cellId”, identityGsm.getCid()); cellObj. iMasters #26 Maio 2018

put(“locationAreaCode”, identityGsm.getLac()); cellObj. put(“mobileCountryCode”, identityGsm.getMcc()); cellObj. put(“mobileNetworkCode”, identityGsm.getMnc()); cellObj. put(“signalStrength”, gsm. getDbm()); cellList.put(cellObj); } } catch (Exception ex) {} } }

Depois que os dados estão inseridos na estrutura do JSON que a API exige, basta fazer uma requisição web com POST e ler o retorno. Qualquer biblioteca para HTTP é bem-vinda - pode ser Retrofit, Volley ou Ion. E a Google Maps Geolocation API ainda fornece um bônus. É possível recuperar latitude e longitude enviando dados da rede Wi-Fi de onde nós estamos conectados. O JSON também é muito simples, sendo que o único dado obrigatório é o macAddress. Veja o exemplo abaixo: { “considerIp”: “false”, “wifiAccessPoints”: [ { “macAddress”: “00:25:9c:cf:1c:ac”, “signalStrength”: -43, “signalToNoiseRatio”: 0 }, { “macAddress”: “00:25:9c:cf:1c:ad”, “signalStrength”: -55, “signalToNoiseRatio”: 0 } ] }

// 29 Em um teste realizado no prédio onde eu moro, a precisão da latitude e da longitude obtida com o Geolocation API e Wi-Fi foi maior que com os dados do GPS. Nada mal, né? E o código é fácil? Sim, com certeza. Existem duas formas. A primeira é onde eu capturo o macAddress da rede onde estou conectado (primeira listagem). A segunda serve para escanear as redes próximas e pegar os macAddress delas. Segundo a documentação da Geolocation API, quanto mais endereços de hotspots, mais precisa será a resposta. WifiManager manager = (WifiManager) getApplicationContext(). getSystemService(Context.WIFI_ SERVICE); WifiInfo info = manager. getConnectionInfo(); String macAddress = info. getMacAddress();

WifiManager manager = (WifiManager) getApplicationContext(). getSystemService(Context.WIFI_ SERVICE); manager.startScan(); List<ScanResult> results = manager.getScanResults(); for (ScanResult result : results) { String macAddress = result. BSSID; }

Espero que o leitor tenha gostado destas novas formas de geoposicionamento. O mundo LBS (Location Base System) é muito mais amplo e rico do que somente o GPS. Com a Geolocation API, pesquisando latitude e longitude por Cell ID e/ou Wi-Fi, o desenvolvedor ganha armas para criar aplicativos melhores e menos intrusivos. Obrigado.

Ricardo Ogliari é coautor do livro “Android: do básico ao avançado” e de mais de 300 publicações. Especialista em Web, estratégia de inovação e tecnologia, tem MBA em Desenvolvimento de Aplicações e Jogos Móveis. É fundador do Things Hacker Team e foi eleito um dos 10 nomes de open hardware em 2013.

rogliariping@gmail.com iMasters #26 Maio 2018

30 // JAVASCRIPT

AFINAL, EXISTE ESSA TAL DE FADIGA NO

JAVASCRIPT? Por Joselito Júnior, líder da Mangue Codes

A piada já vem pronta: você nem terminou de ler este artigo, e já apareceu outro framework em JavaScript. Afinal, quem nunca - no meio de uma conferência ou até de uma conversa na copa - ouviu falar dessa tal “fadiga”? Como fadiga é uma palavra que pode ser considerada praticamente como português arcaico, esta é raramente utilizada em contextos que não envolvam o Jaiminho Carteiro. Dessa forma, ouvimos falar dela de outra maneira: “Desenvolver em JavaScript está muito complicado”. Após isso dito, não é incomum se ouvirem odes ao passado, esbravejando o “no meu tempo”. Sim, não podemos negar, era muito mais simples abrir o Notepad++, escrever algumas tags, salvar um HTML, jogar num FTP e pôr no ar. Bons tempos esses para simplicidade, mas infelizmente o que se esquece ao fazer esse saudosismo é sobre o que JavaScript era e o que JavaScript é nos dias atuais. De tanto escutar variantes dessa “reclamação”, resolvi ir mais a fundo e questionar o passado: antigamente era mesmo tão melhor assim? Quais foram os caminhos que fizeram a gente chegar onde está hoje? Quais são esses porquês? “Já não tenho nenhuma esperança no futuro do nosso país, se a juventude de hoje tomar amanhã o poder. Essa juventude é insuportável, desenfreada, simplesmente horrível”. Deixando os pormenores políticos de lado, essa frase soa bem atual e com certeza há muitos que irão concordar que essa afirmação claramente reflete a situação da nossa sociedade. Mas ela foi cunhada por Hesíodo, por volta do século VII a.C.. A gente gosta de romantizar o passado não é de hoje. iMasters #26 Maio 2018

// 31 Quem é velho de guerra na Internet deve se lembrar do Ajaxian. O Ajaxian foi (e tecnicamente é, só não é mais atualizado) um blog referência para quem queria trabalhar com - surpresa, surpresa - AJAX. O termo AJAX apareceu por volta de 2005. As tecnologias já existiam, só que alguém resolveu pôr um nome bonitinho para facilitar as coisas - afinal, um dos princípios básicos de ser programador é ser preguiçoso. Sem surpresas, a gente faz isso até hoje quem não já fez um MEAN ou nunca ouviu falar de PWAs, não é mesmo? E foi no lá Ajaxian que eu encontrei (depois de muito procurar!) a minha citação de Hesíodo. No dia 22 de maio de 2007 - onze anos atrás (era uma terça-feira, chovia muito) - era publicado o post “210 Frameworks para Ajax e contando”. O post é pequeno, mas é um deleite de se ver hoje: segundo as contas feitas, estava surgindo nada mais nada menos que 1.5 framework por semana. Sim, em 2007. Ano do primeiro iPhone, do último livro do Harry Potter com Harry Potter e da primeira tour da Hanna Montana com a Miley Cirrus. E a gente já estava reclamando que tinha framework e biblioteca demais. E, em tempos de Internet, 2007 é igual ou até mais distante que o século VII a.C. Ok, a gente já sabe que há mais de 10 anos éramos tão reclamões como hoje. Mas o que isso significa? Afinal, não tinha esse papo de fadiga nesse tempo, tinha? Vamos ao contexto da época: o JavaScript, quando fora criado - em uma semana, diga-se de passagem -, não tinha um objetivo concreto para si, algo incomum para as linguagens no geral; algumas são especializadas em cálculos, voltadas para estatísticas, em gráficos, para uso em tempo real, outras foram projetadas para dispositivos específicos (como o Java, para TVs Inteligentes - melhor propósito de toda história). O JavaScript estava ali para basicamente podermos fazer pequenas interações com a página sem eu ter que enviar tudo aquilo para o meu servidor renderizar e cuspir um HTML estático de volta. E nessa, sem querer querendo, o JavaScript virou resistência. E, sejamos justos, também foi sorte. JS não foi planejado para sair do Netscape, mas, como era líder, todo mundo copiou e ele apareceu nos outros navegadores. O JavaScript então permitia uma vantagem para os sites que até o momento mais ninguém oferecia: compatibilidade. Mal e porca, mas compatibilidade. Não é como se, na época, a gente só tivesse o JavaScript para fazermos sites interativos. A gente faz questão de esquecer, mas tínhamos Applets em Java... Shockwave... e o amado Flash. Só que o iMasters #26 Maio 2018

32 // JAVASCRIPT

O JAVASCRIPT NUNCA TEVE COMO PRINCÍPIO SE TORNAR UM SDK DA WEB. A GENTE TRANSFORMOU

JavaScript não era um plugin. Além do navegador, o usuário não tinha que instalar mais nada. Por fim, e talvez o mais importante: você, como desenvolvedor, não tinha obrigação com seu ninguém. Sejamos francos: o Flash era maravilhoso. Em todos esses anos nessa indústria vital, com o Flash, tinha sido a primeira vez em que dava para fazer sites pixel-perfect. Não tinha designer triste. A renderização de fontes era incrível. Mas o JavaScript era livre. Mas do que isso: éramos nós que fazíamos. Não tinha amarras, a gente escrevia do jeito que queria onde a gente queria, e entregava do jeito que queria. E então, quando o AJAX chegou foi uma revolução daquelas. A gente podia, finalmente, fazer e enviar requisições com dados. Era, literalmente, um novo mundo de possibilidades: JavaScript podia começar a se tornar uma camada da aplicação. E por muita competência e (de novo) sorte, duas coisas extremamente importantes aconteceram em sincronia: apareceram os primeiros web apps extremamente robustos baseados em AJAX e JavaScript puro (como o Gmail e o Google Maps) e - tão ou mais importante - os usuários notaram que eles tinham controle do seu navegador. Foi a época em que o Firefox começou a bombar, e como aplicações e sites com JS voavam nele, a consequência foi a comunidade se movimentar: em pouco tempo, já havia mais de 200 frameworks de AJAX (e contando!). Por quê? Porque ninguém sabia direito o que estava fazendo, mas sabia que se todo mundo tentasse correr para frente junto, uma hora a gente ia chegar lá. Para o bem ou para o mal, no fim, tudo meio que convergiu pro jQuery. iMasters #26 Maio 2018

E é nessas horas que a gente nota a beleza da web. De quanto o open source e a comunidade influencia nela. O JavaScript nunca teve como princípio se tornar um SDK da web. A gente transformou. Aí a gente conseguiu fazer transmissão de dados com ele. Aí a gente foi e notou que dava para fazer animações. Nós criamos templates. Notamos que a gente podia pegar o JavaScript e colocar do lado do servidor também. Aí a gente foi, tirou toda a renderização do servidor para renderizar só do lado do cliente (e agora a gente está colocando no servidor de volta, mas só o que precisa, e com JS). A gente amava por não ter tipagem forte e, quando precisamos, inventamos tipos. Quando a gente quer a gente usa, quando não, não. E quando a gente quer mesmo, a gente mistura. É orientada a objetos, mas quando a gente quer, a gente a deixa funcional. A gente reinventa a roda tão bem às vezes que na última vez em que reescreveram o DOM ele foi parar em outras plataformas, levando o JavaScript junto. A natureza do JavaScript permite que a gente simplesmente vá lá e faça. Se você não está satisfeito com uma biblioteca, você vai lá e faz outra. E não tem nada de errado nisso, muito pelo contrário: em vez de resolver um problema apenas para si, esse ato de compartilhar faz todo mundo crescer. A gente só nota isso com mais intensidade hoje, pois, além de tudo no mundo ser mais rápido e intenso, o JavaScript é a linguagem mais utilizada no mundo. E quando a gente trabalha nessa escala, o mínimo de ruído que seja incomoda e faz barulho. Dois anos atrás, eu fiz uma tradução de um post no qual um frontender e um backender conversavam sobre como pôr dados numa tabela. Muita gente entendeu a piada, mas pouca gente entendeu a mensagem: seja bem-vindo, JavaScript sempre foi assim. E isso é bom! Essa “fadiga” é um convite para abraçar as mudanças, para ir para frente. Para onde? A gente não sabe. Talvez seja só um novo jQuery. Mas nós sobrevivemos na última década. Prontos para a próxima?

Joselito Júnior é front-ender desde que ganhou um CD com 2000 scripts em “Java scripts” e mexeu com eles no FrontPage 2000. É líder da Mangue Codes, hub que ajuda a organizar o GDG Recife e algumas outras comunidades Pernambuco.

oi@joselitojunior.com

CMY

iMasters #26 Maio 2018

34 // POR DENTRO DO W3C

A Web na era da Computação Cognitiva Por Diogo Cortiz, professor na PUC-SP e pesquisador no Ceweb.br E Newton Calegari, pesquisador no Ceweb.br e líder de projetos no escritório do W3C Brasil

A Web possibilitou o surgimento de modelos de negócios revolucionários, negócios disruptivos que alteraram muitos mercados e passaram ter alcance global com facilidade. A utilização de aplicações baseadas em inteligência artificial transforma, novamente, esses negócios, levando-nos a um novo momento de revolução. A área de IA possui hoje a maturidade necessária para que seja aplicada a uma variedade cada vez maior de negócios, desde a entrega de comidas à aplicação em carros autônomos. Se em outros momentos definimos o contexto pelo qual a Web passou afinal, quem não se lembra do termo Web 2.0, usado para definir o momento de mudança na dinâmica da geração de conteúdo na Web? -, hoje estamos classificando o momento como uma era da computação cognitiva e da inteligência artificial. É possível notar essa transformação ao analisarmos o uso de IA, cada vez mais presente e ubíquo, em cenários como agricultura, saúde, redes sociais e e-commerce.

iMasters #26 Maio 2018

O termo computação cognitiva surgiu para descrever a capacidade que damos às máquinas de simular alguns processos cognitivos realizados pelo nosso cérebro. No campo de visão computacional, por exemplo, existem aplicações e pesquisas que buscam simular o sentido da visão, que nós humanos possuímos, e dar essa capacidade para que as máquinas identifiquem imagens de maneira até superior que a nossa. Reconhecimento de voz é um dos sentidos simulados pela máquina e que vem atingindo níveis de precisão superiores ao nosso. A IBM apresentou um case em que aplica visão computacional em conjunto com técnicas de reconhecimento de voz para melhorar a identificação e o reconhecimento de discurso. A Carnegie Mellon University (CMU) possui um projeto de pesquisa chamado Read the Web, no qual os pesquisadores partem da hipótese de que os computadores podem aprender a ler. O departamento de Machine Learning da CMU desenvolveu um sistema cha-

// 35

iMasters #26 Maio 2018

36 // POR DENTRO DO W3C

mado NELL, Never-Ending Language Learning, que está lendo todo conteúdo disponibilizado na Web e aprendendo fatos a partir dos textos “lidos”. As aplicações de computação cognitiva podem não ter atingido o mesmo grau de sofisticação e penetração que as aplicações de IA, baseadas em grandes quantidades de dados, atingiram atualmente. Contudo, iniciativas como o Human Brain Project, cofinanciado pela União Europeia, com a proposta de avançar com pesquisas de computação, neurociência e medicina com foco em computação cognitiva, farão com que a área floresça ainda mais nos próximos anos. Diante desse cenário futuro, cabe a nós entender o papel da Web nesta era da Computação Cognitiva. O desenvolvimento de aplicações web certamente passará por mudanças, e o comportamento dos usuários ao navegar nos sites já está tomando nova forma. Devemos ter em mente que essas novas gerações deixarão de utilizar teclado e mouse para interagir com as

aplicações, e não só utilizarão dispositivos touch screen, mas também farão uso de dispositivos como os capacetes Emotiv EPOC, de interface cerebral. A intersecção do desenvolvimento web com outras áreas, assim como já ocorre com UX, precisa ser ampliada a fim de obter contribuições de áreas como Brain Computer Interface (interface cérebro-computador), realidade virtual e computação cognitiva. Para discutir essas questões, nós, do Ceweb.br e W3C Brasil, estamos organizando a conferência Web.br com o tema “A Web na era da Computação Cognitiva”, contando com especialistas de diversas áreas que nos ajudarão a enxergar os próximos anos do desenvolvimento da Web. Esperamos te encontrar na Web.br! Links: http://rtw.ml.cmu.edu/rtw/ https://www.humanbrainproject.eu/en/ https://www.emotiv.com/epoc/

“O termo computação cognitiva surgiu para descrever a capacidade que damos às máquinas de simular alguns processos cognitivos realizados pelo nosso cérebro”

http://conferenciaweb.w3c.br

Diogo Cortiz é Professor na PUC-SP e pesquisador no Ceweb.br. Doutor e Mestre em Tecnologias da Inteligência e Design Digital, com PhD Fellow pela Université Paris 1 - Sorbonne. Realizou estágio pós-doutoral no laboratório de inteligência artificial e tecnologias criativas da Universidade de Salamanca - Espanha. Também trabalhou em um projeto de um documentário experimental, usando vídeo 360°, na Índia e no Japão.

diogo@nic.br Newton Calegari é pesquisador no Ceweb.br e líder de projetos no escritório do W3C Brasil. É Bacharel em Ciência da Computação e Mestre em Tecnologias da Inteligência e Design Digital (TIDD/PUC-SP). Trabalha e pesquisa sobre core web technologies. É editor da recomendação Data on the Web Best Practices do W3C e atua na área de padronização junto aos grupos de trabalho no W3C. Também trabalhou em projetos de coleta e transmissão de vídeo 360° no Japão.

newton@nic.br iMasters #26 Maio 2018

DROPS DO MERCADO LIDERANÇAS TÉCNICAS DA LAMBDA3 COMEMORAM 25 ANOS DO PROGRAMA MICROSOFT VALUED PROFESSIONAL NO MVP SUMMIT 2018, EM SEATTLE

O Programa Microsoft Valued Professional (MVP Award), que premia e reconhece profissionais especializados em tecnologias da Microsoft, completa 25 anos em 2018 e a Lambda3 estava presente em um dos eventos que marca as comemorações, o MVP Summit 2018. Todo ano, milhares de pessoas reconhecidas pela Microsoft se encontram em Seattle para conhecer e discutir as novidades da plataforma e seu futuro. A Lambda3, que possui nove profissionais reconhecidos pelo MVP Award, enviou o grupo para participar do evento e se atualizar sobre as projeções de tecnologia para o próximo ano em áreas como Inteligência Artificial, Nuvem, ALM, .NET, C#, e diversos outros temas abordados dentro das categorias de Artificial Intelligence, Microsoft Azure e Visual Studio and Development Technologies.

INTEGRAÇÃO PARA EMISSÃO DE BOLETOS REGISTRADOS Para facilitar e agilizar a emissão de boletos e carnês registrados, a Gerencianet disponibiliza uma ferramenta completa com integração em diversas linguagens diferentes: PHP, .NET, Node. JS, Ruby, Python, Java, Delphi e GO (linguagem Google). As cobranças são emitidas de forma gratuita e só há tarifa em caso de pagamento confirmado. A ferramenta também possibilita a emissão de cobranças únicas ou recorrentes para pagamento com cartão de crédito. O prazo e a forma de recebimentos são personalizados, permitindo mais flexibilidade. A Gerencianet também possui módulos prontos, como Magento, Prestashop, OpenCart, BoxBilling e documentação completa para qualquer tipo de integração. Para saber mais, acesse gerencianet.com. br/api ou assista o tutorial completo disponível em udemy.com/eadgerencianet.

// 37

MOVILE LANÇA HUB DE CONTEÚDO VOLTADO PARA UNIVERSO TECNOLÓGICO A Movile, uma das líderes globais de marketplaces móveis, acaba de lançar o Movile Blog, espaço reservado para compartilhar conteúdo dos mais diversos temas tecnologia. Esse hub está sendo construído com o objetivo de disseminar conhecimento com as comunidades de tecnologia, compartilhar experiência e gerar discussões nos mais diferentes níveis. Com uma gama de autores, participam da criação dos conteúdos os próprios times de tecnologia das empresas do grupo, dentre elas iFood, Sympla, PlayKids, Wavy, Rapiddo, SuperPlayer e também alguns parceiros, como Ingresso Rápido. Hoje, o Movile Blog aborda desde temas que estão em alta no mundo de desenvolvimento e tecnologia, dicas de como se desenvolver nesse mercado e como se sair bem em entrevistas técnicas. Para mais informações, acesse: https://movile.blog/

MAIS 12 NOVIDADES DA FIAP PARA 2018

Quem pensa o novo não para de inventar, criar e buscar ideias cada vez mais inovadoras. Por isso, a FIAP está lançando 3 novos MBAs: Artificial Intelligence & Machine Learning, Digital Business e Health Tech. Além dos cursos presenciais e on-line de Graduação e MBA, a FIAP também tem o SHIFT, cursos de curta duração nas áreas de tecnologia, inovação e negócios. E está lançando mais 9 desses cursos: Design Sprint, Creative Engineering, Strategic Design, ICOs, Dashboards for BI, BPM for Healthcare, Aspectos Jurídicos das Startups, Chatbots e Firebase. FIAP. Future-se: fiap.com.br!

iMasters #26 Maio 2018

38 //

COMUNIDADES Tech Ladies: empoderando mulheres na tecnologia e para além dela Por Rodrigo PokemaoBr, para Revista iMasters A Tech Ladies é uma rede de empoderamento para mulheres em diversas áreas, inclusive em tecnologia. A comunidade foi criada em março de 2016, em Curitiba, por Vanessa Romankiv, a partir da sua vivência no meio: a baixa participação e o alto índice de desistência das mulheres no mercado de tecnologia e em cursos acadêmicos. Nessa entrevista, Vanessa fala sobre a criação da comunidade, sua experiência com tudo o que a rede fez até agora e como ela vem impactando vidas - inclusive a da própria criadora!

iMasters #26 Maio 2018

Rodrigo PokemaoBr: Como surgiu a TechLadies? Vanessa Romankiv: Gosto sempre de contar essa história! Antes de entrar na área, meu sonho era ser jogadora de futebol. Eu jogava desde pequena com os meninos da rua, quando eu tinha 12 anos meu pai me levou para conhecer uma escolinha de futebol, e claro eu amei. Ficamos de ir na escolinha no dia seguinte para eu fazer uma peneira e ver em qual posição eu jogava melhor, mas esse dia nunca chegou. Lembro até hoje do meu pai chegando e falando que eu estava de castigo (não lembro o motivo; eu não brigava na escola, nem com os meus amigos e minhas notas nunca foram baixas) e que ele iria pagar um curso de informática para eu me profissionalizar e futuramente começar a trabalhar. Foi a partir desse momento que eu tive o meu primeiro contato com tecnologia, através do meu primeiro curso de informática. Durante esse curso eu ficava fascinada com o computador e eu não queria só mexer; queria entender como a máquina funcionava. Desde então me especializei na área e estou atuando até hoje.

// 39

Desde que comecei a atuar na área de tecnologia, sempre participei de eventos e grupos da área e na maioria desses eventos eu percebi que haviam poucas mulheres ou, muitas vezes, eu era a única. Um dos motivos que me fez criar a rede Tech Ladies Brasil foi justamente essa: a percepção de que havia poucas mulheres ou quase nenhuma nos eventos e grupos em que eu participava. Eu não conseguia entender o motivo sendo que a área de tecnologia é uma área fascinante. Foi então que nasceu a Rede Tech Ladies Brasil. Rodrigo PokemaoBr: Quais as principais atividades da comunidade? Vanessa Romankiv: As principais atividades da rede são a realização de eventos, cursos e workshops com conteúdos técnicos (programação, robótica…), empreendedorismo e demais áreas, como design e comunicação. Queremos mostrar que a área de tecnologia interage e se comunica com as demais áreas e que podemos contribuir com elas. Rodrigo PokemaoBr: Vocês organizam/ realizam algum evento local? Vanessa Romankiv: Além dos nossos três principais eventos anuais: Tech Ladies Birthday (aniversário da rede), Tech Ladies Day e Tech Ladies Conference, nós apoiamos e organizamos o Django Girls. Como somos uma rede e apoiamos outras comunidades e iniciativas, fazemos eventos em conjunto com o PyLadies Curitiba.

Rodrigo PokemaoBr: Existe alguma ação que vocês realizam que, na sua opinião, torne a comunidade peculiar? Vanessa Romankiv: A Rede Tech Ladies hoje cresceu de uma forma que eu não imaginava... A rede conta com o trabalho e colaboração de mulheres não só da área de tecnologia; mulheres que querem se aprofundar ou conhecer o universo da tecnologia e mais do que isso: ajudar umas às outras. Um exemplo desse trabalho colaborativo foi o nosso evento chamado From Ladies to Ladies (hoje, com o nome de Tech Ladies Conference) realizado no final do ano passado, organizado de forma colaborativa por 20 mulheres, mais ou menos. Cada uma doou o seu tempo e energia para que o evento acontecesse de uma forma muito linda.

iMasters #26 Maio 2018

40 // Rodrigo PokemaoBr: Como enxerga o meio das comunidades no Brasil (o pessoal se ajuda, troca experiências, vão uns nos eventos dos outros)?

Rodrigo PokemaoBr: Existe uma troca de experiência entre o Tech Ladies e as outras comunidades? Vanessa Romankiv: Sim, somos parceiras de outras comunidades; e não só relacionadas à área de tecnologia, mas comunidades que fomentam o empreendedorismo e a inovação, dentre outras. Acreditamos que devemos unir forças para fazer a diferença na sociedade. Rodrigo PokemaoBr: Qual a importância da sua comunidade para a região em que está localizada? Vanessa Romankiv: Hoje a rede é bem mais que uma simples comunidade; somos uma comunidade profissional e referência em promover a equidade de gênero e dar a oportunidade para mais mulheres se superarem e ajudarem umas às outras não só na vida profissional, mas pessoal. Estamos crescendo juntas como comunidade, profissionais e pessoas. Fazemos isso de uma forma acolhedora, criamos um ambiente onde as mulheres se sentem seguras para opinarem, tirarem dúvidas e compartilharem seus conhecimentos. Temos o apoio de homens também, que se identificam, participam dos nossos eventos e nos apoiam.

iMasters #26 Maio 2018

Vanessa Romankiv: As comunidades no Brasil se apoiam bastante. E eu vejo isso não só pela Rede Tech Ladies, mas também nas comunidades de conteúdos técnicos e cultura maker que participo. Existe um espírito colaborativo e de compartilhamento de informações muito grande. E as pessoas percebem que, atuando em comunidades, elas ajudam os outros, mas também se ajudam. Criar a rede Tech Ladies Brasil me ensinou muitas coisas não só relacionadas a área de tecnologia, mas um pouco de outras áreas como marketing, estratégia, negócios, gestão de pessoas, liderança etc. Participar de uma comunidade é isso: você troca e compartilha conhecimentos o tempo todo, você ajuda e recebe ajuda. Conhece pessoas, faz network e faz amigos também, por isso eu gosto de destacar isso: quem tiver a oportunidade, participe de uma comunidade onde você se sinta acolhido.

HOSPEDE SEU SITE COM TODOS OS RECURSOS QUE VOCÊ PRECISA

// 41

Preocupe-se apenas com o desenvolvimento do seu site ou aplicação. Nós cuidamos da infraestrutura.

Banco de dados, tráfego e contas de email ilimitados Antivírus e SSL grátis com um clique

/mês* *Valor para novas contratações, equivalente à mensalidade no primeiro ano.

KINGHOST.COM.BR iMasters #26 Maio 2018

42 // CAPA

Progressive

Web Apps: conheça parte do processo de evolução da web

Por Loiane Groner, analista de Negócios e Desenvolvedora

iMasters #26 Maio 2018

// 43

Progressive Web Apps ou PWAs (em português: Aplicações Web Progressivas) são o novo passo para a evolução da web. Em 1993, nos primórdios da web, apenas tinha-se suporte para sites estáticos com HTML. Em 1995, nasceu o JavaScript, que transformou a web em dinâmica. Quase 10 anos depois, nasceu a Web 2.0 com o Ajax, o que possibilitou buscar ou enviar dados para o servidor sem precisar fazer atualização da página no browser. Com o lançamento do HTML5 e do CSS3 no início dos anos 2010, iniciou-se a era do design responsivo. E, agora, estamos presenciando a era das PWAs. A web evoluiu muito nos últimos cinco anos. Hoje é possível usar a câmera do computador através do browser para tirar fotos ou fazer streaming de vídeo (um exemplo de aplicação popular é o Google Hangouts). As APIs da web continuam evoluindo, permitindo-nos desenvolver aplicações cada vez mais complexas somente com o uso de HTML, CSS e JavaScript. E essa evolução da web está nos permitindo levar todas essas funcionalidades para a plataforma mobile também. É aqui que entram as PWAs. Uma aplicação web progressiva é aquela que implementa um conjunto de técnicas para oferecer a melhor experiência na web e, progressivamente, oferece funcionalidades que antes só estavam disponíveis nativamente, seja no desktop ou no mobile. Uma PWA pode ser vista também como uma evolução híbrida entre as páginas da web regulares (ou sites) e um aplicativo móvel. Segundo a Google, uma PWA deve ter as seguintes 10 características: Progressiva: para qualquer usuário, independentemente do browser (nesse caso, usuários com browsers mais novos tem acesso a mais funcionalidades da aplicação, como acesso offline); Descobrível: identificado como “app” por motores de busca; Lincável: pode ser compartilhada através de uma URL e não requer uma instalação complexa;

Responsiva: ajustável em qualquer tamanho de tela (desktop, mobile, tablet); App-like: mesma sensação, navegação e comportamento de um aplicativo nativo (quando se acessa a PWA da plataforma mobile); Sempre atualizada: não é necessário acessar a loja de aplicativos para atualizar, o browser irá detectar e atualizar automaticamente caso seja necessário; Instalável: é possível adicionar um ícone na tela principal do smartphone, tablet ou como um aplicativo do browser (Google Chrome Apps); Engajável: o usuário pode ser constantemente engajado através de notificações push ou com outras funcionalidades engajáveis; Segura: uso somente com HTTPS; Independente de conectividade: funciona offline. Anatomia de uma PWA Neste artigo, vamos explorar os conceitos envolvidos na criação de uma PWA para que você possa iniciar um projeto web já pensando que ele será uma PWA ou até mesmo transformar um projeto existente em uma PWA de forma progressiva. O código-fonte e a URL de demonstração estão listados no final do texto. A criação de uma PWA envolve os seguintes três passos: 1. Criação de um arquivo manifesto da web app 2. Criação de um app shell (“casca” da aplicação) 3. Cache dos arquivos do app (HTML, CSS e JS) e dados (com uso de service workers) Vamos aprender com mais detalhes sobre cada um deles nos tópicos a seguir. Arquivo manifest.json Esse passo da criação de uma PWA é o mais simples. E também é o mais simples de ser aplicado em aplicações existentes que estão sendo transformadas em uma aplicação web progressiva. O principal objetivo do arquivo de manifesto é fornecer informações sobre a aplicação web. É um arquivo JSON que contém informações como nome da aplicação, autor, ícones e descrição. Essa informação é usada para instalar a aplicação na página inicial do dispositivo, como demonstrado na imagem abaixo: iMasters #26 Maio 2018

44 // CAPA

No arquivo apresentado, temos as seguintes propriedades com sua respectiva descrição:

O arquivo de manifesto é o responsável por uma aplicação web ser instalável. O código a seguir é um exemplo de manifest.json:

{ “short_name”: “Users”, “name”: “Users PWA”, “icons”: [ { “src”: “icons/android-chrome192x192.png”, “sizes”: “192x192”, “type”: “image/png” }, { “src”: “icons/android-chrome512x512.png”, “sizes”: “512x512”, “type”: “image/png” } ], “scope”: “/”, “start_url”: “/index.html”, “orientation”: “portrait”, “display”: “standalone”, “theme_color”: “#ffffff”, “background_color”: “#ffffff” }

iMasters #26 Maio 2018

name: é o nome da aplicação que é mostrado ao usuário juntamente com o ícone; short_name: caso o nome da aplicação seja muito grande, o nome curto é mostrado no lugar do nome; icons: um array de imagens com os ícones da aplicação para diversas resoluções de dispositivos. Caso mais de um ícone sirva para o dispositivo em uso, o último ícone declarado será usado; scope: representa o escopo de navegação do contexto da aplicação; start_url: é a URL inicial que o desenvolvedor gostaria que fosse carregada quando o usuário clicar no ícone da aplicação web; orientation: é a orientação padrão do dispositivo para o contexto da aplicação. Os possíveis valores são: ∂ “any”, ∂ “natural”, ∂ “landscape”, ∂ “portrait”, ∂ “portrait-primary”, ∂ “portrait-secondary”, ∂ “landscape-primary”, ∂ “landscape-secondary” Display: representa o modo de exibição preferido do desenvolvedor para a aplicação web. Os possíveis valores são: ∂ “fullscreen”: modo de tela cheia, como se fosse um aplicativo, e não mostra barra de endereço e outros elementos da interface; ∂ “standalone”: nesse modo, abre como se fosse um aplicativo, não mostra a barra de endereço do browser, mas pode incluir outros elementos da interface do sistema, como a barra de status e/ou o botão de voltar; ∂ “minimal-ui”: semelhante ao modo de tela cheia, mas fornece ao usuário um conjunto mínimo de elementos da interface para controlar a navegação (ou seja, voltar, encaminhar, recarregar e, talvez, a barra de endereço); ∂ “browser”: abre a aplicação no browser normalmente;

// 45

theme_color: é a cor padrão do tema usado no contexto padrão da aplicação. Pode ocorrer de o código HTML da aplicação sobrescrever esse valor; background_color: é a cor de fundo padrão usada pela aplicação. Usa a cor já definida no CSS da aplicação, mas pode ser usada pelo browser para aplicar uma cor de fundo antes de os arquivos da aplicação ficarem disponíveis. Além dessas opções, existem outras disponíveis. A lista completa pode ser conferida neste link: https://goo.gl/nMSbi4. Após a criação do arquivo, ele deve ser referenciado na seção da tag head:

Gerando os ícones e o manifest.json automaticamente Você pode usar os serviços http://realfavicongenerator.net e http://preview.pwabuilder.com para a geração dos ícones e do arquivo manifest.json. Só precisa fazer upload de uma imagem (em boa resolução ou até mesmo um SVG) e informar as propriedades do manifest.json. Essas ferramentas também fornecem o código a ser inserido dentro da seção head do HTML. Após a criação do manifest.json, é possível verificar no browser se a “instalação” do arquivo foi feita corretamente acessando as ferramentas de desenvolvedor -> Aplicação -> Manifest, como é demonstrado na imagem a seguir:

iMasters #26 Maio 2018

46 // CAPA

Criando o App Shell O que acontece quando acessamos um site e não temos acesso à Internet? O browser mostra uma mensagem de erro dizendo que não é possível acessar a página. Esse não é o comportamento esperado de uma PWA. Uma PWA precisa estar disponível offline, mesmo que os dados dinâmicos que serão mostrados na tela não fiquem disponíveis offline, ou seja, nós separamos o que é conteúdo estático (que ficará disponível offline) do conteúdo dinâmico. Usamos os arquivos estáticos para criarmos a casca da nossa aplicação. A imagem abaixo demonstra a separação do conteúdo estático do dinâmico:

iMasters #26 Maio 2018

// 47 Para desenvolver o App Shell, usamos basicamente HTML e CSS. O código para a criação do App Shell da nossa PWA de exemplo está listado a seguir:

Caso o usuário acesse a aplicação de modo offline, não irá ver uma mensagem de página não encontrada, mas parte da aplicação. Isso deixa o app mais amigável e oferece uma experiência melhor ao usuário. Iremos cachear os arquivos estáticos do App Shell no próximo tópico com service worker para que eles possam ser acessados offline pelo usuário.

Observando o código apresentado, podemos constatar que a aplicação está utilizando o CSS do Material Design. O Material Design possui guidelines para aplicações responsivas. Com isso, conseguimos criar uma aplicação app-like e responsiva. Você pode usar outras bibliotecas e frameworks CSS, como Bootstrap e Materialize ou o seu próprio CSS. Criando um service worker O service worker é um script que é executado em segundo plano, separado da aplicação e é a grande estrela da PWA. Ele é responsável por algumas tarefas como: funcionalidades offline (independentemente de conectividade), ou seja, é responsável por verificar o estado da rede; sincronização da aplicação em segundo plano (sempre atualizado), ou seja, verifica automaticamente se existe uma versão mais nova dos arquivos da aplicação e automaticamente atualiza, além de poder ser usado como proxy entre a aplicação e o servidor e poder cachear os dados do servidor automaticamente para uso offline também; notificações push (engajável). O service worker precisa ser registrado na aplicação antes de estar disponível para uso. O código abaixo pode ser usado para fazer o registro:

if (‘serviceWorker’ in navigator) { navigator.serviceWorker .register(‘/sw.js’, {scope:’’}) .then((registration) => { // SW registrado! }); }

Uma nota importante é a condição apresentada na primeira linha: se a API do service worker existir no browser, então ele é registrado. A beleza das aplicações web progressivas está apresentada nesse código: somente se o browser oferecer suporte para service worker é que as funcionalidades offline, atualização em segundo plano e notificações push ficarão disponíveis. A chave para a parte progressiva da aplicação está aqui: caso o usuário acesse a aplicação com uma versão antiga de um browser ou iMasters #26 Maio 2018

48 // CAPA Ciclo de vida de um service worker Após o registro do service worker, dentro do arquivo sw.js, podemos trabalhar com sua API. Um service worker possui um ciclo de vida. Os principais eventos que podemos escutar estão listados no código a seguir:

com um browser que ainda não tem acesso a service workers, a aplicação continua funcionando normalmente, porém o usuário não terá acesso a algumas funcionalidades, ou seja, a aplicação funciona independentemente de browser ou plataforma, mas quem usa um browser mais moderno tem acesso às funcionalidades extras. Um segundo ponto importante é que o código do service worker fica disponível em um arquivo separado (sw.js) do código JavaScript usado pela aplicação. Podemos escrever todo o código do service worker manualmente ou gerar automaticamente (vamos aprender sobre as duas opções neste artigo). Para verificar se o service worker está disponível e funcionando perfeitamente, podemos acessar as ferramentas de desenvolvedor do browser:

iMasters #26 Maio 2018

self.addEventListener(‘install’, (event) => { // SW foi baixado e instalado // Passo 1 é cachear o App Shell // Preparar a app para funcionar offline }); selfaddEventListener(‘activate’, (event) => { // SW está instalado e ativo // Podemos terminar o setup // Ou limpar cache antigo }); self.addEventListener(‘fetch’, (event) => { // Escuta cada evento de fetch // E faz alguma coisa para cada request // feito da app para API server });

// 49 Cacheando os arquivos para uso offline É durante o evento de instalação do service worker que vamos cachear os arquivos estáticos (incluindo os arquivos do App Shell) para que fiquem disponíveis offline. O código abaixo exemplifica essa tarefa:

Primeiro, damos um nome para o nosso cache ({1}). Isso vai nos ajudar quando acessarmos as ferramentas de desenvolvedor e localizarmos o cache para verificar os arquivos que foram cacheados. Segundo, vamos listar todos os arquivos que queremos cachear ({2}). Arquivos JavaScript da aplicação, arquivos HTML e CSS. Devemos também cachear o arquivo manifest.json, e podemos cachear imagens estáticas, incluindo os ícones do manifest. json e quaisquer outros arquivos que queremos que fiquem offline também. Escutamos o evento de instalação e, dentro do método event.waitUntil, iremos trabalhar com o cache. Esse método recebe uma Promisse que é usada para saber quanto tempo o processo demorou para ser completado e se a instalação foi completada com sucesso. Abrimos o cache do browser ({3}) e adicionamos todos os arquivos no cache ({4}). Após a instalação do service worker, o ciclo de vida muda para o estado de Installed (Instalado). Isso significa que o sw terminou o setup e está esperando pelos clientes que estão utilizando outros service workers serem fechados. Porém, podemos pular esse estado e ir diretamente para o estado de ativação. Para isso, usamos o método self.skipWaiting da Promisse ({5}), que não irá esperar por outros clientes serem fechados. Podemos verificar no browser se os arquivos foram cacheados com sucesso:

iMasters #26 Maio 2018

50 // CAPA

Cacheando requests Apenas cachear os arquivos offline não é o suficiente para que eles sejam mostrados caso o usuário não esteja conectado. Precisamos verificar se o usuário está conectado e, caso não esteja, tomar uma ação (nesse caso, retornar os arquivos cacheados para que sejam mostrados no browser). Para isso, escutamos o evento fetch. O código listado a seguir é um exemplo de como escutar o evento fetch:

self.addEventListener(‘fetch’, function(event) { event.respondWith( caches.match(event.request) // {6} .then(function(response) { if (response) { return response; // {7} } return fetch(event.request); // {8} } ) ); });

Se o recurso que foi requisitado estiver disponível no cache ({6}), então o arquivo do cache é retornado ({7}); caso contrário, é usada a própria API de fetch (versão mais moderna para requisições do bom e velho Ajax) para fazer a requisição ({8}). Estratégias de recursos offline Existem algumas estratégias diferentes que podemos usar para mostrar conteúdo offline em uma PWA, e você pode escolher aquela que mais atende ao seu site ou produto. Vamos dar uma olhada em cada uma delas. Página offline Essa é a versão mais simples para notificar o usuário de que está offline. É similar à famosa página de erro 404, que alguns sites implementam, porém, nesse caso, mostramos uma página offline.html caso o usuário esteja offline. Essa página offline.html precisa ter sido cacheada antes na instalação do service worker. O exemplo é apresentado a seguir: iMasters #26 Maio 2018

self.addEventListener(‘fetch’, function(event) { event.respondWith( fetch(event.request). catch(function(error) { // {9} return caches.open(CACHE_NAME). then(function(cache) { return cache.match(‘offline.html’); // {10} }); })); });

Caso a requisição falhe ({9}), abrimos o cache e retornamos à página offline.html cacheada. Estratégia cache (offline) first Pode ser que a aplicação já tenha alguns recursos offline e não precise buscá-los no servidor. Um exemplo seriam imagens que não serão atualizadas - portanto, se já existirem offline, a aplicação pode mostrá-las. Mas caso não existam offline, a requisição é feita normalmente para o servidor. O código de exemplo é apresentado abaixo:

function cacheFirstStrategy(request) { return caches.match(request) // {11} .then(function(cacheResponse) { return cacheResponse // {12} || fetchRequestAndCache(request); // {13} }); }

Se o recurso já existir no cache ({11}), o retornamos para que seja exibido na aplicação ({12}), mas, caso não exista, fazemos o request ({13}). A função fetchRequestAndCache está listada a seguir:

// 51

Fazemos a requisição online ({14}) e, caso haja sucesso, abrimos o cache ({15}), cacheamos o recurso para que ele fique offline também ({16}) e, na próxima vez, a versão offline poderá ser exibida. No final, retornamos uma cópia do recurso ({17}). Estratégia network first Caso a informação ou página que será exibida na aplicação seja dinâmica e sempre esteja atualizada, podemos primeiro tentar fazer a requisição online, mas, se não for possível, podemos tentar retornar a informação que estiver no cache. Abaixo temos um exemplo:

function networkFirstStrategy(request){ return fetchRequestAndCache(request) // {18} .catch(function(response) { // {19} return caches.match(request); // {20} }); }

Primeiro, tentamos fazer a requisição online ({18}) e também cacheá-la para que esteja também disponível offline futuramente. Caso não seja possível fazer o request ({19}), retornamos o recurso que está offline. Estratégias híbridas E é claro, podemos combinar as estratégias conforme a necessidade! Suponha que queremos exibir as imagens estáticas do cache (offline first), mas, se for outro tipo de request, queremos obter a informação atualizada (network first):

self.addEventListener(‘fetch’, function(event){ var requestUrl = new URL(event.request. url); var requestPath = requestUrl.pathname; // se for imagem, off-line first if(requestPath == imagePath) { event.respondWith(cacheFirstStrateg y(event.request)); // se for outro request, tenta online } else { event.respondWith(networkFirstStrate gy (event.request)); } });

Atualizando um service worker Suponha que você atualize o cache (‘usersCacheV2’) ou adicione um segundo cache na aplicação. Podemos usar o evento de ativação do service worker para varrer e limpar o cache de informações que não queremos mais. iMasters #26 Maio 2018

52 // CAPA

self.addEventListener(‘activate’, function(event) { var cacheWhitelist = [‘’usersCacheV2’’, ‘my-other-cache’]; event.waitUntil( caches.keys(). then(function(cacheNames) { return Promise.all( cacheNames. map(function(cacheName) { if (cacheWhitelist. indexOf(cacheName) === -1) { return caches.delete(cacheName); } }) ); }) ); });

O evento de ativação é usado geralmente para gerenciar o cache. Mais sobre service workers Existem algumas regras em relação ao service worker que são importantes saber: Não é possível manipular o DOM. Entretanto, o service worker é um Worker (interface Worker da API do Web Service Worker), e isso permite que se realmente for necessário manipular o DOM, é possível através da interface postMessage; HTTPS é obrigatório (seguro). Em modo de desenvolvimento, é possível usar o service worker com localhost, porém quando a PWA é instalada em produção, é necessário o uso de HTTPS, pois somente com HTTPS é possível registrar o service worker; Requisições só funcionam para o mesmo servidor (de minha-pwa.com para minha-pwa.com). Requisições para subdomínios e domínios diferentes só irão funcionar caso o CORS esteja habilitado. iMasters #26 Maio 2018

Gerando o service worker automaticamente Ufa! Criar esse service worker para a minha PWA parece dar bastante trabalho! Realmente é a parte mais trabalhosa de uma PWA, e também uma das mais importantes. Existe alguma ferramenta que podemos usar similar ao gerador do manifest.json? A resposta é sim! O próprio site http://preview. pwabuilder.com ajuda nos casos mais simples. A biblioteca sw-toolbox é uma opção que foi bastante utilizada, mas hoje a maneira mais moderna de se gerar o sw.js automaticamente é usando a biblioteca workbox (https://goo.gl/CFCEpw), que inclusive tem suporte para o webpack, além de uma ferramenta de linha de comando (CLI) caso a pessoa que irá desenvolver não esteja familiarizada com Node.js. Voltando ao exemplo das imagens, vamos configurar o workbox com webpack para cachear os arquivos estáticos da aplicação:

Vamos cachear todos os arquivos estáticos da aplicação ({21}) e gerar o sw.js dentro da pasta de distribuição da aplicação ({22}). Além disso, caso a rota da requisição seja minha-pwa.com/users, queremos usar a estratégia network first, ou seja, como é acesso a uma API, queremos obter a informação do servidor e, caso não esteja disponível, o recurso disponível no cache é retornado ({23}).

// 53

Mas e no caso das imagens que queremos pegar que estão disponíveis no cache? Também podemos configurar outra rota:

workboxSW.router.registerRoute( /\.(?:png|gif|jpg|jpeg|svg)$/, workboxSW.strategies.cacheFirst({ cacheName: ‘images’, plugins: [ new workbox.expiration.Plugin({ maxEntries: 60, // máximo 60 imagens maxAgeSeconds: 30 * 24 * 60 * 60, // 30 dias }), ], }), );

E dessa vez usamos a estratégia cacheFirst! Bem mais simples do que várias linhas de código! Porém, apesar de ferramentas como essa existirem, é sempre bom sabermos como usar a funcionalidade “crua”, pois facilita muito saber o que ela está fazendo quando se usa uma abstração como o workbox. Aplicação também precisa estar preparada Com o service worker, conseguimos brincar com as funcionalidades offline de arquivos estáticos da aplicação. Mas e dados que são retornados por uma API do servidor? Na PWA usada como exemplo neste artigo, os dados da API usada na aplicação (https:// randomuser.me/) também ficam disponíveis offline caso o usuário já tenha acessado a API antes. Para isso, também podemos usar um cache para dados, como o IndexedDB. Toda vez que é feita uma requisição online, cacheamos os dados e, caso a requisição não possa ser feita, obtemos os dados que foram cacheados no IndexedDB. A imagem abaixo demonstra essa funcionalidade:

iMasters #26 Maio 2018

54 // CAPA

Engajamento É muito comum acessar um site nos dias de hoje e, logo depois que a página é carregada, aparecer um pop-up perguntando se deseja receber notificações. São as famosas notificações push. Mas engajar o usuário hoje com PWAs vai muito além de notificações. Temos um conjunto de APIs incríveis ao nosso dispor, como comunicação em tempo real de áudio e vídeo, bluetooth, USB, geolocalização, reconhecimento de voz, e até checkout de pagamentos! Há cinco anos, uma parte dessas APIs estava disponível somente na “web mobile” em soluções híbridas, como o Apache Cordova. E, coincidentemente, a API para geolocalização, bateria e verificar conexão de rede são bem similares às APIs nativas do Cordova/Phonegap. Podemos visualizar o que está disponível para os browsers no site https://whatwebcando.today/. Aproveite todo esse poder e use essas APIs no seu projeto web, independentemente de ser PWA ou não!

iMasters #26 Maio 2018

Lighthouse para auditar a PWA Com todos esses passos, é importante saber se estamos no caminho certo quando estamos criando a nossa PWA ou transformando um site numa PWA. O Lighthouse é a ferramenta mais indicada para esse trabalho. Pode ser instalado como pacote NPM ou como plugin do Chrome. O Lighthouse avalia a performance da aplicação, o checklist de PWA, a acessibilidade, as boas práticas e também o SEO. A pontuação que precisamos olhar, nesse caso, é a de PWA. E não tem problema se em um primeiro momento o seu site não estiver com pontuação 100 em todos os itens! O Lighthouse mostra os itens que foram avaliados, os que falharam, e pode ser uma ótima forma de estudar mais sobre PWAs, performance, SEO, acessibilidade e boas práticas, e aos poucos ir melhorando.

// 55 Mitos sobre PWAs Como as PWAs ganharam visibilidade, é comum surgirem alguns mitos também. Vamos lá: PWAs são apenas para Google Chrome e Android No momento que este artigo está sendo escrito, Chrome, Firefox e Opera têm suporte para o service worker. Mas ainda dois grandes jogares estão faltando no time: Edge (Windows) e Safari (iOS), que já adicionaram suporte para o service worker - atualmente disponível no modo preview. Isso significa que, em breve, todo o time terá suporte para service worker em produção! PWAs são apenas para mobile Já é possível hoje instalar uma PWA como uma Chrome App (similar ao famoso PostMan, Hangouts). A Microsoft Store também oferece suporte para PWAs e lista as web-apps como se fossem aplicações nativas! Também existem rumores de que essa funcionalidade deve ser implementada na Google Play Store, mas ainda não foi confirmado 100%. Isso é legal, pois ajuda muito tornar a aplicação descobrível. PWAs são apenas para aplicações offline Dependendo de onde estiver o mercado alvo do seu site, as condições de pacotes de dados podem não ser as mais favoráveis, como situações de conectividade em aviões (ainda é muito caro) e o famoso exemplo do metrô, onde a conexão ao 3G/4G não é estável. Nesses casos, ter uma aplicação offline ajuda muito. Mas a funcionalidade offline não é sobre ser offline. É sobre a confiabilidade da aplicação. É sobre a aplicação funcionar independentemente de conectividade.

A famosa “guerra” nativo x web x híbrido Pode ficar tranquilo, que PWA não veio para tirar o emprego de ninguém! Como mencionado no início deste artigo, PWAs são o novo passo para a evolução da web. Ainda vai existir demanda de mercado para aplicativos mobile nativos e híbridos. PWAs são apenas mais uma opção na nossa caixa de ferramentas. E, como sempre, tudo depende dos requisitos do projeto. É muito interessante ver como a web evoluiu e que conseguimos usar o browser hoje para muita coisa que não conseguíamos há cinco anos! A web ainda tem que comer muito arroz com feijão para que aplicativos nativos deixem de existir! Quem sabe no futuro, ou não. Afinal, pode ser que daqui a cinco anos outra tecnologia exista! Vimos que podemos desenvolver ou transformar uma aplicação web em uma progressive web app aos poucos. Primeiro criando um arquivo manifest.json, depois separando os arquivos estáticos do conteúdo dinâmico, e por fim, implementando funcionalidades offline e engajamento através de APIs da web. Podemos ir um pouco mais além e oferecer conteúdo dinâmico de forma offline também. Já temos casos de empresas que já estão usando PWAs em produção e estão prontas quando o suporte do service worker entrar em produção para o Safari também. Se você já não começou, que tal planejar que seu produto ou blog seja uma PWA também? Por uma web progressiva! Código-fonte completo do exemplo: https://github.com/loiane/pwa-hello-world Demonstração: https://pwa-hello-world.firebaseapp.com/

PWAs são para early-adopters Como atualmente o service worker no Safari ainda não está disponível em produção, muitos podem pensar que PWAs serão “para valer” apenas quando isso acontecer. A palavra-chave é: progressivo. Você pode ter uma PWA e, dependendo do browser, ter acesso a todas as funcionalidades, ou somente usar a aplicação como se fosse um site normalmente. E progressivamente, à medida que as funcionalidades forem adicionadas ao browser, elas ficam disponíveis na aplicação também. Existem vários casos legais de PWA em produção hoje: Twitter Lite (https://mobile.twitter.com/), Starbucks (Estados Unidos: https://www.starbucks.com/), Uber (https://m.uber.com/), Ali Express (https://m. aliexpress.com/ - que inclusive aumentou a porcentagem de vendas após o lançamento da PWA).

Loiane Groner possui mais de 10 anos de experiência em TI, trabalha como Analista de Negócios e Desenvolvedora em uma instituição financeira americana, é Microsoft MVP e Google Developer Expert em Web/Angular e ama compartilhar conhecimento! É palestrante internacional e autora de livros publicados mundialmente pela editora Packt. Entusiasta Java, Sencha, Angular, PWAs, programação reativa e desenvolvimento mobile híbrido. Escreve para o blog https:// loiane.com (que é uma PWA) e publica aulas e cursos em https://loiane.training.

loianeg@gmail.com iMasters #26 Maio 2018

56 // UX DESIGN

TER UM UX DESIGNER NA SUA EMPRESA JÁ NÃO É MAIS ESCOLHA, E SIM NECESSIDADE! Por Bruna Ciafrei Rinaldi, diretora de Arte na Gálata e UX Designer na Editora Alto Astral

O UX Designer já não é um profissional desconhecido ou reconhecido apenas em nichos específicos. Pelo contrário, esse é um profissional necessário nos mais diversos setores como comunicação, marketing, tecnologia e tantas outras áreas. O termo UX Design vem do inglês “User Experience Design”, e sua grande diferença para o Design Gráfico é o desenvolvimento que abrange todos os aspectos que têm relação com os usuários. Em vez de focar no resultado e na experiência final do produto, essa vertente do design busca tornar a experiência do usuário inesquecível em toda a sua composição. Para isso, é preciso atender às necessidades básicas do cliente do início ao fim, provendo uma boa experiência. É comum confundir os termos UX e UI Design, afinal, além de iMasters #26 Maio 2018

semelhantes na escrita, eles são realmente correlacionados. De forma simplificada, podemos dizer que enquanto o UI Design se preocupa com a forma (interface), o UX Design está mais preocupado em definir qual será a sensação (experiência) vivida pelo indivíduo. Resumindo, o profissional UX, ao criar um aplicativo, por exemplo, também se preocupa com o modelo e a interface do produto final, mas sabe que é a interação que esse app proporciona ao usuário que impactará decisivamente na sua avaliação final. Por que ter um UX Designer na empresa? Embora o foco do UX Designer seja na experiência do cliente, seu trabalho não é exatamente o que o usuário quer, mas, muitas vezes, entregar o que ele nem imagina que precisa. Com isso, esse

profissional se torna parte essencial para converter as vendas finais do produto ou serviço oferecido, afinal, de certa forma, ele fica responsável por criar uma experiência cativante ao cliente. E resultado em vendas é o que toda empresa mais quer, certo? O profissional deve estudar e avaliar como os usuários se sentem sobre um sistema, levando em consideração aspectos como a facilidade de uso, percepção de valor e eficiência na execução, além de sempre propor a melhor solução para um determinado problema. Também é necessário que o UX Designer tenha uma visão ampla de todas as disciplinas que envolvem sua atividade. Nesse gráfico desenvolvido pelo especialista Dan Saffer, temos uma ideia mais geral de como o UX é uma junção de todas as áreas que culminam na experiência final do consumidor.

// 57

O que é essencial a um UX Designer? Ser um UX Designer é ser um designer do futuro. E, por isso, é essencial pensar à frente. Como profissional que mudou do Design Gráfico para o UX Design, posso garantir que é preciso muito estudo para se aperfeiçoar no desenvolvimento, além de evitar que antigas práticas e pensamentos que faziam sentido para os trabalhos gráficos não acabem contaminando os projetos digitais. É claro que o Design Gráfico ainda é relevante para muitos setores, mas não podemos negar que a tecnologia e a automação dos processos também chegaram a esse setor, tornando muitas técnicas e práticas até mesmo obsoletas. Diferente de muitos profissionais que já começam pelo Web Design e têm mais familiaridade com o mundo digital, quem

migra do Gráfico para o UX deve ter o cuidado não apenas de estudar, mas também de se acostumar com um modelo muito mais completo de trabalho. Em minha experiência de migração, comecei manipulando ferramentas simples do digital e, principalmente, deixando de “criar tanto” para “organizar mais”. Passei a analisar e a entender mais o que o usuário queria e precisava. E confesso que achei isso desafiador, assim como experimentar novas ferramentas de trabalho e as

diferentes logísticas de funcionamento delas. Experimentei diferentes resultados no decorrer da criação dos sites, e as “sacadas” de venda ou interação se faziam diferentes para cada segmento. Os primeiros passos foram pura experimentação mesmo, além da familiaridade com esse segmento. Outro detalhe que faz uma grande diferença é a atualização constante do UX Designer. Estar por dentro das novidades que estão sempre surgindo é de extrema importância para nós.

PARA EMPRESAS E MARCAS QUE DESEJAM APARECER E TER RESULTADOS, O UX DESIGN É MAIS QUE NECESSÁRIO. É INDISPENSÁVEL iMasters #26 Maio 2018

58 // UX DESIGN

Particularmente, gosto de acompanhar dicas e debates sobre o assunto em alguns lugares como o grupo Experts Brasil (https://goo.gl/9xQDJT), a FanPage UI Lab (https://goo.gl/LvaBia) e o blog UX Collective Brasil (https://goo.gl/dUrzj6). Existem muitos outros sites, blogs, fóruns e páginas especializadas no tema e que são ótimas fontes tanto para quem está pensando em migrar para o UX Design, quanto para quem já é um profissional da área. Vale também ficar sempre de olho em nomes conceituados desse nicho, como Jakob Nielsen, um dos precursores da User Experience, o designer britânico Jonathan Ive e o empreendedor e visionário Elon Musk. E por falar em

visionário, pode até parecer clichê no mundo do Design e da Tecnologia, mas aprender com o inesquecível Steve Jobs também é necessário, afinal, ele é o responsável por criar a Apple, uma marca que tem como principal caraterística a experiência que proporciona ao usuário. Entender alguns conceitos também é fundamental. O UX Design é fruto da linha de pensamento que originou o Design Thinking, que nada mais é que uma forma de abordagem tomada do campo do design e adaptada às empresas e corporações. Já o Lean UX é uma metodologia para processos de Design que preza pela rapidez, quase sempre colaborativo e com foco na experiência que está sendo projetada.

O Design Sprint, desenvolvido pelo Google, é uma maneira de conceituar e tangibilizar de forma prática e ágil uma ideia, um produto, suas implementações e funcionalidades. Tudo isso no menor espaço de tempo possível. Por fim, a Gamification é uma novíssima faceta do Marketing Digital, que ajuda a divulgar a marca e a captar novos clientes através de uma estratégia de interação entre pessoas e empresas, sempre com base no oferecimento de incentivos que estimulam o engajamento do público. Basicamente, para entender uma, é preciso entender todas essas linhas de pensamento. E para ser um bom UX Designer é necessário, em algum momento e/ou projeto, aplicar todas elas. As mulheres como UX Designers Felizmente, o mercado UX não é rude com as mulheres e há diversas profissionais inspiradoras e que estão entre os melhores profissionais do mundo. É interessante analisar também o quanto as mulheres têm mais facilidade de se adaptar às diversas etapas desenvolvidas simultaneamente, além garantir a organização desses métodos e a compreensão do percurso de toda a experiência. O blog UX Collective Brasil listou algumas das mulheres UX Designers mais influentes do mundo, destacando nomes como o de Brenda Laurel, cofundadora da Purple Moon, a primeira empresa de software americana a produzir games para meninas entre 8 e 14

iMasters #26 Maio 2018

// 59

anos. Entre as brasileiras, Amyris Fernandez é um destaque com mais de 30 anos de experiência profissional, liderando times de marketing e UX e desenvolvendo pessoas na área acadêmica. Não poderia concordar mais com a lista do UX Collective Brasil, por isso deixo o link como indicação: https://goo.gl/mKXoVR. Ainda que tenhamos facilidade em dar conta de todos os processos que englobam o UX Design, os estudos e os aperfeiçoamentos são sempre necessários. Entre os cursos que mais agregaram à minha carreira, destaco três: UX & Design Thinking: Experiência do Usuário nos Negócios Design Sprints: da Ideia ao Teste com Usuários em uma Semana Lean UX: Experiência do Usuário em Times Ágeis - Completo Todos são cursos da Udemy (https://www.udemy.com/) e ministrados por Leandro Rezende, experiente UX Designer há quase 20 anos. Em todos foram abordadas práticas como “Estruturação do problema”, “Entrevista em campo com usuários”, “Pesquisas online”, “Jornada do usuário”, “Service Blueprint Roadmap”, “Prototipação”, entre tantas outras. Garantir a experiência e a jornada de uso do usuário é incrível, mas ninguém disse que é moleza! O UX Design na prática Agora que você já sabe um pouco mais sobre como funciona o UX

Design e os processos que compõem essa vertente moderna do Design, nada melhor do que ver um exemplo prático da profissão. Entre os meus trabalhos preferidos está o site do Social Bauru (https://goo.gl/hfaLq7), cujo layout foi construído para que os leitores pudessem navegar pelo site com mais facilidade e eficiência. O projeto levou em consideração a análise da experiência do usuário (User Experience) para compreender o ambiente do usuário e desenvolver soluções para otimizar a navegação. Com este artigo, fica mais fácil entender que investir em um UX Designer nas empresas é garantir um design de fácil compreensão e que proporciona uma boa experiência para o usuário, fazendo com que ele volte a acessar o site. Além disso, o UX é um dos fatores que o Google leva em consideração para o ranqueamento no site de buscas, ajudando o site a aparecer logo nas primeiras páginas do buscador. Para empresas e marcas que desejam aparecer e ter resultados, o UX Design é mais que necessário. É indispensável. Bruna Ciafrei Rinaldi é bacharel em Design e atua no mercado gráfico/ editorial há oito anos. PósGraduada em Marketing Digital, atualmente trabalha com UX na Editora Alto Astral e também é sócia-proprietária da empresa Gálata, especializada em criação de sites.

contato@brunaciafreidesigner.com.br iMasters #26 Maio 2018

60 // FALANDO EM DEV...

Diga adeus à era do programador das cavernas! Por Diego Pinho, para Revista iMasters

Quando falamos sobre profissionais de tecnologia – principalmente com pessoas que não trabalharam diretamente na área – logo vem à mente o mesmo perfil: uma pessoa extremamente tímida e pouco comunicativa, que usa óculos, é ótima com operações matemáticas (e impressoras!), gosta de videogames, séries e filmes, trabalha bem sozinha e não sai da frente do computador definitivamente por nada. Embora esse estereótipo possa ter sido verdade em algum ponto da história e ainda represente uma parcela dos (as) desenvolvedores (as) de software, essa descrição já não é verdade há muito tempo. Com a criação e o desenvolvimento da Internet, a informação se tornou mais acessível e, desde então, começaram a surgir profissionais de tecnologia com os mais diversos estilos, cores, gêneros e personalidades (e isso é ótimo!). O que antes era restrito à academia se tornou público e acessível. E junto a toda essa evolução, o mercado de trabalho não ficou para trás. Os processos que antes eram manuais e demorados, se tornaram automáticos e instantâneos. O que era feito de forma artesanal, hoje é feito por computadores através de algoritmos complexos. E para acompanhar toda essa evolução, o modo como desenvolvemos software também mudou. Ou seja, o mundo todo evoluiu, e os profissionais de tecnologia também.

iMasters #26 Maio 2018

// 61

Se voltarmos no início da era da computação e compararmos os profissionais da época com os que temos hoje, sem dificuldades notamos uma série de diferenças. O primeiro de tudo era que o modo de trabalho era extremamente diferente. Como o ciclo de desenvolvimento dos projetos era bem longo (modelo em cascata), com duração de vários meses (ou Engenharia de requisitos do sistema

mesmo anos), esses profissionais eram geralmente isolados e apenas davam as caras para fazer as entregas lá na etapa final do projeto. Não havia tanta comunicação, afinal, não era necessário, já que os requisitos eram todos especificados no início do projeto. Esse modo de trabalho acabou formando a imagem do (a) programador (a) que citei acima.

Especificação dos requisitos do sistema π Engenharia de requisitos do software

Especificação dos requisitos de software π Design do software

Especificação do design do software π Programação e testes

Sistema de software executável π Testes e sistema

Sistema completo π Manutenção do sistema

iMasters #26 Maio 2018

62 // FALANDO EM DEV...

Modelo de desenvolvimento em cascata Com o passar dos anos, esse modelo se tornou insustentável, já que o tempo de desenvolvimento era muito longo e os clientes precisavam de entregas mais rápidas. Não era raro os requisitos mudarem no meio do caminho e acabarem invalidando todo um projeto. Para sanar essas dificuldades, surgiram as metodologias ágeis, como é o

iMasters #26 Maio 2018

caso do Scrum. Em termos simples, a ideia é que, ao invés de termos ciclos longos de desenvolvimento com a entrega somente no final, temos ciclos menores de entregas contínuas que vão adequando o projeto de acordo com o feedback do cliente. A adoção desse modelo afetou diretamente o modo de trabalho dos (as) programadores (as), e é esse ponto que gostaria de discutir.

O software pode ter a melhor arquitetura do mundo, mas só terá valor real se atender à necessidade do cliente

// 63 Modelo de desenvolvimento ágil Para atender ao dinamismo da tecnologia, o profissional da atualidade precisa ser, acima de tudo, ágil. Com a explosão da internet e dos projetos de código aberto, inúmeras tecnologias surgem e morrem literalmente todos os dias. O profissional precisa ser flexível para conseguir se adaptar. Mas ser bom de código é apenas um dos requisitos. Para se manter relevante e se destacar, o profissional precisa “sair da sua caverna” e interagir com o mundo à sua volta. Em outras palavras, é preciso saber se comunicar.

Não adianta saber implementar um algoritmo supercomplicado se não souber entender o que o cliente precisa. O software pode ter a melhor arquitetura do mundo, mas só terá valor real se atender à necessidade do cliente. É verdade que muitos escolhem a área de TI como profissão por ser um trabalho que historicamente envolve pouco contato com outras pessoas, mas essa já não é mais uma realidade, tanto que em empresas de médio/grande porte, os profissionais são submetidos a dinâmicas de grupo antes mesmo de qualquer prova

Hoje não existe muito espaço nas empresas para as pessoas que gostam de trabalhar sozinhas, afinal, os projetos hoje são multidisciplinares e envolvem muitas pessoas. Além de saber programar, é preciso saber conversar com os:

ou entrevista técnica. Claro que existem exceções, mas no geral é uma grande ilusão. Até mesmo trabalhos remotos, que a princípio dão a falsa ideia de que são trabalhos isolados, envolvem muita comunicação. Seja pessoalmente ou por meio de um e-mail, telefone, WhatsApp, Skype e afins, o (a) programador (a) do século XXI precisa se comunicar.

1. Clientes para entender o negócio e os requisitos do projeto; 2. Gerentes (e superiores) para estabelecer prazos e entregas; 3. Membros da sua própria equipe para conseguir arquitetar e desenvolver o projeto; 4. Designers para definir os layouts; 5. Testadores para entender as falhas e erros; 6. Responsáveis pela infraestrutura para entender como submeter o projeto para o cliente; 7. Todos os envolvidos para atender a todas as demandas e assim criar um software que satisfaça todos os lados.

Diego Pinho é bacharel em Ciência da Computação pela PUCSP e MBA em Gestão da Tecnologia da Informação na FIAP. Autor do livro ECMAScript 6 – Entre de cabeça no futuro do JavaScript. Cofundador da Code Prestige e Community Manager no iMasters.

diego.pinho@imasters.com.br iMasters #26 Maio 2018

64 // CÓDIGO ABERTO

Mensageiros livres Por Kemel Zaidan, gerente de Desenvolvimento na Nuveo

Por muitos anos, o espaço dos mensageiros foi praticamente dominado pelo Skype. Já no mundo do software livre, o cliente multiprotocolo Pidgin reinou soberano por anos a fio. Contudo, o surgimento dos dispositivos móveis deu lugar ao WhatsApp e a uma multiplicidade de outros mensageiros mais adaptados a celulares e smartphones. Hoje, muitos projetos de software livre estão na corrida para criar um protocolo livre e seguro que seja amigável para celulares ao ponto de poder substituir o já ultrapassado XMPP, inclusive em ambientes corporativos. Wire (GPL3): com foco na privacidade, o Wire não deixa nada a dever para outros mensageiros mais conhecidos. Suas features incluem criptografia de ponta-a-ponta, transferência de arquivos, chamadas de voz e vídeo (inclusive em grupo), clientes nativos para iOS e Android. Suas bibliotecas criptográficas são escritas em Rust, enquanto que o servidor é quase todo em Haskell. https://wire.com

iMasters #26 Maio 2018

Tox (GPL3): se a maior parte dos projetos dessa área segue a arquitetura cliente-servidor, o projeto Tox decidiu ousar ao implementar um protocolo P2P (peer-to-peer), no qual os nós se comunicam diretamente, dispensando o uso de servidores. Apesar de a criptografia utilizada por ele ainda estar em estágio experimental, o protocolo já dá suporte para todas as features modernas que se espera de um mensageiro, contando ainda com várias opções de clientes para as mais diversas plataformas. https://tox.chat

// 65

Ring (GPL3): o Ring adotou uma postura intermediária entre o Wire e o Tox, pois apesar de possuir um daemon, conta com conexão e descoberta de clientes por peer-2-peer através do protocolo OpenDHT. Além disso, o projeto reaproveitou muitas das tecnologias já disponíveis para sistemas Linux, como as bibliotecas LibAV, FFMPEG, GNU TLS e o protocolo SIP para criar um mensageiro seguro e completo no que diz respeito aos recursos disponibilizados. Apesar disso, possui clientes para todas as principais plataformas móveis e desktop, incluindo Windows. https://ring.cx Riot (Apache2): o Riot, por sua vez, optou por utilizar uma arquitetura federada oriunda do projeto Matrix (matrix. org) e que funciona de forma semelhante ao e-mail, onde qualquer um pode subir um servidor que terá vários clientes conectados a ele; entretanto, os servidores se comunicam entre si, permitindo o envio de mensagens entre clientes conectados a diferentes servidores. https://riot.im Signal (AGPL3): o Signal talvez seja o aplicativo mais conhecido desta lista, pois costumava vir instalado por padrão no Cyanogem Mod, o famoso (porém descontinuado) sistema alternativo para celulares Android. Seu diferencial é a integração nativa com torpedos SMS de forma transparente: caso o destinatário da mensagem também tenha o Signal instalado, a mensagem será enviada pela Internet; caso contrário, ele utilizará mensagens de texto SMS. Seu servidor também está disponível e encontra-se escrito em Java. https://signal.org

Kemel Zaidan é um pseudoprogramador, metido a jornalista, com alma de artista e Gerente de Desenvolvimento na Nuveo.

kemelzaidan@gmail.com

iMasters #26 Maio 2018

66 // CARROS AUTÔNOMOS

CARROS AUTÔNOMOS COM “SANGUE” BRASILEIRO Por Raphaell Maciel de Sousa, professor de automação industrial no Instituto Federal da Paraíba

O assunto tem estado sob os holofotes do desenvolvimento tecnológico e vem ganhando mais e mais força nos últimos anos. De acordo com o 2018 Autonomous Vehicles Readiness Index da KPMG — ou, em tradução livre, Índice de Prontidão de Veículos Autônomos, que leva em consideração aspectos como tecnologia, inovação, infraestrutura, legislação e aceitação do consumidor —, Estados Unidos, Suécia, Reino Unido, Singapura e Alemanha são os cinco mais preparados para a tecnologia de carros autônomos. Nos últimos anos, grandes empresas têm investido muito dinheiro em carros autônomos por meio de iniciativas que parecem ser versões modernas e mais voltadas para business do DARPA Robotics Challenge (uma competição de carros autônomos que, em 2005, coroou Stanlay, o carro autônomo da Universidade Stanford, liderada pelo professor e fundador da Udacity Sebastian Thrun). Atualmente, o assunto pode ser considerado como o Santo Graal da tecnologia: praticamente todas as gigantes, como Tesla, Uber, Toyota, BMW, Volvo, Nissan, Ford, entre outras empresas, estão no páreo para colocar nas ruas essas belezas tecnológicas de quatro rodas, com muitos sensores, algoritmos e poder de processamento. Estes têm sido tempos excitantes para estudantes e pesquisadores que trabalham no desenvolvimento do tema — que parece ser promissor o suficiente para se arriscar a dizer que ele moldará o futuro de como os seres humanos se locomovem. Os grandes centros de pesquisa estão recebendo muito incentivo das montadoras, e jovens talentos estão sendo contratados a peso de ouro para trabalhar na área! iMasters #26 Maio 2018

Mas encontrar profissionais capacitados nesse segmento não é nada fácil, afinal, são necessários conhecimentos profundos em ROS (Robot Operating System), experiência de programação em C++ e Python, fusão de sensores, visão computacional, programação em GPU (Graphics Processing Unit), além de entendimento sobre hardware, caso queira colocar a mão na massa! Mas como fica o Brasil nisso tudo? Infelizmente, boa parte da tecnologia consumida aqui vem de fora, o que chega a ser muito triste, tendo em vista a quantidade de profissionais capacitados e as pesquisas em desenvolvimento nos centros tecnológicos. E é sobre isso que iremos falar neste artigo. Do norte ao sul do País existem iniciativas e pesquisas relacionadas com carros autônomos — projetos que já funcionam e que deixam clara a capacidade brasileira quando há investimento consciente em pesquisa. Conheceremos agora um pouco do trabalho de algumas das equipes brasileiras que estão na vanguarda tecnológica: algumas delas estão trabalhando há anos e têm resultados importantes, enquanto outras estão dando passos largos seguindo essa tendência tecnológica. CaRINA Desenvolvido pelo Laboratório de Robótica Móvel (LRM) da USP e supervisionado pelos professores Fernando Santos Osório e Denis Fernando Wolf, o projeto CaRINA (Carro Robótico Inteligente para Navegação Autônoma) tem obtido resultados impressionantes. O carro, que já está na sua segunda

// 67 versão, é equipado com uma gama de equipamentos para percepção e navegação autônoma. Entre eles estão 1 LIDAR Velodyne HDL-32E, 1 câmera estéreo PointGrey Bumblebee2, 1 GPS Septentrio AsteRx2i e 1 IMU Xsens MTi. Quanto ao software, o CaRINA é baseado no sistema operacional Linux Ubuntu e utiliza ROS, uma plataforma de software open source que possui uma gama de pacotes para conexão entre os diferentes elementos presentes no carro autônomo — e que podem ser utilizados em projetos de robótica no geral. O ROS torna mais prática a implementação de aplicações que precisam funcionar em paralelo e trocar mensagens entre si. Isso é perfeito para aplicações de carros autônomos! ∂ Caminhão autônomo

∂ CaRINA II

Caminhão autônomo com colaboração da Scania Este é mais um trabalho desenvolvido pela equipe do LRM da USP. Em parceria com a empresa Scania, o LRM desenvolveu o primeiro caminhão autônomo da América Latina. O protótipo utilizado nos testes experimentais é um G360 — um monstro autônomo que pesa nove toneladas!!! A equipe do LRM realizou modificações mecânicas e eletrônicas para que ele pudesse ser totalmente controlado por computador. Quanto ao hardware, foi utilizado um GPS de alta precisão para localização e planejamento de trajetória; já a detecção de obstáculos foi realizada por meio de dados obtidos por um radar e uma câmera estéreo. O software de controle, desenvolvido no próprio LRM, é executado em um único computador embarcado no veículo. Esse, sim, é um gigante de peso desenvolvido com tecnologia e mão de obra brasileira!

IARA O projeto IARA (Intelligent Autonomous Robotic Automobile), desenvolvido pelo Laboratório de Computação de Alto Desempenho (LCAD) e liderado pelo professor Alberto Ferreira Souza, da Universidade Federal do Espírito Santo, merece destaque. Ele teve seu início em 2009, com estudos de visão computacional e robótica móvel em ambientes simulados e dados de sensores reais, em tarefas de mapeamento e localização, além de detecção e reconhecimento, por meio de imagens de câmeras. Em 2012, foi adquirido um carro Ford Escape Hybrid, que foi adaptado para permitir o controle do sistema de acionamento do volante, acelerador, freios, entre outros dispositivos do veículo, por meio de sistemas computadorizados desenvolvidos pelo projeto IARA. Desde então, pesquisas vêm sendo desenvolvidas pelo LCAD e, atualmente, o IARA já conta com diversos sistemas, como: mapeamento, localização, tomada de decisão de alto nível, planejamento de caminho, planejamento de movimento, controle, detecção e rastreamento de objetos móveis, detecção e reconhecimento de semáforos, detecção de pedestres, entre outros. Para isso, a IARA conta com diversos sensores, como um Light Detection and Ranging (LIDAR) Velodyne HDL 32-E, um SICK LD-MRS 3D LiDAR, um Trimble Dual Antenna RTK GPS, um Xsens Mti IMU, câmeras Point Grey Bumblebee stereo, uma câmera ZED 2K stereo, e um computador Dell Precision R5500 (2x Intel Xeon 3,46 GHZ, 12GB RAM e uma GPU Tesla C2050). Para apresentar os resultados do projeto, foram escolhidos dois desafios. No primeiro, em 2014, a IARA percorreu de forma autônoma um percurso de 3,7 km no anel viário iMasters #26 Maio 2018

68 // CARROS AUTÔNOMOS da UFES dentro do campus de Goiabeiras, em Vitória. No segundo, em 2017, a IARA percorreu 74 km de Vitória até a cidade de Guarapari em modo autônomo, a uma velocidade média de 45km/h, com poucas intervenções no percurso. Atualmente, o IARA pode chegar a 60km/h e é capaz de lidar com situações reais de trânsito em ambientes urbanos e rodovias. Tudo isso pode ser visto no canal do IARA no YouTube (youtube.com/user/lcadufes)!

∂ Smart Camaro

∂ Projeto IARA

Smart Camaro Vindo da Bahia, o Smart Camaro esbanja simpatia! O projeto faz parte do pós-doutorado do professor José Alberto Diaz Amado, pesquisador do Grupo de Inovação e Pesquisa em Automação e Robótica (GIPAR) do Instituto Federal da Bahia, e é supervisado pelo professor Fernando Santos Osório do LRM da USP. O projeto está em fase de desenvolvimento, mas já chama atenção por onde passa! Todo o processo está sendo implementado em um protótipo de minicarro, um modelo Camaro (elétrico) — o qual foi automatizado e instrumentalizado eletronicamente para esse projeto. A ideia do professor José é aplicar técnicas de aprendizado de máquina a um protótipo em escala piloto, que pode ser utilizado para estudar várias abordagens, como o deep learning (redes neurais em multicamadas, capazes de aprender padrões de comportamento a partir de um banco de dados de aprendizado). Por exemplo, podem-se registrar horas de direção de um carro, e depois utilizar essa técnica para aprender o modo como o motorista dirige; em seguida, a rede é capaz de pilotar o carro de modo autônomo. O Smart Camaro pode ser uma alternativa de baixo custo para o estudo e o treinamento de profissionais da área. iMasters #26 Maio 2018

Wally Carros autônomos, sim senhor! Vamos para o sertão da Paraíba conhecer o protótipo batizado de Wally. O Grupo de Pesquisa em Controle, Automação e Robótica (GPCAR) do Instituto Federal da Paraíba (Campus Cajazeiras), liderado pelo professor Raphaell Maciel de Sousa, desenvolveu esse simpático robô que, apesar do tamanho, não tem nada de brinquedo! O Wally é todo desenvolvido a partir de hardware de baixo custo, sendo que o controle de velocidade é implementado em um Arduino Due, e consiste em duas malhas de regulação com controladores PID: uma das malhas regula a velocidade e a outra, o ângulo de giro do robô. Em seguida, uma rede neural utiliza imagens de uma câmera conectada a um Raspberry Pi, que calcula o ângulo de ajuste, de modo que o robô é capaz de se manter em uma trajetória fechada - tudo isso de modo autônomo! O Wally possui encoders para medir o deslocamento e possibilitar que o Arduino calcule a velocidade do robô, que será utilizada como feedback da malha de regulação da velocidade e controle da velocidade angular do pequeno Wally. Assim como o Smart Camaro, o Wally é uma alternativa de baixo custo que pode ser utilizada em instituições de ensino para o estudo e a disseminação do estado da arte em carros autônomos.

// 69

TEMOS RESULTADOS IMPORTANTES E, COM O INVESTIMENTO CORRETO, É POSSÍVEL, SIM, QUE O BRASIL DEIXE DE SER UM MERO EXPECTADOR E SE TORNE UM DESENVOLVEDOR DE SUA PRÓPRIA TECNOLOGIA ∂ Wally

Mostramos aqui algumas iniciativas de grupos brasileiros que estão trabalhando com carros autônomos no País. Nossos profissionais são criativos e capazes de desenvolver novas tecnologias, contribuindo com o estado da arte do tema. Algumas empresas, inclusive, já estão investindo nas nossas instituições de ensino e priorizando a tecnologia nacional — como no caso da Scania, que investiu bastante no desenvolvimento do caminhão autônomo. Espera-se que outras empresas sigam essa tendência e invistam no potencial do pesquisador brasileiro para que, aos poucos, consigamos gerar mais e mais mão de obra qualificada para trabalhar na área. Temos resultados importantes e, com o investimento correto, é possível, sim, que o Brasil deixe de ser um mero expectador e se torne um desenvolvedor de sua própria tecnologia e fornecedor de profissionais altamente capacitados! Este artigo foi redigido em colaboração com todos os grupos de pesquisa citados aqui — desse modo, eu gostaria de agradecer a disponibilidade de todos!

Raphaell Maciel é graduado em Tecnologia em Automação Industrial pelo Instituto Federal da Paraíba, especialista, mestre e doutro em engenharia elétrica pela Universidade Federal do Rio Grande do Norte. Desde de 2009 é professor do IFPB\ Cz. Concluiu os cursos Nanodegree Fundamentos de Deep Learning e Engenheiro de Carro Autônomo da Udacity, além de estar cursando o Nanodegree Voo Autônomo.

raphaell.sousa@ifpb.edu.br iMasters #26 Maio 2018

70 // INTELIGÊNCIA NADA ARTIFICIAL

A lógica sem lógica Por Alex Lattaro, analista de sistemas

Dentro do mundo da inteligência artificial, encontramos vários algoritmos com suas particularidades. Já falamos de redes neurais artificiais, algoritmo evolutivo e colônia de formigas, por exemplo. Porém, no próprio meio acadêmico e profissional, existem algumas pessoas que não percebem estes algoritmos como “dotados de inteligência”, visto que sua saída é apenas uma dicotomia baseada em um treino. Entretanto, existe uma lógica que foge da tradicional lógica booleana, é a chamada lógica fuzzy, lógica nebulosa, ou lógica difusa, e é dela que vamos falar hoje. A lógica incerta Para explicar um pouco a lógica Fuzzy, vamos nos apoiar na física quântica, já que está tão na moda falar sobre isso. Dentro da física quântica, temos um campo chamado mecânica quântica, que possui um enunciado chamado princípio da incerteza. Este princípio limita a precisão de alguns pares de propriedades de partículas físicas, impossibilitando, por exemplo, que você saiba a posição e a velocidade de um elétron concomitantemente. Aqui não vamos entrar mais a fundo, pois não

iMasters #26 Maio 2018

é o objetivo; porém, este princípio da incerteza serve para entendermos um pouco da lógica fuzzy. Diferentemente do 0 e 1 da lógica clássica, a lógica fuzzy estabelece limites entre 0 e 1. Ela aplica o conceito de exceções às regras da lógica boolena. Pense da seguinte forma: uma expressão pode ser parte falsa e parte verdadeira, depende dos limites impostos pelo código. O mesmo valor pode ser falso em determinado momento e verdadeiro em outro. Na realidade, a lógica fuzzy na é baseada na teoria dos conjuntos fuzzy, que tem como objetivo analisar as incertezas probabilísticas e o conhecimento subjetivo por meio de modelos matemáticos. Porém, achamos mais fácil explicar pelo princípio da incerteza da mecânica quântica. Como diria Einstein, “tão próximas as leis da matemática estejam da realidade, menos próximas da certeza elas estarão. E tão próximas elas estejam da certeza, menos elas se referirão à realidade”. Sistema Fuzzy O processamento do conhecimento fuzzy é baseado no modelo abaixo.

// 71

Banco de Regras

Fuzzificação Escalar ∂ Fuzzy

Na etapa de fuzzificação, são utilizadas funções de pertinência definidas na modelagem do algoritmo. Estas funções podem ser trapezoidais, triangulares, gaussianas ou singletons. O banco de regras é composto por uma base de dados e uma base de regras. Este modelo tem como objetivo caracterizar a estratégia de controle e as metas. Na máquina de inferência é onde se aplica a lógica da tomada de decisão (IF, Else) baseada nos dados do banco de dados. Porém, aqui a importância está presente na definição dos conjuntos fuzzy referentes às variáveis de entrada e saída, visto que o desempenho é medido pela quantidade do número de conjuntos e da forma. Durante a etapa de desfuzzificação, a variável fuzzy é transformada em valores escalares baseados em métodos como média de máximos e mínimos, primeiro máximo e último máximo, centroide e bissietorem. Existem dois modelos de inferência fuzzy, o clássico Mandani e o Takagi-Sugeno-Kang. O primeiro converte valores quantitativos em qualitativos que, após seguidas inferências, os continua transformando em qualitativos. Ao fi-

Máquina de interferência

Desfuzzificação Fuzzy ∂ Escalar

nal, ocorre a desfuzificação na qual estes valores qualitativos se tornam quantitativos novamente. O segundo modelo transforma os valores de saída em funções das variáveis de entrada. Aqui não é necessária a desfuzzificação, visto que a resposta final é dada pela média ponderada das respostas das regras. Didaticamente A princípio, pode parecer um pouco confuso, mas imagine o seguinte: você trabalha em um escritório no qual a temperatura do ar condicionado seja um problema, pois pessoas diferentes têm padrões de conforto diferentes, entretanto, todos querem que o ambiente esteja frio. Então, nosso problema é o seguinte: precisamos de um ambiente confortável e frio; como resolver isso? Aqui, temos um conjunto de variáveis, dadas por cada membro do escritório, que correspondem a temperatura confortável para cada um. Ao mesmo tempo, temos outro conjunto de dados, construído da mesma maneira e que nos mostra o que cada um entende como frio. O que a fuzzy faz é criar uma intersecção do conjunto confortável E frio e iMasters #26 Maio 2018

72 // INTELIGÊNCIA NADA ARTIFICIAL

a união do conjunto confortável OU frio e o complemento de frio que representa as temperaturas que não são frias. Utilizações A lógica fuzzy tem várias aplicações. A princípio ela foi desenvolvida para o processamento de linguagem natural. Era uma tentativa se aproximar a linha de raciocínio e fala de um computador a de um humano. Porém, atualmente, temos outras aplicações. Podemos ver a fuzzy aplicada em identificação de imagens, por exemplo. Normalmente, a classificação de imagens é realizada por meio da segmentação das mesmas e identificação de bordas. Estas bordas, muitas vezes, são complexas de serem localizadas, pois podem existir lacunas entre as segmentações, o que gera uma transição indefinida. Além disso, a identificação pode não ser tão precisa, encontrando uma borda em um local que não é considerado uma fronteira.

Assim, pixels vizinhos podem confundir a lógica booleana comum. Porém, se utilizarmos a fuzzy e seus limites de verdadeiro e falso, podemos trabalhar com ambiguidades e informações imprecisas, o que nos permite utilizar funções de pertinência para delimitar o grau de parentesco entre os pixels. Existem aplicações da lógica fuzzy em sistemas não lineares, como abastecimento de água que levam em consideração os diversos níveis de consumo, rotas de trânsito que levam em consideração modelos de carro, pedágios, além de caracterização de climas, controladores de temperatura, sistemas de reconhecimento de doenças e por aí vai... Sua utilização é enorme e não deveria ser diferente. Como eu sempre digo, a tecnologia é um meio para um fim, e não é um fim em si só; basta apenas que você enxergue um problema na qual ela poderá ser utilizada.

Alex Lattaro é formado em Análise e Desenvolvimento de Sistemas pelo IFSP. É desenvolvedor júnior de jogos, estuda e tem grande interesse nas áreas: Interação Humano Computador, Inteligência Artificial e Design. Também é músico, apaixonado por música, física, anime, séries e filmes

alex.lattaro@gmail.com.

iMasters #26 Maio 2018

// 73

DESENVOLVER OS SEUS PROJETOS COM MAIS PERFORMANCE DEIXOU DE SER ILUSÃO E VIROU REALIDADE.

Com o Cloud Computing da Locaweb você conta com a solução ideal para o seu negócio. Desde autonomia,

A partir de

escalabilidade, servidor virtualizado até a facilidade

de gerenciamento com o mesmo painel de hospedagem.

0,02 /hora

Dê um upgrade nos seus projetos. Acesse locaweb.com.br/cloud e conheça todas as soluções.

Paixão por iMasters #26desenvolver Maio 2018

O 7Masters é nosso encontro mensal de especialistas. Toda última quarta-feira do mês, reunimos 7 mestres de um determinado tema que, durante 7 minutos, expõem para os participantes sua experiência e vivência com o assunto da vez. Os temas são definidos pela equipe de conteúdo do iMasters. Se quiser fazer sugestão de tema, ou palestrante, escreva para setemasters@imasters.com.br. Confira o que rolou nas edições passadas e quais ainda estão por vir em: setemasters. imasters.com.br.

A edição de fevereiro superou as expectativas de público, de debate e de nível dos nossos mestres. Não quer perder o próximo? Fique atento à nossa agenda e se inscreva no nosso site. Confira o que aconteceu:

Em sua talk no 7Masters Blockchain, Henrique Gonçalves Leite falou sobre colecionar tokens infugíveis. Henrique atua como Desenvolvedor de Produtos para o Mercado Pago e fez parte da equipe de implementação da nova Arquitetura de Serviços do Bradesco.

A community builder na rede Women In Blockchain Brasil, Liliane Tie, tratou das possibilidades de democratização do Blockchain no 7Masters.

Na sua palestra no 7Masters Blockchain, Jeff Prestes trouxe à luz o tema “criando sua rede privada Ethereum” e isso em 7 minutos! Jeff tem mais de 22 anos de experiência com Desenvolvimento de Software, trabalhando desde 1999 com Internet. Hoje, Blockchain e Inteligência Artificial são suas novas paixões.

Patricia Luz Bastos, no 7Masters, falou sobre projetos em Blockchain e criptomoedas. Ela é desenvolvedora de Software há 6 anos, formada em Ciência da Computação pela PUC Minas. Busca ajudar a comunidade sendo professora voluntária, palestrante e contribuindo em projetos open source.

iMasters #26 Maio 2018

Fabio Akita Fabio Akita usou seus 7 minutos como mestre no 7Masters para fazer um overview sobre blockchain: o que é, como funciona, para que serve e no que se pode aplicá-lo. Fabio é fundador e organizador da THE CONF e co-fundador e CTO da Codeminer 42, boutique de desenvolvimento de software Ruby/JS.

Wellington Barbosa falou sobre Smart Contracts Multi-Signed no 7Masters Blockchain. O mestre é cientista da computação e tecnólogo em automação e robótica. Tem mais de dez anos de experiência como engenheiro de software.

Solange Gueiros uso sua talk no 7Masters Blackchain para falar sobre publicação e busca de informação no blockchain Ethereum. Solange Gueiros é formada em Ciência da Computação e Pedagogia pela USP, atuando como especialista Blockchain (arquitetura e desenvolvimento), investidora e coaching.

DROPS DO MERCADO

// 75

EMBRATEL LANÇA FLEX CLOUD Nuvem segura e confiável com total controle e autonomia, pagamento sob demanda e flexibilidade. Baseada em tecnologia de Software Defined Network (SDN) e suite Openstack, com o objetivo de fornecer infraestrutura de computação, armazenamento e rede com robustez e escalabilidade, sendo capaz de ser utilizado em implementações de nuvem pública, privada ou híbrida. É possível integrar o Flex Cloud com ambientes tradicionais dentro ou fora do Data Center Embratel.

EDUCAÇÃO E CULTURA PARA INOVAR EM GRANDES EMPRESAS

Inovação e transformação digital são temas estratégicos e grandes desafios para as empresas que desejam liderar seus mercados e manter-se competitivas. Para suportar os executivos de grandes empresas nesse desafio, a ZARPSYSTEM desenvolveu e lançou em conjunto com a GLOBAL LABS, o Digital Innovation One. Uma plataforma de ensino online e multimídia baseada em estudos de casos com empresas inovadoras e livros best-sellers que além de acelerar o conhecimento e desenvolver os colaboradores, também influencia positivamente a cultura da inovação dentro da empresa através de casos de sucesso práticos. A solução também conta com um aplicativo que permite ao colaborador estudar através de vídeos e áudios em modo offline, dando oportunidade para que esse seja mais produtivo em seus micro momentos. Para mais informação acesse https://digitalinnovation.one.

iMasters #26 Maio 2018

76 // POR AÍ

POR AÍ

UNTIL DEAD É O PRIMEIRO GAME BRASILEIRO A GANHAR O INDIE PRIZE O premiado game da Monomyto, que traz uma nova visão para jogos de zumbis, ganha versão definitiva para Android e trailer de lançamento. O Util Dead, o jogo free-to-play vencedor do Indie Prize 2017 de Seattle, produzido pela Monomyto Game Studio, está disponível em sua versão final para os usuários e Android desde o dia 6 de março. Inspirado nos filmes clássicos de detetive Noir e com uma jogabilidade construída com base em conceitos de furtividade e combates táticos por turnos, o jogo dá uma roupagem totalmente nova para games de zumbis, pois agora o mais importante não é matar mortos-vivos, mas sim investigar crimes sem ser apanhado por eles.

iMasters #26 Maio 2018

// 77

Conheça o Movile Tech Conteúdo de Tech para Tech, criado por engenheiros de todas as empresas do Grupo. Artigos educativos sobre as tecnologias que as empresas utilizam. Cases com os principais desafios e soluções.

acesse: movile.blog

iMasters #26 Maio 2018

78 // POR DENTRO DO W3C

OFERECIMENTO

MANTENEDORES

iMasters #26 Maio 2018