TravelRound

davidvm97 · Post by **davidvm97** » Sun Apr 07, 2019 7:37 pm

Sprint 10

Fecha Inicial: Abril 1 de 2019
Fecha Final: Abril 8 de 2019

Repositorio: https://github.com/davidvm1/travelround

Evidencias de Meetup

Presentación de preentrega

Backlog:

Investigar sobre manejo de bases de datos en firebase y NOSQL (2)
Historia:Yo como desarrollador entiendo y soy capaz de usar firebase para manejod e bases de datos
Condición de satisfacción: Comprender como funciona firebase y ser capaz de usarlo para manejar informacion en bases de datos
Creacion de la vista de creacion de viajes (3)
Historia:Yo como usuario puedo entrar a la vista de creacion de viajes
Condición de satisfacción: Tener una vista para crear viajes acoplada a la aplicación
Implementación funcional de la creación de viajes(3)
Historia:Yo usuario puedo crear viajes
Condición de satisfacción: Poder crear viajes desde la aplicación y que estos se almacenen en una base de datos de firebase
Hacer demo funcional en el dispositivo(1)
Historia:Yo como desarrollador puedo probar exitosamente el avance de la aplicacion en el dispositivo
Condición de satisfacción: Las funcionalidades funcionan en el dispositivo

Velocidad Inicial: 9
Velocidad Final: 9

Burndown chart:

Que hice?

Investigar sobre manejo de bases de datos en firebase y NOSQL (2)
Creacion de la vista de creacion de viajes (3)
https://i.imgur.com/jPiGLir.jpg

Implementación funcional de la creación de viajes(3)

Code: Select all

<!doctype html>
<html lang="en">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
    <link href="css/CreacionViaje.css" rel="stylesheet" />
    <title>Creacion Viaje</title>
</head>
<body>
    <div class="container">

        <div class="row">
            <img src="img/logoTravelRound.png" class="logo" />
        </div>

        <div class="row">
            <div class="login-wrap">
                <div class="tituloCreacion">
                    <h1>Create Your Trip</h1>
                </div>
                <form class="form-horizontal" role="form">
                    <div class="form-group">
                        <label for="inputLugar3" class="col-sm-3 control-label">
                            Traveling Destiny
                        </label>
                        <div class="col-sm-9">
                            <input type="text" class="form-control" id="inputLugar" placeholder="Traveling Destiny" required>
                        </div>
                    </div>
                   
                    <div class="form-group last">
                        <div class="col-sm-offset-3 col-sm-9">
                            <button type="button" class="btn btn-success btn-sm" id="botonCrear" onclick="crearViaje()">
                                Create Trip
                            </button>
                        </div>
                        <!--<div class="col-sm-offset-3 col-sm-9">
                            <button type="button" class="btn btn-success btn-sm" id="botonOut" onclick="logout()">
                                Log out
                            </button>
                        </div>-->
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->

    
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
    <script src="https://www.gstatic.com/firebasejs/5.9.1/firebase.js"></script>
    <script>
        // Initialize Firebase
        var config = {
            apiKey: "AIzaSyDc3tbBTQrgcjCvDRMgY1PYXBG8ssVaDxM",
            authDomain: "travelroundid.firebaseapp.com",
            databaseURL: "https://travelroundid.firebaseio.com",
            projectId: "travelroundid",
            storageBucket: "travelroundid.appspot.com",
            messagingSenderId: "58993751940"
        };
        firebase.initializeApp(config);
        var database = firebase.database();
    </script>
    <script src="js/CreacionViaje.js"></script>


</body>
</html>

Code: Select all

<!doctype html>
<html lang="en">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
    <link href="css/CreacionViaje.css" rel="stylesheet" />
    <title>Creacion Viaje</title>
