Instalar o aplicativo DreamHouse e criar um botão Heroku

Objetivos de aprendizagem

Neste projeto, você vai:

  • Criar um novo aplicativo do Heroku usando o aplicativo DreamHouse em um repositório do GitHub.
  • Configurar o Heroku Connect para mapear objetos de uma organização Salesforce para um aplicativo do Heroku.
  • Criar um botão Heroku para implantar um aplicativo DreamHouse.
  • Criar um pipeline do Heroku usando o aplicativo DreamHouse para suportar integração contínua.
  • Usar o Heroku Flow para criar um novo recurso, testá-lo usando aplicativos de revisão e enviá-lo por push para um pipeline.

Então vamos começar!

Introdução

A DreamHouse Realty está interessada em criar uma nova IU para seus usuários de desktop e dispositivos móveis. Ela quer usar seu novo aplicativo da web juntamente com seus dados de imóveis no Salesforce. Porém, a empresa está preocupada que o processo, desde o desenvolvimento até à conclusão, seja demorado e caro para seus clientes. Vamos usar o Heroku para ver como podemos ajudar.

Iniciar o seu Trailhead Playground e instalar um pacote

Vamos começar abrindo seu Trailhead Playground e instalando um pacote. Role até o fim desta página e clique em Iniciar. Se você vir uma guia na sua organização com o rótulo Instalar um pacote, ótimo! Siga as etapas abaixo. 

Do contrário, clique em Iniciador de aplicativos para abrir o Iniciador de aplicativos, clique em Playground Starter e siga as etapas. Se não vir o aplicativo Playground Starter, copie este link de instalação do pacote e consulte Instalar um pacote ou aplicativo para concluir um desafio do Trailhead na Ajuda do Trailhead.

  1. Clique na guia Install a Package (Instalar um pacote).
  2. Cole 04tB00000009UeX no campo.
  3. Clique em Install (Instalar).
  4. Selecione Install for All Users (Instalar para todos os usuários) e clique em Install (Instalar).
  5. No pop-up que pede a aprovação do acesso de terceiros, selecione Yes, grant access to these third-party websites (Sim, conceder acesso a esses sites de terceiros) e clique em Continue (Continuar).

Quando a instalação do pacote for concluída, você verá uma página de confirmação e receberá um email no endereço associado ao Playground.

  1. Quando a instalação for concluída, clique em Done (Concluído).
  2. No Iniciador de aplicativos (Iniciador de aplicativos), encontre e abra o aplicativo DreamHouse.
  3. Clique em Data Import (Importação de dados) e, em seguida, em Initialize Sample Data (Inicializar dados de exemplo). Dependendo do tamanho da sua tela, a guia Data Import (Importar dados) poderá estar em More (Mais) no menu de guias.
  4. Clique na guia Properties (Propriedades) para exibir as propriedades importadas.

Bifurcar o aplicativo DreamHouse no GitHub.

  1. Para entrar no GitHub com uma conta existente, acesse https://github.com/login. Insira seu nome de usuário e senha e clique em Sign In (Entrar).
  2. Para se inscrever em uma nova conta no GitHub, acesse https://github.com/join. Crie um nome de usuário, digite um email e digite uma senha. Clique em Create an account (Criar uma conta). Siga as instruções na tela.
  3. Navegue para o repositório do GitHub do aplicativo DreamHouse, http://bit.ly/intro-to-heroku.
  4. No canto superior direito, clique em Fork (Bifurcar). Você será redirecionado para sua conta com seu repositório bifurcado, intro-to-heroku.

A bifurcação copia o código-base para o aplicativo DreamHouse e cria seu próprio repositório para que você possa começar.

Editar o arquivo app.json.

