PROJETO TI

CRIANDO APLICATIVOS DO ZERO E FÁCIL!

2019-01-22T04:32:00.000-08:00

O QUE VOCÊ VAI APRENDER?

SÃO MAIS DE 10 HORAS DE CONTEÚDO PURO E MATERIAIS EXTRAS:

CRIAR APLICATIVOS
Mesmo sendo um total iniciante vamos explicar para você como criar aplicativos profissionais. Utilizaremos a linguagem HTML, CSS, Javascript em união com Apache Cordova.

MODELO DE NEGÓCIO
Vamos ensinar como ganhar dinheiro* fazendo aplicativos. Apresentamos os 4 pilares básicos para a monetização de um aplicativos e como fazer para ser bem-sucedido.

ATENDIMENTO AO CLIENTE -
Vamos dar atenção também a parte humana do processo. Como técnicas de atendimento e precificação, para você convencer seus futuros clientes a fechar negócio com você.

Veja os módulos do curso aqui

POR QUE FAZER ESTE CURSO?

CERTIFICAÇÃO PROFISSIONAL

A conclusão deste curso oferece certificação profissional válida em todo território nacional. Podendo portanto ser colocado no seu curriculum, com duração total de 10 horas.

GARANTIA

Se por algum motivo você achar que este curso não é o que você queria, basta entrar em contato para em até 7 dias receber um reembolso. Tudo o que vou exigir é que você seja honesto em relação aos seus esforços, ok?

ONLINE & PERPÉTUO

Faça as aulas no seu ritmo e onde estiver. O curso é inteiro com vídeo aulas e materiais extras. Sempre haverá novas aulas e atualizações. Seu acesso é perpétuo ao curso.

Inscriões aqui

Criando pequenos componentes dinâmicos com Javascript puro

2019-01-08T04:36:00.000-08:00

Porque nem sempre precisaremos de um framework

Substituir o React? Tá maluco?!

Sabe aquela velha historia de que não precisamos utilizar um canhão pra matar um passarinho? Como já devem ter lido muitas vezes, nem sempre precisamos sobrecarregar um projeto com todos os recursos que uma lib oferece, nesse caso podemos optar por alternativas mais leves e com objetivos mais direcionados (como o Preact em relação ao React). Mas e quando o projeto é tão pequeno que nem mesmo a alternativa mais leve vale o esforço?

ES6 Rocks!

O ES6 nos trouxe uma lista enorme de novos e fantásticos recursos além de bons upgrades na sintaxe de alguns recursos já existentes. Um desses novos recursos em particular é extremamente util na criação de componentes dinâmicos: Template Literals (ou Template Strings) e é ele que iremos utilizar nos exemplos a seguir.

O que vamos precisar?

Meu objetivo nesse post é que seja simples o suficiente pra que não precisemos de nenhum tipo de configuração prévia (Nada de babel, Webpack, Gulp, etc). Utilizaremos constantes, arrow functions e template literals que já tem um suporte bastante decente nos browsers modernos. Vocês podem conferir mais sobre o suporte clicando aqui

O que criaremos?

Nada de muito especial, apenas uma lista simples de nomes que será gerada a partir de um array de objetos. Vamos começar?

Primeiro definimos nosso modelo de dados:

const data = [
{name: 'João',id: '1'},
{name: 'Manuel',id: '2'},
{name: 'Pedro',id: '3'},
{name: 'José',id: '4'}
]

Criamos então um elemento de referência em nosso HTML:

<ul data-list></ul>

E este será nosso componente dinâmico:

const listComponent = (data) => {
return data.map((item) => {
return (
`<li><span>${ item.id }</span><span>${ item.name }</span></li>`
)
}).join('')
}

O que fizemos? Primeiro atribuímos a nossa constante uma arrow function que recebe o argumento data. Em seguida invocamos o método map de nosso argumento que por sua vez invocará uma função de callback para cada item em nosso array, como nosso array contém quatro objetos, teremos então quatro elementos de lista em forma de template strings. Utilizamos então um recurso chamado string interpolation (${ data.value }) para inserir os dados de nossos objetos em nossa template. Por fim note acima que utilizamos o método join() após o map, fizemos isso para evitar algumas virgulas indesejadas na conversão do array em string.

Para prosseguir armazenamos nosso elemento HTML em uma constante:

const el = document.querySelector('[data-list]')

E pra finalizar invocamos o método innerHTML chamando a função listComponent(), que receberá nosso array data como argumento:

el.innerHTML = listComponent(data)

Esse tipo de abordagem na criação de componentes simples pode ser bastante útil quando precisamos, por exemplo, popular as options de um select dinamicamente ou criar listas de qualquer tipo.

Um ponto importante: Diferentemente do React e outras UI libs modernas que, em resumo, utilizam um DOM virtual absurdamente veloz, o componente que criamos será inserido no DOM real, que é muito mais lento, por isso recomendo fortemente que utilize-o com moderação.

Principais tendências JavaScript para procurar em 2019

2018-12-27T03:42:00.001-08:00

Como sabemos que o mundo digital está em multicamadas, várias tecnologias se juntam para oferecer a você uma experiência através de uma tela inteligente.

Se você já pensou em como as páginas da web e os sites estão dando um impulso à sua empresa, há muitas coisas por trás da cortina, incluindo as principais empresas de desenvolvimento web de pilha completa.

O desenvolvimento do JavaScript está mudando rapidamente, especialmente nos últimos doze meses. 2018 foi um ano com muita ação, mudanças e novas iniciativas no desenvolvimento web de front-end. A corrida para se tornar a estrutura preferida do JavaScript se aqueceu, à medida que mais projetos começaram a optar pela React js, incluindo o Vue por cima do Angular.

Se você é uma startup ou uma pequena empresa, vale a pena dar uma olhada em todas as novas tendências que surgiram no ano passado. Estas novas estruturas e integrações podem ser a chave para colocar o pé na porta de novos projetos inovadores.

Vamos dar uma olhada nas principais tendências em JavaScript para que você esteja atualizado e à frente do jogo:

1) GraphQL

Muitos consideram que o GraphQL é o substituto das APIs REST no futuro. No entanto, REST e GraphQL não precisam necessariamente ser concorrentes, e um não é melhor que o outro para todos os aplicativos.

GraphQL é uma linguagem de consulta que permite aos desenvolvedores fazer solicitações mais específicas do servidor e empacotá-las de uma maneira simples.

O GraphQL integra-se ao React através da Relay framwork. É uma tendência importante para solicitações de servidor e APIs JavaScript para avançar, e é outra linguagem que vale a pena tentar.

2) Reason

O Facebook está usando o Reason em produção para impulsionar o aplicativo da web do Messenger. O motivo é uma compilação da linguagem JavaScript. Ele também inclui um wrapper Reason React que permite que você escreva o código do Reason que é compilado no React JS.

O motivo é uma linguagem de programação do tipo funcional e estático que pode direcionar aplicativos da Web em uma única página. Ele permite que você escreva código de segurança do tipo que funciona bem com JavaScript e OCaml.

Esta é definitivamente uma tendência emergente que vale a pena ver (e talvez alguma experimentação com um projeto paralelo) se você for um desenvolvedor de JavaScript.

3) Vue.js

O Vue.js se tornou um dos frameworks JavaScript mais populares atualmente. Sua aplicação e potencial atrai muita atenção e leva a longas discussões. É uma biblioteca JavaScript para construir interfaces web.

O maior benefício do Vue é a ausência de pedigree. É fresco e tem pouca bagagem. Tem aprendido com os erros e sucessos de React & Angular. Do jeito que vemos, o Vue é leve e fácil de aprender.

Recursos para procurar em 2019:

Ótimo desempenho com o Vue.js 2.x
animações SVG
Produto de código aberto
Vuetify para implementar ótimas idéias de interface de usuário
Nuxt tool para substituição de módulos
Proxy support
Stable API

4) Next.js

Next.js é uma estrutura minimalista para aplicativos JavaScript. Ajuda a simplificar a experiência de implementação de um aplicativo. Quando combinado com o React, você pode obter toda a poderosa funcionalidade React ao mesmo tempo em que obtém uma experiência simples semelhante ao Vue em termos de ferramentas, divisão de código, roteamento, etc.

Next.js trabalha para fazer seu JavaScript funcionar universalmente, seja em um servidor, computador ou dispositivo móvel. Isso ajuda a criar aplicativos universais representados no servidor com um código mínimo e uma curva de aprendizado.

Vale a pena aprender se você ainda não o fez, especialmente porque ele funciona bem com o React para criar poderosas aplicações universais.

5) ReactJS

React é uma biblioteca JavaScript mantidas pelo Facebook para criar interfaces de usuário. É ideal para grandes aplicações web que usam dados e permitem alterações ao longo do tempo sem recarregar a página.

O React simplifica a criação de interfaces de usuário interativas e pode ser usado em combinação com outras bibliotecas ou estruturas JS, como o AngularJS. React tem o apoio do Facebook e sua comunidade cresceu junto com sua popularidade.

6) De AngularJS a Angular 7

Há alguns anos, o Google iniciou o Angular, um framework que é um visionário de futuras mudanças nas APIs da web e é receptivo a ele. Depois de aprender com sua experiência em Angular 1, eles criaram Angular 2 para Angular 7 e alcançaram uma grande melhoria.

Como uma visão de longo prazo, o Google aponta para a plataforma web agora com Angular e a cada seis meses ele lançará uma versão principal do Angular.

O Angular fornece injeção de dependência, particularmente útil para a montagem de serviços de dados para aplicativos, juntamente com o uso de um modelo HTML para compor componentes. Portanto, é o melhor momento para começar com o Angular 7 para desenvolvedores.

Os recursos que distinguem o Angular 7 das versões angulares anteriores incluem o seguinte:

Os componentes do Angular Elements agora suportam projeção de conteúdo via slots.
Ele melhora o desempenho geral do aplicativo adicionando ou removendo automaticamente o polyfill de metadados de reflexão.
O Angular CLI pode solicitar aos usuários o recurso de Prompts do CLI para ajudá-los a tomar decisões.
A documentação da CLI foi integrada nos principais documentos do Angular.io.
The CLI documentation has been integrated into the main Angular.io docs.
Ao usar os orçamentos de pacote padrão, os usuários serão avisados sempre que o app exceder 2 MB. No entanto, haverá um erro se o pacote inicial exceder 5 MB.

Qualquer que seja a conclusão, você deve admitir que o AngularJS (mantido pelo Google) tem a capacidade de criar aplicativos da Web como nenhum outro. Com um ritmo acelerado de desenvolvimento, fácil integração de código, a disponibilidade para os testes unitários do AngulatJS (versões atuais) certamente pode ser sua escolha para o próximo projeto.

Conclusão:

Até agora, cobrimos algumas das muitas tendências emergentes no desenvolvimento de JavaScript e aplicativos da Web front-end neste blog. Felizmente, você encontrou algo novo para o seu negócio, seja ele de inicialização ou de grande porte.

O JavaScript está em constante mudança, e é provável que haja novas tecnologias líderes para esta data no próximo ano. Ficar à frente da curva é um desafio, mas é importante para os desenvolvedores de front-end que querem trabalhar com as melhores tendencias nos projetos mais interessantes.

Quer aprender sobre Vue.JS? Aqui está um bom curso para você.