</head>
<body>
    <div class="container">

        <div class="row">
            <img src="img/logoTravelRound.png" class="logo" />
        </div>

        <div class="row">
            <div class="login-wrap">
                <div class="tituloCreacion">
                    <h1>Create Your Trip</h1>
                </div>
                <form class="form-horizontal" role="form">
                    <div class="form-group">
                        <label for="inputLugar3" class="col-sm-3 control-label">
                            Traveling Destiny
                        </label>
                        <div class="col-sm-9">
                            <input type="text" class="form-control" id="inputLugar" placeholder="Traveling Destiny" required>
                        </div>
                    </div>
                   
                    <div class="form-group last">
                        <div class="col-sm-offset-3 col-sm-9">
                            <button type="button" class="btn btn-success btn-sm" id="botonCrear" onclick="crearViaje()">
                                Create Trip
                            </button>
                        </div>
                        <!--<div class="col-sm-offset-3 col-sm-9">
                            <button type="button" class="btn btn-success btn-sm" id="botonOut" onclick="logout()">
                                Log out
                            </button>
                        </div>-->
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->

    
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
    <script src="https://www.gstatic.com/firebasejs/5.9.1/firebase.js"></script>
    <script>
        // Initialize Firebase
        var config = {
            apiKey: "AIzaSyDc3tbBTQrgcjCvDRMgY1PYXBG8ssVaDxM",
            authDomain: "travelroundid.firebaseapp.com",
            databaseURL: "https://travelroundid.firebaseio.com",
            projectId: "travelroundid",
            storageBucket: "travelroundid.appspot.com",
            messagingSenderId: "58993751940"
        };
        firebase.initializeApp(config);
        var database = firebase.database();
    </script>
    <script src="js/CreacionViaje.js"></script>


</body>
</html>

Code: Select all

var inputLugar = document.getElementById("inputLugar");
var botonCrear = document.getElementById("botonCrear");

function crearViaje() {

    var database = firebase.database().ref();
    var lugar = inputLugar.value;

    database.push().set(lugar);

}

Hacer demo funcional en el dispositivo(1)

Videos de avance funcional:

https://www.youtube.com/watch?v=_Q28LYFqg84

https://www.youtube.com/watch?v=ZKZ3vM5Pfaw

Que voy a hacer?

Planear el siguiente sprint

Que problemas tuve?
No se presentaron problemas

davidvm97 · Post by **davidvm97** » Mon Apr 22, 2019 3:08 pm

SPRINT 11

Fecha Inicial: Abril 22 de 2019
Fecha Final: Abril 29 de 2019

Repositorio: https://github.com/davidvm1/travelround

Backlog:

Crear vista para ver los viajes creados (3)
Historia:Yo como usuario puedo ver esteticamente como se ve la ventana donde se ven los viajes creados
Condición de satisfacción: Tener una vista lista en cuanto a apariencia para la visualizacion de viajes creados
Implementacion de la funcionalidad de listar los viajes creados (3)
Historia:Yo como usuario puedo ver los viajes que se he creado en la aplicacion
Condición de satisfacción: Tener una funcionalidad lista donde se pueda listar todos los viajes que se han creado

Hacer demo de en el dispositivo(2)
Historia:Yo usuario puedo usar la vista que lsita los viajes que tengo en el dispositivo movil
Condición de satisfacción: La vista de listar los viajes funciona en el dispositivo movil

Velocidad Inicial: 8
Velocidad Final: 7

Burndown chart:

Que hice?

Crear vista para ver los viajes creados (3)

Code: Select all

<!doctype html>
<html lang="en">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
    <link href="css/VentanaViajes.css" rel="stylesheet" />

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <title>Creacion Viaje</title>

</head>
<body>
    <div class="container">

        <div class="row">
            <div class="col-md-4">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h3 class="panel-title">
                            Panel Default
                        </h3>
                    </div>
                    <ul class="list-group" id="listaViajes">
                        
                    </ul>
                </div>
            </div>
        </div>

    </div>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->


    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
    <script src="https://www.gstatic.com/firebasejs/5.9.1/firebase.js"></script>
    <script>
        // Initialize Firebase
        var config = {
            apiKey: "AIzaSyDc3tbBTQrgcjCvDRMgY1PYXBG8ssVaDxM",
            authDomain: "travelroundid.firebaseapp.com",
            databaseURL: "https://travelroundid.firebaseio.com",
            projectId: "travelroundid",
            storageBucket: "travelroundid.appspot.com",
            messagingSenderId: "58993751940"
        };
        firebase.initializeApp(config);
        var database = firebase.database();
    </script>
   
    <script src="js/VentanaViajes.js"></script>


