Desenvolvendo um aplicativo da Web

Usando a linha de comandos

Vamos começar abrindo uma ferramenta familiar aos desenvolvedores experientes e um novo melhor amigo para aqueles que estão apenas iniciando: a linha de comandos. Para muitos, a interface gráfica do usuário (GUI) relegou a interface da linha de comandos do seu computador para o status de segunda classe. Mas agora, é hora de trazê-lo de volta (embora a GUI não esteja indo embora em breve, especialmente quando você precisa navegar na web para fazer download de instruções para o conjunto de ferramentas da linha de comandos).

Abra um shell e crie um diretório. Altere seu próprio diretório de referência para o novo diretório que você criou. Quando criado, seu aplicativo tem seu próprio subdiretório com o código inicial e a configuração necessários para começar a funcionar.

Deixe a linha de comandos e retorne ao seu navegador para que seja possível seguir as instruções para a instalação do Ferramentas do desenvolvedor do IBM Cloud Platform no link As Developer Tools oferecem uma abordagem extensível e repetível para criar e implantar aplicativos em nuvem.

Instalando o Docker

Usar contêineres, como o Docker, acelera o desenvolvimento e facilita o teste e suporta a implementação automatizada. Um contêiner é uma estrutura leve que não precisa de um sistema operacional, apenas do seu código e da configuração de tudo, desde dependências até configurações.

O Docker é instalado como parte do Developer Toolse você precisa dele. Seu trabalho ocorre principalmente em segundo plano dentro de rotinas que scaffold seu novo aplicativo. O Docker deve estar em execução para que os comandos de construção funcionem. Vá em frente e crie uma conta Docker on-line no Docker hub, execute o aplicativo Docker e faça login.

Instalando o Node.js

O aplicativo que você criou usa Node.JS como o mecanismo do lado do servidor para executar o código JavaScript desse aplicativo Web. Para usar o Gerenciador de pacotes Node (npm) para gerenciar as dependências do seu aplicativo, você deve instalar Node localmente. Além disso, uma instalação local do Node simplifica o teste, acelerando o desenvolvimento..

Antes de iniciar, você pode considerar um gerenciador de versões, como o Node Version Manager ou nvm, para instalar o Node Um gerenciador de versão reduz a complexidade do gerenciamento de diferentes versões de Node.js

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.34.0/install.sh | bash

...ou ' wget (apenas um é necessário, mas não ambos; use o que estiver disponível em seu sistema):

wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.34.0/install.sh | bash

Ou, para Windows, você pode usar ' nvm para Windows com instaladores e código-fonte no link.

Usando nvm, instale Node.

nvm install v6.17.1

Qualquer abordagem que você usar depois de instalar Node.js e npm (incluído com Node) em seu computador, parabenize-se por uma tarefa bem iniciada!

Instalando o Git

Você provavelmente já está familiarizado com o Git, pois ele é o sistema de versão de código fonte mais usado. Você usará Git posteriormente quando criar uma cadeia de ferramentas de implantação contínua (CD) na plataforma IBM Cloud Para entrega e implantação contínuas. Se você não tiver uma conta GitHub, crie uma conta pessoal pública gratuita no site GitHub; caso contrário, sinta-se à vontade para fazer login com qualquer outra conta que você tenha.

É necessário gerar e fazer upload de chaves SSH para seu GitHub para obter acesso seguro ao GitHub a partir da linha de comandos. No entanto, fazer isso agora fornece uma boa prática, pois você repete as etapas para a instância do GitHub usada para o IBM Cloud Platform posteriormente.

Por enquanto, faça download do GitHub Desktop e execute o instalador. Quando o instalador for concluído, efetue login no GitHub com sua conta.

Insira um nome e e-mail (isso é exibido publicamente) para quaisquer confirmações em seu repositório. Depois que o aplicativo for vinculado à sua conta, poderá ser solicitado que você verifique a conexão do aplicativo por meio de sua conta do GitHub online.

Implemente o app no IBM Cloud Platform.

Para obter o app iniciador com suas mudanças no IBM Cloud Platform, implemente-o usando o Developer Tools repetindo as mesmas etapas que você executou anteriormente.

