Nesse workshop sobre Socket.io você irá aprender a criar um sistema de Chat em tempo real, com salas, mensagens privadas e etc.
Hoje em dia o Socket.io é amplamente utilizado em sistemas web que fazem o uso de informações em tempo real onde o servidor irá enviar os dados sem que o cliente necessite requisita-las, tornando a experiência do usuario mais atrativa.
Com mais de 3,479,533 downloads, e aumentando, no último mês é um dos módulos completos mais utilizados atualmente.
Esse workshop será pago, porém apenas até alcançar a meta dele que é: R$2000!
Após alcançarmos essa meta, que deve dar no máximo 3 turmas de 9 alunos, irei liberar GRATUITAMENTE PARA TODOS, porém só os alunos doadores terão acesso à um grupo, do Telegram, especial para tirar suas dúvidas de forma mais direta e rápida.
As funcionalidades a serem desenvolvidas nesse módulo são:
- criação de grupos com várias pessoas
- criação de chat individual
- envio de mensagem para algumas pessoas escolhidas
- mostrar quando a pessoa estiver digitando
- mostrar ícone de envio de mensagem
- mostrar ícone de recebimento de mensagem
- mostrar ícone de leitura de mensagem
Teremos 2 tipos de turmas:
- dia de semana: 5 dias de 1 hora cada
- final de semana: 2 dias de 2.5 horas cada
Todas serão AO VIVO via Hangouts.
ps: caso eu ache uma ferramenta melhor e que comporte mais de 10 pessoas poderá ser trocada.
O início de cada turma se dará na semana após o fechamento dela que deve ser com 8, mínimo, ou 9 alunos, máximo. Por exemplo:
Estou iniciando a divulgação agora 26 de Setembro de 2016, caso feche até 30 de Stemebro de 2016 esse módulo iniciará em 3 de Outubro de 2016.
O custo por aluno será de: R$120 via Eventick/Pagseguro/Paypal ou com DESCONTO à vista ficando R$100.
ps: à vista apenas via depósito ou transferência bancária para minha conta na Caixa.
Os pré-requisitos para esse worksho são bem básicos, caso você já tenha visto os módulos de Node.js e Angular do Be MEAN você já está mais que apto para fazer esse workshop.
Caso ainda não tenha feito basta saber:
- ler
- escrever
- pensar
- perguntar
- Node.js básico
- AngularJs básico
Nosso cliente será baseado no Atomic Design e o mesmo frontend será feito em:
- Angular 1
- Angular 2
- React
- Vue
Primeiramente precisamos definir quais são nossos átomos!
- input para digitar mensagem
- input para digitar nome da sala
- input para digitar seu nome
- botão de enviar mensagem
- botão de criar sala
- título da sala atual
- texto com as mensagens
- texto com nome das salas
- texto com o nome dos usuários
Antes de tudo definimos os átomos básicos que precisamos para utilizar de base para os átomos anteriormente definidos, então eles serão:
- input/text: .atom-input-text
- button/submit: .atom-button-submit
- h1: .atom-title-primary
- span: .atom-text-line
- p: .atom-text-paragraph
Exemplo em Stylus:
.atom-input-text
@extend $atom-text-base
Cada átomo nosso será independente por isso precisa de uma forma de se comunicar com os outros componentes e para isso utilizaremos: Eventos!
Para os átomos de input nós sempre teremos atrelado a um evento a sua função de validação, caso exista, por exemplo no átomo: atom-message-text
.
const name = "atom-message-text"
const event = "blur"
const validate = (text) => {
const result = (text !== null && text !== undefined && text !== '')
if (result)
Event.emit('validate:success:atom-message-text')
else
Event.emit('validate:error:atom-message-text')
}
const config = {
name,
validator: {
event,
validate
}
}
ps: exemplo conceitual com Eventos (não funcional)
Nesse caso ele deverá executar a função validate
no evento blur
desse input e após sua validação ele deverá emitir um evento ou de sucesso (validate:success:atom-message-text
) ou de erro (validate:error:atom-message-text
)
Nesse átomo usaremos o átomo base: .atom-input-text
. Porém seu identificador será: .atom-message-text
.atom-message-text
@extend .atom-input-text
padding: 0.5rem
Isso na parte visual, mas para criar esse átomo, utilizando o Angular1, faremos com diretivas ou melhor dizendo com components. Para isso vamos definir algumas propriedades que todas os componentes terão:
-
restrict: E
-
scope: true ou isolate?
-
transclude: true?
-
https://toddmotto.com/exploring-the-angular-1-5-component-method/