Mediante la línea de mandatos

Empezaremos por abrir una herramienta bien conocida para los desarrolladores experimentados, y un nuevo mejor amigo para aquellos que acaban de empezar: la línea de mandatos. Para muchos, la interfaz gráfica de usuario (GUI) ha relegado la interfaz de línea de mandatos del sistema a un estado de segunda clase. Pero ahora, es el momento de traerlo de vuelta (aunque la GUI no va a desaparecer pronto, especialmente cuando necesita navegar por la web para descargar instrucciones para el conjunto de herramientas de línea de comandos).

Abra un shell y cree un directorio. Cambia tu propio directorio de referencia por el nuevo que has creado. Cuando se crea, la aplicación tiene su propio subdirectorio con el código de inicio y la configuración necesaria para empezar a funcionar.

Deje la línea de mandatos y vuelva al navegador para poder seguir las instrucciones para instalar las herramientas de desarrollador deIBM Cloud Platform en el enlace. Developer Tools ofrecen un enfoque extensible y repetible para crear e implantar aplicaciones en la nube.

Instalación de Docker

El uso de contenedores, como Docker, acelera el desarrollo y facilita las pruebas y da soporte al despliegue automatizado. Un contenedor es una estructura ligera que no necesita un sistema operativo, sólo su código y configuración para todo, desde dependencias hasta ajustes.

Docker se instala como parte de Developer Toolsy lo necesita. Su trabajo tiene lugar sobre todo en segundo plano dentro de unas rutinas que andamian tu nueva app. Docker debe estar en ejecución para que funcionen los mandatos de compilación. Cree una cuenta Docker en línea en Docker Hub, ejecute la aplicación Docker e inicie sesión.

Instalación de Node.js

La aplicación que construyes utiliza Node.JS como motor del lado del servidor para ejecutar el código JavaScript de esta aplicación web. Para utilizar el Gestor de Paquetes Node (npm) para gestionar las dependencias de tu aplicación, debes instalar Node localmente. Además, una instalación local de Node simplifica las pruebas, acelerando el desarrollo.

Antes de empezar, puede considerar un gestor de versiones, como Node Version Manager, o nvm, para instalar Node. Un gestor de versiones reduce la complejidad de gestionar distintas versiones de Node.js.

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

...o ' wget (sólo es necesario uno, pero no ambos; utilice el que esté disponible en su sistema):

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

O, para Windows, puede utilizar ' nvm ' para Windows con los instaladores y el código fuente en el enlace.

Utilizando nvm, instale Node.

nvm install v6.17.1

Sea cual sea el enfoque que utilice después de instalar Node.js y npm (incluido con Node) en el sistema, ¡felicite por un trabajo bien iniciado!

Instalación de Git

Probablemente ya esté familiarizado con Git, ya que es el sistema de versiones de código fuente más utilizado. Utilizará Git más adelante cuando cree una cadena de herramientas de despliegue continuo (CD) en la plataforma IBM Cloud Para la entrega y el despliegue continuos. Si no tienes una cuenta de " GitHub ", crea una cuenta personal pública y gratuita en el sitio web de " GitHub "; si no, no dudes en conectarte con cualquier otra cuenta que tengas.

Debe generar y cargar claves SSH en el perfil de GitHub para obtener acceso seguro a GitHub desde la línea de mandatos. Sin embargo, hacerlo ahora proporciona una buena práctica, ya que repite los pasos para la instancia de GitHub utilizada para IBM Cloud Platform más tarde.

Por ahora, descargue GitHub Desktop y ejecute el instalador. Cuando finalice el instalador, inicie sesión en GitHub con su cuenta.

Especifique un nombre y un correo electrónico (esto se muestra públicamente) para las confirmaciones en el repositorio. Una vez que la aplicación está enlazada a la cuenta, es posible que se le solicite que verifique la conexión de la aplicación a través de la cuenta de GitHub en línea.