1. Se ainda não o fez, ou se reiniciou ou fez logoff, faça login na IBM Cloud Plataforma usando o comando " login.

   ibmcloud login
   

2. Configure o Terminal de API para a sua região usando o comando api

   ibmcloud api cloud.ibm.com
   

3. Crie o aplicativo para entregar esse aplicativo com o comando build (como no exemplo).

   ibmcloud dev build
   

   1. Vamos seguir em frente e testar o aplicativo localmente. Isso permite executar o mesmo código localmente com o comando run.

   ibmcloud dev run
   

4. Implemente o app no IBM Cloud Platform com o comando deploy.

   ibmcloud dev deploy
   

   O código mostra a sequência de comandos que são usados neste exemplo para criar, testar e implantar o aplicativo Web inicial.

   ibmcloud login --sso
   ibmcloud api cloud.ibm.com
   ibmcloud target --cf
   ibmcloud dev enable
   ibmcloud dev build
   ibmcloud dev run
   ibmcloud dev deploy
   

   Quando o processo é concluído, o IBM Cloud Platform relata que o app foi transferido por upload, implementado com êxito e iniciado.. Se você também estiver conectado ao console da Web da plataforma IBM Cloud Platform, também será notificado sobre o status do seu aplicativo. Mas, mais importante, é possível verificar se o app foi implementado visitando a URL do app relatada pelo IBM Cloud Platform com um navegador ou por meio do console da web clicando no botão Visualizar app.

   Teste o app. A mudança visível do modelo de app padrão que foi implementada na criação para o app iniciador mostrado a seguir demonstrou que a implementação do app no IBM Cloud Platform foi bem-sucedido.

   

Criar uma ramificação de Git

Agora, é necessário criar uma ramificação para o ambiente de desenvolvimento local a ser usado para o Estágio de construção do IBM Cloud Platform Delivery Pipeline:

1. Se estiver usando GitHub Desktop, clique no ícone do branch; você será solicitado a inserir um nome para o branch. Este exemplo usa " local-dev como nome.

   

2. Depois que você cria o branch, GitHub compara os arquivos locais no branch Local-dev com os arquivos no repositório no branch-padrão e relata Nenhuma alteração local. Agora é possível clicar em Publicar para incluir a ramificação que você criou em seu repositório local para seu repositório GitHub (conforme mostrado na Figura 5).

   

Agora que a ramificação Local-dev está publicada no repositório GitHub em sua cadeia de ferramentas, o estágio de compilação do seu IBM Cloud Platform Delivery Pipeline será acionado, seguido pelo estágio de implantação sempre que você enviar um commit para ele. A implantação do aplicativo a partir da CLI não é necessária, pois a implantação foi integrada diretamente ao seu fluxo de trabalho.

Configuração de suas credenciais de armazenamento

É necessário configurar as credenciais do Object Storage para seu aplicativo da web, assim como um 'depósito' no qual ele armazenará e recuperará imagens. A chave de API que você criará precisará de Object Storage Credenciais HMAC, conforme definido por suas credenciais de serviço. Talvez você reconheça os termos " access_key_id e " secret_access_key, pois pode ter uma conta AWS e usar um arquivo de credenciais que já tenha entradas " aws_access_key_id e " aws_secret_access_key.

Depois de ter concluído a criação de uma chave de API, transferido por download e, em seguida, copiado as credenciais HMAC, conclua as etapas a seguir:

1. No ambiente de desenvolvimento local, coloque as credenciais no caminho do Windows %USERPROFILE%\\.aws\\credentials. Para usuários do Mac/Linux, as credenciais devem acessar ~/.aws/credentials). O exemplo mostra o conteúdo de um arquivo de credenciais típico.

   [default]
   aws_access_key_id = {access_key_id}
   aws_secret_access_key = {secret_access_key}
   

2. Na página da Web do aplicativo que você criou usando o comando CLI na plataforma IBM Cloud Defina suas credenciais necessárias como variáveis de ambiente, de acordo com as práticas recomendadas de desenvolvimento, fazendo login na IBM Cloud E selecione seu aplicativo, ' webapplication. Nas guias, clique em Tempo de execução.