</body>
</html>

Code: Select all

body {
    padding-top: 20px;
    background-color: #F7F7F7;
}

.panel > .list-group {
    margin-bottom: 0;
}

    .panel > .list-group .list-group-item {
        border-width: 1px 0;
    }

        .panel > .list-group .list-group-item:first-child {
            border-top-right-radius: 0;
            border-top-left-radius: 0;
        }

        .panel > .list-group .list-group-item:last-child {
            border-bottom: 0;
        }

.panel-heading + .list-group .list-group-item:first-child {
    border-top-width: 0;
}

.panel-default .list-group-item.active {
    color: #000;
    background-color: #DDD;
    border-color: #DDD;
}

.panel-primary .list-group-item.active {
    color: #FFF;
    background-color: #428BCA;
    border-color: #428BCA;
}

.panel-success .list-group-item.active {
    color: #3C763D;
    background-color: #DFF0D8;
    border-color: #D6E9C6;
}

.panel-info .list-group-item.active {
    color: #31708F;
    background-color: #D9EDF7;
    border-color: #BCE8F1;
}

.panel-warning .list-group-item.active {
    color: #8A6D3B;
    background-color: #FCF8E3;
    border-color: #FAEBCC;
}

.panel-danger .list-group-item.active {
    color: #A94442;
    background-color: #F2DEDE;
    border-color: #EBCCD1;
}

.panel a.list-group-item.active:hover, a.list-group-item.active:focus {
    color: #000;
    background-color: #DDD;
    border-color: #DDD;
}

Implementacion de la funcionalidad de listar los viajes creados (3)

Code: Select all

$(document).ready(function () {

    var rootRef = firebase.database().ref();

    rootRef.on("child_added", snap => {

        $("#listaViajes").append("<a href='#' class='list - group - item'>" + snap.val() + "</a>");
       


    });


});

Hacer demo de en el dispositivo(2)

https://www.youtube.com/watch?v=_nprAAW-z994

Que voy a hacer?

Planear el siguiente sprint
Corregir problema de estilos

Que problemas tuve?
El unico problema que tuve fue que en la vista creada no se estan aplicando los estilos correctamente

Actividad Día de la Tierra
Diagrama de Casos de Uso

Diagrama de Flujo

Diagrama de Tecnologias

Informe de Code review: Construapp

Hola compañero, elegi el proyecto suyo porque es similar al mio entonces puedo hacer correcciones de forma mas objetiva.

Veo que tienes una clase cemento y otra producto, seria mejor crear una clase producto y que productos individuales sean hijos de esta.
Es recomendable usar framwork7 para todas las vistas para tener mas homogeneidad de codigo
Es buena idea tener un archivo de variables
Al crear instancias de Framework7 es mejor inicializar con el nombre de la aplicacion enves de my app
Personalizar los mensajes de error

davidv.m · Post by **davidv.m** » Mon Apr 22, 2019 5:02 pm

Informe de revisión de código

Buenas tardes compañero, elegí tu proyecto porque estas trabajando con la misma plataforma, framework y lenguaje que yo.
Después de revisar el codigo, tengo estas recomendaciones:

Para mejor uso del framework te recomiento usar una carpeta donde se pongan todos los archivos de framework7.
En el archivo framework7.js en la funcion factory, las dos primeras lineas sobran.
En ese mismo archivo puedes crear otra función de rutas para no tener que ponerlas siempre.
Te recomiendo usar la capeta de los iconos de framework7 que veo que no la tienes y sirve mucho.
En el archivo framework7.css en la variable de los botones puedes usar una clase o dos ids.
Creo que la version de jquery que estas usando es muy vieja.