Despliegue de la app en IBM Cloud Platform.

Para obtener la app de inicio con sus cambios en IBM Cloud Platform, despliéguela utilizando las Developer Tools repitiendo los mismos pasos que ha realizado anteriormente.

1. Si aún no lo ha hecho, o si ha reiniciado o cerrado la sesión, inicie sesión en IBM Cloud Platform utilizando el comando ' login '.

   ibmcloud login
   

2. Establezca el punto final de API para su región utilizando el mandato api.

   ibmcloud api cloud.ibm.com
   

3. Construya la aplicación para la entrega de esa aplicación con el comando build (como en el ejemplo).

   ibmcloud dev build
   

   1. Ahora vamos a probar la aplicación localmente. Esto le permite ejecutar el mismo código localmente con el mandato run.

   ibmcloud dev run
   

4. Despliegue la app en IBM Cloud Platform con el mandato deploy.

   ibmcloud dev deploy
   

   El código muestra la secuencia de comandos que se utilizan en este ejemplo para construir, probar y desplegar la aplicación 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
   

   Cuando finaliza el proceso, la plataforma IBM Cloud informa de que la aplicación se ha cargado, desplegado e iniciado correctamente. Si también ha iniciado sesión en la consola web de la plataforma IBM Cloud Platform, también se le notificará el estado de su aplicación. Pero, lo que es más importante, puede verificar que la app se ha desplegado visitando el URL de la app que muestra IBM Cloud Platform con un navegador o desde la consola web pulsando el botón Ver app.

   Pruebe la app. El cambio visible entre la plantilla de app predeterminada que se desplegó durante la creación y la app de inicio mostrada demuestra que el despliegue de la app en IBM Cloud Platform se ha realizado correctamente.

   '

   

Creación de una rama de Git

Ahora, tiene que crear una rama para el entorno de desarrollo local que se utilizará para la etapa de creación del conducto de entrega de IBM Cloud Platform:

1. Si utilizas GitHub Desktop, haz clic en el icono de la rama; se te pedirá que introduzcas un nombre para la rama. Este ejemplo utiliza ' local-dev como nombre.

   

2. Después de crear la rama, GitHub compara los archivos locales en la rama Local-dev con los archivos del repositorio en la rama por defecto e informa de Sin cambios locales. Ahora puede pulsar Publicar para añadir la rama que ha creado en el repositorio local al repositorio de GitHub (tal como se muestra en la Figura 5).

   

Ahora que la rama Local-dev está publicada en el repositorio de GitHub de tu cadena de herramientas, la etapa de compilación de tu IBM Cloud Platform Delivery Pipeline se activará seguida de la etapa de despliegue cada vez que envíes un commit a ella Platform Delivery Pipeline se activará seguida de la etapa de despliegue cada vez que envíe una confirmación a la misma. No es necesario desplegar la aplicación desde la CLI, ya que el despliegue se ha integrado directamente en su flujo de trabajo.

Configuración de las credenciales de almacenamiento

Tiene que configurar las credenciales de Object Storage para la aplicación web, así como un 'grupo' donde se almacenarán y se recuperarán las imágenes. La clave API que creará necesitará Object Storage Credenciales HMAC, tal y como se definen en sus credenciales de servicio. Es posible que reconozca los términos " access_key_id y " secret_access_key ", ya que podría tener una cuenta AWS y utilizar un archivo de credenciales que ya tiene entradas " aws_access_key_id y " aws_secret_access_key.

Cuando haya creado una clave de API, la haya descargado y la haya copiado en las credenciales de HMAC, siga los pasos siguientes:

1. En el entorno de desarrollo local, coloque las credenciales en la vía de acceso de Windows %USERPROFILE%\\.aws\\credentials. Para los usuarios de Mac/Linux, las credenciales deben ir a ~/.aws/credentials). El ejemplo muestra el contenido de un archivo de credenciales típico.

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