3. Na janela Tempo de execução, clique em Variáveis de ambiente no início da página e role até a seção Definidas pelo usuário, que permite adicionar as variáveis.

4. Adicione duas variáveis: uma com o valor de seu ' access_key_id, usando ' AWS_ACCESS_KEY_ID como o nome da chave, e outra com o valor de sua chave de acesso secreta, denominada ' AWS_SECRET_ACCESS_KEY. Essas variáveis e seus respectivos valores são o que o app usa para autenticar para a instância do Object Storage ao executar no IBM Cloud Platform (consulte a Figura 6). Ao concluir com as entradas, clique em Salvar e o IBM Cloud Platform reiniciará automaticamente o app para você.

   

Em seguida, no Object Storage Portal para sua instância de serviço, inclua um depósito para conter suas imagens. Esse cenário usa o bucket denominado " web-images.

Projetando o app

Estas são as duas tarefas principais que um usuário deve ser capaz de executar com o aplicativo da web de galeria de imagens simples:

• Faça upload de imagens de um navegador da web para o depósito do Object Storage.
• Visualize as imagens no depósito do Object Storage em um navegador da web.

As próximas etapas se concentram em como realizar essas duas funções de demonstração em vez de construir um app de classificação de produção totalmente desenvolvido. Implementar este tutorial e deixá-lo exposto e em execução significa que qualquer pessoa que localizar o app poderá executar as mesmas ações: fazer upload de arquivos em seu depósito do IBM Cloud Object Storage e visualizar as imagens JPEG que já existem em seu navegador.

Desenvolvendo o app

No arquivo ' package.json, dentro do objeto de scripts, você vê como "start" é definido. Esse arquivo é o que o IBM Cloud Platform usa para informar ao nó para executar app.js cada vez que o app é iniciado. Além disso, use-o ao testar o aplicativo localmente. Observe o arquivo principal do aplicativo, que se chama ' app.js. Esse é o código que você disse ao Node.js para processar primeiro quando iniciar o aplicativo com o comando " npm start (ou " nodemon).

{
    "scripts": {
      "start": "node app.js"
    }
}

Nosso arquivo app.js usa o nó para carregar módulos que são necessários para iniciar. A estrutura Express cria o app como um singleton simplesmente chamado app. O exemplo termina (deixando de fora a maior parte do código por enquanto) dizendo ao aplicativo para escutar na porta atribuída e em uma propriedade de ambiente, ou 3000 por padrão. Ao iniciar com êxito, ele imprime uma mensagem com o URL do servidor no console.

var express = require('express');
var cfenv = require('cfenv');
var bodyParser = require('body-parser');
var app = express();
//...

// start server on the specified port and binding host
var port = process.env.PORT || 3000;
app.listen(port, function() {
    console.log("To view your app, open this link in your browser: http://localhost:" + port);
});
//...

Vamos ver como definir um caminho e visualizações. A primeira linha de código informa à estrutura do Express para usar o diretório público para servir seus arquivos estáticos, que incluem quaisquer imagens estáticas e folhas de estilo que você usar. As linhas a seguir informam ao aplicativo onde encontrar os modelos para suas exibições no diretório ' src/views e definem o mecanismo de exibição como EJS. Além disso, a estrutura usa o middleware body-parser para expor os dados de solicitação de entrada ao aplicativo como JSON. Nas linhas finais do exemplo, o aplicativo expresso responde a todas as solicitações GET de entrada para o URL do aplicativo renderizando o modelo de visualização ' index.ejs.

//...
// serve the files out of ./public as your main files
app.use(express.static('public'));
app.set('views', './src/views');
app.set('view engine', 'ejs');
app.use(bodyParser.json());

var title = 'COS Image Gallery Web Application';
// Serve index.ejs
app.get('/', function (req, res) {
  res.render('index', {status: '', title: title});
});

//...

A figura a seguir mostra o modelo de visualização de índice quando renderizado e enviado para o navegador. Se você estiver usando,nodemon você pode ter notado que seu navegador foi atualizado quando você salvou suas alterações

