Manual completo do Photogram2
Depois que você adquirir sua cópia do Photogram através do site do Ionic Market, vamos as etapas para você iniciar seu desenvolvimento com o Photogram2.
Como funciona o Parse Server?
Parse Server é uma solução da equipe Parse.com, que depois de anunciar o encerramento do site no começo desse ano, 2016, disponibilizou boa parte do seu código fonte no Github para que as pessoas pudessem dar continuidade nos seus projetos usando a tecnologia do Parse.
O Parse Server é desenvolvido em NodeJS e usa o MongoDB como banco de dados, você também pode usar o Redis como Cache caso seja necessário.
Nesse link você encontra o repositório oficial do projeto e documentação:
Configuração inicial do Parse Server
O Parse Server é bem simples de configurar, no link abaixo tem um exemplo bem prático que a equipe do Parse deixou de exemplo para iniciar uma aplicação.
Basicamente toda a configuração está no arquivo index.js no qual você informa o caminho do MongoDB e altera algumas informações para que a sua aplicação se conecte ao Parse Server.
Por que o Photogram usa o Parse Server?
Escolhi o Parse Server por tem uma excelente documentação do seu SDK para Javascript que você pode conferir no link abaixo:
Além disso, ele possui um excelente sistema de relacionamento de dados que tem por base o MongoDB e possibilita fazer buscar por geolocalização, dentro de arrays e muitas outras funcionalidades incríveis que facilitam na hora de desenvolver e dar manutenção em uma aplicação.
Parse Cloud
Para aplicações mais complexas como é o caso do Photogram, no qual quando entramos temos que fazer a busca do Feed que é relacionado a se o usuário conectado já curtiu cada foto e trazer os últimos 3 comentários, esse tipo de query para ter uma melhor perfomance, precisa ser executada do lado do servidor, e nesse caso o Parse possui o Parse Cloud, que é uma documentação de como construir essas queries mais complexas, usando Javascript ou ES6.
Photogram Parse Server
O Parse Server possuem alguns recursos interessantes que são usados no Photogram, como criar um endpoint específico ou fazer alguns processos serem executados antes ou depois do cadastro no sistema.
Um ótimo exemplo é quando você posta uma foto no Photogram e durante o processo desse cadastro, o próprio Parse Server gera um thumbnail para ser usada em algumas areas da aplicação, reduzindo o consumo de dados.
Outro exemplo, é quando você curte uma foto, e o server processar um afterSave do seu like e envia uma notificação para a pessoa que postou a foto que você acabou de curtir a foto dela, que também suporta o envio de Push Notification usando o Parse Cloud.
Abaixo alguns exemplos de queries e endpoints da Class Gallery.
Iniciando com Photogram Parse Server Localmente
Agora que você já entendeu um pouco da teoria, e já tem acesso ao Photogram no Github, vamos criar um Parse Server para a sua aplicação usando o repositório do Photogram Parse Server.
Requisitos
Antes de começar você precisa ter instalado o seguintes itens:
- NodeJS 6.9.2 http://nodejs.org/
- Git (for Windows)
- Visual Studio Code ou WebStorm
- PM2 (npm install -g pm2)
- MongoDB (npm install -g mongodb-runner)
Preparando o MongoDB
Antes de começar, temos que iniciar o MongoDB para que o Parse Server possa se conectar com ele, para isso vá até o seu Git Bash no Windows, ou terminal no Mac ou Linux e digite:
$ mongodb-runner startAutomaticamente o MongoDB será instalado na sua maquina e iniciado, assim que ele estiver pronto, podemos seguir com a próxima eta
Clonando o Códigos do Server
Primeiro, crie uma pasta da sua aplicação que vamos chamar de photogram
$ mkdir aula-photogram
$ cd photogramAgora vamos fazer o clone do Photogram Parse Server
$ git clone https://github.com/photogram/server photogram-server
$ cd photogram-serverConfigurando o PM2
O PM2 é um gerenciador de processos do NodeJS que ajuda a monitorar a execução do Parse Server, além de poder fazer umas configurações personalizadas através do seu arquivo de configuração em formato JSON.
Dentro da pasta do photogram-server que clonamos na etapa anterior, existe um arquivo chamado ecosystem.json, abra ele no Visual Studio Code ou no WebStorm para poder ver as configurações básicas e avançadas que podemos fazer antes de iniciar o Server.
Existem algumas configurações já pré definidas para iniciar o Photogram Parse Server, mas alguns itens você precisa editar na hora de configurar para o seu aplicativo.
A partir da linha 35, você pode ver que foi incluído também o Parse Dashboard, no qual você pode definir o endereço, login e senha para acessar depois que o serviço for iniciado.
Iniciando o Server com o PM2
Tudo configurado, ou não, vamos iniciar usando o comando:
$ pm2 start ecosystem.jsonApós você digitar esse comando, vai receber no seu terminal uma imagem parecida como essa (dependendo do seu OS):
Significa que o arquivo ecosystem.json foi validado com sucesso e a aplicação parse-server foi iniciada com o status online
Para ter certeza que está tudo funcionando vamos digitar o seguinte comando
$ pm2 logs
Se você receber uma mensagem Parse LiveQuery Server starts running em seu terminal, significa que seu server já está funcionando!
Photogram CMS
Com o seu Photogram Server funcionando você pode ir até o seu browser favorito e digitar o seguinte endereço:
http://localhost:1337/#/auth/setup
Você será redirecionado para a tela abaixo para CMS que ainda está em desenvolvimento, mas que irá server de auxilio para criar o primeiro usuário admin
Parse Dashboard
O Parse Dashboard é um painel autônomo para gerenciar seus aplicativos Parse. Você pode usá-lo para gerenciar seus aplicativos do Parse Server e seus aplicativos que estão sendo executados no Parse.com.
Com o Parse Dashboard você pode gerenciar seus cadastrados no Parse Server, para quem conhece ele seria similar ao phpmyadmin.
O Parse Dashboard já vem incluído no Photogram Parse Server, sua configuração de endereço, usuário e senha estão no arquivo ecosystem.json
Para acessar basta entrar no seguinte endereço e digitar as credencias informadas no arquivo ecosystem.json:
http://localhost:1337/dashboard
Iniciando com o aplicativo Photogram2 com Ionic 2
Agora que você já tem um servidor local do Photogram2 usando o Parse Server, vamos agora fazer o clone do repositório do aplicativo do Photogram2 desenvolvido em Ionic 2.
Requisitos
Antes de começar, tente seguir todas as instruções até aqui e tenha certeza de ter o NodeJS com a versão mais atual e estável instalada.
Depois vamos instalar ou atualizar o Ionic Cli para a última versão com o seguinte comando:
$ npm install -g ionic@latestAlém disso vamos instalar o Cordova para garantir a emulação depois em dispositivos com Android ou iOS (somente me Macs)
$ npm install -g cordovaFazendo uma cópia do código fonte do aplicativo Photogram2
Dentro da pasta do seu projeto, use o comando abaixo para fazer o clone da última versão do código fonte do Photogram2
$ git clone https://github.com/photogram/photogram2 photogram-app
$ cd photogram-app
$ npm installPronto, no primeiro comando fizemos uma cópia para a pasta photogram-app com todos os códigos fontes, depois entramos na pasta e executamos o comando npm install, para instalar todas as dependências do NodeJS necessárias para executar desenvolver e fazer build da nossa aplicação.
Um pouco sobre o Ionic 2
O Ionic 2 é uma versão totalmente refeita com Angular 2, que foi criado com a necessidade de ganhar desempenho além de se tornar um Framework completo para aplicações rápidas e escaláveis.
Muita gente acaba ficando com medo do TypeScript, mas se você sabe o básico do Javascript, o que são váriaveis e como criar funções vai se apaixonar por programar em TypeScript com Ionic 2, tudo por que você vai digitar menos para fazer muita coisa, além de ter um código mais organizado e bem organizado.
Recomendo fazer uma introdução com a própria documentação do Ionic 2 nesse link:
Pastas e Arquivos
Aqui estão uma as informações principais sobre as pastas do Photogram2
bin/: Pastas com alguns comandos para fazer build da nossa aplicação
docs/: Algus docs em Markdown para servir de referência além dessa documentação
resources/: Pasta com Icone e Splash de exemplos, para serem depois gerados com o comando:
$ ionic resources
src/: Nessa pasta estão os códigos fontes do Ionic 2, é aqui aonde você vai trabalhar
src/i18n: Arquivos .json com as traduções do aplicativo
www/: Pasta de build do Ionic2, você não deve mexer nessa pasta pois ela é gerada automaticamente sempre que é feita uma nova alteração ou quando você inicia o build da aplicação
config.xml: Esse arquivo é responsável pelas configurações de build da sua aplicação usando o Cordova, tanto para Android, iOS e Windows Phone.
Configurações do Aplicativo
Agora que já estamos mais familializados com as pastas da aplicação vamos configurar nosso aplicativo para se conectar ao nosso servidor local e começarmos a brincar um pouco, para isso, abra o arquivo src/config.ts
Linha 2: Esse é o nome do seu aplicativo configurado no arquivo ecosystem.json que também servirá para indentificar na hora de conectar ao Parse Server
Linha 3: Descomente essa linha para que a aplicação se conecte ao seu Parse Server Local, e comente a linha 4
Linha 4: O Photogram2 já vem configurado para funcionar com o servidor padrão, na próxima etapa quando iremos aprender a colocar nosso servidor em produção, iremos mudar esse endereço para o nosso endereço do seu servidor Parse Server de Produção
Linha 7: Api do Google Maps para Javascript
Linha 10: Código em string do seu aplicativo do Facebook para fazer a autenticação
Linha 14: Os idiomas que estarão ativos e disponíveis no aplicativo
Rodando o Photogram2
Pronto, agora que você já descomentou a linha 3 e comentou a linha 4, agora já podemos voltar ao terminar e digitar o comando abaixo para iniciar o Ionic Server na nossa máquina e começamos a alterar o visual da nossa aplicação, para isso vá até o terminal e digite o comando:
$ ionic serve
Para entender o que acontece com esse comando, em resumo o Ionic 2 vai transformar todo o código em TypeScript para JavaScript e Sass para CSS, empacotar tudo usando o WebPack, colocar tudo isso na pasta www e fazer um live reload usando um novo sistema de build chamado ionic-app-script que são um conjuntos de códigos para fazer toda essa mágica com um único comando.
Depois de fazer todo esse processo, que pode demorar algusn segundos, ele abre automaticamente o seu browser com a aplicação rodando.
Recomendo usar o Browser e clicar com botão direito e depois em Inspecionar Elemento (Inspect)
Nesse momento você vai entrar em modo desenvolvedor no Chrome, no qual você pode ver o log do JavaScript e até mesmo o código fonte da aplicação em execução, podendo fazer alterações em tempo real.
Você também pode alterar o modo de visualização para fazer uma simulação em smartphones, podendo alterar tamanho e até versão do OS somente clicando no botão marcado abaixo:
Para saber como tirar todos os recursos do Chrome DevTools acesse o link:
Mudando a cor do Photogram2
Agora que a aplicação está rodando em tempo real e conseguimos ver em nosso Chrome, vamos abrir o arquivo src/theme/variables.scss e editar a linha 17 por outra cor em RGB.
Quando você salvar a mudança de cor irá ser feita em tempo real, sem precisar que você dê um refresh no seu browser:
Criando nosso repositório privado
Independente se você vai trabalhar equipe ou sozinho, é muito importante que você continue trabalhando com o Git, tendo um histórico dos seus códigos, um backup sempre que precisar e para que possa receber atualizações gratuitamente.
Infelizmente para isso o Github cobra para uso privado, mas existe o BitBucket que permite que criemos ilimitados projetos git de forma privada, com total segurança e facilidade.
Primeiro crie uma conta no Bitbucket.com
Faça seu Login e crie um novo projeto, vá na aba Teams e crie um novo team:
O Team é sua organização, nela você poderá conter vários projetos diferentes com várias pessoas em cada um deles.
Dica: Você também pode adicionar até 5 participantes do seu projeto gratuitamente.
Com o Team da sua organização criada, vamos criar um projeto para depois criarmos os nossos repositórios que irão fazer parte desse projeto:
Como você pode ver eu crie um projeto chamado Photogram com o Team do Photogram. Posso até personalizar com o icone e dizer se esse projeto é privado ou público, porém mesmo sendo um projeto público podemos editar a privacidade de cada repositório na próxima etapa.
Vamos finalmente criar nossos repositórios privados, para isso precisamos acessar a página do nosso projeto e depois clicar no link para criar um novo repositório git como mostra a imagem abaixo:
Nós iremos criar 2 repositórios, um para o código fonte do nosso aplicativo em Ionic 2, e outro para o Server, eu sugiro que você use os seguintes nomes:
- photogram-ionic2
- photogram-server
Você pode mudar o nome photogram, para o nome da sua aplicação, assim ficará mais fácil identificar os tipos de repositórios que você tem, principalmente quando estiver trabalhando em equipe.
Não esqueça também de conferir se está marcada que o repositório irá ser privado!
Enfim, agora que você está com o seu repositório privado criado no Bitbucket, a última etapa e mais importante é modificar seu endereços de git remoto.
A dica é usar o seu remoto origin, para ser o do bitbucket, pois esse é o principal e você não corre risco de acabar enviando seus códigos fontes privados para o Bitbucket do Photogram.
Pra isso vamos renomear o seu caminho remoto do git que você usou para fazer o clone do photogram para outro nome:
$ git remote rename origin githubPronto, agora sempre que você quiser receber as atualizações do Photogram, basta digitar o seguinte comando no seu terminal e depois fazer o merge das alterações:
$ git pull github masterE agora, vamos finalmente adicionar como endereço de git remoto e principal o seu repositório privado criado no bitbucket.
Para isso siga a etapa abaixo, aonde informa que você tem um repositório existente e deseja agora armazenar no bitbucket.
Repita o mesmo processo com seu Photogram Parse Server, e sempre que sair uma nova atualização digite o comando no seu terminal
$ git pull github masterOutros tutoriais que você irá precisar
Principais dúvidas sobre o Ionic
Emulando no Device
Mudando Icone e Splash
Publicando seu aplicativo na Google Play ou Itunes Store
Aguardem o nosso próximo tutorial de colocando o Photogram Parse Server em produção na Digital Ocean.
