2do departamental Desarrollo Web

Vista previa del material en texto

Instituto Politécnico Nacional
Unidad Profesional Interdisciplinaria de Ingeniería Coahuila
UPIIC
2do Deparamental
Bring Food - UPIIC
Alumno: Antony Arturo García Pérez
Docente: Dr. José de Jesús Álvarez Cuevas
Materia: Desarrollo de Aplicaciones Web
Carrera: Licenciatura en Ciencia de Datos
4to Semestre
Introducción: La pandemia nos ha dejado una gran variedad de hábitos que anteriormente no teníamos contemplamos tales como el cubre bocas y la sana distancia. Para algunas personas resultan ser tediosos, pero para otras es una oportunidad de realizar ideas que anteriormente hubieran sido desechadas.
En este proyecto propondremos de manera gráfica una solución que evitaría aglomeración a la hora de adquirir alimentos en la cafetería de alguna institución poniendo como ejemplo la UPIIC.
Proceso: Se decidió usar los framework VUEJS para la maquetación y bootstrap para sus estilos. Con una base diseñada en HTML5, CSS y JavaScript.
Se eligió VUEJS por una herramienta para el desarrollo web ya que lo que se propone con esta solución es una aplicación que pueda ser visible sin instalarse en una primera propuesta y posteriormente llevarla a aplicativo móvil.
Dentro del proyecto en VUE se agregó lo necesario para diseñar la plantilla, al ser el usuario móvil nuestro objetivo final, pensamos en poner un menú inferior dando el aspecto de una aplicativo para Smartphone. Dentro del archivo App.vue contendremos lo necesario para que funcionen las demás views.
 
También incluimos estilos personalizados que no vienen en el framework bootstrap ya que serán únicos de nuestra aplicación.
Importamos nuestra librería para llamar al framework bootsrap en nuestro archivo de javascript llamado main.js
Los views necesarios ya están creados, sin embargo no funcionarán si no los mandamos llamar, lo haremos gracias a JavaScript en el archivo index.js de la carpeta routes.
Tenemos todo listo para empezar a maquetar nuestros views y quedaron de la siguiente forma:
Home.vue
<template>
  <div class="home">
    <div class="header">
      <img class="logo" src="../assets/img/logo2.png">
      <h2 class="title">Hola <b>Diego!</b></h2>
      <div class="input">
        <input type="text" placeholder="¿Que deseas pedir hoy?... " />
        <div class="icon-input">
          <i class="bx bx-search"></i>
        </div>
      </div>
      <div >
        <img class="banner" src="../assets/img/banner.jpg">
      </div>
      <div class="combo-header">
        <div class="text">
          <h3>Combo Lunes</h3>
          <p>Hamburguesa de pollo + Coca-cola <br> por <strong class="precio">$159</strong></p>
        </div>
        <div class="img">
          <img
            src="https://images.unsplash.com/photo-1591722937570-370bf646acc7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80"
            alt=""
          />
        </div>
      </div>
    </div>
    <div class="scroll-menu">
      <div class="scroll-content">
        <div  class="avatar">
          <i><img class="categorias" src="../assets/img/aros-de-cebolla.png" alt=""></i>
          <p>Frituras</p>
        </div>
        <div  class="avatar">
          <i><img class="categorias" src="../assets/img/coca.png" alt=""></i>
          <p>Refresco</p>
        </div>
        <div  class="avatar">
          <i><img class="categorias" src="../assets/img/taco.png" alt=""></i>
          <p>Comida</p>
        </div>
        <div  class="avatar">
          <i><img class="categorias" src="../assets/img/word.png" alt=""></i>
          <p>Copias</p>
        </div>
      </div>
    </div>
    <h2>Productos más vendidos</h2>
    <div class="scroll-menu">
      <div class="scroll-content">
        <div :key="index" v-for="(item, index) in 10" class="top-products">
          <div class="top-products-img">
            <img src="../assets/img/doritos.png"
              alt=""/>
          </div>
          
          <div class="top-products-text">
            <div class="top-products-title">Doritos</div>
            <div class="top-products-price">$17.50</div>
          </div>
          <i class="bx bx-plus-medical"></i>
        </div>
        
      </div>
    </div>
  </div>
