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 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.
- Clique na guia Install a Package (Instalar um pacote).
- Cole
04tB00000009UeX
no campo. - Clique em Install (Instalar).
- Selecione Install for All Users (Instalar para todos os usuários) e clique em Install (Instalar).
- 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.
- Quando a instalação for concluída, clique em Done (Concluído).
- No Iniciador de aplicativos (
), encontre e abra o aplicativo DreamHouse.
- 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.
- Clique na guia Properties (Propriedades) para exibir as propriedades importadas.
Bifurcar o aplicativo DreamHouse no GitHub.
- 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). - 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. - Navegue para o repositório do GitHub do aplicativo DreamHouse,
http://bit.ly/intro-to-heroku
. - 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.
- Em seu repositório
intro-to-heroku
, clique em app.json e clique empara editá-lo.
- 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.
- Role até o final da página. Na caixa de texto Update app.json (Atualizar app.json), digite
Added GitHub Repo URL
. - Mantenha as seleções padrão e clique em Commit changes (Confirmar alterações).
Testar o arquivo app.json.
- 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
- 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>
. - 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.
- 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.
- 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.
- No GitHub, clique na guia Code (Código) e selecione o arquivo README.md. Clique no ícone
para editar este arquivo.
- 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>
- Este código cria o botão Heroku e o adiciona ao final do seu README do GitHub.
- Role até o final da página. No campo Update README.md (Atualizar README.md), digite
Added the Heroku Deployment Button
. - Mantenha as seleções padrão e clique em Commit changes (Confirmar alterações).
Testar o link de implantação do README do GitHub.
- Clique na guia Code (Código) em seu repositório do GitHub do Dreamhouse e role até o final da página.
- 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.
- 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. - Clique em Deploy App (Implantar aplicativo). Implantar aplicativos no Heroku demora cerca de 3 minutos.
- Quando a compilação do aplicativo for concluída, clique em View (Exibir) para verificar se o aplicativo é carregado.
Usaremos mais tarde o aplicativo que você acabou de criar. - Feche esta guia.