Você quer fazer aplicativos? Aprenda a criar apps para Android e iOS - Curso de React Native, o framework incrível do Facebook. Nosso objetivo é trazer ao desenvolvedor recém-chegado no mundo mobile, um conteúdo mais direcionado à produtividade imediata, reduzindo a curva de aprendizado nesse novo ambiente. Nosso primeiro foco está na tecnologia disponibilizada pelo Facebook denominada React Native. Com o aprendizado deste curso, você consegue criar apps profissionais de uma maneira prática. O curso é baseado nas mais recentes literaturas sobre o assunto, e já te entrega o conteúdo mastigado, te habilitando a construir um aplicativo do início ao fim.

Novidades do C# 8

2018-12-21T07:41:00.000-08:00

Em um video do Channel9, Mads Torgersen demonstra as primeiras quatro features do C# 8.

Nullable Reference Types

Já falamos sobre nullable references types no passado, mas resumindo: a idéia é que reference types (os tipos de referência) não seriam mais nulos por padrão. Em vez disso, você deve explicitamente marcá-los como nulos (anuláveis) usando a mesma sintaxe "Tipo?" Que você usa para nullable value types (tipos de valor anuláveis).

Atribuir um null a um tipo non-nullable resultará em um aviso de compilação. Da mesma forma, ao buscar um tipo null teremos um aviso de compilação, a menos que a variável em questão fosse explicitamente verificada por nulo previamente. Então, teoricamente, a única mudança que os desenvolvedores precisam fazer é não utilizar a sintaxe "Tipo?", quando apropriado.

Desde o nosso report, a nova sintaxe foi adicionada a esse recurso. Porém, pode haver um cenário onde você sabe que a variável nullable x não é realmente nula, mas você não pode provar isso para o compilador.

Neste caso, você pode usar x!.Method () para suprimir o aviso do compilador sobre possíveis exceções de referência nula.

Async Streams (também conhecidos como foreach async)

Async stream é equivalente assíncronos ao IEnumerable. Como reportado antes, async streams é utilizado desde 2015. Depois de muito debate a sintaxe estabelecida é:

foreach await (string s in asyncStream)

Ao definir um objeto async, usamos a seguinte assinatura:

async IAsyncEnumerable<T> MethodName()

Assim como em métodos IEnumerable, pode ser usado "yield return" para construir stream de objetos em uma lazy fashion.

O benefício de usar Async em vez de IObservable <T> de Extensões Reativas, é que o consumidor controla a taxa de fluxo. Isso é referido como um "pull model". Já o IObservable <T> é um "push mode", o que significa que o "Producer" pode inundar o "Consumer" com uma taxa de fluxo maior do que ele pode manipular.

Implementação de Interface Padrão

As implementações de interface padrão são essencialmente uma forma limitada de herança múltipla. Isso permitirá que interfaces abstratas definam completamente métodos, como classes abstratas. No entanto, as interfaces abstratas ainda não poderão declarar construtores ou atributos.

Nota: Você pode simular campos em uma interface usando ConditionalWeakTable.

O principal benefício das implementações de interface padrão é que você pode adicionar novos métodos a uma interface existente sem quebrar a compatibilidade inversa. Porém, isso não é garantido, pois só funcionaria quando um método padrão adequado for planejado.

Extension Everything

Um solicitação de longo tempo é ter a possibilidade de escrever métodos de extensão (extension methods) em C#, não somente propriedades de extensão. Na verdade, não há como sequer definir uma propriedade ou evento de extensão usando o padrão atual. Além disso, colocar métodos de extensão em classes estáticas parece "estranho" para muitas pessoas.

Sob o novo design, existe uma nova construção chamada "extension". Por exemplo, se você quiser criar métodos de extensão e propriedades para uma classe de Cliente, você escreveria:

extension CustomerExt extends Customer {

//methods and properties go here

}

Tal como acontece com as interfaces, não é possível definir campos de instância em extension, mas é possível simular usando ConditionalWeakTable. Também podem ser definidos campos estáticos.

Além de propriedades, eventos e sobrecargas de operadores, está sendo considerado permitir construtores de extensão (extension constructors). Os construtores de extensão seriam muito interessantes em factory e em cenários de pooling de objetos.

Extensions interfaces permitem adicionar novas interfaces em classes já existentes, também é uma tido como uma novidade. Esta, provavelmente, não será uma nova funcionalidade do C# 8, já que isso requer alterações no runtime.

Para maiores informações sobre o futuro do C#, acesse o C# Language Design Repo.

Criando um filtro de busca customizável com JavaScript funcional

2018-12-20T04:45:00.000-08:00

Tutoriais utilizando bibliotecas e frameworks para state management se tornaram comuns. Apesar disso, já que muita gente usa muitos frameworks diferentes, muitas vezes precisamos falar sobre a plataforma que permite isso tudo: a odiadíssima ferramenta que é o JavaScript, na sua forma mais pura — conforme descrito com documentações excelentes como a da MDN.

Esse tutorial também pode ser útil para quem está iniciando em JavaScript e desenvolvimento em geral já começar com alguma ideia do que é programação funcional. O termo está se tornando popular e quem não subir nesse barco pode ficar para trás em pouco tempo.

Não vamos adentrar nos detalhes do que é programação funcional neste artigo — isso é assunto para outras horas de conversa. Aqui, ficaremos no rápido e simples: alcançar nosso objetivo, evitando mutações dos dados e estado global.

Iniciando o projeto

Pelo bem da simplicidade, vamos manter tudo num único arquivo, que vai ter essa cara:

<!DOCTYPE HTML> <html lang='pt'>

<head>

<meta charset='utf-8'>

<title>Um simples exemplo de filtro de busca.</title>

</head>

<body>

<h1>Um simples exemplo de filtro de busca.</h1>

<input type='text' id='search-filter' placeholder='Filtre sua busca por aqui.'>

<div id='options'></div>

<script>

// Code goes here

</script>

</body>

</html>

Antes de qualquer coisa, vamos criar um scope wrapper, uma pequena camada de encapsulamento que impede que o nosso código fique visível fora do escopo do nosso filtro. É simplesmente uma função sem nome, executada no momento em que é definida:

<body> <h1>Um simples exemplo de filtro de busca.</h1>
<input type='text' id='search-filter' placeholder='Filtre sua busca por aqui.'>
<div id='options'></div>
<script>
;(() => {
// safe coding!
})()
</script>
</body>

Essa resposta no StackOverflow (em inglês) explica resumidamente por que devemos usar scope wrappers, ou self-executing functions, as funções autoexecutantes.

Selecionando os elementos

O arquivo que nós criamos não tem nada demais: um título, nosso elemento de entrada — no qual digitaremos para filtrar os resultados — e uma área para incluir as opções, que é o que vamos fazer em seguida.

Primeiro, selecionaremos os elementos que queremos:

Sempre gosto de imprimir algo dinamicamente nas áreas, só para garantir — não leva nem trinta segundos!

Adicionamos isso…

E vemos esse resultado:

Agora que sabemos que o DOM está sendo manipulado como esperado, vamos pensar em algumas melhorias para esse código simples. Mas ele tem só 4 linhas, você me pergunta. A resposta, ao melhor estilo de filme de kung fu dos anos 70, é que fazemos agora para não ter que fazer no futuro.

Para começar, já dá para ver um problema aí: toda vez que eu quiser selecionar num novo elemento, vou ter que digitar document.querySelector. Já que não pretendo usar jQuery, vamos criar uma função que encurta esse nosso caminho.

Ela não deve ser usada mais muitas vezes neste tutorial, mas pode ser usada no futuro, o que possivelmente justifica aplicar os princípios DRY nesse pequeno snippet.

O que a função $ faz aqui é simples: ela recebe um parâmetro, selector, e retorna o elemento, da mesma forma que document.querySelector. E assim, caso um dia queiramos adicionar jQuery (por favor, não…), ele não conflitará com nosso código graças ao scope wrapper que definimos mais cedo.

Criando a lista modificável

Se você usa um framework de monitoramento de estado como React ou Vue, já sabe como criar uma lista que se atualize conforme você alterar um objeto JavaScript. Esse seria o cenário ideal — onde só criamos ou removemos itens de um array para atualizar o DOM, mas, pela simplicidade do nosso código, vamos criar uma função que recria a parte específica do documento em que vamos trabalhar.

A função poderia acessar um array definido no nosso escopo atual e atualizar acessa os elementos selecionados usando nossa recém criada função $, atualizando a vista do usuário a partir desses elementos. Essencialmente, nós queremos fazer isso, mas se o código crescer, um array definido fora do escopo da função pode tornar as coisas confusas. Compare:

Neste exemplo, nosso trabalho é cumprido. Definimos uma lista de opções, e uma função que me permite atualizá-la. Qual é o problema?

O primeiro é que dependemos do objeto global list e o segundo, de $. Se um desses objetos mudar, teremos uma função quebrada. Em outro caso problemático, list é alterado e nos esquecemos de chamar updateElements. updateElements também pode simplesmente não estar acessível do escopo atual, caso list seja movido.

Entrem pureza e iteradores

Vamos criar uma função que solucione esses problemas.

Para isso, precisaremos utilizar dois conceitos: um específico das linguagens de programação modernas, outro do conceito de programação funcional: iteradores e pureza.

Iteráveis são objetos que contêm zero ou mais elementos e podem ser iterados — isto é, ter seus itens trabalhados individualmente. Uma função ou método que trabalhe sobre um iterável é um iterador. Iteradores em JavaScript são métodos como find, filter, map, reduce, forEach.

Espera aí, o que exatamente aconteceu ali?! Vamos por etapas.

A função elementList:

Recebe um parâmetro, itemList;

Aplica map a itemList, transformando cada item em um elemento <li>;

Aplica reduce ao resultado da transformação, reduzindo o array de <li>a um elemento <ul> contendo os <li>s;

Retorna o valor reduzido.

Fora da função, adicionamos o novo elemento elementList(optionList) ao DOM.

A primeira vantagem desse método é a pureza: em programação funcional, pureza de uma função é a característica de que

1) ela não faz uso de, nem altera, nenhum elemento externo a ela, e 2) dados os mesmos parâmetros, retorna sempre o mesmo resultado. elementList, ao exigir itemList (em vez de alterar um objeto global, como no primeiro exemplo), respeita esse princípio.

Outro princípio que era violado e não é mais é a imutabilidade, adquirida, nesse caso, graças aos iteradores: um valor é imutável quando, após definido, não pode ser alterado. No primeiro exemplo, confiávamos na alteração do array list para atualizar a visão do usuário; no segundo, recebemos a lista cada vez que precisamos atualizar a visão.

Já que a função não tem efeitos colaterais (não altera nada alheio a ela), não há necessidade de nomeá-la como um verbo, afinal, não aplica uma ação: o relevante para o mundo externo é o valor retornado, que é um objeto, e não a ação praticada. Por isso, a função foi nomeada elementList, e não createElementList ou algo parecido.

Respeitando a esses dois princípios, diminuimos as chances de passarmos o valor errado para uma função, recebendo resultados inesperados.

Nos dois casos, o resultado é o mesmo:

Beleza! Perfeito. Agora só precisamos que o filtro funcione.

Para referência, este é o código que temos até agora:

<!DOCTYPE HTML> <html lang='pt'>
<head>
<meta charset='utf-8'>
<title>Um simples exemplo de filtro de busca.</title>
</head>
<body>
<h1>Um simples exemplo de filtro de busca.</h1>
<input type='text' id='search-filter' placeholder='Filtre sua busca por aqui.'>
<div id='options'></div>
<script>
;(() => {
const $ =
selector =>
document.querySelector(selector)
const filterInput = $('#search-filter')
const filteredOptions = $('#options')
const elementList =
itemList =>
itemList
.map(item => {
const li = document.createElement('li')
li.textContent = item
return li
})
.reduce((ul, item) => {
ul.appendChild(item)
return ul
}, document.createElement('ul'))

const optionList = ['foo', 'bar', 'baz']

const optionsArea = $('#options')

optionsArea.appendChild(elementList(optionList))

})()
</script>
</body>
</html>