2. En la página web de la aplicación que ha creado mediante el comando CLI en la plataforma IBM Cloud Platform, define las credenciales necesarias como variables de entorno según las mejores prácticas de desarrollo iniciando sesión en IBM Cloud Platform y selecciona tu aplicación, 'code1' Y seleccione su aplicación " webapplication. En las pestañas, haga clic en Tiempo de ejecución.

3. En la ventana Tiempo de ejecución, haga clic en Variables de entorno al principio de la página y desplácese hasta la sección Definidas por el usuario, que le permite añadir las variables.

4. Añade dos variables: una con el valor de tu ' access_key_id, utilizando ' AWS_ACCESS_KEY_ID como nombre de la clave, y otra con el valor de tu clave de acceso secreta, denominada ' AWS_SECRET_ACCESS_KEY. Estas variables y sus respectivos valores son lo que utiliza la app para autenticarse en la instancia de Object Storage cuando se ejecuta en IBM Cloud Platform (consulte la Figura 6). Cuando termine con las entradas, pulse Guardar y IBM Cloud Platform reiniciará automáticamente la app.

   

A continuación, en el portal de Object Storage correspondiente a su instancia de servicio, añada un grupo que contendrá las imágenes. Este escenario utiliza el cubo denominado ' web-images.

Diseño de la app

Estas son las dos tareas principales que un usuario debe poder realizar con la aplicación web sencilla de galería de imágenes:

• Cargar imágenes desde un navegador web en un grupo de Object Storage.
• Ver las imágenes del grupo de Object Storage en un navegador web.

En los pasos siguientes se describe cómo realizar estas dos funciones de demostración; no se trata de crear una app completamente desarrollada lista para producción. Desplegar esta guía de aprendizaje y dejarla expuesta y en ejecución significa que cualquiera que encuentre la app puede realizar las mismas acciones: cargar archivos en el grupo de IBM Cloud Object Storage y ver las imágenes JPEG que hay ahí en su navegador.

Desarrollo de la app

En el archivo ' package.json ', dentro del objeto scripts, se ve cómo se define "start". Este archivo es lo que utiliza IBM Cloud Platform para indicar al nodo que ejecute app.js cada vez que se inicie la app. Utilízalo también cuando pruebes la aplicación localmente. Mira el archivo principal de la aplicación, que se llama ' app.js. Este es el código que le dijiste a Node.js que procesara primero cuando iniciaras tu aplicación con el comando ' npm start (o ' nodemon).

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

Nuestro archivo app.js utiliza el nodo para cargar los módulos necesarios para empezar. La infraestructura Express crea la app como un singleton llamado simplemente app. El ejemplo termina (omitiendo la mayor parte del código por ahora) diciéndole a la aplicación que escuche en el puerto asignado y en una propiedad de entorno, o 3000 por defecto. Cuando se inicia con éxito, imprime un mensaje con la URL del servidor en la consola.

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 a ver cómo definir una ruta y vistas. La primera línea de código le dice al framework Express que utilice el directorio público para servir tus archivos estáticos, que incluyen cualquier imagen estática y hojas de estilo que utilices. Las líneas que siguen indican a la aplicación dónde encontrar las plantillas para tus vistas en el directorio ' src/views ', y configuran tu motor de vistas para que sea EJS. Además, el framework utiliza el middleware body-parser para exponer los datos de la solicitud entrante a la aplicación como JSON. En las últimas líneas del ejemplo, la aplicación express responde a todas las peticiones GET entrantes a la URL de tu aplicación mostrando la plantilla de vista " 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});
});

//...

En la figura siguiente se muestra la plantilla de vista de índice cuando se representa y se envía al navegador. Si está utilizando,nodemon es posible que haya observado que el navegador se ha renovado al guardar los cambios.

