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

Veja também

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?

5 Comentários
  1. Tony Diz

    Hi, This is awesome! I am so excited to see what else comes from the apps you make! I am very excited for the Snapchat one! I hope you will create it with the “Stories” feature! Will your courses be available for an english speaking user? Thanks!

    1. johnhenrique Diz

      @ TONY
      Hi man, in this moment I no think make this course in English for now because I yet developing the apps and course (PT-br)… but believe users speaking other languages can learn too independent of language, because, I will show in video all procedures…

      Falopa!

  2. bianca Diz

    oi quanto custa o curso… tem como encinar usando o intel XDK

  3. bianca Diz

    eu quero este curso como faço

    1. johnhenrique Diz

      @ BIANCA
      Assine a newsletter para receber as notificações sobre o curso…

Deixe uma resposta

Seu endereço de email não será publicado.