Fazendo a lista reagir à entrada de dados

Agora que a lista já aparece a partir de um objeto, precisamos fazer com que ela seja filtrada pelo <input> que criamos mais cedo.

Para isso, vamos precisar de algumas ferramentas do JavaScript e do DOM: do primeiro, a API String, e especificamente seus métodos includes e indexOf; do segundo, a parte mais básica da API de eventos, Element.addEventListener.

Acontece que toda vez que você pratica uma ação de entrada de dados em um elemento de formulário, o evento input é emitido. Usando ele, podemos extrair o novo valor a cada atualização. Vamos experimentar:

Experimente adicionar o código acima à página . Cada vez que um valor for inserido na caixinha, um alerta nativo do navegador aparecerá na tela e esperará pelo seu OK. Além de irritante, exemplifica o que queremos fazer — manipular o valor inserido na caixa.

Agora vamos usar a função que definimos mais cedo, elementList, para renderizar a lista cada vez que o evento input for ouvido. Copie a linha usada para criar a lista para dentro do monitor de evento. Não se esqueça, também, de remover a lista anterior, ou você vai acabar com dezenas de listas:

Aqui, a elementList e o optionList estão acessíveis pois foram declarados anteriormente. O próximo passo é, simplesmente, passar algo diferente como parâmetro para elementList — uma versão filtrada de optionList.

Criando o filtro de busca

Para isso, vamos novamente recorrer aos iteradores — neste caso, filter e sort.

Por enquanto, vamos fazer um filtro básico: exibir os elementos da lista que contêm a string inserida no campo de filtro.

O resultado

Boom! O básico da missão já foi cumprido — e em menos de 50 linhas! Por fim, vamos colocar uma lista com itens que signifiquem algo:

Após reorganizar alguns detalhes do código, finalizamos a primeira parte do tutorial com o seguinte código:

<!DOCTYPE HTML> <html lang='pt'>
<head>
<meta charset='utf-8'>
<title>Um simples exemplo de filtro de busca.</title>
</head>
<body>
<h1>Um simples exemplo de filtro de busca.</h1>
<input type='text' id='search-filter' placeholder='Filtre sua busca por aqui.'>
<div id='options'></div>
<script>
;(() => {
const theFellowship = [
'Frodo Baggins',
'Samwise Gamgee',
'Pippin Took',
'Merry Brandybuck',
'Aragorn',
'Legolas',
'Gimli',
'Boromir',
'Gandalf the Grey'
]
const $ =
selector =>
document.querySelector(selector)
const elementList =
itemList =>
itemList
.map(item => {
const li = document.createElement('li')
li.textContent = item
return li
})
.reduce((ul, item) => {
ul.appendChild(item)
return ul
}, document.createElement('ul'))

const optionsArea = $('#options')
optionsArea.appendChild(elementList(theFellowship))

const filterInput = $('#search-filter')
filterInput.addEventListener('input', event => {
const query = event.target.value
const filteredItems =
theFellowship
.filter(item => item.includes(query))

optionsArea.firstChild && optionsArea.removeChild(optionsArea.firstChild)
optionsArea.appendChild(elementList(filteredItems))
})
})()
</script>
</body>
</html>

Obrigado por ter lido até aqui!

Aprenda javaScript : use a cabeça

Quer entender sobre VUE js? aqui esta um bom curos para aprender a desenvolver aplicações com vue

Vue.js, React.js ou angular. O que escolher?

2018-12-17T10:11:00.002-08:00

As estruturas JavaScript estão se desenvolvendo em um ritmo extremamente rápido, o que significa que hoje temos versões atualizadas frequentemente do Angular, ReactJS e de outro player neste mercado - Vue.js.

Analisando o número de posições abertas em todo o mundo que exigem um conhecimento específico de um determinado framework. Como fonte, Indeed.com chegando a seguinte distribuição de acordo com mais de 60.000 ofertas de emprego.

Levando em conta os dados a seguir, será apresentado as principais vantagens e desvantagens de cada framework frontend para ajudar os profissionais de tecnologia ou engenheiros a escolher o melhor para suas necessidades de desenvolvimento.

Prós e contras do angular

Angular é uma estrutura de MVVM super-heróica de JavaScript, fundada em 2009, que é incrível para a criação de aplicativos da Web altamente interativos.

Benefícios do Angular

Novos recursos como RXJS aprimorado, compilação mais rápida (em menos de 3 segundos), novo lançamento do HttpClient.
Documentação detalhada que permite obter todas as informações necessárias para o desenvolvedor individual. No entanto, isso requer mais tempo para a educação.
Ligação de dados bidirecional que permite um comportamento singular para o aplicativo, minimizando os riscos de possíveis erros.
MVVM (Model-View-ViewModel) que permite aos desenvolvedores trabalharem separadamente na mesma seção do aplicativo usando o mesmo conjunto de dados.
Injeção de dependência dos recursos relacionados aos componentes com módulos e modularidade em geral.

Desvantagens do Angular

A sintaxe complexa que vem da primeira versão do Angular. No entanto, o Angular 5 usa o TypeScript 2.4, que é o menos difícil de aprender em comparação.
Problemas de migração que podem aparecer ao passar da versão mais antiga para as mais recentes.

Empresas que usam o Angular 5: Upwork, Freelancer, Udemy, YouTube, Paypal, Nike, Google, Telegrama, Tempo, Stockphoto, AWS, Crunchbase.

Prós e contras do ReactJS

O ReactJS é uma biblioteca JavaScript, aberta pelo Facebook em 2013, o que é ótimo para criar grandes aplicativos da Web onde os dados podem ser alterados regularmente.

Benefícios do ReactJS

Fácil de aprender. Reagir é muito mais fácil de aprender devido à sua simplicidade em termos de sintaxe. Os engenheiros só precisam lembrar de suas habilidades de escrita em HTML, e é isso. Não há necessidade de aprender profundamente o TypeScript como no Angular.
Alto nível de flexibilidade e máximo de capacidade de resposta.
DOM virtual (modelo de objeto de documento) que permite organizar documentos em formatos HTML, XHTML ou XML em uma árvore a partir da qual é mais aceitável pelos navegadores da Web ao analisar diferentes elementos do aplicativo da web.
Combinado com o ES6 / 7, o ReactJS pode trabalhar com a alta carga de maneira fácil.
Ligação de dados descendente, o que significa que, com esse tipo de fluxo de dados, os elementos filhos não podem afetar os dados pai.
100% de biblioteca JavaScript de código aberto que recebe muitas atualizações diárias e melhorias de acordo com as contribuições de desenvolvedores de todo o mundo.
Absolutamente leve, porque os dados que atuam no lado do usuário podem ser facilmente representados no lado do servidor simultaneamente.
A migração entre versões é geralmente muito fácil, com o Facebook fornecendo “codemods” para automatizar grande parte do processo.

Desvantagens do ReactJS

Falta de documentação oficial - o desenvolvimento super rápido do ReactJS não deixa lugar para a documentação apropriada, o que é um pouco caótico agora, já que muitos desenvolvedores o contribuem individualmente, sem qualquer abordagem sistemática;
Os desenvolvedores tem escolha de mais, isso significa que fica mais difícil tomar decisões durante o desenvolvimento.
Muito tempo para dominar, o que significa que o React JS requer um profundo conhecimento de como integrar a interface do usuário na estrutura do MVC.

Empresas que utilizam o ReactJS: Facebook, Instagram, Netflix, New York Times, Yahoo, Khan Academy, WhatsApp, Codecademy, Dropbox, Airbnb, Asana, Atlassian, Intercom, Microsoft.

Prós e contras do Vue.js

O Vue.js é um framework JavaScript, lançado em 2013, que se encaixa perfeitamente na criação de interfaces de usuário altamente adaptáveis e sofisticados aplicativos de página única.

Benefícios do Vue.js:

HTML capacitado. Isso significa que o Vue.js tem muitas características semelhantes ao Angular e isso pode ajudar a otimizar o manuseio de blocos HTML com o uso de diferentes componentes.
Documentação detalhada. O Vue.js possui uma documentação muito circunstancial que pode prender a curva de aprendizado para os desenvolvedores e economizar muito tempo para desenvolver um aplicativo usando apenas os conhecimentos básicos de HTML e JavaScript.
Grande escala. O Vue.js pode ajudar a desenvolver modelos reutilizáveis bastante grandes que podem ser feitos sem nenhum tempo extra alocado para isso de acordo com sua estrutura simples.
Tamanho minúsculo. O Vue.js pode pesar cerca de 20KB mantendo sua velocidade e flexibilidade, o que permite alcançar um desempenho muito melhor em comparação com outros frameworks.

Desvantagens do Vue.js:

Falta de recursos. O Vue.js ainda tem uma participação de mercado muito pequena em comparação com o React ou o Angular, o que significa que o compartilhamento de conhecimento nesse framework ainda está na fase inicial.
Risco de flexibilidade excessiva. Às vezes, o Vue.js pode ter problemas ao se integrar em grandes projetos e ainda não há experiência com possíveis soluções, mas eles definitivamente virão em breve.
Risco de flexibilidade excessiva. Às vezes, o Vue.js pode ter problemas ao se integrar em grandes projetos e ainda não há experiência com possíveis soluções, mas eles definitivamente virão em breve.
Falta de documentação completa em inglês. Isso leva a uma complexidade parcial em alguns estágios de desenvolvimento, no entanto, mais e mais materiais estão sendo traduzidos para o inglês.

Empresas que usam o Vue.js: Xiaomi, Alibaba, WizzAir, Euronews, Grammarly, Gitlab e Laracasts, Adobe, Behance, Codeship, Reuters.

Conclusão

Para um engenheiro de verdade, não há diferença substancial em qual estrutura escolher, porque leva algum tempo para se acostumar com a nova. Em nossa empresa, aumentamos nossa expertise principalmente no ReactJS e no Angular 2/4/5, mas o Vue.js também está a bordo. Cada estrutura tem suas próprias vantagens e desvantagens, o que significa que deve haver apenas uma escolha certa para cada caso durante o desenvolvimento do produto.

Novidades Angular 7

2018-12-14T02:34:00.001-08:00

A nova versão do Angular trouxe melhorias de desempenho e mudanças interessantes no Angular CLI, a sua principal interface de linha de comando. Neste artigo falaremos sobre as principais novidades do Angular 7.

Melhor performance

Uma aplicação SPA consiste de alguns poucos arquivos, após ser construída para publicação. Nesses arquivos é concentrado/compactado todo o código necessário para fazer o cliente funcionar. Assim, no primeiro acesso precisamos aguardar que tudo seja baixado de uma única vez para que a aplicação possa ser utilizada. Isso pode ser um problema quando lembramos que grande parte do tráfego na internet vem de dispositivos móveis que, em geral, costumam acessar a internet em baixa velocidade de conexão.

Para mantermos o tamanho da nossa aplicação sobre controle, o Angular conta com a função de Bundle Budgets. Isto é, quando construímos nossa aplicação, recebemos alertas quando o seu tamanho excede um limite pré-determinado. Este recurso já existia no Angular e agora se tornou padrão. Na construção de uma aplicação que ultrapasse 2 MB receberemos um alerta e em aplicações que ultrapassem 5 MB seremos impedidos de prosseguir com a construção. É claro que esses valores são personalizáveis, e podemos modificá-los no arquivo angular.json do nosso projeto:

"budgets": [

 {

   "type": "initial",

   "maximumWarning": "2mb",

   "maximumError": "5mb"

 }

]

maximumWarning: Tamanho da aplicação que, se excedido, disparará um alerta.
maximumError: Tamanho da aplicação que, se excedido, causará um erro e interromperá a construção.

Novidades para templates

Embora pouca coisa tenha mudado no Angular Material, a biblioteca de componentes que implementa o Material Design, alguns novos elementos interessantes foram adicionados ao CDK da biblioteca.

O CDK, ou kit de componente, possui diversos componentes que oferecem funcionalidades para nossas aplicações sem a definição de estilos, como textareas que são redimensionados automaticamente e ferramentas de acessibilidade para o uso de teclas de atalho e mais.

Com o Angular 7 foram lançados outros dois componentes: Drag and Drop e Virtual Scrolling, que veremos com mais detalhes a seguir.

Drag and Drop

O novo componente de Drag and Drop facilita o desenvolvimento de funcionalidades “arrasta e solta”. Com ele podemos criar desde elementos que podem ser arrastados livremente a listas verticais e horizontais reordenáveis.

E a implementação é tão simples quanto qualquer outro componente:

<div cdkDropList class="example-list" (cdkDropListDropped)="drop($event)">

  <div class="example-box" *ngFor="let filme of filmes" cdkDrag>{{filme}}</div>

</div>

Linha 1: Com o atributo (cdkDropListDropped) podemos executar o método drop sempre que um item da lista for arrastado para outra posição.
Linha 2: Identificamos os atributos como “arrastáveis” com o atributo cdkDrag.

Dessa forma, na classe drop podemos capturar a posição do item antes e depois de ter sido arrastado:

drop(event: CdkDragDrop<string[]>) {

  console.log(event.previousIndex)

  console.log(event.currentIndex)

}

Virtual Scrolling

Com o componente de Virtual Scrolling podemos construir grandes listas roláveis sem nenhuma perda de desempenho. Para isso, o componente renderiza apenas os elementos que estão na parte visível da lista e destrói aqueles que já saíram da parte visível.

Podemos utilizar o componente diretamente no template das nossas páginas:

<cdk-virtual-scroll-viewport itemSize="50" class="example-viewport">

  <div *cdkVirtualFor="let item of items" class="example-item">{{item}}</div>

</cdk-virtual-scroll-viewport>

Angular CLIA

ferramenta de linha de comando também mudou. Agora, sempre que criamos um novo projeto, o CLI pergunta se desejamos adicionar o módulo de rotas e se desejamos utilizar algum processador CSS, como SASS ou LESS. Veja a seguir o processo de criação de uma aplicação.

1. Instalando o Angular CLI

Para instalar o Angular CLI utilizamos o NPM, o gerenciador de pacotes de Node.js:

npm install -g @angular/cli

2. Criando um projeto Angular utilizando o CLI

Após a instalação já poderemos utilizar o CLI para criar nosso projeto:

ng new meu-projeto

3. Criando o módulo de rotas automaticamente

O Angular CLI perguntará se desejamos utilizar o módulo de rotas do Angular. Se dissermos que sim, o CLI fará toda a configuração necessária e não precisaremos ter esse trabalho:

? Would you like to add Angular routing? (y/N)

4. Escolhendo o pré-processador CSS

Na segunda pergunta escolhemos o processador de CSS que queremos utilizar ou se desejamos utilizar CSS puro no nosso projeto. Para responder utilize as setas do teclado e aperte enter:

? Which stylesheet format would you like to use?

