Aplicações Web

.Net Core - Testes Unitários no Linux

2018-08-25T23:38:00.000-03:00

Para adicionar seu projeto de teste, primeiro crie uma solução que irá agrupar os projetos. Para criar uma nova solução utilize o comando:

dotnet new sln

Para criar um projeto de teste, é possível utilizar xunit:

dotnet new xunit -o NOMEPROJETO.Test

ou para utilizar mstest

dotnet new mstest -o NOMEPROJETO.Test

Para adicionar uma referência do projeto de Teste ao projeto a ser testado:

dotnet add NOMEPROJETO.Test reference NOMEPROJETO

Depois, deve-se adicionar os projetos à solução:
dotnet sln SOLUCAO.sln add **/*.csproj

Para executar o teste para executar:
dotnet test

.Net Core no Linux

2018-08-25T12:38:00.001-03:00

Criei um projeto no Ubuntu 18.04 para avaliar todo o ecossistema de se trabalhar no Linux e gostei.

Para instalar há 1 mês atrás, tive problema de compatibilidades de pacotes, mas hoje eu peguei, segui as instruções do .Net Core Downloads e foi tranquilo.

Para criar a aplicação o Get Started introduz bem, e, uma vez instalado, tudo é possível fazer por linha de comando no dotnet CLI, conforme exemplo abaixo para se criar um novo projeto:

dotnet new console -o myApp
cd myApp

Para pacotes, é importante entender que a Microsoft definiu também o conceito de .Net Core e .Net Standard e o post .NET Standard - Desmistificando o .NET Core e o .NET Standard os explica bem. No .Net Standard é possível ver uma tabela de compatibilidade:

Entendendo o pacote, é possível navegar no nuget e ver quem tem compatibilidade para sua framework alvo, conforme exemplo abaixo:

Feito isso, você poderá adicionar pacotes à sua linha de comando seguindo o Início Rápido: Instalar e usar um pacote usando a CLI do dotnet. Como exemplo, segue o comando para adicionar o pacote Newtonsoft.Json (Que ajuda a serializar e deserializar Json) :

dotnet add package Newtonsoft.Json

Para editor, o VS Code sugere plugins a medida que você abre projetos e arquivos. Instale o Code abra o projeto seja visualmente ou por linha de comando (para esse basta ir no diretório do projeto, "digitar: code .")

Veja VS Code sugerindo algumas ações, desde instalação de plugins, como comandos para depurar seu projeto, conforme print abaixo:

Ao aceitar a primeira caixa de diálogo, o diretório .vscode é criado, com configurações para possibilitar depuração.

Ao aceitar a segunda caixa de diálogo, o comando dotnet restore é executado.

Feito isso, é possível apertar F5 ou ir no menu Debug (Ctrl+Shift+D) e ir no ícone Start Debug:

Seu ambiente já estará funcional e depurando:

Visão Geral sobre o DDD (Domain Driven Design)

2018-03-27T19:00:00.004-03:00

Introdução

Padrões de projetos são excelentes formas de aplicar soluções validadas para problemas conhecidos.
De toda forma, aplicar soluções onde não existe ou existirá o problema, pode gerar um custo grande no desenvolvimento. A arquitetura emergente fala um pouco disso, de entender que a arquitetura é algo que evolui com o sistema, assim como o negócio.
Tenho percebido uma tentativa de aplicação abrangente de padrões para atender o DDD (Domain Driven Desing), com todas as camadas de abstração, em todo e qualquer caso. A dúvida é se o custo x benefício de manter esta abstração desde a concepção do sistema não o torna mais caro do que evoluir ao longo da vida do sistema com refatorações.
Repare, o objetivo não é deixar de ter padrões de projetos, mas sim saber escolher os necessários para cada caso. Assim como o ágil mudou a forma de entregar valor os usuários, ao invés de especificar tudo, codificar tudo, entregar tudo como no waterfall, o mesmo raciocínio se aplica para arquitetura. Deveríamos mesmo fazer a arquitetura completa? Ou ter uma visão de arquitetura completa e deixar o sistema possível de adicionar novas padrões, quando o desafio for encontrado? E entender que eventuais refatorações são necessárias?
Uma coisa é fato, ter um arquiteto fora do time é como ter área de desenvolvimento separada do teste. As pessoas interagem menos, tomam decisões sem pensar no todo e podem ter um custo maior para viabilizar ou manter decisões impostas.

O que não é?

Como disse o Eduardo Pires "O DDD não é uma receita pronta sobre como desenvolver uma arquitetura baseada em Presentation, Services, Application, Domain e Infra." [3]

Quando usar DDD?

Gosto muito deste texto da Graziella Bonizi da Lambda3 "O DDD é voltado para domínios complexos, e depende da quebra de barreiras de comunicação entre especialistas de negócio e especialistas técnicos, além do engajamento do time técnico em programar de forma que o código reflita o domínio. Se uma dessas variáveis for negativa, provavelmente o DDD não serve para o cenário que você está lidando." [1]

Arquitetura Emergente

É importante também perceber que não se deve aplicar o DDD em todas as entidades de um projeto. Deve-se buscar quais as entidades mais importantes para o negócio e entender aquelas mais simples, como um CRUD.
Veja o exemplo abaixo:

Repare que as entidades simples, cadastrais, pode ter uma arquitetura de CRUD muito mais simples que aplicar as camadas do DDD.
Dicas interessantes de um segundo artigo da Graziella da Lambda3 [2]: "princípios utilizados na implementação do sistema Produção:
Começar simples: Você não precisa aplicar todo o conhecimento técnico que você adquiriu na vida ... evitar causar uma complexidade técnica acidental. Um sistema raramente vai começar com uma arquitetura de microsserviços, por exemplo;
Não se apegar a Patterns e recursos enquanto eles não forem necessários:... é importante identificar em conjunto com o time que recursos atenderão melhor o domínio, e não mostrar um apego exagerado a certos recursos / frameworks antes de entender se eles realmente representam um ganho para o projeto;
Aproveitar as oportunidades de melhoria: Pode ser que, após diversas interações, o time tenha amadurecido o suficiente para ver que a implementação está limitando o crescimento do projeto. Bom, talvez tenha chegado a hora de refatorar parte, ou até mesmo todo o código."
Eduardo Pires também comenta que não é necessário implementar todas as camadas para ter o DDD: "O DDD não prega a necessidade de uma arquitetura de 4 camadas (Presentation, Application, Domain e Infra). Pelo contrário, o arquiteto tem a liberdade de definir o melhor estilo arquitetural para atender a necessidade da aplicação, podendo utilizar modelos simples de 3 camadas como o Table Module Pattern."[3]

Implementações

Uma implementação muito conhecida para .net é o ASP.NET Boilerplate, que tem a implementação das 4 camadas para o DDD:
"Presentation Layer: Provides an interface to the user. Uses the Application Layer to achieve user interactions.
Application Layer: Mediates between the Presentation and Domain Layers. Orchestrates business objects to perform specific application tasks.
Domain Layer: Includes business objects and their rules. This is the heart of the application.
Infrastructure Layer: Provides generic technical capabilities that support higher layers mostly using 3rd-party libraries." [4]

Fontes

[0] [Livro "Domain-Driven Design: Tackling Complexity in the Heart of Software (Inglês)" do Eric Evans (Autor)] (http://amzn.to/2G1o9mZ)
[1] https://www.lambda3.com.br/2017/10/desmistificando-o-ddd/
[2] https://www.lambda3.com.br/2017/11/ddd-aplicado-case-fluxo-de-producao-de-equipamentos-por-demanda/
[3] http://www.eduardopires.net.br/2016/08/ddd-nao-e-arquitetura-em-camadas/
[4] https://aspnetboilerplate.com/Pages/Documents/NLayer-Architecture
https://www.pluralsight.com/courses/domain-driven-design-fundamentals
https://www.lambda3.com.br/2016/10/podcast-14-domain-driven-design/

Configurando o TFVC no VS Code

2017-11-21T17:49:00.001-02:00

dSe você trabalha com o Team Foundation Version Control (TFVC) com o Visual Studio, deve conseguir configura-lo com poucos passos. Mas se trabalha com o VS Code a coisa é menos trivial, já que é feita pela extensão "Visual Studio Team Services extension for Visual Studio Code". O cenário fica ainda mais complicado se você trabalha com Linux.

Para começar, é importante conhecer alguns conceitos como Workspace, Workfold. Depois é importante conhecer a linha de comando, já que a extensão utiliza só o executável TF e muitos dos diagnóticos das situações de problema são feitos utilizando linhas de comando.

Vamos primeiro no passo a passo do que precisa ser feito e no fim do post coloco informações adicionais que pode lhe ajudar a procurar soluções para problemas do seu ambiente.

Configurando a Extensão

Abra o VS Code, vá no ícone Source Control (esquerda), clique nos "..." e depois no Install Additional SCM Providers

Selecione o Visual Studio Team Services

Ao término clique na opção Reload.
Depois vá na opção File, Preferences, Settings:

Busque por tfvc e edite as propriedades
"tfvc.location": (local do executável TF , no meu caso era "C:\\Program Files (x86)\\Microsoft Visual Studio\\2017\\TeamExplorer\\Common7\\IDE\\CommonExtensions\\Microsoft\\TeamFoundation\\Team Explorer\\TF.exe)
"tfvc.restrictWorkspace": true

Dica 1

Assim que configurei o usando o TF.exe do Visual Studio 2105 tive o erro : "It appears you have configured a non-English version of the TF executable. Please ensure an English version is properly configured.", que corrigi instalando o Visual Studio Team Explorer 2017 e renomeando a pasta de localização de "pt-BR" que nessa resposta do stackoverflow expliquei com mais detalhes.

Instalando o Visual Studio Team Explorer 2017

O Visual Studio Team Explorer 2017 é "Uma solução gratuita para não desenvolvedores interagirem com o Team Foundation Server e Visual Studio Team Services." e pode ser baixado neste link.
Ao instalar selecione os pacotes de língua inglês e português(que virá marcado por padrão se seu sistema operacional estiver nessa língua).

Faça a conexão com o TFS na collection desejada. Isso pode ser feito com o comando:
tf workspaces -collection:URL_COLLECTION_TFS

Crie um Workspace local:
tf workspace -new -collection:URL_COLLECTION_TFS -location:local myWorkspaceName

Mapeie um diretório remoto a um diretório local:
tf workfold -map '$/PATH_SERVER' 'C:\PATH_LOCAL' -collection:URL_TFS /workspace:myWorkspaceName

Feito isso deveria ser possível abrir o vscode no c:\path_local, abrir a paleta de comandos (atalho pelo f1) e executar o comando "Team:Sign". Mas tive o erro resolvido com o workaround dessa issue.

Conhecimento adicional para solução de problema

Se algo não funcionar habilite do log da extensão. Isso poderá ser feito dentro do VS Code, no menu File, Preferences, Settings. Adicione a chave "team.logging.level": "debug".
Um arquivo chamado "team-extension.log" será criado localmente na raiz do workspace.
O artigo "Use Team Foundation version control commands" explica
1) Comandos de configuração do ambiente na parte "Set up your dev machine and manage workspaces"
2) Comandos de desenvolvimento na parte "Develop your app", "Suspend your work", "Contribute your work"
3) Comandos para gerenciar arquivos e resolver conflitos "Manage files and solve problems"

Bechmark - Cuidados ao otimizar o seu código

2017-11-15T18:54:00.002-02:00

Precisa fazer uma otimização no seu código? Veja os pontos que é necessária atenção:

1) Tenha métrica antes de qualquer alteração (Baseline).

Isso serve para saber se houve ganho e o quanto. Também para saber se o ganho vem em contrapartida de outro recurso (ganha tempo de processamento, mas aumenta memória)

2) Tenha um ambiente controlado para a execução dos testes
2.1) Pense em executar o processo com exclusividade dos recursos (Se for algum teste de rede, tenha a rede disponível)
2.2) Pense no warmup da aplicação ou opte pelo coldstart. Saiba que seu código pode executar mais rápido uma segunda vez
2.3) Execute o processo a ser otimizado várias vezes, já que alguma das vezes seu ambiente pode estar suscetível a alguma variável que mudar o resultado.
2.4) Tenha as métricas bem definidas, colete bem os dados e analise o antes e o depois Para todos esses itens, conheça o BechmarkDotNet para lhe ajudar.

Veja como começar facilmente no Getting Started.

Várias opções de configuração estão disponíveis facilmente

Comparar o desempenho de diferentes frameworks do .Net.
Definir formas de exportar o resultado, inclusive com gráficos
Definir o teste baseline
Definir variação de parâmetros
Configurar diagnósticos como MemoryDiagnoser e InliningDiagnoser

Para saber mais veja o Overview.

Compartilhar tags de App.Config

2017-11-06T21:39:00.001-02:00

É possível adicionar partes do arquivo app.config/web.config com a configuração:

E criar o connections.config, conforme abaixo:

Além disso, é possível adicionar o connections.config como link, compartilhando entre projetos. Basta selecionar o arquivo e "Adicionar como link". https://stackoverflow.com/a/15154456/3424212

Configurando o Selenium para o Node no Ubuntu

2017-09-18T08:20:00.002-03:00

1) Instale o Node
2) Instale o pacote selenium-webdriver
npm install selenium-webdriver

3) Instale os drivers do browser que deseja trabalhar
3.1) Para instalar Firefox (geckodriver) no Ubuntu, siga os passos:
3.1.1) Ache a ultima versão do driver para a plataforma e faca o download:
wget https://github.com/mozilla/geckodriver/releases/download/v0.19.0/geckodriver-v0.19.0-linux64.tar.gz

3.1.2) Descompacte o arquivo:
tar -xvzf geckodriver*

3.1.3) Faca ele ser executável
chmod +x geckodriver

3.1.4) Deixe ele disponível nos binários locais:
sudo mv geckodriver /usr/local/bin/

3.2) Para instalar Chrome Driver no Ubuntu, siga os passos:
3.2.1) Instale o unzip:
sudo apt-get install unzip

3.2.2) Ache a versão do driver para a plataforma compativel com sua versao do Chrome(Lembrando que nem todo driver e compativel com a versao do Chrome) e faca o download:
wget http://chromedriver.storage.googleapis.com/2.25/chromedriver_linux64.zip

3.2.3) Descompacte o arquivo:
unzip chromedriver_linux64.zip

3.1.3) Faca ele ser executável
chmod +x chromedriver

3.1.4) Deixe ele disponivel nos binarios locais:
sudo mv chromedriver /usr/local/bin/

Referencias:
http://toolsqa.com/selenium-webdriver/selenium-grid-how-to-easily-setup-a-hub-and-node/

Quais as considerações para salvar um senha do usuário na aplicação?

2017-06-29T22:00:00.000-03:00

Se você tiver construindo um App para celular e precisar salvar a senha do usuário, quais os pontos positivos e negativos dessa decisão? Essa funcionalidade pode ser oferecida?

Primeiramente, podemos aprender com quem já faz isso hoje, por exemplo os navegadores. Os navegadores modernos, após você digitar usuário e senha costumam perguntar "Você deseja salvar as informações de acesso deste site?". Neste momento, você sabe quais aspectos de segurança estão envolvidos?

Pontos positivos ao salvar a senha

Você salvar sua senha e não ter que digitar a todo momento tem algumas vantagens:

Evita alguém descobrir sua senha

Ter um keylogger instalado na máquina pode capturar o que foi digitado (Na verdade, se este for o seu problema sua segurança está mais comprometida do que estamos discutindo aqui)

Visualizarem sua digitação. Se você viu o filme do Snowden deve lembrar dele logando em um notebook digitando uns 20 caracteres debaixo de um cobertor. Ver o que você digita no celular é ainda mais fácil por uma pessoa de fora
Comodidade de não ter que digitar a senha a todo momento

Pontos negativos de ter a senha salva

Se esquecer o dispositivo desbloqueado, um invasor que tiver acesso ao dispositivo terá acesso a todos sites e apps que tem senha armazenados.
Senha salvas, por mais que encriptadas ou escondidas, estão no dispositivo. Essas podem ser quebradas (de um jeito fácil ou até difícil, dependendo da implementação do desenvolvedor)

Boas práticas para o usuário que utiliza a funcionalidade

No Chrome rodando no Windows, a senha armazenada depende da senha do usuário do Windows, então escolha um senha forte para o usuário do windows - pois com acesso a esse, o invasor poderá ter acesso ao computador e todas as senhas armazenadas facilmente.
Se proteja de malwares
Se quiser maior segurança, não salve senha no navegador. Salve em gerenciadores de senha como o Keepass. Obviamente, há perda da conveniência entregue pelo auto completar.
Quer ainda mais segurança, faça a criptografia dos dados no disco rígido. Assim caso a pessoa tenha acesso ao dispositivo físico, não terá acesso aos dados facilmente

Conclusão para o usuário

O tanto da segurança ao salvar senhas depende totalmente do usuário e seus cuidados. Passando pelo conhecimento do que está acontecendo no aplicativo utilizado (nesse processo de salvar a senha) e a restrição de acesso ao dispositivo que ocorreu o armazenamento.

Conclusão para o desenvolvedor

Aprenda com soluções de mercado as práticas e riscos de armazenar as senhas, veja os links abaixo explicando o que foi feito pelos navegadores.

Referências:
http://www.pandasecurity.com/mediacenter/security/browser-saves-password-secure/
http://raidersec.blogspot.com.br/2013/06/how-browsers-store-your-passwords-and.html?m=1
https://www.howtogeek.com/70146/how-secure-are-your-saved-chrome-browser-passwords/

Introdução ao Cordova

2017-05-02T22:44:00.001-03:00

O Apache Cordova é uma framework gratuita e de código aberto para criar apps multiplataformas usando Html 5. Este tipo de aplicação é também chamado de app híbrido.

O Html sempre permitiu criar aplicações multiplataformas tendo navegadores como clientes, mas carecia de ter acesso às funcionalidades nativas do celular (Câmera, acesso aos contatos, GPS) – o Cordova veio preencher esta lacuna. Mais recentemente o Progressive Web Apps também vem atender esta mesma situação, sem necessidade de publicar app em loja.

O Apache Cordova consiste nos seguintes componentes:

Código fonte para um container de aplicação nativo, para cada plataforma móvel suportada;
Conjunto de Apis Core que provê à aplicação web acesso às funcionalidades nativas do dispositivo, que normalmente não são suportadas por aplicações no navegador;
Conjunto de ferramentas para gerenciar
1. processo de criação de aplicação
2. o ciclo de vidas de plugins
3. construir aplicações nativas (com o uso das SDKs nativas)
4. testar aplicações em emuladores e simuladores

A aplicação nativa do Cordova contém um Web View (componente Nativo que permite navegar em páginas). Quando a aplicação é iniciada, ela abre a página inicial (html) e segue o fluxo em um navegador padrão, podendo carregar mais recursos (javascript, imagens, json) e modificar a página dinamicamente.

Vantagens do Cordova

Fácil de aprender, se você for um desenvolvedor web poderá utilizar seu conhecimento para gerar um app
Acesso às funcionalidades nativas
Gratuito
Código aberto
Grande comunidade, com mais de 50.000 perguntas feitas no stackflow http://stackoverflow.com/tags/cordova/info
Escreve uma vez e pode fazer múltiplas distribuições

Desvantagens

Documentação pobre
Mais lento que o nativo
Precisa usar outra framework para os componentes (Ionic etc), já que o Cordova é apenas um Wrapper
Bugs no plugin
Nem todos dispositivos são iguais, e o acesso as funcionalidades do celular pode ser diferente

Qual a Diferença de Cordova e Phonegap?

Phonegap é o nome do projeto original, criado pela startup Nitobi por volta de 2009. Em 2011 a empresa foi comprada pela Adobe e o o código aberto do que veio a se tornar o Cordova foi doado ao Apache Foundation.

Hoje o Phonegap é uma distribuição de Cordova mantida pela Adobe.

Como funciona o Cordova?

A interface do Cordova é um web view (componente que permite navegação). A compilação do Cordova apenas pega o Html, CSS e Javascript e disponibiliza juntamente com a App, como recursos normais acessíveis por qualquer navegador.

Funcionalidade Nativa do Dispositivo

O acesso a funcionalidades nativas dos dispositivos é feito por plugins, que disponibilizam uma API para o Javascript. Estes plugins são escritos em códigos nativos, e por isso é necessário ter instalado o SDK das diferentes plataforms que você pretende distribuir.
Há plugins oficiais da comunidade (que tem o prefixo cordova-plugin) e os não oficiais.

O que é possível construir com o Cordova?

Praticamente qualquer tipo de aplicação, mas o Cordova é melhor em buscar dados no servidor, mostrar para o usuário e reagir a entrada de informações.
Também é possível criar apps com base de dados local, como o LokiJS

Limitações

Desempenho

Como o acesso às funcionalidades nativas dependem de plugins, não é interessante criar aplicativos que dependem exclusivamente de CPU e GPU

Disponibilidade de Plugins

Se algum plugin para uma funcionalidade não estiver disponível, você precisará de cria-lo ou esperar alguém fazê-lo.

Web View

O Web view é uma funcionalidade específica de cada plataforma, e por isso pode ter comportamento diferente.
Se necessário é possível utilizar o CrossWalk para ter um web view customizado.

Formas de desenvolvimento

Cross-platform (CLI) workflow: mais indicado se você deseja criar apps multiplataformas.
A linha de comando copia os arquivos necessários para cada plataformas nos subdiretórios corretos e as configurações necessárias, abstraindo os scripts shell de baixo nível.

Platform-centered workflow: quando estiver focando em uma única plataforma e precisa modificar baixo nível. Você poderá misturar componentes nativos com componentes Cordova baseado na Web.

Ao mudar a forma de desenvolvimento do Cross-Plataform (CLI) para a opção específica é um caminho sem volta.

Compilação

É possível fazer o build da aplicação local ou no Phonegap Build Service, que gera os binários para você sem precisar tem o específico de cada plataforma – como no caso do IOS que demanda um Mac.

Referências para o Post

An Introduction to Cordova: Basics por Wernher-Bel Ancheta em Janeiro de 2016

Introduction to Apache Cordova por John M. Wargo em Julho de 2014 com 8 páginas de informações

Curso Building an App With Cordova por Reginald Dawson de Novembro de 2015 com duas aulas iniciais gratuitas e o vídeo abaixo, que mostra mais um pouco sobre configuração de ambiente, criação do Html para o Cordova e resultado para o emulador:

Curso online de Cordova & PhoneGap: Apps mobile com HTML, CSS e JS por Sérgio Lopes com a primeira aula disponível gratuitamente

Curso Multiplatform Mobile App Development with Web Technologies no Coursera

Fontes de estudo de Regex

2017-04-08T14:00:00.000-03:00

Busca em textos é uma tarefa rotineira, não somente para a programação. Pode ser para buscar conteúdo para encontrar uma informação relevante, validar alguma entrada de dados ou filtrar informação a ser processada por um software. Para todas as tarefas o Regular Expression (Regex) pode ajudar e há bons cursos para aprendizagem:

Curso de Regex no CodeSchool (Parte Introdutória é gratuita)
https://www.codeschool.com/courses/breaking-the-ice-with-regular-expressions

Curso de Regex com algumas aulas gratuitas:
https://www.lynda.com/Regular-Expressions-tutorials/Using-Regular-Expressions/85870-2.html

Tutorial de Regex com introdução e vários exercícios que podem ser praticados no próprio navegador:
http://regextutorials.com/

Ferramenta para testar expressões Regex:
http://www.regexpal.com/

Tabela com algumas expressões:
https://www.cheatography.com/davechild/cheat-sheets/regular-expressions/

Exercícios para treinar Regex:
https://www.hackerrank.com/domains/regex/re-introduction

Algumas anotações sobre alguns recursos

Repetição

Permite definir repetir a busca do caractere anteriormente informado

+ = encontra uma ou mais repetições do caractere anterior
* = encontra zero ou mais repetições do caractere anterior
? = o caractere anterior se torna opcional
{min,max} retorna o número de repetições definidos

{3,} encontra no mínimo 3 caracteres
{,2} encontra no máximo 2 caracteres
{4,5} encontra de 4 a 5

Symbol Set (Grupo de símbolos)

Define um conjunto de caracteres a serem considerados na busca

/[a-z]/ = considerada qualquer caractere de a até z
/[a-zA-Z]/ = considerada qualquer caractere de a até z ou de A até Z, a ordem de caractere aqui não faz diferença
/[a-z]/i = acha a mesma coisa do anterior. o i é um modificador para informar que é case insensitive

Exclusão

^ = Para definir uma exceção de caractere
/[^abc]/ = encontra qualquer caracter exceto abc

Pré definidos

\s = acha espaço, tab, nova linha
\w = mesma coisa de letras e números /[a-zA-Z0-9]
\d = mesma coisa de /[0-9]/
\D = qualquer coisa diferente /[0-9]/

Posição

Encontra considerando posição do texto

^ = começo de linha
$ = término de linha

Agrupar Pesquisas

() cria um grupo que pode ser usado depois
\1,\2 repete a busca do grupo já citado
(?=CARACTER) busca que olha o próximo caracter sem adiciona-lo na seleção
Para usar o grupo do regex para substituição, basta usar $1 para aproveitar o grupo
(?:expressão) Para ignorar o grupo para reutilização ou substituição

Hospedagem com o Firebase

2017-03-23T21:30:00.000-03:00

O Firebase é uma opção bastante simples de se utilizar, especialmente se você estiver montando MVP ou quer disponibilizar um teste rápido na Web. Com a ideia de ser serverless (facilitar a vida do desenvolvedor em não criar um backend), simplifica-se o desenvolvimento de cenários sem necessidades de recursos além de armazenamento por exemplo.

Toda as funcionalidades da hospedagem estão listadas em Firebase Hosting:

Atendimento em uma conexão segura (SSL configurado por padrão, o que já atende em protótipos de Progressive Web Apps)
Entrega rápida de conteúdo (por usar SSD e CDN parar entrega ao usuário)
Implementação rápida com o uso de Linha de comando
Reversões com um clique, mantendo históricos de atualizações
Versão de entrada gratuita, independente de tempo. Para ver mais detalhes veja em Firebase Princing.
Importante: Hospedagem limitada a conteúdo estático. Ou seja, nada de rodar sua aplicação web com Node.Js por exemplo

Linha de comando

Os comando do Firebase CLI podem ser conhecidos em Referência da Firebase CLI.

Instalando o Firebase CLI:

É necessário ter o Node.Js instalado
Instalar o módulo : npm install -g firebase-tools

Um resumo para colocar um site em produção seria:

firebase init (Cria a aplicação, com perguntas em passo a passa)
1. Por padrão, a aplicação acessa o um subdiretório public
firebase serve (Inicia um servidor local web, para testar a aplicação)
firebase deploy (Para publicar a aplicação)
1. É possível utilizar o argumento –only para orientar a configuração direcionada a hosting, database e storage

O Firebase ainda oferece serviços para Armazenamento e Base de Dados.

É simples e não é bala de prata! Se sua aplicação precisa de escalar conheça quem começou com o MVP no Firebase e teve dificuldades depois. Veja o post Reasons Not To Use Firebase e uma boa resposta da pergunta When is Firebase not a good choice? no Quora para entender até quando utilizar o Firebase.

Introdução ao Progressive Web Apps

2017-03-19T00:05:00.001-03:00

Há uma forte corrente questionando que a utilização de apps em mais cenários que deveria, e uma página web seria mais produtiva. Um bom exemplo é ter que baixar um app para pagar um estacionamento de um shopping que você pode não mais voltar a usar.

A web tem amadurecido no conceito de Progressive Web Apps (PWA), que tem por ideia adicionar funcionalidades de app a uma página web, progressivamente, a medida que o usuário usa o aplicativo. A Udacity disponibilizou o curso Intro to Progressive Web Apps (Web Apps for the Next Billion Users) que ajudou nas informações deste post. A apresentação Progressive web apps with polymer tem números interessantes sobre as característas em criar o PWA.

Por que pensar no Progressive Web Apps?

No caso de estudo o Flipkart(maior e-commerce da Índia), ao combinar o app nativo com sua versão Flipkart Lite, versão em Progressive Web Apps, eles tiveram os seguintes benefícios (Conforme estudo de caso “Flipkart triples time-on-site with Progressive Web App” publicado neste link):

aumento de 70% nas conversões
tempo do usuário no flipkar lite x experiência anterior do Mobile, 3,5 minutos x 70 segundos
3x mais tempo no site
aumento de 40% no reengajamento
3x menos uso de dados

Mas o que permite o Web Progressive Web trazer tanto benefício?

Os navegadores estão evoluindo para permitir o uso das funcionalidades abaixo.

Service Worker

Age como um proxy no lado cliente, o que permite fazer cache de arquivos localmente;
Tem uma série de eventos para poder, por exemplo, atualizar o cache;
Pode receber Push Messages, mesmo com o site fechado pelo usuário;

Web App Manifest File

Permite definir como seu Web App aparece para o usuário, podendo fazer um ícone ser instalado pelo usuário no Mobile. Quando isso acontece o site abre em full screen, como um app nativo

Repensar a arquitetura do Site

Não basta utilizar o novo browser, mas deve desenvolver o site de maneira diferente.

Desenvolver como arquitetura de app, com o application shell – que é parecido com o código que se gera para um app nativo. Separa-se o que são os componentes essenciais para o seu app executar offline (Html, Javascript e CSS) do que é dado e muda frequentemente e ainda assim pode ser salvo localmente para acesso offline. Com isso se tem características que há no aplicativo nativo (sem a necessidade de uma loja):
1. Carregamento instantâneo
2. Atualizações regulares
Armazenamento offline, que é possível ser feito de três maneiras
1. Local Storage (Não indicada a utilização)
  1. Vantagens : amplamente implementado em navegadores
  2. Desvantagens: sua api é síncrona e bloqueia a execução do programa, não é transacional (duas escritas no mesmo momento pode perder algo importante)
2. Cache Storage
  1. Vantagens: fácil de usar, assíncrono e rápido
  2. Desvantagens: não transacional, não utilizado em vários navegadores atualmente
3. IndexedDB
  1. Vantagens: rápido, permite armazenar dados complexos, assíncrono e transacional e implementado em vários navegadores
  2. Desvantagem: api feia, que requer muita configuração (Há bibliotecas para amenizar desta forma como o Mozilla localForage e o lovefield do google)

Com a separação de app shell dos dados, a ideia é fazer um http request para os dados, o que faz a primeira leitura ficar um pouco mais lenta. Para amenizar este problema a ideia é injetar os dados, não no html, mas num arquivo separado, que é o app.js. Dessa forma é garantido que haverá a montagem do app e depois é possível de atualizar pelo http request.

É importante lembrar que navegadores não prometem guardar os dados para sempre e por isso é importante enviar os dados críticos para a nuvem assim que possível (se houver dados do usuário que você não deseja perder). Outra vantagem de utilizar o sincronismo com a nuvem é que o usuário logar de outro dispositivo, os dados estarão disponíveis.

Para ver um exemplo de um aplicativo utilizando esta arquitetura, veja o Weather PWA. Não esqueça de abrir o console e ver os logs definidos pelo aplicativo, depois de carregar a primeira vez, adicionar outras cidades para ver a previsão do tempo e finalmente trabalhar offline e ainda assim ver as últimas informações

Outras referências

Introdução aos Progressive web Apps por Matheus Lima no imasters

Progressive web apps with polymer no SlideShare

Progressive web apps presentation using Reveal.js

Padrão de Repositório no C#

2017-03-05T23:02:00.001-03:00

O artigo .NET - Apresentando o padrão de projeto Repository do Macoratti faz uma breve explicação do padrão de repositório e apresenta exemplos de códigos c# para implementá-lo.

O vídeo abaixo Repository Pattern with C# and Entity Framework, Done Right do canal Programming with Mosh faz um detalhamento maior, confrontando ideias encontradas na internet e também foi utilizado como fonte para este post.

Repositório, de acordo com de Martin Fowler, tem por definição:

Mediates between the domain and data mapping layers using a collection-like interface for accessing domain objects.

Media entre as camadas de domínio e mapeamento de dados usando uma interface tipo coleções para acessar objetos de domínio (Tradução livre do autor do post)

Os benefícios ao usar este padrão são:

Minimiza duplicações de lógicas de consultas(query)
Desacopla sua aplicação de frameworks de persistência. Dessa forma você pode começar com o acesso a dados com o Entity Framework e depois mudar para o Dapper em caso de necessidade de melhor performance (como dito no post Acesso a Dados e Desempenho)
Deixar o código mais testável

Alguns erros comuns de desenvolvedores

1 - Repositório não deve repetir métodos do banco de dados

Um repositório não deve espelhar métodos de um banco de dados. Por exemplo, a atualização de um objeto deve ser feita apenas atualizando o objeto consultado. A persistência no banco de dados deve ser feita com o Unit Of Work.

O Martin Fowler define o Unit of Work como:

Maintains a list of objects affected by a business transaction and coordinates the writing out of changes and the resolution of concurrency problems.

Mantém uma lista de objetos afetados por uma transação de negócio e coordena a escrita de mudanças e resoluções de problemas de concorrência (Tradução livre do autor do post)

O autor do vídeo defende que se devee evitar o retorno de IQuery no repositório, para forçar a criação de métodos específicos para a busca de dados e ter o benefício número 1 - este padrão não é respeitado no código do Aspnet Boilerplate. Ele também defende que a definição do Lazy ou Eager Loading também deve ser feita internamente no repositório e exposto a camada de negócio em métodos específicos.

2 - Nem toda aplicação deve usar este padrão

Deve-se tomar o cuidado para não fazer o over engineering (usar mais detalhes de arquitetura que o problema precisa). Se estiver prototipando ou um código que provavelmente não irá para a produção, talvez não precise desse investimento neste padrão.

Código

O código utilizado no vídeo está disponível neste link para download.
Neste link está documentada a implementação de repositório do Aspnet Boilerplate.

No vídeo também é indicado o livro

Clean Code: A Handbook of Agile Software Craftsmanship do autor Robert C. Martin

Configurando o TypeScript com o Angular

2017-03-01T11:30:00.000-03:00

Os benefícios de se utilizar o TypeScript foram falados nos posts Introdução ao TypeScript e Configuração Gulp para trabalhar com TypeScript. Mas configurar o TypeScript com o Angular 1 demanda uma sequência correta de etapas.

O ambiente javascript evoluiu muito nos últimos anos, tanto em relação ao poder quanto à complexidade. Há um discussão sobre o tema muito interessante no podcast .NET Rocks #1387 JavaScript Development Environments with Cory House. A ideia de ter o ambiente Javascript bastante aberto à diferentes pacotes dá margem para aparecer pacotes oferecendo serviços melhores que os já existentes, mas ao mesmo tempo pode paralisar o desenvolvedor que está se iniciando no ambiente novo – que pode preferir num primeiro momento repetir a escolha de um especialista.

O repositório “Browserify-TypeScript-Angular-Gulp—Boilerplate” do Git fez um excelente Boilerplate (entenda como facilitador para você iniciar seus projetos neste contexto) que além de merecer estrelas, merece um post só sobre ele.

Neste repositório foi configurado vários pacotes, à se destacar:

Browserify
TypeScript
Angular (1)
Gulp

Depois do repositório clonado, basta executar os comandos abaixo, conforme readme.md, para baixar as dependências:

npm install

bower install

O repositório tem dois branches

master com um exemplo de CRUD
“no-demo-app” com o bolierplate apenas.

Para executar o CRUD de exemplo, com o Node.js como backend, basta executar:

gulp serve

Configuração Gulp para trabalhar com TypeScript

2017-03-01T10:00:00.000-03:00

Este passo a passo irá configurar o Gulp para automatizar suas tarefas relacionadas ao typescript. Todo o fonte utilizado está disponível no projeto introducao-typescript do github. Nesse exemplo será separado diretórios de fontes (neste exemplo, '/src') do de distribuição ('/dist').

[raiz]
- dist
- src

Para iniciar o projeto, no diretório raiz, basta executar o comando abaixo na linha de comando:

npm init

Selecione todas as opções padrões e para o entry point digite './dist/main.js'

Ao terminar será criado o arquivo packages.json na raiz da aplicação, que facilita atualização e restauração dos pacotes NPM no projeto.

Instalando dependências e configuração básica

Será necessário instalar o Gulp CLI (de forma global), o que pode ser feito com o comando abaixo:

npm install -g gulp-cli

Depois instale typescript, gulp e gulp-typescript nas dependências de projeto:

npm install --save-dev typescript gulp gulp-typescript

Defina as configurações do typescript no arquivo tsconfig.json na raiz da aplicação (Para ver mais informações de todas as opções consulte a documentação).
Para ver um exemplo de configuração, veja este exemplo no github:
Crie o gulpfile.js também na raiz da aplicação. Ele será responsável pela tarefa de executar o typescript
Tudo pronto! Depois basta executar o comando abaixo que irá transpilar o typescript para javascript no "target" definido do tsconfig.json.
gulp TypescriptTranscript
Veja o exemplo de um arquivo TS:
E o arquivo JS gerado:

Configurando o Browserify

O browserify permitirá você definir um arquivo de entrada e baseado em suas referências será feita a transpilação automaticamente de toda árvore que se referencia.

Instale o plugin browserify, tesify e vinyl-source-strem, para juntar todos os modulos em um único arquivo.

npm install --save-dev browserify tsify vinyl-source-stream

Com a configuração abaixo do gulpfile.js o arquivo de entrada é utilizado para buscar todas as dependências e gerar um novo arquivo .js. Ao executar o comando abaixo é utilizado o arquivo 03BrowserUsage.ts, visto a dependência 01Basic.ts e gerado o arquivo bundle.js

gulp browserify

Já ficou interessante, mas ainda é preciso executar o comando para transpilar. Vamos agora configurar para a compilação acontecer automaticamente quando os arquivos tiverem alteração com o watchify.
Instale os plugins watchify e gulp-util:

npm install --save-dev watchify gulp-util

Para entender o Browserify veja este link:
https://benclinkinbeard.com/posts/how-browserify-works/
O browserify utiliza um arquivo de entrada, para descobrir todas as dependências e gerar um empacotamento de javascript. Ele também resolve o uso de recursos produtivos do Node.js que não existem para o browser – que é o uso de módulo por exemplo. O uso do require tão comum no Node.js não existe para o javascript no browser. O Browserify implementa um tipo de require interpretando este javascript. O mesmo é feito para o exports.
Desta forma você pode criar seu javascript modularizado, até mesmo usando o typescript, e ainda assim conseguir transformar em um javascript entendível pelo navegador.
Referência
https://www.typescriptlang.org/docs/handbook/gulp.html

Configurando chave SSH para autenticação para o Git

2017-02-12T15:24:00.001-02:00

Para configurar a chave SSH do seu computador no github. Veja este link para obter mais informações:
https://gist.github.com/adamjohnson/5682757
Para configurar a chave SSH com o VSTS em modo Git, siga este passo a passo:

Abre o VSTS na web no endereço http://usuario.visualstudio.com
Clique no usuário no topo direito e vá em segurança:
Selecione o “SSH public keys”
Selecione add
1. No Description adicione um texto livre (por exemplo um identificador do computador que está usando)
2. No Key Data, adicione o conteúdo do arquivo id_rsa.pub
  1. No windows ele fica no C:\Users\[Usuario]\.ssh\id_rsa.pub
  2. No linux ele fica no ~/.ssh/id_rsa.pub
  3. Se a chave pública e privada não existir, siga o Step 1: Create your SSH keys
3. Feito isso você pode utilizar linhas de comando para interagir com o seu repositório usando Git:
  1. Navegar novamente no seu repositório, por exemplo http://usuario.visualstudio.com/_git/project
  2. Clique em Clone
  3. Selecione SSH
  4. Copie a url do repositório
  5. Execute o comando abaixo para confirmar que a autenticação é feita:git clone ssh://[url_copiada]

Referências:
https://www.visualstudio.com/en-us/docs/git/use-ssh-keys-to-authenticate
https://kb.iu.edu/d/aews

Código Portável do Xamarin

2017-02-08T22:29:00.000-02:00

Os códigos portáveis do Xamarin, que devem ser escritos uma única vez pode ser feito de três formas.

Arquivos vinculados (File Link)

Podem ser códigos, arquivos de dados ou imagens. Estes arquivos são compartilhados entre diferentes projetos e ao atualizar em um projeto todos os demais são atualizados. São compilados como como arquivos embutidos (embed) na projeto.
No caso do código é possível utilizar diretivas de compilação para definir código específico de cada plataforma, por exemplo:
#if __ANDROID__
#endif
O mesmo pode ser feito para IOS com __IOS__ . Para ver todas as opções veja Part 4 - Dealing with Multiple Platforms.

Projetos compartilhados (Native Shared)

Muito parecido com os arquivos vinculados, mas permite maior organização dos arquivos a serem compartilhados no projeto ao invés de ficar os adicionando em diferentes projetos um a um. Este projeto não gera nenhum artefato específico.

Projeto de Classe Portável (Native Portable)

Geram um arquivo dll que é compartilhado entre os projetos específicos.

Nas propriedades de projeto é possível definir quais as plataformas alvos do projeto, limitando dessa formas as funcionalidades disponíveis a serem utilizadas.

Uma estratégia utilizada neste tipo de projeto, quando é necessário utiliza código específico de plataforma é definir uma interface na classe portável e implementa-la nos projetos específicos.

Iniciando um repositório local e enviando ao github

2017-02-06T23:39:00.001-02:00

Primeiramente, gere o arquivo .gitignore. Isso pode ser feito no site https://www.gitignore.io/ e arquivo gerado deve ser salvo na raiz do repositório. (Para um padrão de .gitignore de projetos do Visual Studio com .Net, veja https://gist.github.com/kmorcinek/2710267)
Depois inicie o repositório localmente com o comando
git init .

Digite o comando:
git status
Confirme que os arquivos ignorados não são listados. Isso aconteceu pela existência do arquivo .gitignore.

Execute o comando abaixo, para adicionar todos os arquivos ao repositório.
git add .

Para definir o commit inicial, execute o comando abaixo:
git commit -am "[MENSAGEM DO COMMIT]"

Para criar o repositório remoto, execute os seguintes comandos
curl -u [usuario] https://api.github.com/user/repos -d '{"name":"[repositorio]"}'git remote add origin git@github.com:[usuario]/[repositorio].git
git push origin master
Lembre de substituir o [usuario] com seu nome de usuário e [repositorio] com o nome do seu repositório remoto ao digitar a linha acima sua senha do github será solicitada

Se você receber o erro abaixo:
Permission denied (publickey).
fatal: Could not read from remote repository.
Configure a chave SSH do seu computador no github. Veja o post Configurando chave SSH para autenticação para o Git

Referências:
http://stackoverflow.com/a/10325316/3424212
https://vimeo.com/70609819

Introdução e Instalação do Xamarin

2017-02-05T13:11:00.001-02:00

Seguem algumas anotações sobre a introdução do Xamarin e algumas dicas para conseguir instalar e executar uma aplicação com o Visual Studio Community 2015.

Introdução

Um ponto específico limitante do IOS:

Se vamos desenvolver para o iPhone, precisamos de um Mac. A Apple requer que um Mac seja usado para compilar aplicações para o iPhone e outros aplicativos iOS.

Você pode testar nossas aplicações em dispositivos reais conectados ao computador de desenvolvimento através de um cabo USB, ou pode testar os nossos programas com emuladores

Lista de aplicações que podem ser desenvolvidas, conforme ambiente a fonte é o System Requirements do guia do Xamarin:

Instalação

Para instalar, basta seguir o link Configurando e instalando o Xamarin.
Em meu ambiente eu tive três problemas diferentes em dois computadores que tentei:

Erro ao abrir o design ou fazer o deploy do app no emulador android

Erro escrito no output do visual studio:
"An unexpected error occurred trying to initialize Android Designer. Please verify the Android SDK path and the Java Development Kit path on Tools->Options->Xamarin->Android Settings menu. Please see the logs for more details."

Resolvido com a resposta do Unable to run Xamarin Android project no stackoverflow.
Qualquer problema de ambiente que você tiver atualize os pacotes no Android SDK Manager(Você deve repetir a atualização fechando e reabrindo o SDK até não ter nenhuma nova atualização, pois a atualização não vai para os pacotes mais atuais de primeira) disponível em View –> Toolbars –> Android:

Unsupported major.minor version 52.0 ao compilar a solução Android

Resolvido com a dica da resposta Xamarin Visual Studio - Unsupported major.minor version 52.0, atualizando para o JDK 8 que fiz download pelo site da Oracle. Depois do download deve-se atualizar para o caminho instalado no Tools –> Options –> Xamarin –> Android –> Java Development Kit Location, onforme print abaixo:

Erro no projeto UWP : Type universe cannot resolve assembly: System.Runtime, Version=4.0.0.0

Foi resolvido com a resposta do Type universe cannot resolve assembly: System.Runtime
Foi ajustado instalando o pacote Microsoft.NETCore.UniversalWindowsPlatform vai Package Manager Console no projeto de final UWP. Segue o comando:

Install-Package Microsoft.NETCore.UniversalWindowsPlatform

Outras referências que pode ajudar com conteúdo complementar:
Instalação do Xamarion IOS no Windows.
Conectando em um Mac remoto.
Instalação do Xamarin no Mac.
Informações em como começar com o Xamarin.

Introdução ao TypeScript

2017-02-04T18:30:00.000-02:00

O javascript é uma linguagem muito divertida e fácil de usar, mas as vezes é pode-se sentir falta de utilizar alguns recursos mais “rígidos”, como tipagem forte, herança mais bem definida. São coisas que estão sendo evoluídas na linguagem como o ECMAscript 6[1] e 7[2]. De toda forma, pode não ser possível utilizar os recursos enquanto o executor do javascript algo da aplicação não suportar os novos padrões – por exemplo aplicações web que tem clientes as utilizando em navegadores antigos.
O TypeScript resolve muito bem boa parte do problema, sendo um superset do javascript que transcompila em diferentes versões do javascript – garantindo mais recursos em ambiente de desenvolvimento e sendo mais portável ao transcompilar para diferentes versões do javascript para a execução. Criado em 2011 pela Microsoft ganhou ainda mais aceitação pela comunidade quando o Google o escolheu para escrever o Angular.js 2.
Anders Hejlsberg da Microsoft comenta sobre as evoluções do javascript no ECMAScript 2015 e a demora de adoção pelo ecosistema:

“The ECMAScript committee has made a lot of progress in ECMAScript 2015. It adds things people want, like modules, classes, lambdas and destructuring. It’s a very ambitious and big rewrite of the language, but it takes a while for new revisions of ECMAScript to reach the ecosystem. People are still using old Android phones with old browsers, for example. What you need is the ability to transpile, to give you the illusion you’re using the new JavaScript, but then turns it into ECMAScript 2 or 3 so it runs everywhere.” [2]

Segue então uma introdução, seguindo a documentação oficial, e fazendo algumas comparações com o C#:
Instalando o Typescript por linha de comando:

npm install -g typescript

Typescript oferece análise de código estática. Exemplo:

function greeter(person: string) {
return "Hello, " + person;
}
var user = [0, 1, 2];
document.body.innerHTML = greeter(user);

Ao tentar transpilar o código acima, você verá o erro abaixo, mas ainda assim o arquivo javascript será gerado (O objetivo é apenas lhe ajudar falando que seu código provavelmente não irá rodar como o esperado).

greeter.ts(7,35): error TS2345: Argument of type 'number[]' is not assignable to parameter of type 'string'

Interfaces

No typescript dois objetos são compatíveis se suas estruturas são compatíveis, então uma classe não precisar implementar a interface.

Classes

O TypeScript permite programação orientada a objeto,com uso de classes, heranças. Ao ser transpilado gera o código javascript baseado nas opções definidas para a compilação.

Benefícios do uso com o Visual Studio Code

Na versão 1.9 do Visual Studio Code há, na tela inicial, a opção de Interactive Playground, no qual é mostrada benefícios do editor, entre eles : Renomeação Refactorion, IntelliSense, Emmey

Segue um repositório no Git com alguns exemplos, comentários e comparativos entre o TypeScript e o Javascript gerado, seguindo o handbook.

Referências
[1] ES6 — classes and inheritance
[2] TypeScript is getting attention in the enterprise

Adicionar intellisense no VS Code para o angular

2017-01-31T19:58:00.001-02:00

Para adicionar intellisense ou autocomplete do Angular.js no VS Code deve-se:

Criar o jsconfig.json e package.json na raiz do projeto se não existir
Instalar o Typings conforme abaixo:
```
npm install typings –-global
```
Pegar os arquivos typings do repositorio Definitely Type
```
typings install dt~angular –-save
```
Reinicie o VS Code
Será criado o arquivo typings.json e o diretório typings com as informações de auto complete

O mesmo procedimento é possível de ser utilizado para outros pacotes, como react. Para descobrir os nomes dos pacotes disponíveis basta executar o comando

typings search --name react

E substituir o passo 3 pelo pacote desejado:

typings install dt~react –-save

Referências:
Getting Angular Intellisense in Visual Studio Code do Laurent Duveau, que tem alguns comandos desatualizados, mas tem a lógica de passos completas.
Resposta do “How to set intellisense for Angular.Js and Javascript in Visual Studio Code” no Stack overflow
https://github.com/typings/typings
http://definitelytyped.org/

Maratona Xamarin

2017-01-30T09:18:00.001-02:00

A Microsoft começou uma maratona do Xamarin com certificação ao final em 30/1. As inscrições podem ser feitas no:

https://aka.ms/maratonaxamarin

Haverá post do que será passado em cada novo módulo, que é lançado por semana:

Semana 01: Introdução ao desenvolvimento mobile
Semana 02: Xamarin.Android
Semana 03: Xamarin.iOS
Semana 04: Xamarin Forms
Semana 05: Serviços de nuvem para seu aplicativo com Xamarin
Semana 06: Desenvolvimento do aplicativo
Semana 07: Desenvolvimento do aplicativo

Caso tenha pedido as inscrições, também é possível fazer um curso na universidade Xamarin com 30 dias grátis:

https://university.xamarin.com/self-guided

Impressões iniciais do Node.js por quem é do mundo .Net

2017-01-29T16:30:00.000-02:00

Vou fazer uma análise do Node.js com a visão de quem é do mundo .net e gosta de aprender novas linguagens, tecnologias etc.
É muito bom termos diferentes empresas e pessoas investindo em diferentes ideias - isto traz evolução e facilidades, e quem ganha é o desenvolvedor que gosta de se atualizar.

Antes de falar de Node.js, segue uma breve contextualização histórica do Asp, conforme minha visão (E você entenderá a importância de conhecer o Node.js também para o uso em server) :

o Asp antigo tinha como fundamento script server que misturava html e javascript no mesmo arquivo, como o PHP da época. Este foi completamente substituído pelo Asp.net;
o Asp.net Webforms foi uma tentativa de facilitar a entrada de desenvolvedores .net Windows Forms para aplicações Web. Principalmente por abstrair o html com um desenvolvimento RAD. A Microsoft ainda mantém estas bibliotecas, mas não deverá evoluí-las, pois já fez as duas evoluções abaixo
o Asp.net MVC foi uma resposta necessária a quem gostaria de desenvolver utilizando o MVC (padrão muito interessante), como no struts do Java e no Ruby on Rails. Também foi a primeira iniciativa de ser open source, conforme o post do ScottGu ASP.NET MVC, Web API, Razor and Open Source
- Houve facilidades para desenvolvimento colaborativo com o uso do Nuget (que permitiu atualizações mais rápidas, necessárias para não esperar a framework e utilização de pacotes de terceiros).
- Um segundo passo foi dado em 2014 quando direcionou o uso do Nuget para pacotes exclusivos .net e sugeriu o padrão de comunidade para task runners e front end, como cheguei a comentar no post Gulp, Grunt, Bower e npm no Visual Studio (Aqui já começa um pouco da parceria com o Node.js e porque deveríamos conhecer este ambiente javascript)
Agora, o Asp.net Core olhou para a simplicidade, leveza, escalabilidade e desempenho do Node.js que está sendo amplamente utilizado também do lado server. Para superar o Node.js o trabalho não foi pequeno, demandando uma framework completamente nova e enxuta. O post "Como está a preocupação do ASPNET 5(Core) em relação a desempenho?" chegou a comentar as iniciativas em andamento na época
- O investimento em comunidade expandiu, com todo o fonte do Asp.net core no Github, com reuniões semanais divulgando evoluções do trabalho da Microsoft e da comunidade no ASP.NET Community Standup, suporte ao Linux e Mac para desenvolvimento (VS Code), e suporte ao Linux para produção - além do já esperado Windows.

Quem é este tal de Node.js?

No site oficial é explicado conforme abaixo:

Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient. Node.js' package ecosystem, npm, is the largest ecosystem of open source libraries in the world.

Node.js é um runtime javascript construído em cima do engine Javascript do Chrome V8. Node.js usa uma orientação a evento, modelo I/O não bloqueante que o faz eficiente e leve. O ecossistema de pacotes do Node.js, npm, é o maior ecossistema de bibliotecas de código aberto do mundo.
(Tradução livre)

Fontes para conhecer e entender

O título deste post é sobre impressões porque toda a comparação foi feita com estudos introdutórios, uso de pacotes do Gulp (algumas análises de erros nestes pacotes e estudo dos fontes abaixo para um embasamento teórico maior):

Um introdução breve para o node.js https://github.com/maxogden/art-of-node
Learn You The Node.js é um workshop introdutório NodeSchool.io. Trata de um conjunto de problemas de programação que introduzem padrões nodes comuns. Acessível através de linha de comando.

Por que usar o Node.js?

O post Top 10 Reasons To Use Node.js destaca bons motivos práticos e aproveitarei para tirar alguns aprendizados para pensarmos no mundo .net e .net core. Reforço que não tenho experiência prática com uso do Node.js além dos pacotes de task runner, por isso estou baseando na experiência do post.

1. Conhecimento do Javascript

No desenvolvimento Web com certeza você utiliza o Javascript no cliente e poderia utilizar este conhecimento no server. Fácil de aprender, parece com Java, C# e se você trabalha com Web, já utiliza no lado cliente há anos.

Com o uso de Typescript ainda é possível trazer checagem de tipo estática e últimas funcionalidades do ECMAScript. A compatibilidade com navegadores é total, já que transpila para Javascript normal.

2. É rápido

Utiliza o engine v8 desenvolvido pelo Google para uso no Chrome e compila o javascript em código de máquina nativo. Ainda tem o “event loop”, que processa todas operções de I/O em uma única thread, de forma assíncrona.
O Node.js é assíncrono por padrão em operações de I/O e isto orienta o desenvolvimento de maneira mais escalável e com maior desempenho. No artigo How To: Scale .NET Applications, bem antigo da Microsoft, esta ideia já é compartilhada e incentivada:

If your application contains tasks that can be performed simultaneously and independently of one another and the application runs on a single processor server, you should asynchronously execute the tasks. Asynchronous processing is more beneficial for I/O bound tasks and is less beneficial when the tasks are CPU bound and restricted to a single processor

Se sua aplicação contém tarefas que podem ser executadas simultaneamente e independentemente uma das outras e a aplicação executa em um servidor de processador único, você deve executar as tarefas assincronamente. Processamento assíncrono é mais benéfico para tarefas ligadas a I/O e menos benéfico quando as tarefas são ligadas ao CPU e restritas ao processador único.

(Tradução livre)

3. Ferramentas

Há várias ferramentas para ajudar no ambiente. Npm que é o gerenciador de pacote muito bom e facilita muito a vida do desenvolvedor – rápido, robusto, consistente, ajudando inclusive a resolver dependências entre diferentes versões. Até ele tem concorrente, que é o Yarn feito pelo facebook.
Todo o ambiente de Task Runner com o uso do Gulp, Grunt e Bower também.

4. Você já sabe javascript, novamente

É possível expandir a utilização do javascript no client, server e banco de dados em bancos documentais que salvam JSON como o MongoDB – na verdade este armazendo um BSON.

5. Real-time de forma fácil

Node.js supera em conexões simultâneas e também no uso do protocolo websockets, que é uma conexão de duas vias entre o cliente e servidor.
Na rodada 13 de testes do techempower foi a estreia do asp.net core que bateu o Node.js no cenário de plaintext pela primeira vez. Foram 1,822,366 requisições por segundo do asp.net contra 467,246 do Node.js.
Já o cenário de Json o Node continuou ganhando, fazendo 304,372 requisições por segundo contra 264,649 do asp.net core. Vamos esperar a rodada 14 para mais evoluções e dessa disputa que quem ganha são os desenvolvedores.

6. Streaming de dados

Node pode fazer stream para websockets e ler e escrever para http, fazendo um pipe.

7. Uma base de código rodando no client e server

Neste tópico é citado da framework Meteor, que no post é citado da seguinte maneira:

Meteor is a next-generation web framework built atop Node. It runs the same codebase on the both the client and server. This allows you to write client code that saves directly to a database. Then, that data is automatically persisted to the server. It works the other way too!
Meteor é uma framework web de próxima geração contruída em cima do Node. Ele roda a mesma base de código no cliente e servidor. Isto permite que você escreva código cliente que salve diretamente na base de dados. Então, o dados é automaticamente persitido noservidor. Ele funciona no outro caminho também!

Não tenho conhecimento para comentar sobre o Meteor

8. Mantenedor corporativo

O risco de trabalhar com qualquer projeto código aberto é ele ser abandonado por seus mantenedores voluntários. O Node é mantido pela Joyent e utilizado por grandes empresas.

9. Hosting

Há opções de host de PaaS (Product as a service) como o Modulus. Também o Heroku.
O docker também é um facilitador para ambiente e host para Node e para asp.net core.

10. Todo desenvolvedor sabe (um pouco de) javascript

Já foi dito na vantagem 1 e 4 e o post repetiu na 10: achar desenvolvedores com conhecimento é sempre difícil, então pelo javascript ser tão utilizado, facilita este processo de encontrar profissionais ou até forma-los.

Acrescendo outros que percebi

Facilidade de instalação e execução

Facilidade de executar programas, podendo escrever um simples arquivo texto que não precisa compilar ou até passar uma simples linha de comando com a string do código a ser executado com após o argumento -pe (Veja aqui todas as opçoes de argumentos), como exemplo:
node -pe "require('url').parse('/test?q=1', true)"

O .net core introduziou também um CLI para competir neste área.

Considerações Finais

O Node.js é uma excelente linguagem e vale a pena conhece-la para ver as oportunidades que ela possa ajudar. Com certeza o .net core está olhando para ela para competir.

Continuação de estudos sobre o Angular.js (1)

2017-01-29T10:59:00.002-02:00

No post Curso : Shaping up with angular.js (1) há anotações de conhecimentos repassados para um bom entendimento do Angular.js. Neste post vamos estender o conhecimento da framework.

Roteamento

Para usar o roteamento no Angular.js é necessário:

usar o ngView em algum elemento da página principal, neste elemento que será carregado o template específico definido pelo roteamento
carregar a biblioteca ngRoute

Este passo não era necessário, mas é desde que o Angular foi quebrado em pacotes menores para otimizar o carregamento

importar o módulo ngRoute dentro do módulo da app
definir as rotas

Exemplo de como fica o roteamento na definição do Módulo:

angular.module('NomeApp', ['ngRoute'])
  .config(function ($routeProvider) {
    $routeProvider.when('/url', {
      templateUrl : '/arquivo.html'
      })
    .when('/', {
      redirectTo: '/usuario'
    })
    .when('/ComController', {
      redirectTo: '/usuario',
      controller: function () 
      },
      controllerAs: 'aliasCtrl' 
    })
    .otherwise( {
      redirectTo: '/principal'
    });
  });

Parametros de Roteamento

Deve-se injetar o $routeParams e utilizar as propriedades deste objeto para buscar os valores de cada chave da querystring

angular.module('NomeApp')
.controller('NomeController', ['$http','$routeParams', function($http, $routeParams) {
  var controller = this;
  $http({method: "GET", url: "/notes/" + $routeParams.id})
    .success(function(data){
      controller.note = data;
    });
  }]);

Referências:
http://campus.codeschool.com/courses/staying-sharp-with-angular-js/
http://gabrielfeitosa.com/angularjs-route/
https://docs.angularjs.org/api/ngRoute/service/$route
https://docs.angularjs.org/api/ngRoute/service/$routeParams
http://www.w3schools.com/angular/angular_routing.asp

Chamadas $http

É com este recurso que o controller faz as chamadas de request disponibilizando para a view:

$http.get('/url')
.then(function(response) {
  controller.dataToView = response.data;
});

Ou também para salvar, atualizar e excluir novos registros.

Referencias
http://www.w3schools.com/angular/angular_http.asp
http://www.codelord.net/2015/05/25/dont-use-$https-success/

Outras comparações com o Razor a View do Asp.net.

Facilidades que existem no Razor e como ter no Angular.Js, esta comparação será evoluída a medida que avançar em estudo do ambiente, como o uso do JSLint, TypeScript, VS Code.

Pontos a facilitar

Priorizar erros de compilação(ou validação do código) em relação ao de execução

Erros simples de sintaxe, como falta de ';' ou confundior no json o ':' com o '='

Depurar
Editor e plugins
Autocomplete
Tipagem forte, para evitar erros na execução (Priorizando compilação)
Linha de comando

Referências
Coletânea de links sobre o Angular.js:
https://github.com/jmcunningham/AngularJS-Learning

Curso : Shaping up with angular.js (1)

2017-01-28T19:41:00.000-02:00

Anotações do curso do CodeSchool, que tem gamification e uma plataforma de prática que valida o código gerado pelo programador.

Url : http://campus.codeschool.com/courses/shaping-up-with-angular-js/

Slides : http://courseware.codeschool.com/shaping-up-with-angular-js/Slides/level01-05.pdf

Conceitos

Controller

É onde adiciona à aplicação comportamento. Faz o meio de campo entre view e model

São amarrados no Html com a tag ng-controller=”(ControllerName as alias)”

São definidos no javascript da seguinte forma:

app.controller('nomeCtrl', function() {


});

Outras Referências:

http://www.w3schools.com/angular/angular_controllers.asp

Modules

Onde a aplicação vive. É o módulo que é reaproveitável na app .

São amarrados no Html com a tag ng-app

São criados no javascript da seguinte forma:

angular.module(‘nome-modulo’, []);

Diretivas

Anotações Html que disparam comportamento javascript. É como o Angular comunica com o Html no seu momento de atualização do Html

Exemplos:

ng-app define o escopo da aplicação

Built-in Directives

Lista de diretivas padrões do Javascript

https://docs.angularjs.org/api/ng/directive

São chamadas de diretivas padrões pois podemos criar diretivas customizadas.

Expressões

Como os valores são mostrados. São binds processados pelo angular com javascript - sendo possível utilizar funções e propriedades do javascript normalmente.

Exemplo :

Filter (Filtro)

Envia a expressão da esquerda para o filtro da direita, para fazer funções pre-determinadas

Mais documentação

http://www.w3schools.com/angular/angular_filters.asp

https://docs.angularjs.org/api/ng/filter/filter

Escopo

As variáveis declaradas dentro do controller são do escopo deste. Para iniciar uma variável pelo html é possível utilizar a diretiva ng-init (Apesar de ser melhor inicializar variáveis no controller, para melhor organizar o código)

Form and Models (Formulário e Modelos)

A diretiva ng-model permite o bind de campos de formulário com um modelo, utilizando do two way bind

A diretiva ng-submit permite chamar uma função quando o formulário é enviado

Referências:
https://docs.angularjs.org/api/ng/directive/ngModel

Validações de formulários

Deve-se desativar a validação padrão de formulários , para usar apenas a do Angular.js

Atribuir os campos requeridos com o atributo required

É possível ver se o formulário está validado usando a expressão $valid

O ‘$’ é o acesso a uma propriedade que existe no angular para o formulário.

Conforme a documentação do AngularJS para formulário, existem as seguintes propriedades : [https://docs.angularjs.org/api/ng/directive/form]

ng-valid se o formulário está válido
ng-invalid é definido se o formulário está válido
ng-pending se o formulário está pendente
ng-pristine se o formulário está intocado
ng-dirty se o formulário está sujo
ng-submitted se o formulário foi enviado

Ao digitar nos inputs o Angular.js já altera as classes do input, para permitir a configuração de estilos para formatar os campos. As classes são :

ng-valid se o formulário está válido
ng-invalid é definido se o formulário está válido
ng-pristine se o formulário está intocado
ng-dirty se o formulário está sujo

Templates

Permite o reaproveitamento de código html e angular em várias partes do projeto. Para isso é necessário utilizar a tag ng-include=”’arquivo.html’” [https://docs.angularjs.org/api/ng/directive/ngInclude]

Atenção que para passar um arquivo do disco é necessário passar apóstrofes(‘) dentro das aspas (“), isso porque o ng-include está esperando uma variável.

Veja a Custom Directive para ver uma utilização de melhor legibilidade.

Custom Directive

Permite escrever html que expressa comportamento da aplicação, ficando muito mais fácil entender o que o html fonte faz.

Podem ser usadas para:

Expansão de templates
Expressar interfaces de usuários complexas
Chamar eventos e registrar manipuladores de eventos
Reusar componentes comuns

Para criar uma diretiva customizada deve-se criar dentro do módulo, com o comando

app.directive(‘tagCustomDirective’, function () {

  return {
    restrict : [tipo],
    templateUrl : ‘arquivo.html’,
    controller : function () {
    },
    controllerAs : [alias]
  };
});

Onde o [tipo] pode ser (um ou vários abaixo):

'A' - atributo
'E' - elemento
'C' - nome de classe
'M' - comentários

Com a linha acima é possível utilizar a tag . O curso ainda indica que é preferível utilizar dois elementos html abrindo e fechando e não usar o self closing element (), pois há o risco de alguns browsers não aceitam. [https://github.com/angular/angular.js/issues/1953]

Outras Referências:

https://docs.angularjs.org/guide/directive

Dependences (Dependências)

É possível criar vários módulos para a aplicação e usar como dependências:

angular.module(‘nome-modulo’, [‘dependencia1’, ‘dependencia-tipo1’]);

Services (Serviços)

Os serviços permitem várias funcionalidades como:

Buscar dados no servidor com o $http;
Adicionar log no console com o $log;
Filtrar um array com o $filter;

Exemplo de uso de serviço no controller:

app.controller(“NomeController”, [‘$http’, ‘$log’, function($http, $log) {

}]);

Exemplo de uso do serviço $http no controller:

(function() {
  var app = angular.module('nomeApp', ['store-directives']);
  app.controller('NomeCtrl', ['$http', function($http){

    //Criando a variável para estar acessível no promisse success
    var that = this;
    that.products = [];
    $http.get('/store-products.json').success(function(data) {
      that.products = data;
    });
  ;}]);
})();

Dicas importantes para evitar erros comuns

Existe a interpretação do Html feita pelo Browser e a interpretação do AngularJS, que acontece num segundo momento.

Imagem

Você não pode utilizar a expressão em uma imagem como abaixo, dependendo das informações do controller, pois ele não terá sido carregado:

Ao invés disso, você deve utilizar a diretiva ng-src, que será interpretado pelo angular, quando já tiver a informação de escopo no controller.

Links citados como material extra no curso

Curso sequencial do codeschool, o primeiro capítulo é gratuito, o segundo já é pago e você ajuda a manter esta empresa que gera conteúdos interessantes

https://www.codeschool.com/courses/staying-sharp-with-angular-js

Documentação do Angular.js

https://docs.angularjs.org/api

Vídeos Tutoriais

http://egghead.io/

Outra plataforma de aprendizagem:

https://thinkster.io/

Navegador de documentação de API e Gerenciador de Fragmento de código. Permitindo o uso local (Até mesmo quando estiver offline, por exemplo, em voo)

https://kapeli.com/dash