56


28 de janeiro de 2016

WhatsApp Clone com PhoneGap

Para começar o desafio de fazer 12 apps em 12 semanas, vou desenvolver uma versão do WhatsApp usando PhoneGap. Obviamente o objetivo não é criar um concorrente para o WhatsApp mas mostrar que é possível desenvolver um aplicativo tão bom quanto ele, quem sabe até você mesmo desenvolva um nos próximos meses?

Descrição do projeto

A primeira coisa que preciso é descrever as telas e suas funções, depois de tudo pronto, iniciar o desenvolvimento.

  1. Principal
    1. Chamadas
      Lista as chamadas recentes
    2. Conversas
      1. Privado
        Janela de conversa em privado
      2. Grupo
        Janela de conversa em grupo
    3. Contatos
      Lista de contatos existentes na agenda
  2. Configurações
    Configurações e possíveis personalizações

O objetivo não é recriar o WhatsApp com todas as funções e sim criar uma versão com as funções básicas como listagem de conversas, contatos e chamadas, também está incluso a conversa em grupo e privado. Futuramente disponibilizarei uma versão mais abrangente com mais funções a um preço acessível.

Basicamente usei jQuery, HTML5, CSS3, PHP e alguns frameworks para agilizar o processo todo.

Onde posso baixar pra testar?

Infelizmente não dá pra publicar no Google Play e App Store porque trata-se de um clone de um programa protegido por direitos autorais, mas posso disponibilizar uma versão para download aqui no site (alguma sugestão melhor?).

É grátis, posso usar?

Sim, é grátis, mas não é um aplicativo para usar no dia a dia, a comunicação não será tão rápida quanto nos aplicativos de comunicação que você já conhece, até porque, estes aqui usam servidores comuns e o desempenho não é o foco neste momento, entretanto, o funcionamento seria muito bom se disponibilizado em servidores de ponta (como é o caso dos aplicativos que você já conhece).

Telas desenvolvidas

Desenvolvi as telas de forma bem parecida com o WhatsApp original, mas com cores e ícones diferentes, não que tenha ficado mais bonito, este não é o objetivo. Abaixo você pode conferir 3 telas do aplicativo rodando no navegador Google Chrome.

Para desenvolver as telas demorei cerca de 12 horas.

Status de desenvolvimento

Como forma de orientar em relação ao desenvolvimento deste aplicativo, elaborei uma pequena lista e irei marcando os itens que já estão prontos.

  1. Telas (concluído)
  2. Navegação (concluído)
  3. Processamento do lado do cliente (desenvolvendo)
  4. Processamento do lado do servidor
  5. Pacote de instalação

Vídeo do desenvolvimento

Como forma de mostrar o processo de desenvolvimento gravei um vídeo mostrando todo o processo, claro, seria chato pra caramba acompanhar um vídeo assim, então, coloquei ele super acelerado pra você acompanhar o timelapse. (vídeo ainda em processamento)

E o código fonte?

Então, o código fonte não será disponibilizado gratuitamente, mas você pode adquirir um curso que estou elaborando e nele ensino cada passo do que fiz para concluir este projeto, junto, vai o código fonte 😉

Hum, grande coisa…

E ai o que você esta achando deste projeto?

CONTATO

youtube.com/johnhenrique

facebook.com/johnvibemidia

EMAIL

para@johnhenrique.com.br

TELEFONE

+55 64 98443-0000

© John-Henrique / Alguns direitos reservados / Feito em Quirinópolis – GO, Brasil