> CSS

  SCSS   [ http://sass-lang.com   ]

  SASS   [ http://sass-lang.com   ]

  LESS   [ http://lesscss.org     ]

  Stylus [ http://stylus-lang.com ]

O Angular CLI ficará responsável por criar a estrutura inicial da aplicação.

Dependências

Algumas dependências utilizadas pelo Angular também foram atualizadas:

TypeScript: A versão do TypeScript, o Superset do JavaScript utilizado pelo Angular foi atualizada para a versão 3.1, que conta apenas com algumas pequenas mudanças em relação a declaração de propriedades em funções.
RxJS: O RxJS, a biblioteca que provem ao Angular, dentre outras coisas, Observables, foi atualizada para a versão 6.3. Essa nova versão implementou apenas correções.
NodeJS: Agora é possível utilizar o Angular e o Angular CLI na versão 10 do Node.js, embora ainda seja totalmente compatível com a versão 8.

Curtiu este artigo e quer ler mais sobre as novidades do mundo da tecnologia? Deixe um joinha! Se você já utilizou o Angular, deixe nos comentários como foi sua experiência.

Quer entender mais sobre Desenvolvimento web? Aqui estão algumas indicações de livros:

Três novidades no ES2018 que você precisa conhecer

2018-12-12T05:35:00.004-08:00

O JavaScript não para de evoluir. Desde a primeira grande atualização na linguagem, em 2015 com o ES6 (depois rebatizado para ES2015), temos lançamentos anuais com correções, melhorias e novas funcionalidades.
O processo de atualização é coordenado pelo TC39, um comitê que conta com membros da comunidade e representantes de grandes empresas.
Um fato muito legal sobre o TC39: temos um brasileiro que é membro ativo do comitê, o LEO BALTER.
Temos aqui no portal uma ENTREVISTA que fizemos com o Leo em 2016, na qual ele conta um pouco como o comitê funciona.

O ES2018 nos traz algumas novidades e melhorias bem interessantes.
Em junho de 2018 já devemos ter a versão oficializada pela ECMA INTERNATIONAL.

Agora, vamos conhecer três das funcionalidades oferecidas

ASYNCHRONOUS ITERATION

O ES2015 trouxe muitas novidades. Uma delas foi o iterator (iterador), um objeto que oferece a funcionalidade de navegar entre os itens de uma lista ou estrutura – um a um – em sequência. Este objeto oferece o método next, o qual retornará o próximo item da lista no seguinte formato:

{
  value: Mixed,
  done: Boolean
}

Você pode saber mais sobre Iterators no post GENERATORS, YIELD E ITERATORS, aqui no portal.
Iterators são muito legais e nos dão N possibilidades, porém, Iterators somente funcionam em dados síncronos.
Veja um exemplo:

let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9]; let it = arr[Symbol.iterator]();
console.log(it.next().value); // 1
console.log(it.next().value); // 2
console.log(it.next().value); // 3
console.log(it.next().value); // 4

A novidade no ES2018 é a sua possibilidade assíncrona.
Um iterator assíncrono, basicamente, é um iterator. Entretanto, o método nextretorna uma Promise.

const { value, done } = syncIterator.next();
asyncIterator.next().then(({ value, done }) => /* ... */);

Para fazer a iteração, agora temos o for await of, que faz exatamente o que parece, itera objetos iteráveis assincronamente. Legal, né?

for await (const line of readLines(filePath)) {
  console.log(line);
}

Veja mais na DOCUMENTAÇÃO DA PROPOSTA.

OBJECT REST/SPREAD PROPERTIES

rest e spread também entraram no ES2015.
A sintaxe chamada de “destructuring assignment” é uma expressão JavaScript que torna possível descompactar valores de arrays ou propriedades de objetos e atribuir a variáveis novas.

Vejamos um exemplo:

var a, b, rest;
[a, b] = [10, 20];

console.log(a);
// expected output: 10

console.log(b);
// expected output: 20

[a, b, ...rest] = [10, 20, 30, 40, 50];

console.log(rest);
// expected output: [30,40,50]

Veja mais sobre destructuring na MDN.
Basicamente, o ES2018 introduz a mesma possibilidade para objetos.
Rest:

let { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 };
x; // 1
y; // 2
z; // { a: 3, b: 4 }

Spread:

let n = { x, y, ...z };
n; // { x: 1, y: 2, a: 3, b: 4 }

Veja mais na documentação da PROPOSTA OFICIAL.

PROMISE.PROTOTYPE.FINALLY()

Promises já estão no nosso dia a dia há um bom tempo.
Desenvolvedores JavaScript já vinham utilizando Promises antes mesmo de se tornar parte da linguagem (usando bibliotecas), também no ES2015.
A novidade do ES2018 é que agora Promises terão o finally.
Muitas bibliotecas existentes implementam o método finally, que é um callback para quando uma Promise está pronta, seja como fulfilled ou rejected.
Podemos pensar no finally como o já conhecido try/catch/finally, no qual o finallyserá sempre executado.

promise
.then(result => {···})
.catch(error => {···})
.finally(() => {···});

Veja mais na PROPOSTA oficial.

CONCLUSÃO

O ES2018 ainda traz outras novidades e melhorias, como novas funcionalidades para expressões regulares (RegExp) e uma revisão nos template literals.
O Dr. Axel Rauschmayer faz um excelente trabalho em seu blog 2ALITY, e lá ele escreveu sobre todas as novidades no post ECMASCRIPT 2018: THE FINAL FEATURE SET.

Tendências da tecnologia em 2018

2018-12-10T09:49:00.000-08:00

Na indústria da tecnologia a evolução é constante, tudo se transforma muito rápido e frequentemente você pode sentir que está sendo deixado para trás.

As tendências mudam, novas técnicas e metodologias surgem e você tem que estar sempre atualizado. Apresentaremos nesse pequeno artigo algumas tendências em tecnologia, na área de desenvolvimento e arquitetura de software. Considere um auto-update nos seus skills com as dicas da nossa #TechTrendingTopics

Áreas de destaque em Tecnologia

IoT big data

Com a explosão do número de dispositivos usados atualmente, a montanha dos dados que são gerados tem crescido de forma exponencial.

Apesar de estar apenas começando, a Internet of Things (IoT) – ou Internet das coisas – já produz bilhões de dispositivos conectados a internet e outros bilhões ainda estão por vir. A consequência disso é a multiplicação dos dados gerados. Em consequência são demandadas mais ferramentas para explorar os dados e obter os insights.

Business intelligence

Como mencionamos antes, captar um volume enorme de dados é importante. Porém, analisar esses dados é a parte fundamental. Nesse aspecto é que o Business Intelligence – BI – se encaixa.

O BI fornece uma variedade de ferramentas, aplicações e metodologias que ajudam na interpretação dos dados.

As duas principais tendências no BI são o data-driven decision-making e o Analytics.

Uma corrente cada vez mais presente é o processo de decisão dirigido a dados ou data-driven decision-making. É o processo capaz de gerar, analisar e visualizar os dados para guiar o gerenciamento dos negócios.

Na prática são gerados relatórios, dashboards e outras visualizações dos dados que facilitam e clarificam o processo de tomada de decisão das empresas.

O resultado muitas vezes é a otimização dos processos, tornando as áreas mais eficientes – gerando assim vantagens competitivas.

A outra vertente em alta do BI é conhecida como Analytics, seu foco maior está em responder perguntas específicas do negócio e da sua operação. Por exemplo: Quais produtos mais vendidos em determinadas regiões?

Data mining

Data mining são as práticas responsáveis pelas pesquisas das informações no Big Data, procurando por padrões e tendências usando algoritmos que ajudam a segmentar os dados.

Buscar as respostas quando a fonte de informação não está estruturada é o grande desafio. Para isso é necessário interpretar e “desmistificar” os dados na busca de padrões e respostas conclusivas.

Inteligência artificial

Quando falamos sobre Inteligência Artificial, nós falamos sobre máquinas que são capazes de executar o que os humanos fazem através de sua própria inteligência.

Para 2018 é previsto que mais da metade das empresas estejam usando analytics e algoritmos para serem mais competitivas. A ciência que está por trás desses algoritmos é a Inteligência Artificial.

Cada vez mais as máquinas são capazes de interpretar os dados e gerar melhores previsões.

Tendências em desenvolvimento de software

JavaScript e TypeScript

O JavaScript é uma das linguagens mais populares e poderosas do mundo. Ela pode ser usada para gerar interfaces mais interativas, adicionando efeitos visuais, criando games, animações e também por aplicações que podem renderizar em qualquer plataforma – web ou mobile – por exemplo.

A plataforma pode ser usada tanto no back-end como principalmente no front-end. JavaScript é usado por mais de 80% das aplicações web.

O TypeScript é uma ótima linguagem capaz de compilar para qualquer navegador facilmente em qualquer ambiente. A curva de aprendizagem também não é alta, pois todos os componentes são classes. Como a linguagem mantém as propriedades do JavaScript é simples criar aplicações JavaScript com TypeScript.

O TypeScript é uma das linguagens que vem se popularizando, baseado na evolução do ranking do GitHub.

Java

O Java é uma linguagem open source, é considerada como uma das linguagens mais adotadas ao redor do mundo. Uma das razões é o fato da linguagem ser bastante legível e consequentemente simples.

A linguagem é capaz de rodar em quaisquer dispositivos. A plataforma é aplicada para o desenvolvimento de soluções de software para computadores, smartphones, televisores e para o desenvolvimento de aplicações mobile nativas Android.

O Java está hoje na versão 9. A próxima versão – Java 10 – receberá a nova convenção de versionamento da Oracle. Nessa nova convenção o padrão será YY.M, no qual YY corresponde ao ano e M corresponde ao mês do lançamento. Prepare-se em 2018 para o Java nas versões 18.3 em Março e 18.9 em Setembro.

Swift

Swift é uma linguagem de programação desenvolvida pela Apple. A linguagem é principalmente usada para criação de soluções para dispositivos da Apple como iOS, macOS, watchOS, tvOS.

O uso da linguagem cresceu bastante nos últimos anos. Ela adota padrões seguros de programação e introduz funcionalidades modernas que tornam o desenvolvimento mais simples e flexível, podendo ser considerada bastante produtiva e interativa.

Python

Python é conhecida por sua flexibilidade, performance e a incrível legibilidade do código. Grandes players como YouTube, Reddit e Instagram usam a linguagem nos seus websites e mobile apps.

O rápido crescimento da Inteligência Artificial é algo que todos desejamos. E Python é considerada como o futuro do machine learning.

Python também já é usada para tornar a experiência do usuário mais atrativa e intuitiva em empresas como Spotify, Evernote, Booking.com.

Angular

O Angular é um framework JavaScript mantido pela Google. O framework é open source e completamente gratuito.

A arquitetura é baseada no Single Page Application estendendo o HTML DOM. Com Angular é possível criar web apps robustas, responsivas e performáticas.

A versão 4 é escrita com TypeScript 2.1. As mudanças introduzidas nesta versão reduzem o tamanho do código que é gerado até pela metade.

React.Js

O React.Js tem se tornado cada dia mais popular. A biblioteca é principalmente utilizada para construção do front-end das aplicações, com atualização da interface de forma prática e rápida já que ele renderiza automaticamente quando um novo dado está disponível.

Spring

Spring é um padrão utilizado na construção de aplicações Java. Atualmente é um dos frameworksmais maduros e completos para o desenvolvimento na plataforma Java.

O Spring é decomposto em vários módulos, cada um deles especialista em uma determinada funcionalidade. Por exemplo, Spring Data na camada de acesso a Dados, Spring MVC para a camada de apresentação, dentre muitos outros.

Tendências em arquitetura de software

Micro serviços

A arquitetura de micro serviços é dirigida ao design de aplicações de software baseado em serviços que são independentes, autônomos no ponto de vista do deploy e sobretudo escaláveis. Cada serviço está rodando sobre seu próprio processo e é construído em função das capacidades e necessidades de negócio.

Cada componente tem seu processo de deploy independente e completamente automatizado através de uma engine com toda infra-estrutura necessária ao deploy.

Os micro serviços podem ser escritos em diferentes linguagens de programação e podem usar diferentes tecnologias no armazenamento dos dados. Sendo assim, cada um deles pode também ser gerenciado por diferentes times.

São muitas as vantagens desse tipo de arquitetura, dentre elas:

Cada micro serviço é pequeno, simples e se destina a uma funcionalidade específica. Portanto, é mais fácil para entender, desenvolver e manter.

O processo desacoplado de deploy torna mais simples o processo de deployment, é mais rápido e seguro publicar novas versões do componente. Assim, há simplificação do processo que conhecemos como Continuous Deploy e Continuous Delivery.

Esse modelo promove escalabilidade. A administração pode personalizar cada serviço segundo as necessidades de processamento, memória, espaço em disco, etc. O gerenciamento do micro serviço vai permitir que cada item seja alocado com um time diferente – de forma independente e paralela.

Docker

Docker é uma plataforma open source que fornece contêineres. A ideia é criar, publicar e rodar aplicações em laptops, data center ou mesmo em um ambiente em nuvem (on-cloud). Tudo isso é feito através de contêineres onde é possível empacotar uma aplicação completa com todos seus componentes e todas as suas configurações. Ao final essa imagem pode ser embarcada com tudo na máquina virtual.

Além disso, com Doker é possível definir todo o processo através de scripts, automatizando todas as tarefas com poucas linhas de comando. Assim, também é possível integrar o Docker junto com às suas práticas do DevOps.

Conclusão

Estas são algumas das principais tendências da tecnologia em 2018 na indústria do software. Este é um ambiente que evolui e cresce super rápido. O importante é sempre estar atualizado. Se você conhece alguma outra tendência, compartilhe com os seus comentários.

Como filtrar consultas no firebase

2018-12-06T09:58:00.003-08:00

Para filtrar dados, combine um dos métodos de limite ou de intervalo com um método de ordenação ao criar uma consulta.

Método	Uso
`limitToFirst()`	Definir o número máximo de itens para retornar a partir do início da lista ordenada de resultados.
`limitToLast()`	Definir o número máximo de itens para retornar a partir do fim da lista ordenada de resultados.
`startAt()`	Retornar itens maiores ou iguais à chave ou ao valor especificado, dependendo do método de ordenação escolhido.
`endAt()`	Retornar itens menores ou iguais à chave ou ao valor especificado, dependendo do método de ordenação escolhido.
`equalTo()`	Retornar itens iguais à chave ou ao valor especificado, dependendo do método de ordenação escolhido.

Ao contrário dos métodos de ordenação, você pode combinar várias funções de limite ou de intervalo. Por exemplo, combine os métodos startAt() e endAt() para limitar os resultados a um intervalo especificado de valores.

Mesmo quando há apenas uma correspondência para a consulta, o instantâneo ainda é uma lista, mas contém somente um item. Para acessar o item, é necessário retornar o resultado:
// My top posts by number of stars

myTopPostsQuery.addValueEventListener(new ValueEventListener() {
    @Override
    public void onDataChange(DataSnapshot dataSnapshot) {
        for (DataSnapshot postSnapshot: dataSnapshot.getChildren()) {
            // TODO: handle the post
        }
    }

    @Override
    public void onCancelled(DatabaseError databaseError) {
        // Getting Post failed, log a message
        Log.w(TAG, "loadPost:onCancelled", databaseError.toException());
        // ...
    }
});

Limitar o número de resultados

Use os métodos limitToFirst() e limitToLast() para definir um número máximo de
filhos a serem sincronizados para determinado retorno de chamada. Por exemplo,
se você usar limitToFirst() para definir um limite de 100, inicialmente receberá
até 100 retornos de chamada onChildAdded().
Se você tiver menos de 100 itens armazenados no seu banco de dados do Firebase, um
retorno de chamada onChildAdded() será acionado para cada item.
Conforme os itens são alterados, você recebe retornos de chamada onChildAdded() para os
itens presentes na consulta e retornos de chamada onChildRemoved() para os itens que
saem da consulta para que o número total permaneça 100. Veja a seguir uma demonstração de como o exemplo do app de blog define uma consulta para
recuperar uma lista das 100 postagens mais recentes de todos os usuários:

var recentPostsRef = firebase.database().ref('posts').limitToLast(100);

Esse exemplo define somente uma consulta. Para sincronizar os dados, é necessário ter um
listener anexado. Filtrar por chave ou valor

Use startAt(), endAt() e equalTo() para escolher pontos arbitrários de início, fim e
equivalência para consultas. Isso pode ser útil para paginar dados ou encontrar itens
com filhos que tenham um valor específico.

Como os dados de consultas são ordenados

Nesta seção, explicamos como os dados são classificados por cada um dos métodos de
ordenação na classe Query.

orderByChild

Ao usar orderByChild(), os dados que contêm a chave filha especificada são ordenados
desta maneira:

Filhos com valor null para a chave filha especificada vêm primeiro.
Filhos com um valor false para a chave filha especificada são os próximos.Se vários filhos tiverem o valor false, eles serão classificados lexicograficamente por chave.
Filhos com um valor true para a chave filha especificada são os próximos. Se vários filhos tiverem um valor true, eles serão classificados lexicograficamente pela chave.
Filhos com um valor numérico são os próximos, classificados em ordem crescente. Se vários filhos tiverem o mesmo valor numérico para o node filho especificado, eles serão classificados por chave.
Strings vêm depois dos números e são classificadas lexicograficamente em ordem crescente. Se vários filhos tiverem o mesmo valor para o node filho especificado, eles serão ordenados lexicograficamente por chave.
Objetos são os últimos e são classificados lexicograficamente pela chave em ordem crescente.

orderByKey

Ao usar orderByKey() para classificar seus dados, os dados são retornados
em ordem ascendente pelo nome da chave.

Filhos com uma chave que possa ser analisada como um número inteiro de 32 bits vêm primeiro, classificados em ordem ascendente.
Filhos com um valor de string como chave são os próximos, classificados de modo lexicográfico em ordem ascendente.

orderByValue

Ao usar orderByValue(), os filhos são ordenados pelo valor deles. Os critérios de ordenação são os mesmos que os em orderByChild(), mas o valor do node é usado em vez do valor de uma chave filho especificada.

Desanexar listener

Retornos de chamada são removidos chamando o método off() na sua referência ao
banco de dados do Firebase.

Você pode remover um único listener ao transmiti-lo como um parâmetro para off().
Chamar off() no local sem argumentos remove todos os listeners desse local.

Chamar off() em um listener pai não remove automaticamente os listeners registrados

nos nodes filho dele. off() também precisa ser chamado nos listeners filho para remover
o retorno de chamada.

Exibindo processo que ocorrem durante o program para o usuário

2011-04-18T04:42:00.000-07:00

Hoje veremos como exibir para o usuário quais os passos que o programa faz durante um processo referente a regra de negocio.
A finalidade é mostrar o que esta sendo feito pois as vezes o program pode demorar um pouco para responder devido a um processo na maquina ou até um envio de e-mail.
Crie um novo WebApplication no visual Studio.

Na pagina Default.aspx da aplicação vamos colocar alguns campos simples para simular um formulário.

Ex:

<style type="text/css">
    .campo{

padding:5px;
        float:left;    
    }
</style>

<script language="javascript" type="text/javascript">
    
    function RespostaServidor(ResultString) {
        var result = document.getElementById("result");
        result.innerHTML = ResultString;
    }

    function SalvarDados() {
        var form = new GetForm()
        PageMethods.Salvar(form, RespostaServidor);
        PageMethods.EnviarEmail(RespostaServidor);
        PageMethods.Concluir(RespostaServidor);
    }

    function GetForm() {
        this.Nome = $get("txbNome").value;
        this.Telefone = $get("txbTelefone").value;
        this.Email = $get("txbEmail").value;
    } 
</script>

<div class="campo">
Nome
<input id="txbNome" type="text" />
    </div>
<div class="campo">
Telefone
<input id="txbTelefone" type="text" />
    </div>
<div class="campo">
E-mail
<input id="txbEmail" type="text" />
    </div>
<div>
<input onclick="SalvarDados();" type="button" value="Salvar" />
        <span id="result"></span>
    </div>

A classe JavaScript "GetForm()" é um modelo para capturar os dados do formulário, e é recebida pelo C# no tipo "Dictionary<string,string>".

Criei um WebMethod para cada ação que será executada pelo servidor e as utilizei na função javascript "SalvarDados()" que por sua vez armazena a resposta do servidor em uma outra função "RespostaServidor(ResultString)" apresentando a resposta do webMethod na tag <span id="result"></span>.

Para simular o tempo de processo no servidor utilizei Thread.Sleep(3000);

Veja na listagem a baixo como ficaram os webMethods:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Threading;
using System.Web.Services;

namespace TesteAssincronoMetodos
{
    public partial class _Default : System.Web.UI.Page
    {

        protected void Page_Load(object sender, EventArgs e)
        {
           
           
        }
        public string PublicRetorno(Dictionary form, string text)
     {

            switch (text)
            { 
                case "Inicio" : text = "Salvando dados do usuário "+form["Nome"]; break;
                case "Enviando Email...": text = "Enviando Email " + form["Email"] + "..."; Thread.Sleep(3000); break;
                case "Concluido": Thread.Sleep(3000); break;
            }
           
            return text;
     }

        #region WebMethods
        [WebMethod]
        public static string Salvar(Dictionary jsForm)
        {
            Form_ = jsForm;
            string msg = new TesteAssincronoMetodos._Default().PublicRetorno(jsForm,"Inicio");
            return msg;
        }
        [WebMethod]
        public static string EnviarEmail()
        {

            string msg = new TesteAssincronoMetodos._Default().PublicRetorno(Form_, "Enviando Email...");
            return msg;
        }
        [WebMethod]
        public static string Concluir()
        {
            string msg = new TesteAssincronoMetodos._Default().PublicRetorno(null,"Concluido");
            return msg;
        }
        #endregion

        public static Dictionary Form_ { get; set; }

    }
}

É isso ai galera qualquer duvida ou sugestão basta entrar com contato.

Criar XML a partir de uma classe modelo utilizando Serialize e Deserialize

2010-12-28T10:54:00.000-08:00

Neste post vou mostrar como montar um XML a partir de uma classe modelo utilizando o Serilize do c#.

Dica: pode ser utilizado em uma aplicação que tenha um formulário e por algum motivo desconhecido o usuário não esta conseguindo salvar os dados, logo no tratamento da exceção da aplicação pode-se armazenar os dados do formulário em um arquivo xml utilizando o Serialize e enviar por e-mail para equipe de desenvolvimento, que por sua vez com os dados do usuário fica mais fácil simular o erro e corrigi-lo mais rapidamente.

Crie um novo projeto no Visual Studio do tipo ASP.NET Web Application (C#), monte uma pagina de acordo com os elementos da imagem abaixo

No evento do botão que ira salvar os dados do formulário vou capturar os dados do informados pelo usuário e armazena-los utilizando minha classe modelo com as seguintes propriedades.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace XML_Serialize
{
    public class USUARIO
    {
        public string NOME{get;set;}
        public int SEXO{get;set;}
        public DateTime DATA_NASCIMENTO{get;set;}
        public string TELEFONE{get;set;}
    }
}

Vou criar também uma classe com os métodos que executaram a serialização e deserialização.
Ao executar a deserialização é necessário fechar o arquivo, pois se o usuário abrir o mesmo arquivo de novo não será possível pois o mesmo já esta aberto.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Text;
using System.IO;
using System.Xml.Serialization;
using System.Xml;

namespace XML_Serialize
{
    public class Ferramenta_serialize
    {
        internal string SerializeObject(USUARIO user,string caminhoServidor)
        {
            StringBuilder xm = new StringBuilder();

            MemoryStream memoryStream = new MemoryStream();
            XmlSerializer xs = new XmlSerializer(user.GetType());
            XmlTextWriter xmlTextWriter = new XmlTextWriter(memoryStream, Encoding.UTF8);

            xs.Serialize(xmlTextWriter, user);
            memoryStream = (MemoryStream)xmlTextWriter.BaseStream;
            xm.Append(UTF8ByteArrayToString(memoryStream.ToArray()));

            //cria o arquivo mesmo que não exista
            string file_ =  user.NOME + ".xml";
            StreamWriter valor = new StreamWriter(caminhoServidor + "\\" + file_);
            valor.Write(xm.ToString().Trim());
            valor.Close();
            return file_;
        }

        internal USUARIO DeserializeObject(System.Web.UI.WebControls.FileUpload fu_XML)
        {
            XmlSerializer xs = new XmlSerializer(typeof(USUARIO));
            FileStream fs = new FileStream(fu_XML.PostedFile.FileName, FileMode.Open);
            XmlReader reader = new XmlTextReader(fs);

            USUARIO user = xs.Deserialize(reader)as USUARIO;
            reader.Close();

            return user;
        }
        /// <summary>
        /// converte um Array de Byte Unicode (UTF-8 encoded) para uma String.
        /// </summary>
        /// <param name="characters">Unicode Array de Byte's para comverter em String</param>
        /// <returns>String formada por Array de Byte's</returns>
        private String UTF8ByteArrayToString(Byte[] characters)
        {
            UTF8Encoding encoding = new UTF8Encoding();
            String constructedString = encoding.GetString(characters);
            return (constructedString);
        }
        /// <summary>
        /// Converte uma String em Array de Byte's UTF-8
        /// </summary>
        /// <param name="XMLString"></param>
        /// <returns></returns>
        private Byte[] StringToUTF8ByteArray(String XMLString)
        {
            UTF8Encoding encoding = new UTF8Encoding();
            Byte[] byteArray = encoding.GetBytes(XMLString);
            return byteArray;
        }
    }
}

Agora no evento do botão salvar vou capturar os dados do formulário e utilizar o metodo SerializeObject passando para o mesmo o objeto do tipo USUARIO, preenchido com os dados do formulário.
O mentodo SerializeObject ira retornar o nome do arquivo xml que foi criado e disponibiliza-lo para download utilizando o comando Response.TransmitFile() e Response.End() para abrir o arquivo correto.
No evento do botão que captura o arquivo do componente FileUpload vou chamar o metodo DeserilizeObject que ira receber o componente FileUpload, abrir o arquivo xml, deserilizar e salvar os dados no objeto do tipo USUARIO.
Vou criar também um método para limpar os dados do formulário, por estética apenas, deixando o code-behind assim.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Net;

namespace XML_Serialize
{
    public partial class _Default : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            btnSalvar.Click += new EventHandler(btnSalvar_Click);
            btnCarregaArquivo.Click += new EventHandler(btnCarregaArquivo_Click);
        }
        void btnCarregaArquivo_Click(object sender, EventArgs e)
        {
            try
            {
                USUARIO user = new Ferramenta_serialize().DeserializeObject(fu_XML);
                txbNome.Text = user.NOME;
                rblSexo.SelectedValue = user.SEXO.ToString();
                txbDataNascimento.Text = user.DATA_NASCIMENTO.ToShortDateString();
                txbTelefone.Text = user.TELEFONE;

                fu_XML.Dispose();
            }
            catch(Exception ex) {
                lblMensage.Text = ex.Message;
            }
        }
        void btnSalvar_Click(object sender, EventArgs e)
        {
            try
            {
                USUARIO user = new USUARIO()
                {
                    NOME = txbNome.Text.Trim(),
                    SEXO = int.Parse(rblSexo.SelectedValue),
                    DATA_NASCIMENTO = DateTime.Parse(txbDataNascimento.Text.Trim()),
                    TELEFONE = txbTelefone.Text.Trim()
                };
                string rs = new Ferramenta_serialize().SerializeObject(user, Server.MapPath(string.Empty));
                Response.ContentType = "file/xml";
                Response.AppendHeader("Content-Disposition", "attachment; filename="+rs);
                Response.TransmitFile(rs);
                Response.End();
                limpaFormulario();

            }
            catch (Exception ex)
            {
                lblMensage.Text = ex.Message;
            }
        }
        private void limpaFormulario()
        {
            txbNome.Text = string.Empty;
            rblSexo.SelectedValue = null;
            txbDataNascimento.Text = string.Empty;
            txbTelefone.Text = string.Empty;
        }
    }
}

O retorno do nosso XML será algo do tipo;

Posts e consultas no twitter pelo windows phone 7 part 2 de 2

2010-12-20T04:53:00.000-08:00

No artigo anterior (Posts e consultas no twitter pelo windows phone 7 part 1 de 2) no vimos como construir uma aplicação no windows phone 7 que faça consultas no twitter utilizando o api do twitter; Neste artigo vamos tentar construir nesta mesma aplicação algo que o usuário possa fazer o login no twitter, visualize seus posts e adicione novos.
No passo anterior no menu da aplicação nos deixamos um item chamado "login" que servira pra redirecionar para uma tela que o usuário possa efetuar o login no twiter;
Para que essa parte da aplicação funcione precisamos registrar nossa aplicação no twitter; Acesse dev.twitter.com.

A aplicação deve ser to tipo Browser e a Callback URL informada, essa é uma das exigências do twitter, como nos vamos utilizar a URL do google( http://www.google.com ).
Apos o registro da aplicação o twitter retorna as url's necessárias para as transações.

Para conseguirmos buscar e enviar informações no twitter vamos utilizar a api de autorizaçao oAuth .

Agora vamos construir nossas classes com estas informações.

TwitterSettings.cs

using System;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Ink;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;

namespace WindowsPhoneApplication1
{
    public class TwitterSettings
    {
        public static string RequestTokenUri = "https://api.twitter.com/oauth/request_token";
        public static string AuthorizeUri = "https://api.twitter.com/oauth/authorize";
        public static string AccessTokenUri = "https://api.twitter.com/oauth/access_token";

        public static string CallbackUri = "http://www.google.com";

        public static string StatusUpdateUrl { get { return "http://api.twitter.com"; } }

        //#error Adicione as respectivas cheves do Twitter aqui
        public static string consumerKey = "consumerKey";
        public static string consumerKeySecret = "consumerKeySecret";

        public static string oAuthVersion = "1.0a";
    }
}

pedido Token e secreto pedido token são conjunto temporário de credenciais que lhe permitem adquirir tokens de acesso OAuth. O token de acesso e secreto token de acesso são necessários para acessar os tweets de um usuário.

Agora vamos montar a classe de tratamento que utiliza as dll's Hammock.WindowsPhone e ICSharpCode.SharpZipLib.WindowsPhone que disponibilizei na primeira parte deste tutorial.

oAuthHelper.cs

using System;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Ink;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using Hammock.Authentication.OAuth;
using Hammock.Web;

namespace WindowsPhoneApplication1
{
    public class oAuthHelper
    {
        internal static OAuthWebQuery GetRequestTokenQuery()
        {
            var oauth = new OAuthWorkflow
            {
                ConsumerKey = TwitterSettings.consumerKey,
                ConsumerSecret = TwitterSettings.consumerKeySecret,
                SignatureMethod = OAuthSignatureMethod.HmacSha1,
                ParameterHandling = OAuthParameterHandling.HttpAuthorizationHeader,
                RequestTokenUrl = TwitterSettings.RequestTokenUri,
                Version = TwitterSettings.oAuthVersion,
                CallbackUrl = TwitterSettings.CallbackUri
            };

            var info = oauth.BuildRequestTokenInfo(WebMethod.Get);
            var objOAuthWebQuery = new OAuthWebQuery(info);
            objOAuthWebQuery.HasElevatedPermissions = true;
            objOAuthWebQuery.SilverlightUserAgentHeader = "Hammock";
            objOAuthWebQuery.SilverlightMethodHeader = "GET";
            return objOAuthWebQuery;
        }

        internal static OAuthWebQuery GetAccessTokenQuery(string requestToken, string RequestTokenSecret, string oAuthVerificationPin)
        {
            var oauth = new OAuthWorkflow
            {
                AccessTokenUrl = TwitterSettings.AccessTokenUri,
                ConsumerKey = TwitterSettings.consumerKey,
                ConsumerSecret = TwitterSettings.consumerKeySecret,
                ParameterHandling = OAuthParameterHandling.HttpAuthorizationHeader,
                SignatureMethod = OAuthSignatureMethod.HmacSha1,
                Token = requestToken,
                Verifier = oAuthVerificationPin,
                Version = TwitterSettings.oAuthVersion
            };

            var info = oauth.BuildAccessTokenInfo(WebMethod.Post);
            var objOAuthWebQuery = new OAuthWebQuery(info);
            objOAuthWebQuery.HasElevatedPermissions = true;
            objOAuthWebQuery.SilverlightUserAgentHeader = "Hammock";
            objOAuthWebQuery.SilverlightMethodHeader = "GET";
            return objOAuthWebQuery;
        }

    }
}

Ok, agora que temos nessas classes para trabalho vamos montar uma tela (InTwitter.axml);
A idéia é utilizar o componente browser do wp7 para acessar a pagina de login da nossa aplicação que o twitter nos retorna, assim que o usuário informar login, senha de clicar no botão "Allow", assim que autenticação for feita nos vamos ocultar o browser e exibir em um ListBox os post do usuário e também disponibilizar a visualização de um TextBox e um botão para novos posts que serão feitos, deixando a tela mais ou menos assim:

Vamos criar as seguintes variáveis publicas no nosso InTwitter.axml.cs

string OAuthTokenKey = string.Empty;
string tokenSecret = string.Empty;

string accessToken = string.Empty;
string accessTokenSecret = string.Empty;

string userID = string.Empty;
string userScreenName = string.Empty;

Abaixo do metodo InitializeComponent(); que fica no construtor da classe vamos resgatar as nossas chaves que o twitter nos forneceu e faremos um tratamento das mesmas se estiver tudo ok vamos registrar um evento no browser e no botão de posts:

accessToken = HelperMethods.GetKeyValue<string>("AccessToken");
            accessTokenSecret = HelperMethods.GetKeyValue<string>("AccessTokenSecret");
            userScreenName = HelperMethods.GetKeyValue<string>("ScreenName");


            if (string.IsNullOrEmpty(accessToken) || string.IsNullOrEmpty(accessTokenSecret))
            {
                var requestTokenQuery = oAuthHelper.GetRequestTokenQuery();
                requestTokenQuery.RequestAsync(TwitterSettings.RequestTokenUri, null);
                requestTokenQuery.QueryResponse += new EventHandler<WebQueryResponseEventArgs>(requestTokenQuery_QueryResponse);
            }
            else
            {
                GetUserTimeLine(userScreenName);
                Dispatcher.BeginInvoke(() =>
                {

                    var tweetButton = (Microsoft.Phone.Shell.ApplicationBarIconButton)this.ApplicationBar.Buttons[0];
                    tweetButton.IsEnabled = true;
                    PageTitle.Visibility = Visibility.Visible;
                    listboxMyTimeline.Visibility = Visibility.Visible;
                    txtBoxNewTweet.Visibility = Visibility.Visible;
                    btnPostTweet.Visibility = Visibility.Visible;
                });
                
            }

            webBrowser1.Navigated += new EventHandler<System.Windows.Navigation.NavigationEventArgs>(webBrowser1_Navigated);
            webBrowser1.Navigating += new EventHandler<NavigatingEventArgs>(webBrowser1_Navigating);
            btnPostTweet.Click += new RoutedEventHandler(btnPostTweet_Click);

Nos evento requestTokenQuery_QueryResponse vamos tentar capturar autorização utilizando nossa chave OAuthTokenKey e acionar nosso browser passando a url de autorização.

void requestTokenQuery_QueryResponse(object sender, WebQueryResponseEventArgs e)
        {
            try
            {
                var parameters = HelperMethods.GetQueryParameters(e.Response);
                OAuthTokenKey = parameters["oauth_token"];
                tokenSecret = parameters["oauth_token_secret"];
                var authorizeUrl = TwitterSettings.AuthorizeUri + "?oauth_token=" + OAuthTokenKey;

                Dispatcher.BeginInvoke(() =>
                {
                    this.webBrowser1.Navigate(new Uri(authorizeUrl));
                });
            }
            catch (Exception ex)
            {
                Dispatcher.BeginInvoke(() =>
                {
                    MessageBox.Show(ex.Message);
                });
            }

        }

No evento webBrowser1_Navigating recebemos o resultado da autorização, armazenamos nossa web query na variavel AccessTokenQuery, registramos um enveto AccessTokenQuery_QueryResponse e utilizamos uma requisisão assincrona, disando o evento assim:

void webBrowser1_Navigating(object sender, NavigatingEventArgs e)
        {
            if (e.Uri.ToString().StartsWith(TwitterSettings.CallbackUri))
            {
                var AuthorizeResult = HelperMethods.GetQueryParameters(e.Uri.ToString());
                var VerifyPin = AuthorizeResult["oauth_verifier"];
                this.webBrowser1.Visibility = Visibility.Collapsed;

                var AccessTokenQuery = oAuthHelper.GetAccessTokenQuery(
                                                                         OAuthTokenKey,
                                                                         tokenSecret,
                                                                         VerifyPin
                                                                        );

                AccessTokenQuery.QueryResponse += new EventHandler<WebQueryResponseEventArgs>(AccessTokenQuery_QueryResponse);
                AccessTokenQuery.RequestAsync(TwitterSettings.AccessTokenUri, null);
            }
        }

No evento webBrowser1_Navigated alteramos a visualização do browser e removemos o evento para o usuário ver seus posts

void webBrowser1_Navigated(object sender, System.Windows.Navigation.NavigationEventArgs e)
        {
            this.webBrowser1.Visibility = Visibility.Visible;
            this.webBrowser1.Navigated -= webBrowser1_Navigated;
        }

No evento AccessTokenQuery_QueryResponse tentamos armazenar os parâmetros na variável parameters, capturar os valores traves destes parâmetros e habilitar o menu para o usuário fazer o logoff do twitter.

void AccessTokenQuery_QueryResponse(object sender, WebQueryResponseEventArgs e)
        {
            try
            {
                var parameters = HelperMethods.GetQueryParameters(e.Response);
                accessToken = parameters["oauth_token"];
                accessTokenSecret = parameters["oauth_token_secret"];
                userID = parameters["user_id"];
                userScreenName = parameters["screen_name"];


                HelperMethods.SetKeyValue<string>("AccessToken", accessToken);
                HelperMethods.SetKeyValue<string>("AccessTokenSecret", accessTokenSecret);
                HelperMethods.SetKeyValue<string>("ScreenName", userScreenName);

                Dispatcher.BeginInvoke(() =>
                {
                    var AtualizarMenuItem = (Microsoft.Phone.Shell.ApplicationBarMenuItem)this.ApplicationBar.MenuItems[1];
                    AtualizarMenuItem.IsEnabled = true;
                    
                });
                GetUserTimeLine(userScreenName);
            }
            catch (Exception ex)
            {
                Dispatcher.BeginInvoke(() =>
                {
                    MessageBox.Show(ex.Message);
                });
            }
        }

No evento btnPostTweet_Click precisamos pegar todas as credenciais que foram preenchidas durante o processo dos outros eventos acima e enviar para o twitter e já receber os posts atualizados do usuário.

void btnPostTweet_Click(object sender, RoutedEventArgs e)
        {
            if (txtBoxNewTweet.Text.Trim().Length == 0) { return; }

            var credentials = new OAuthCredentials
            {
                Type = OAuthType.ProtectedResource,
                SignatureMethod = OAuthSignatureMethod.HmacSha1,
                ParameterHandling = OAuthParameterHandling.HttpAuthorizationHeader,
                ConsumerKey = TwitterSettings.consumerKey,
                ConsumerSecret = TwitterSettings.consumerKeySecret,
                Token = this.accessToken,
                TokenSecret = this.accessTokenSecret,
                Version = "1.0"
            };

            var restClient = new RestClient
            {
                Authority = TwitterSettings.StatusUpdateUrl,
                HasElevatedPermissions = true,
                Credentials = credentials,
                Method = WebMethod.Post
            };

            restClient.AddHeader("Content-Type", "application/x-www-form-urlencoded");

            var restRequest = new RestRequest
            {
                Path = "1/statuses/update.xml?status=" + txtBoxNewTweet.Text
            };

            var ByteData = Encoding.UTF8.GetBytes(txtBoxNewTweet.Text);
            restRequest.AddPostContent(ByteData);
            restClient.BeginRequest(restRequest, new RestCallback(PostTweetRequestCallback));
        }

No evento PostTweetRequestCallback atualizamos o post do usuário utilizando o método GetUserTimeLine(usuário_logado).

private void PostTweetRequestCallback(RestRequest request, Hammock.RestResponse response, object obj)
        {
            GetUserTimeLine(userScreenName);
        }

Podemos também criar um botão no menu do WP7 que atualize os post enviados pelo usuário e neste botão no invocamos o evento TweetButton_Click.

private void TweetButton_Click(object sender, EventArgs e)
        {
            GetUserTimeLine(userScreenName);
        }

No metodo GetUserTimeLine(usuario_logado) nos temos que registrar o evento wcTwitterTimeline_DownloadStringCompleted.

private void GetUserTimeLine(string userName)
        {
            
            WebClient wcTwitterTimeline = new WebClient();
            wcTwitterTimeline.DownloadStringCompleted += new DownloadStringCompletedEventHandler(wcTwitterTimeline_DownloadStringCompleted);
            wcTwitterTimeline.DownloadStringAsync(new System.Uri("http://api.twitter.com/1/statuses/user_timeline.xml?screen_name=" + userName));
        }

No evento wcTwitterTimeline_DownloadStringCompleted nos atualizamos nosso listbox de acordo com com as informações retornadas da API do twiter, que retorna um XML com os posts do usuário que esta logado na nossa aplicação .

void wcTwitterTimeline_DownloadStringCompleted(object sender, DownloadStringCompletedEventArgs e)
        {
            if (e.Error != null)
            { return; }
            XElement Tweets = XElement.Parse(e.Result);
            listboxMyTimeline.ItemsSource = from tweet in Tweets.Descendants("status")
                                            select new TwitterItem
                                            {
                                                UserName = tweet.Element("user").Element("screen_name").Value,
                                                Tweet = tweet.Element("text").Value,
                                                ImageSource = tweet.Element("user").Element("profile_image_url").Value
                                            };
            Dispatcher.BeginInvoke(() =>
            {
                listboxMyTimeline.Visibility = Visibility.Visible;
                txtBoxNewTweet.Visibility = Visibility.Visible;
                btnPostTweet.Visibility = Visibility.Visible;
            });
        }

No menu da aplicação podemos invocar o vento MenuItemSignOut_Click que limpara os dados do usuário logado e efetuar o redirecionamento para a tela principal da aplicação.

private void MenuItemSignOut_Click(object sender, EventArgs e)
        {
            HelperMethods.SetKeyValue<string>("AccessToken", string.Empty);
            HelperMethods.SetKeyValue<string>("AccessTokenSecret", string.Empty);
           
            NavigationService.Navigate(new Uri("/MainPage.xaml", UriKind.Relative));
        }

Se precisar entender melhor esta aplicação o download da mesma pode ser feito aqui lembrando que estou deixando esta aplicação preparada para para integração de outras redes sociais.

Posts e consultas no twitter pelo windows phone 7 part 1 de 2

2010-12-13T08:19:00.000-08:00

Vamos criar uma aplicação no wp7 (windows phone 7) que busque post de outros usuários pelo nome e envie post para o twitter. Para se familiarizar melhor com a tecnologia entre na pagina da msnd desenvolvendo para celular e veja os artigos e tutoriais.

Adquirindo as Ferramentas
Primeiro vamos baixar o template do wp7 para o Visual Studio aqui, e execute a instalação do vm_web.exe.
Agora as dlls Hammock.WindowsPhone e ICSharpCode.SharpZipLib.WindowsPhone necessárias para trabalhar com a api do twitter.

Criando a aplicação
Agora nos temos os Templates para criar as aplicações no V.S. e o emulador do Windows Phone instalados.
Crie um novo projeto no V.S. e selecione o template Windows Phone Application.

Na primeira tela vamos criar algo parecido com um menu, para adicionarmos outras funcionalidades no futuro, deixando a tela assim.

Nossa MainPage.axml fica assim:

agora vamos criar uma tela de consulta onde podemos informar o nome do usuário no twitter e visualizar todos os seus respectivos posts.

De acordo com a documentação da api do twitter para buscar os posts nos utilizamos na URL a variável screen_name. Na nossa aplicação precisamos utilizar a classe WebClient e capturar o retorno do twitter

A baixo do campo de texto e do botão vamos adicionar um ListBox com as seguintes características:

Agora vamos montar nossa classe modelo para armazenar os valores retornado do twitter:

No evento click do botão buscar precisamos criar um objeto do tipo webclient e registrarmos o evento DownloadStringCompleted neste objeto, logo depois passamos a url da APIdo twiter juntamente com o valor informado no campo de texto para o método DownloadStringAsync, no evento DownloadStringCompleted vamos ferificar o retorno da url e salvar os dados em um objeto do tipo XElement através deste vamos popular nosso ListBox desta forma.

a primeira parte de nossa aplicação esta completa:

ao debugar nos teremos um resultado semelhante a este:

Localização do usuario por IP com API do google maps

2010-11-16T08:06:00.000-08:00

Bem hoje vou mostrar como localizar o estado e a cidade do usuário pelo IP utilizando a api do google maps.
Vamos supor que você tenha que redirecionar o usuário uma determinada URL caso o mesmo esteja acessando de determinado estado ou apenas exibir onde ele está.
Graças a MaxMind temos a geolocalização por número de IP: a partir de um número IP, teremos dados sobre a localização, como latitude, longitude e outros.

Mãos a obra:
Faça o download da base de dados da MaxMind.
MaxMind DataBase(pelo site) ou GeoLiteCity.dat
Este arquivo é atualizado quase que mensalmente, assim você pode entrar la no site e atualizar sua base.
Agora faça o download do GMaps.dll. Esta DLL possui um conjunto de componentes que a google disponibilizou para utilizarmos os mapas de diversas formas.

Crie um novo webSite e copie o arquivo GeoLiteCity.dat para dentro da pasta App_data de preferência, depois coloque o arquivo GMaps.dll dentro da pasta bin, fazendo a referência.
crie uma nova aba com o nome que preferir no Toolbox do visual Studio para adicionar os componentes do Gmaps, clique com o botão direito, "Choose items...", na aba ".NET Framwork Componentes" clique no botão "Browser" e selecione o arquivo GMaps.dll que você colocou na pasta bin do seu projeto. Os componentes serão carregados.
Clique no componente GMap e arraste para para onde deseja que apareça o mapa.
Use a referência "using Subgurim.Controles;" e escreva o código a baixo. Utilize este método dentro do PageLoad.

No webConfig você tem que adicionar a chave do subgurim para funcionar. Entre na Família da Google Maps API, digite o domínio que você ira utilizar e clique no botão "Gerar chave da API". Copie a chave e cole no web config.

Se você estiver testando local não vai funcionar por que o "Request.UserHostAddress" vai retornar 127.0.0.1 para saber seu ip externo você pode entrar no MEU IP e substituir a variavel User_ip pelo seu IP externo.

C# 3.5 boas praticas

2010-11-08T04:00:00.000-08:00

As propriedades automáticas permitem a criação de propriedades nas classes sem a necessidade de criarmos métodos de GET e SET, também não precisamos criar um CAMPO para armazenar o valor, reduzindo a quantidade de código necessário para a criação de uma propriedade.

Com os métodos de extensão nós podemos adicionar métodos a tipos já existentes, sem precisar modificar, criar um tipo derivado ou tipo original

Com os Inicializadores de Objetos nosso trabalho fica mais fácil quando precisamos criar uma classe e já definir os valores das suas propriedades. Reduzindo a quantidade de código necessário para as definições dos valores.

Agora no C# 3.0 temos a palavra-chave var, podemos criar uma variável onde o tipo é determinado implicitamente pela inicialização da mesma. o tipo é determinado em tempo de compilação.

Uma expressão Lambda é uma função anônima que pode conter expressões e declarações, e pode ser usada para criar delegates.

As expressões Lambda usam o operador =>. O lado esquerdo do operador Lambda especifica os parâmetros de entrada e o lado direito especifica a expressão.

Verificar sequencia de caracteres iguais em uma string c#

2010-10-21T12:18:00.000-07:00

Neste post vamos ver como explorar uma string e verificar se existe uma seqüencia de caracteres iguais dentro da string. Utilizaremos a tabela ASCII para verificar letras e números, se você precisar verificar mais caracteres basta consultar a tabela e colocar o número referente na condição.

Neste exemplo vou verificar se existe na string uma seqüencia quatro(4) números iguais e o mesmo para uma seqüencia de três(3) letras, pois acho que em números de documentos ou nomes isto não pode acontecer.

Tabela de decimal ASCII

public static bool ValidaTexto(this string txt) {

bool flag = true;
if (txt.Length < 3)
{
flag = false;
}
else
{
int contLetras = 0;
int contNumeros = 0;

int tmp = (int)txt.ToCharArray()[0];
foreach (char c in txt.ToCharArray())
{
if (((int)c < 127 && (int)c >= 65))
{
if (tmp == (int)c)
{
contLetras++;
}
if (contLetras >= 3) { break; }
tmp = (int)c;
}
}
//inicia novamente o armazenador
tmp = (int)txt.ToCharArray()[0];
foreach (char c in txt.ToCharArray())
{
if (((int)c < 57 && (int)c >= 48))
{
if (tmp == (int)c)
{
contNumeros++;
}
if (contNumeros >= 4) { break; }
tmp = (int)c;
}
}
if (contLetras >= 3 || contNumeros >= 4)
{
flag = false;
}
}

return flag;
}

Baixar função

Utilizando função:

using "namespace onde esta o seu metodo(funcão)"

if(txbCampo.Texte.ValidaTexto()){

...

}

PROJETO TI

CRIANDO APLICATIVOS DO ZERO E FÁCIL!

O QUE VOCÊ VAI APRENDER?

SÃO MAIS DE 10 HORAS DE CONTEÚDO PURO E MATERIAIS EXTRAS:

CRIAR APLICATIVOS Mesmo sendo um total iniciante vamos explicar para você como criar aplicativos profissionais. Utilizaremos a linguagem HTML, CSS, Javascript em união com Apache Cordova.

MODELO DE NEGÓCIO Vamos ensinar como ganhar dinheiro* fazendo aplicativos. Apresentamos os 4 pilares básicos para a monetização de um aplicativos e como fazer para ser bem-sucedido.

ATENDIMENTO AO CLIENTE -Vamos dar atenção também a parte humana do processo. Como técnicas de atendimento e precificação, para você convencer seus futuros clientes a fechar negócio com você.

Veja os módulos do curso aqui

POR QUE FAZER ESTE CURSO?

Inscriões aqui

Criando pequenos componentes dinâmicos com Javascript puro

Porque nem sempre precisaremos de um framework

Substituir o React? Tá maluco?!

ES6 Rocks!

O que vamos precisar?

O que criaremos?

Principais tendências JavaScript para procurar em 2019

1) GraphQL

2) Reason

3) Vue.js