</template>
Historial
<template>
  <div class="home">
    <div class="header">
      <img class="logo" src="../assets/img/logo2.png">
      <h2 class="title"><b>Historial</b> de pedidos...</h2>
      <div class="input">
        <input type="text" placeholder="¿Deseas buscar?... " />
        <div class="icon-input">
          <i class="bx bx-search"></i>
        </div>
      </div>
      
      
    </div>
    <div class="container mt-5 mb-3">
    <div class="row">
        <div class="col-md-4">
            <div class="card p-3 mb-2">
                <div class="d-flex justify-content-between">
                    <div class="d-flex flex-row align-items-center">
                        <div class="icon">  <img style="width:100%;" src="../assets/img/doritos.png">  </div>
                        <div class="ms-2 c-details">
                            <h6 class="mb-0">Doritos</h6> <span>11:00 am</span>
                        </div>
                    </div>
                    <div  class="badge"> <span>Pendiente</span> </div>
                </div>
                <div class="mt-5">
                        <div class="progress ">
                            <div class="progress-bar" role="progressbar" style="width: 10%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
                        </div>
                        <div class="mt-3"> <span class="text1">10 min <span class="text2">para la entrega</span></span> </div>
                    </div>
               
            </div>
        </div>
        <div  class="col-md-4">
            <div  class="card p-3 mb-2">
                <div class="d-flex justify-content-between">
                    <div class="d-flex flex-row align-items-center">
                        <div class="icon">  <img style="width:100%;" src="../assets/img/cocacola.png">  </div>
                        <div class="ms-2 c-details">
                            <h6 class="mb-0">CocaCola</h6> <span>11:00 am</span>
                        </div>
                    </div>
                    <div  class="badge"> <span>Pendiente</span> </div>
                </div>
                <div class="mt-5">
                        <div class="progress">
                            <div class="progress-bar" role="progressbar" style="width: 40%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
                        </div>
                        <div class="mt-3"> <span class="text1">7 min <span class="text2">para la entrega</span></span> </div>
                    </div>
               
            </div>
        </div>
        <div  class="col-md-4">
            <div  class="card p-3 mb-2">
                <div class="d-flex justify-content-between">
                    <div class="d-flex flex-row align-items-center">
                        <div class="icon">  <img style="width:100%;" src="../assets/img/rufflesoriginal.png">  </div>
                        <div class="ms-2 c-details">
                            <h6 class="mb-0">CocaCola</h6> <span>11:00 am</span>
                        </div>
                    </div>
                    <div  class="greene"> <span>Entregado</span> </div>
                </div>
                <div class="mt-5">
                        <div class="progress">
                            <div class="progress-bar" role="progressbar" style="width: 100%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
                        </div>
                        <div class="mt-3"> <span class="text1">0 min <span class="text2">para la entrega</span></span> </div>
                    </div>
               
            </div>
        </div>
        
        
    </div>
</div>
    
  </div>
</template>
Perfil
<template>
  <div class="home">
    <div class="header">
      <img class="logo"src="../assets/img/logo2.png">
      
      <div class="container mt-4">
    <div class=" p-3">
        <div >
            <div >
                <div> 
                    <div class="d-flex flex-row mt-3"> <img src="https://i.imgur.com/rvQ3LAt.jpg" width="30%" class="rounded-circle">
                        <div class="ms-2 d-flex flex-column">
                            <div class="d-flex flex-row align-items-center">
                                <strong><h1>Diego Moreno</h1></strong> <span class="dots"></span>
                            </div> <span class="days-ago">4to LCD</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    
</div>
<div style=" width:100%; border-radius:100px;" class="btn-group-vertical">
    
   <button type="button" style="background-color:#ff8647; color:#fff; font-weight:bold;" class="btn ">
       <i style="float:left; " class="bx bx-user-circle"></i>
       <router-link to="/usuario">Perfil</router-link>
    </button>
    <button type="button" style="background-color:#ff8647; color:#fff; font-weight:bold;" class="btn "><i style="float:left;"  class="bx bx-message-rounded-dots"></i>Mensajes</button>
    <button type="button" style="background-color:#ff8647; color:#fff; font-weight:bold;" class="btn "><i style="float:left;"  class="bx bx-message-square-edit"></i>Pedidos</button>
    <button type="button" style="background-color:#ff8647; color:#fff; font-weight:bold;" class="btn "><i style="float:left;"  class="bx bx-coin"></i>PoliCoins</button>
    <button type="button" style="background-color:#ff8647; color:#fff; font-weight:bold;" class="btn "><i style="float:left;"  class="bx bx-mobile-vibration"></i>Configuracion</button>
</div>
      
<!-- Button trigger modal -->
<button  type="button" style="background-color:#86c846; color:#fff; width:100%;" class="btn" data-bs-toggle="modal" data-bs-target="#exampleModal">
  Salir
</button>
<!-- Modal -->
<div  class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div  class="modal-dialog">
    <div style="background-color:#86c846;" class="modal-content">
      <div class="modal-header">
        <h5 style="color:#fff; font-weight:bold;" class="modal-title" id="exampleModalLabel">Salir</h5>
        <button type="button" class="btn-close"  data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div style="color:#fff;" class="modal-body">
        Está seguro que desea cerrar su sesión en Bring Food
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-danger" data-bs-dismiss="modal">No</button>
        <button type="button" class="btn btn-success">Si</button>
      </div>
    </div>
  </div>
</div>
      
    </div>
    
    
    
    
    
  </div>
</template>
Correremos nuestro proyecto dentro de CMD con el comando npm run serve:
 
Conclusión: Gracias a VUEJS podemos realizar proyectos ambiciosos que nos hagan llegar a un gran número de usuarios gracias a que podemos desplegarlo en navegador tanto como en móvil gracias a IONIC.