Una Exhibición de Proyecto: All-Terrain Overland

• Cliente: All-Terrain Overland
• Duración: 6 meses
• Papel: Diseñador Web, Front-end y Back-end
• Miembros del equipo:
  • Austin (Gerente de Proyecto / Diseñador Web)
  • Branton (Diseñador Web)

El ProblemaNecesidades del Cliente

All-Terrain Overland necesita un lugar para proporcionar información sobre los senderos de todo terreno, incluida la longitud del sendero, la dificultad, las comodidades locales (supermercados, estaciones de servicio, etc.), las condiciones climáticas, las áreas cercanas que están abiertas para acampar, pescar y cazar.

Requerimientos del Cliente:

• Noticias
• Enviar / Ver Información del Sendero
• Administración del sistema y moderación del contenido enviado.

SoluciónAplicación en la Web

La solución es crear una aplicación web responsive que incluya los objetivos del cliente para proporcionar una fuente de noticias, información de seguimiento y la capacidad de administrar el sistema. El sistema de administración incluirá la capacidad de agregar artículos de noticias, pistas con sus datos secundarios asociados, agregar usuarios y asignar permisos / roles e incluir la capacidad de actualizar / eliminar cada una de esas piezas. Este será un sitio dinámico de varias páginas construido sobre el Framework de PHP, Laravel, con una base de datos en MySQL e implementado y alojado usando un servidor de Vultr.

Entregables:

• Propuesta de Proyecto
• Documento de Diseño
• Prototipo de UX/UI
• Aplicación Web Responsive

Vista General del Proceso:

• Encuentra Audiencia
• Tabla de Páginas
• Diagrama de Flujo
• Mapa del Sitio
• Estructura del sitio
• Guía de Marca
• Superficie
• Desarrollo
• Comprobación

El Proceso La Audiencia

Seguimos una metodología de sprint de 2 semanas. Cada 2 semanas tuvimos una reunión con todos los miembros del equipo presentes donde discutimos las tareas y tareas para las próximas 2 semanas. El primer paso fue encontrar la audiencia para All Terrain Overland. Realizamos investigaciones de otros sitios web / empresas con funcionalidades similares. Observamos sus audiencias, realizamos encuestas para posibles usuarios e hicimos personas para obtener una vista más detallada de varios tipos de usuarios. Nuestra investigación fue resumida por 3 personas que se diferenciaron principalmente por su experiencia. Desde un principiante principiante hasta un experimentado experimentador.

El Proceso Diagramas de Flujo y Sitemaps

Pensamos en el número total de páginas y el tipo de contenido que tendría cada página. Planeamos cada página. Cada página solo se incluía si era importante y si agregaría valor al sitio web. Este plan nos llevó al siguiente paso lógico, crear diagramas de flujo y mapas de sitio. El mapa del sitio muestra la estructura del sitio web. El mapa del sitio nos permite ver la relación de cada página. Los diagramas de flujo, por otro lado, tratan más sobre el comportamiento de un usuario que usa un sitio web. Creamos diagramas de flujo para cada usuario. Los diagramas de flujo muestran el objetivo principal de un usuario. Por ejemplo, el objetivo principal de un usuario normal es crear un rastro. El diagrama de flujo muestra qué pasos tomaría el usuario para crear un rastro.

El Proceso Estructura del sitio

Una vez que obtuvimos un mapa del sitio y supimos qué páginas debían crearse, comenzamos a hacer wireframes. El objetivo principal de los wireframes es mostrar cómo se vería el sitio web. Nuestros wireframes eran de baja fidelidad. No tenían colores, gráficos o marcas. Pasamos una gran mayoría de nuestro tiempo en esta fase porque pudimos ver si cada parte de las páginas funcionaría con nuestros personajes y diagramas de flujo.

El Proceso Composiciones de Superficie y Marca

Después de completar los wireframes, comenzamos a centrarnos en una guía de marca simple para el sitio web. Con la estructura de alambre y la guía de estilo en mano, creamos composiciones de superficie. Las composiciones de superficie son como estructuras alámbricas, pero generalmente son de alta fidelidad y están más cerca del producto final. Wireframes nos ayuda a ver cómo se verá el sitio web, pero las composiciones de superficie nos dan una idea del sitio web.

El ProcesoLaravel / MySQL

El backend fue creado usando el framework PHP Laravel y una base de datos MySQL. Laravel es un framework fantástico. La razón principal por la que me gusta Laravel es porque viene con muchas características tediosas listas para usar, como autenticación, enrutamiento, integración MySQL, motor de plantillas de página, sistema de correo electrónico, entorno de desarrollo, clases CRUD prefabricadas, roles y permisos y mucho más. El marco nos ayudó a centrarnos en la lógica del sitio web sin preocuparnos por otras cosas como la autenticación. Laravel fue la solución ideal para nosotros, ahorramos de 2 a 3 meses de trabajo.

El ProcesoAdministración

Como utilizamos Laravel, nos permitió crear un sistema de gestión de contenido personalizado. El sitio web tiene 2 vistas, la de usuario y la administrativa. La vista administrativa podría ser vista por usuarios que estaban registrados como administradores o moderadores. La vista administrativa tenía las mismas páginas que el usuario con la adición de un panel y páginas para administrar usuarios, senderos, comentarios y noticias. Utilizamos el sistema integrado de roles y permisos de Laravel. Este sistema se administró utilizando el paquete Spatie Permissions para Laravel. Teníamos 4 tipos de usuarios: invitados, usuarios registrados, moderadores y administradores. Todos los roles tenían diferentes permisos, como el administrador era el único rol que podía administrar la sección de noticias del sitio web. Los usuarios solo pueden enviar y comentar senderos. Los invitados solo pueden ver senderos y leer artículos de noticias.

El ProcesoAutenticación y Navegación

Como teníamos varios roles, cada rol tenía diferentes puntos de vista y opciones para usar en el sitio. El ejemplo más obvio es la barra de navegación. Cuando un usuario inicia sesión, la barra de navegación mostrará su nombre. Si el usuario es moderador o administrador, tendrá opciones para administrar varias partes del sitio web.

El ProcesoCrear Senderos (API de Mapas)

A lo largo del proyecto, me encuentro con muchos desafíos. El desafío más difícil fue trabajar con la API de Google Maps. Esta fue la primera vez que usó esta API e implicó una gran cantidad de código personalizado porque la API no pudo cumplir con nuestros requisitos. Tuve que leer mucha documentación de la API de Google Maps para entender cómo funcionaba. También recibí ayuda del gerente del proyecto que me llevó a la dirección correcta. Con toda la ayuda e investigación, pude completar esta parte del proyecto. Aunque no es perfecto, funciona de la manera que lo queríamos. Estoy satisfecho con los resultados del desafío. Los usuarios ahora pueden hacer clic en el mapa y la secuencia de comandos calcula la ruta del sendero y la guarda en la base de datos para que otros usuarios la vean.

ConclusiónUna experiencia de aprendizaje

Este proyecto tardó 6 meses en completarse, cumplimos con los requisitos del cliente. El cliente quedó satisfecho con los resultados. Aprendí nuevas tecnologías que puedo usar en proyectos futuros y gané más experiencia trabajando con otros.