davidvm97 · Post by **davidvm97** » Mon May 06, 2019 10:39 am

SPRINT 12

Fecha Inicial: Abril 29 de 2019
Fecha Final: Mayo 6 de 2019

Repositorio: https://github.com/davidvm1/travelround

Backlog:

Modificar la agregacion y obtencion de viajes para usar firestore(3)
Historia:Yo como usuario puedo crear y ver viajes en tiempo real de forma eficiente
Condición de satisfacción: Hacer uso de firestore para el manejod de base de datos exitosamente
Crear funcionalidad de borrar viajes (3)
Historia:Yo como usuario puedo borrar viajes dentro de la aplicacion
Condición de satisfacción: Tener una funcionalidad borrado que elimine viaje exitosamente

Hacer demo de en el dispositivo(2)
Historia:Yo usuario puedo usar la funcion de borrar viajes en el dispositivo
Condición de satisfacción: La funcion de borrado funciona en el dispositivo

Velocidad Inicial: 8
Velocidad Final: 8

Burndown chart:

Que hice?

Modificar la agregacion y obtencion de viajes para usar firestore(3)

Codigo de vista de viajes

Code: Select all

const listaViajes = document.querySelector('#listaViajes');

//crear elementos y renderizar 
function renderViajes(doc) {

    let li = document.createElement('li');
    let lugar = document.createElement('span');
    let cross = document.createElement('div');

    li.setAttribute('data-id', doc.id);
    lugar.textContent = doc.data().place;
    cross.textContent = 'x';

    li.appendChild(lugar);
    li.appendChild(cross);

    listaViajes.appendChild(li);

    //borrar data
    cross.addEventListener('click', (e) => {

        e.stopPropagation();
        let id = e.target.parentElement.getAttribute('data-id');
        db.collection('Viajes').doc(id).delete();

    });

}

//obtener data
/*db.collection('Viajes').get().then((snapshot) => {

    snapshot.docs.forEach(doc => {
        renderViajes(doc);
    });

});*/

//real tiem listener
db.collection('Viajes').orderBy('place').onSnapshot(snapshot => {

    let cambios = snapshot.docChanges();
    cambios.forEach(cambio => {
        if (cambio.type == 'added') {

            renderViajes(cambio.doc);

        }
        else if (cambio.type == 'removed') {
            let li = listaViajes.querySelector('[data-id=' + cambio.doc.id + ']');
            listaViajes.removeChild(li);
        }
    });

});



/*$(document).ready(function () {

    var rootRef = firebase.database().ref();

    rootRef.on("child_added", snap => {

        $("#listaViajes").append("<div clas='row'><div class='col - md - 4'><a href='#' class='list - group - item'>" + snap.val() + "</a></div>" + "<div class='col - md - 4'><button type='button' class='btn btn - light'>Borrar</button id='button"  +  + "'></div></div>");

    });


});*/

Codigo de agregacion de viajes

Code: Select all

const form = document.querySelector('#agregarViajes');

form.addEventListener('submit', (e) => {

    e.preventDefault();
    db.collection('Viajes').add({

        place: form.lugar.value

    });

});


/*var inputLugar = document.getElementById("inputLugar");
var botonCrear = document.getElementById("botonCrear");

function crearViaje() {

    var database = firebase.database().ref();
    var lugar = inputLugar.value;

    database.push().set(lugar);

}*/

Crear funcionalidad de borrar viajes (3)

Code: Select all

const listaViajes = document.querySelector('#listaViajes');

//crear elementos y renderizar 
function renderViajes(doc) {

    let li = document.createElement('li');
    let lugar = document.createElement('span');
    let cross = document.createElement('div');

    li.setAttribute('data-id', doc.id);
    lugar.textContent = doc.data().place;
    cross.textContent = 'x';

    li.appendChild(lugar);
    li.appendChild(cross);

    listaViajes.appendChild(li);

    //borrar data
    cross.addEventListener('click', (e) => {

        e.stopPropagation();
        let id = e.target.parentElement.getAttribute('data-id');
        db.collection('Viajes').doc(id).delete();

    });

}