Recursos para procurar em 2019:

4) Next.js

5) ReactJS

6) De AngularJS a Angular 7

Conclusão:

Novidades do C# 8

Nullable Reference Types

Async Streams (também conhecidos como foreach async)

Implementação de Interface Padrão

Extension Everything

Criando um filtro de busca customizável com JavaScript funcional

Iniciando o projeto

Selecionando os elementos

Criando a lista modificável

Entrem pureza e iteradores

Fazendo a lista reagir à entrada de dados

Criando o filtro de busca

O resultado

Vue.js, React.js ou angular. O que escolher?

Prós e contras do angular

Benefícios do Angular

Desvantagens do Angular

Prós e contras do ReactJS

Benefícios do ReactJS

Desvantagens do ReactJS

Prós e contras do Vue.js

Benefícios do Vue.js:

Desvantagens do Vue.js:

Conclusão

Novidades Angular 7

A nova versão do Angular trouxe melhorias de desempenho e mudanças interessantes no Angular CLI, a sua principal interface de linha de comando. Neste artigo falaremos sobre as principais novidades do Angular 7.

Melhor performance

Novidades para templates

Drag and Drop

Virtual Scrolling

Angular CLIA

1. Instalando o Angular CLI

2. Criando um projeto Angular utilizando o CLI

3. Criando o módulo de rotas automaticamente

4. Escolhendo o pré-processador CSS

Dependências

Três novidades no ES2018 que você precisa conhecer

ASYNCHRONOUS ITERATION

OBJECT REST/SPREAD PROPERTIES

PROMISE.PROTOTYPE.FINALLY()

CONCLUSÃO

Tendências da tecnologia em 2018

Áreas de destaque em Tecnologia

IoT big data

Business intelligence

Data mining

Inteligência artificial

Tendências em desenvolvimento de software

JavaScript e TypeScript

Java

Swift

Python

Angular

React.Js

Spring

CRIAR APLICATIVOS
Mesmo sendo um total iniciante vamos explicar para você como criar aplicativos profissionais. Utilizaremos a linguagem HTML, CSS, Javascript em união com Apache Cordova.

MODELO DE NEGÓCIO
Vamos ensinar como ganhar dinheiro* fazendo aplicativos. Apresentamos os 4 pilares básicos para a monetização de um aplicativos e como fazer para ser bem-sucedido.

ATENDIMENTO AO CLIENTE -
Vamos dar atenção também a parte humana do processo. Como técnicas de atendimento e precificação, para você convencer seus futuros clientes a fechar negócio com você.