Nossos modelos de visualização compartilham código HTML entre as tags <head>...</head>; portanto, você o colocou em um modelo de inclusão separado. Esse modelo (head-inc.ejs) contém um scriptlet (uma ligação para uma variável JavaScript ) para o título da página na linha 1. A variável ' title é definida em ' app.js e passada como dados para seu modelo de visualização na linha abaixo. Caso contrário, você estará simplesmente usando alguns endereços CDN para extrair " Bootstrap CSS, " Bootstrap JavaScript e " JQuery. Finalmente, inclua um arquivo styles.css estático customizado de seu diretório pubic/stylesheets.

<title><%=title%></title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
      integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
      crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.1.1.min.js"
        integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
        crossorigin="anonymous">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"
        integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
        crossorigin="anonymous">
</script>

<link rel="stylesheet" href="stylesheets/style.css">

O corpo da exibição de índice contém as guias de navegação com estilo bootstrap e o formulário de upload em um layout básico fornecido pelos estilos CSS incluídos no bootstrap.

Considere essas duas especificações para seu aplicativo:

• Defina seu método de formulário como " POST e o tipo de codificação de dados do formulário como multipart/form-data na linha 24. Para a ação do formulário, envie os dados do formulário para o aplicativo na rota do aplicativo "/". Posteriormente, faça um trabalho extra na lógica do roteador para lidar com as solicitações " POST para essa rota.

• Exibir feedback sobre o status da tentativa de upload de arquivo para o usuário. Esse feedback é passado para sua exibição em uma variável chamada "status" e é exibido após o formulário de upload.

<!DOCTYPE html>
<html>

<head>
    <%- include('head-inc'); %>
</head>

<body>
<ul class="nav nav-tabs">
    <li role="presentation" class="active"><a href="/">Home</a></li>
    <li role="presentation"><a href="/gallery">Gallery</a></li>
</ul>
<div class="container">
    <h2>Upload Image to IBM Cloud Object Storage</h2>
    <div class="row">
        <div class="col-md-12">
            <div class="container" style="margin-top: 20px;">
                <div class="row">

                    <div class="col-lg-8 col-md-8 well">

                        <p class="wellText">Upload your JPG image file here</p>

                        <form method="post" enctype="multipart/form-data" action="/">
                            <p><input class="wellText" type="file" size="100px" name="img-file" /></p>
                            <br/>
                            <p><input class="btn btn-danger" type="submit" value="Upload" /></p>
                        </form>

                        <br/>
                        <span class="notice"><%=status%></span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>

</html>

Vamos dar um tempo para voltar para app.js. O exemplo configura rotas do Express para lidar com solicitações adicionais feitas ao seu aplicativo. O código para esses métodos de roteamento está em dois arquivos no diretório " ./src/routes do seu projeto:

• imageUploadRoutes.js: Esse arquivo trata do que acontece quando o usuário seleciona uma imagem e clica em Upload.

• galleryRoutes.js: Esse arquivo trata das solicitações quando o usuário clica na guia na guia Gallery para solicitar a exibição " imageGallery.

//...
var imageUploadRoutes = require('./src/routes/imageUploadRoutes')(title);
var galleryRouter = require('./src/routes/galleryRoutes')(title);

app.use('/gallery', galleryRouter);
app.use('/', imageUploadRoutes);

//...

Upload de imagem

Consulte o código de imageUploadRoutes.js Você deve criar uma instância de um novo roteador expresso e nomeá-lo " imageUploadRoutes no início. Posteriormente, crie uma função que retorne ' imageUploadRoutes e atribua-o a uma variável chamada ' router. Quando concluída, a função deve ser exportada como um módulo para torná-la acessível à estrutura e ao seu código principal em ' app.js. Para separar a lógica de roteamento da lógica de upload, é necessário um arquivo de controle chamado ' galleryController.js. Como essa lógica é dedicada ao processamento da solicitação de entrada e ao fornecimento da resposta apropriada, coloque essa lógica nessa função e salve-a no diretório ' ./src/controllers.