Nuestras plantillas de vista comparten código HTML entre las etiquetas <head>...</head>;, por lo que lo ha colocado en una plantilla de inclusión separada. Esta plantilla (head-inc.ejs) contiene un scriptlet (un enlace para una variable JavaScript ) para el título de la página en la línea 1. La variable ' title ' se establece en ' app.js, y se pasa como datos para su plantilla de vista en la línea debajo de eso. De lo contrario, simplemente estará utilizando algunas direcciones CDN para extraer ' Bootstrap CSS, ' Bootstrap JavaScript y ' JQuery. Por último, añada un archivo styles.css estático personalizado desde el directorio 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">

El cuerpo de la vista de índice contiene tus pestañas de navegación con estilo bootstrap, y tu formulario de carga en un diseño básico que es proporcionado por los estilos CSS incluidos con bootstrap.

Considere estas dos especificaciones para su aplicación:

• Establezca su método de formulario como ' POST y el tipo de codificación de datos de formulario como multipart/form-data en la línea 24. Para la acción del formulario, envía los datos de tu formulario a la app a la ruta de la app "/". Más tarde, haz un trabajo extra en la lógica de tu enrutador para manejar las peticiones ' POST ' a esa ruta.

• Muestra al usuario información sobre el estado del intento de carga de archivos. Esta información se pasa a la vista en una variable llamada "estado" y se muestra después del formulario de carga.

<!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>

Tomemos un momento para volver a app.js. El ejemplo configura rutas Express para gestionar las peticiones adicionales que se realicen a tu aplicación. El código para estos métodos de enrutamiento se encuentra en dos archivos bajo el directorio ' ./src/routes en su proyecto:

• imageUploadRoutes.js: Este archivo maneja lo que sucede cuando el usuario selecciona una imagen y hace clic en Cargar.

• galleryRoutes.js: Este archivo gestiona las peticiones cuando el usuario pulsa la pestaña Galería para solicitar la vista ' imageGallery '.

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

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

//...

Carga de imágenes

Consulte el código de imageUploadRoutes.js. Debes crear una instancia de un nuevo enrutador exprés y nombrarlo ' imageUploadRoutes ' al principio. Más tarde, crea una función que devuelva ' imageUploadRoutes, y asígnala a una variable llamada ' router. Una vez completada, la función debe exportarse como módulo para que sea accesible al framework y a tu código principal en ' app.js. Separar su lógica de enrutamiento de la lógica de carga requiere un archivo de controlador llamado ' galleryController.js. Como esa lógica se dedica a procesar la petición entrante y proporcionar la respuesta adecuada, pon esa lógica en esa función y guárdala en el directorio ' ./src/controllers.

La instancia del Router del framework Express es donde su ' imageUploadRoutes ' está diseñado para enrutar las peticiones a la ruta raíz de la app ("/") cuando se utiliza el método HTTP ' POST '. Dentro del método ' post de tu ' imageUploadRoutes, usa middleware de los módulos ' multer y ' multer-s3 ' que es expuesto por el ' galleryController como ' upload. El middleware toma los datos y el archivo de su formulario de carga ' POST, los procesa, y ejecuta una función de callback. En la función callback, comprueba que obtienes un código de estado HTTP de ' 200, y que tenías al menos un fichero en tu objeto request para subir. Basándose en esas condiciones, establezca la respuesta en su variable ' status y renderice la plantilla de vista de índice con el nuevo estado.

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;

En comparación, el código del " galleryRouter " es un modelo de simplicidad. Siga el mismo patrón que hizo con ' imageUploadRouter y requiera ' galleryController ' en la primera línea de la función, luego configure su ruta. La principal diferencia es que está enrutando peticiones HTTP de ' GET ' en lugar de ' POST, y enviando toda la salida en la respuesta de ' getGalleryImages, que está expuesta por el ' galleryController ' en la última línea del ejemplo.

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;

A continuación, mire el controlador de la galería.