db.collection('Viajes').orderBy('place').onSnapshot(snapshot => {

    let cambios = snapshot.docChanges();
    cambios.forEach(cambio => {
        if (cambio.type == 'added') {

            renderViajes(cambio.doc);

        }
        else if (cambio.type == 'removed') {
            let li = listaViajes.querySelector('[data-id=' + cambio.doc.id + ']');
            listaViajes.removeChild(li);
        }
    });

});

Gif de la funcionalidad de borrado en tiempo real en la aplicacion y la base de datos de firebase

Hacer demo de en el dispositivo(2)

Video de prueba en dispositivo: Funcion de borrado

https://www.youtube.com/watch?v=uTvYNNnDs7w

Que voy a hacer?

Planear el siguiente sprint

Que problemas tuve?
Tengo que solucionar el problema de los estilos que no se estan aplicando en la vnetana de viajes

davidvm97 · Post by **davidvm97** » Mon May 13, 2019 12:25 pm

SPRINT 13

Fecha Inicial: Mayo 6 de 2019
Fecha Final: Mayo 13 de 2019

Repositorio: https://github.com/davidvm1/travelround

Presentacion:

Backlog:

Corregir estilos e interfaz de ventana de viajes(3)
Historia:Yo como usuario puedo ver como queda la ventana de visualizacion de viajes
Condición de satisfacción: Que la ventana de viajes sea funcional y tenga sus estilos correctos
Hacer demo en el dispositivo(2)
Historia:Yo usuario puedo usar la ventana de viajes en el dispositivo
Condición de satisfacción: La ventana de ventana de viajes funciona en el dispositivo
Crear ventana de funciones de viaje (3)
Historia:Yo como usuario puedo ver como sera la ventana de funciones de viaje
Condición de satisfacción: Tener la ventana de funciones de viaje lista

Velocidad Inicial: 8
Velocidad Final: 5

Burndown chart:

*Burndown chart para el sprint 13

Que hice?
- Corregir estilos e interfaz de ventana de viajes(3)
  
  *Captura de pantalla de la nueva interfaz de ventana de viajes
- Hacer demo en el dispositivo(2)
  
  *Video de prueba en el dispositivo
Que voy a hacer?

Planear el siguiente sprint

Que problemas tuve?
Crear ventana de funciones de viaje (3)
No se pudo hacer porque mientras estaba trabajndo salio este error y no me dejo seguir haciendolo

davidvm97 · Post by **davidvm97** » Mon May 20, 2019 8:51 pm

SPRINT 14

Fecha Inicial: Mayo 13 de 2019
Fecha Final: Mayo 20 de 2019

Repositorio: https://github.com/davidvm1/travelround

Backlog:

Crear interfaz de viaje(3)
Historia:Yo como usuario puedo ver como se ve la interfaz de viajes individuales
Condición de satisfacción: Que la ventana de viaje quede terminada
Configurar el acceso a la interfaz para cada viaje individualmente (3)
Historia:Yo como usuario puedo acceder a cada viaje individualmente
Condición de satisfacción: Que s epuede individualemtne acceder a cada viaje con sus repectivos datos
Hacer demo en el dispositivo(2)
Historia:Yo usuario puedo usar la ventana de viaje en el dispositivo
Condición de satisfacción: La ventana de ventana de viaje funciona en el dispositivo

Velocidad Inicial: 8
Velocidad Final: 8

Burndown chart:

*Burndown chart para el sprint 14

Que hice?
- Crear interfaz de viaje(3)
  
  *Captura de pantalla de la nueva interfaz de viaje
- Configurar el acceso a la interfaz para cada viaje individualmente (3)
- Hacer demo en el dispositivo(2)
  
  *Video de prueba en el dispositivo
Que voy a hacer?

Planear el siguiente sprint

Que problemas tuve?
No hubo problemas

holamundo.co

TravelRound

Re: TravelRound

Re: TravelRound

Re: TravelRound

Re: TravelRound

Re: TravelRound

Re: TravelRound