A instância do roteador da estrutura Express é onde seu ' imageUploadRoutes foi projetado para rotear solicitações para a rota raiz do aplicativo ("/") quando o método HTTP ' POST é usado. Dentro do método ' post de seu ' imageUploadRoutes, use o middleware dos módulos ' multer e ' multer-s3 que é exposto pelo ' galleryController como ' upload. O middleware obtém os dados e o arquivo do formulário de upload ' POST, processa-os e executa uma função de retorno de chamada. Na função de retorno de chamada, verifique se você obteve um código de status HTTP de ' 200 e se havia pelo menos um arquivo no objeto de solicitação para upload. Com base nessas condições, defina o feedback em sua variável " status e renderize o modelo de exibição de índice com o novo status.

var express = require('express');
var imageUploadRoutes = express.Router();
var status = '';

var router = function(title) {

    var galleryController =
        require('../controllers/galleryController')(title);

    imageUploadRoutes.route('/')
    	.post(
    		galleryController.upload.array('img-file', 1), function (req, res, next) {
                if (res.statusCode === 200 && req.files.length > 0) {
                    status = 'uploaded file successfully';
                }
                else {
                    status = 'upload failed';
                }
                res.render('index', {status: status, title: title});
            });

    return imageUploadRoutes;
};

module.exports = router;

Em comparação, o código para o ' galleryRouter é um modelo de simplicidade. Siga o mesmo padrão que você usou com ' imageUploadRouter e exija ' galleryController na primeira linha da função e, em seguida, configure sua rota. A principal diferença é que você está encaminhando solicitações HTTP ' GET em vez de ' POST e enviando toda a saída na resposta de ' getGalleryImages, que é exposta pelo ' galleryController na última linha do exemplo.

var express = require('express');
var galleryRouter = express.Router();

var router = function(title) {

    var galleryController =
        require('../controllers/galleryController')(title);

    galleryRouter.route('/')
        .get(galleryController.getGalleryImages);

    return galleryRouter;
};
module.exports = router;

Em seguida, olhe o controlador para a galeria.

Observe como você configurou o upload do multer, que trunca algum código que você ignora por enquanto Você precisa dos módulos ' ibm-cos-sdk, ' multer e ' multer-s3. O código mostra como configurar um objeto S3 que aponta para um terminal do servidor Object Storage. Você está definindo estaticamente valores como o endereço do endpoint, a região e o bucket para simplificar, mas eles podem ser facilmente referenciados a partir de uma variável de ambiente ou de um arquivo de configuração JSON.

Defina upload no imageUploadRouter criando uma nova instância multer com storage como sua única propriedade. Essa propriedade informa ao ' multer para onde enviar o arquivo do seu ' multipart/form-data. Como a IBM Cloud A plataforma usa uma implementação da API S3, defina o armazenamento como um objeto " s3-multer. Esse objeto s3-multer contém uma propriedade s3 designada ao seu objeto s3. Há também uma propriedade bucket que é designada à variável myBucket, que, por sua vez, é designada a um valor de web-images. O objeto ' s3-multer agora tem todos os dados necessários para fazer upload de arquivos para o seu bucket Object Storage quando receber dados do formulário de upload. O nome (ou chave) do objeto transferido por upload é o nome do arquivo original.

Use um registro de data e hora como parte do nome do arquivo para manter a exclusividade do nome do arquivo

var galleryController = function(title) {

    var aws = require('ibm-cos-sdk');
    var multer = require('multer');
    var multerS3 = require('multer-s3');

    var ep = new aws.Endpoint('s3.us-south.cloud-object-storage.appdomain.cloud');
    var s3 = new aws.S3({endpoint: ep, region: 'us-south-1'});
    var myBucket = 'web-images';

    var upload = multer({
        storage: multerS3({
            s3: s3,
            bucket: myBucket,
            acl: 'public-read',
            metadata: function (req, file, cb) {
                cb(null, {fieldName: file.fieldname});
            },
            key: function (req, file, cb) {
                console.log(file);
                cb(null, file.originalname);
            }
        })
    });

    var getGalleryImages = function (req, res) { /* ... shown below ... */ };

    return {
        getGalleryImages: getGalleryImages,
        upload: upload
    };
};