Tenga en cuenta cómo ha configurado la carga de multer, que trunca parte del código que ignora por ahora. Necesita los módulos ' ibm-cos-sdk, ' multer y ' multer-s3. El código muestra cómo configurar un objeto S3 que apunta a un punto final de servidor Object Storage. Usted está estableciendo estáticamente valores como la dirección del punto final, la región y el cubo para simplificar, pero podrían ser fácilmente referenciados desde una variable de entorno o un archivo de configuración JSON.

Defina upload en imageUploadRouter creando una nueva instancia de multer con storage como única propiedad. Esta propiedad le dice al ' multer ' dónde enviar el archivo desde su ' multipart/form-data. Dado que la Plataforma IBM Cloud Platform utiliza una implementación de la API S3, configure el almacenamiento para que sea un objeto ' s3-multer '. Este objeto s3-multer contiene una propiedad s3 que se asigna al objeto s3. También hay una propiedad bucket que se asigna a la variable myBucket, a la que a su vez se le asigna un valor de web-images. El objeto ' s3-multer ' tiene ahora todos los datos necesarios para subir archivos a su cubo Object Storage cuando reciba datos del formulario de subida. El nombre (o clave) del objeto cargado es el nombre de archivo original.

Utilice una indicación de fecha y hora como parte del nombre de archivo para mantener la exclusividad del nombre de archivo.

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 realizar pruebas locales, una tarea útil consiste en imprimir el objeto de archivo en la consola, console.log(file). Realice una prueba local del formulario de carga y muestre la salida del registro de la consola del archivo.

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

Los comentarios de la devolución de llamada declaran que la aplicación ha "cargado el archivo correctamente" cuando se ha probado.

Recuperación y visualización de imágenes

Recuerda que en ' app.js', la línea de código ' app.use('/gallery', galleryRouter); le dice al framework express que use ese router cuando se solicite la ruta ' /gallery. Ese direccionador utiliza galleryController.js, defina la función getGalleryImages, cuya firma ha visto anteriormente. Usando el mismo objeto ' s3 ' que configuraste para tu función de subida de imágenes, llama a la función que se llama ' listObjectsV2. Esta función devuelve los datos de índice que definen cada uno de los objetos de su cubo. Para mostrar imágenes dentro de HTML, necesita una URL de imagen para cada imagen JPEG en su cubo ' web-images ' para mostrar en su plantilla de vista. El cierre con el objeto de datos devuelto por ' listObjectsV2 ' contiene metadatos sobre cada objeto de su bucket.

El código recorre el ' bucketContents ' buscando cualquier clave de objeto que termine en ".jpg," y crea un parámetro para pasarlo a la función S3 ' getSignedUrl. Esta función devuelve una URL firmada para cualquier objeto cuando se proporciona el nombre y la clave del bucket del objeto. En la función callback, guarda cada URL en un array, y pásalo al método de respuesta HTTP Server ' res.render como valor a una propiedad llamada ' 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
            });
        });
    };

//...

El último ejemplo de código muestra el cuerpo de la plantilla galleryView con el código necesario para visualizar las imágenes. Obtenga la matriz imageUrls del método res.render() e itere sobre un par de etiquetas <div>...</div> anidadas. Cada uno envía una solicitud GET para la imagen cuando se solicita la ruta /gallery.

<!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>

Pruebe la app localmente desde http://localhost:3000/gallery y vea la imagen.

Confirmación en Git

Ahora que las características básicas de la aplicación están funcionando, envíe el código a su repositorio local y, a continuación, envíelo a GitHub. Utilizando GitHub Desktop, haga clic en Cambios (ver Figura 11), escriba un resumen de los cambios en el campo Resumen y, a continuación, haga clic en Confirmar en Local-dev.

Al pulsar sincronizar, la confirmación se envía a la rama local-dev remota. Esta acción inicia las etapas de compilación y despliegue en el Delivery Pipeline.