Para criar um botão Heroku, você precisará de um arquivo app.json válido no diretório raiz. O arquivo app.json descreve um aplicativo da web. Ele declara variáveis de ambiente, complementos e outras informações necessárias para executar um aplicativo no Heroku. O esquema do arquivo não tem campos obrigatórios, porém, recomendamos a inclusão de nome, logotipo e descrição. Fornecer esses detalhes ao usuário dá contexto e identidade ao seu aplicativo.

  1. Em seu repositório intro-to-heroku, clique em app.json e clique em ícone de lápispara editá-lo.
    Destacar a localização do arquivo app.json no GitHub.
  2. Na linha 7, dentro das aspas, adicione o nome de usuário do seu repositório do GitHub do DreamHouse, https://github.com/YOUR_USERNAME/intro-to-heroku.
  3. Role até o final da página. Na caixa de texto Update app.json (Atualizar app.json), digite Added GitHub Repo URL.
  4. Mantenha as seleções padrão e clique em Commit changes (Confirmar alterações).

Testar o arquivo app.json.

  1. Para testar se seu aplicativo será implantado por meio de um botão, precisamos testar o arquivo app.json. Copie esta URL: https://heroku.com/deploy?template=https://github.com/YOUR_USERNAME/intro-to-heroku
  2. Cole a URL em uma guia separada do navegador e substitua o texto de espaço reservado (YOUR USERNAME) pelo seu nome de usuário do GitHub. Pressione <enter>.
  3. Você verá a tela de inscrição do Heroku. Se você não tem uma conta, crie uma nova conta e siga as instruções na tela. Se você já tem uma conta do Heroku, clique no botão Log In (Fazer login) no canto superior direito.
  4. Depois de fazer login, você verá a página “Create New App” (Criar novo aplicativo) ser carregada. Se a página “Create New App” (Criar novo aplicativo) for carregada, você terá configurado o arquivo app.json corretamente. Usar o link do nosso botão de implantação permite que você crie e implante seu aplicativo DreamHouse usando somente um botão do Heroku.
    Captura de tela de um formulário Create New App (Criar novo aplicativo) do Heroku vazio.
  5. Feche esta guia do navegador.

Os botões do Heroku são links para locais de implantação do Heroku específicos. Quando você clica em um botão do Heroku, a plataforma entende sua intenção de implantar código e a localização desse código. O botão então aciona uma implantação. Cada repositório de código contém informações adicionais para o Heroku, como complementos específicos do Heroku ou se metadados de configuração precisam ser definidos.

Adicionar um botão do Heroku ao seu README.

Agora que sabemos que temos a URL correta, vamos adicionar um botão do Heroku ao seu README e confirmar a alteração.

  1. No GitHub, clique na guia Code (Código) e selecione o arquivo README.md. Clique no ícone ícone de lápis para editar este arquivo.
    Destaque da localização do arquivo README no GitHub.
  2. No final do README.md, há uma marca de âncora (<a>) comentada. Remova os comentários no início e no fim. Seu código deve ficar como este código.
    <a href="https://heroku.com/deploy"><img src="https://www.herokucdn.com/deploy/button.svg" alt="Deploy"></a>
  3. Este código cria o botão Heroku e o adiciona ao final do seu README do GitHub.
  4. Role até o final da página. No campo Update README.md (Atualizar README.md), digite Added the Heroku Deployment Button.
  5. Mantenha as seleções padrão e clique em Commit changes (Confirmar alterações).
  1. Clique na guia Code (Código) em seu repositório do GitHub do Dreamhouse e role até o final da página.
  2. Clique no novo botão Deploy to Heroku (Implantar no Heroku) no README do DreamHouse. Você será redirecionado para o site do Heroku para criar um novo aplicativo baseado em seu código do DreamHouse no GitHub. Captura de tela do arquivo intro-to-heroku README.md com o botão Deploy to Heroku (Implantar no Heroku).
  3. Se você deixar App Name (Nome do aplicativo) em branco, o Heroku designa um nome para seu aplicativo. Para nome do aplicativo, digite dhprod-UNIQUE_ID. Substitua UNIQUE_ID no nome do aplicativo por um ID exclusivo.
  4. Clique em  Deploy App (Implantar aplicativo). Implantar aplicativos no Heroku demora cerca de 3 minutos.
  5. Quando a compilação do aplicativo for concluída, clique em View (Exibir) para verificar se o aplicativo é carregado.
    Exibição da compilação concluída no Heroku.
    Usaremos mais tarde o aplicativo que você acabou de criar. 
  6. Feche esta guia.