module.exports = galleryController;

Para teste local, uma tarefa útil é imprimir o objeto de arquivo para o console, console.log(file). Realize um teste local do formulário de upload e mostre a saída do log do console do arquivo.

{ fieldname: 'img-file',
originalname: 'Chrysanthemum.jpg',
encoding: '7bit',
mimetype: 'image/jpeg' }

O feedback de seu retorno de chamada declara que o aplicativo foi "transferido por upload com sucesso" quando testado..

Recuperação de imagem e exibição

Lembre-se de que, no ' app.js, a linha de código ' app.use('/gallery', galleryRouter); diz à estrutura expressa para usar esse roteador quando a rota ' /gallery for solicitada. Esse roteador usa galleryController.js, define a função getGalleryImages, cuja assinatura você viu anteriormente. Usando o mesmo objeto ' s3 que você configurou para a função de upload de imagem, chame a função chamada ' listObjectsV2. Essa função retorna os dados de índice que definem cada um dos objetos em seu bucket. Para exibir imagens em HTML, você precisa de um URL de imagem para cada imagem JPEG em seu bucket " web-images a ser exibido em seu modelo de visualização. O fechamento com o objeto de dados retornado por " listObjectsV2 contém metadados sobre cada objeto em seu bucket.

O código percorre o ' bucketContents em busca de qualquer chave de objeto que termine em ".jpg" e cria um parâmetro para passar para a função S3 ' getSignedUrl. Essa função retorna um URL assinado para qualquer objeto quando você fornece o nome e a chave do bucket do objeto. Na função de retorno de chamada, salve cada URL em uma matriz e passe-a para o método de resposta HTTP Server ' res.render como o valor de uma propriedade chamada ' imageUrls.

//...

    var getGalleryImages = function (req, res) {
        var params = {Bucket: myBucket};
        var imageUrlList = [];

        s3.listObjectsV2(params, function (err, data) {
            if (data) {
                var bucketContents = data.Contents;
                for (var i = 0; i < bucketContents.length; i++) {
                    if (bucketContents[i].Key.search(/.jpg/i) > -1) {
                        var urlParams = {Bucket: myBucket, Key: bucketContents[i].Key};
                        s3.getSignedUrl('getObject', urlParams, function (err, url) {
                            imageUrlList.push(url);
                        });
                    }
                }
            }
            res.render('galleryView', {
                title: title,
                imageUrls: imageUrlList
            });
        });
    };

//...

O último exemplo de código mostra o corpo do modelo galleryView com o código necessário para exibir suas imagens. Obtenha a matriz imageUrls do método res.render() e itere sobre um par de tags <div>...</div> aninhadas. Cada envia uma solicitação GET para a imagem quando a rota /gallery é solicitada.

<!DOCTYPE html>
<html>

<head>
    <%- include('head-inc'); %>
</head>

<body>
    <ul class="nav nav-tabs">
        <li role="presentation"><a href="/">Home</a></li>
        <li role="presentation" class="active"><a href="/gallery">Gallery</a></li>
    </ul>
    <div class="container">
        <h2>IBM COS Image Gallery</h2>

        <div class="row">
            <% for (var i=0; i < imageUrls.length; i++) { %>
                <div class="col-md-4">
                    <div class="thumbnail">
                            <img src="<%=imageUrls[i]%>" alt="Lights" style="width:100%">
                    </div>
                </div>
            <% } %>
        </div>
    </div>
</body>

</html>

Teste o app localmente do http://localhost:3000/gallery e veja sua imagem.

Confirmando para Git

Agora que os recursos básicos do aplicativo estão funcionando, faça o commit do código no repositório local e, em seguida, envie-o para o GitHub. Usando GitHub Desktop, clique em Changes (Alterações) (consulte a Figura 11), digite um resumo das alterações no campo Summary (Resumo) e, em seguida, clique em Commit to Local-dev (Confirmar no desenvolvimento local).

Ao clicar em sync, sua confirmação será enviada para a ramificação local-dev remota. Essa ação inicia os Estágios de Construção e Implementação em seu Delivery Pipeline