Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. PHP
Code

Construye Tu Startup: Aprobechando Bootstrap, Ajax y JQuery

by
Difficulty:IntermediateLength:MediumLanguages:
This post is part of a series called Building Your Startup With PHP.
Building Your Startup With PHP: Bootstrap Your Home Page
Building Your Startup: Using Routes for Schedule With Me

Spanish (Español) translation by Cristian Marroquin (you can also view the original English article)

Final product image
What You'll Be Creating

Este tutorial es parte de la serie Construyendo Tu Startup Con PHP en Envato Tuts+. En estas series, Te guiaré en el proceso de lanzar una startup desde el concepto hasta la realidad usando mi aplicación Meeting Planner como ejemplo de la vida real. En cada paso, estaré colocando el código de Meeting Planner como ejemplos de código abierto de los cuales puedes aprender. También abordaré problemas relacionados con las startup conforme vayan surgiendo.

Aprovechando Bootstrap, Ajax, y jQuery

Durante nuestra serie startup, Meeting Planner y Simple Planner han evolucionado en gran medida. Recientemente, He estado tratando de afinar detalles de algunas áreas para hacer que el uso del servicio para programar reuniones tenga mayor grado de facilidad.

Si recuerdas nuestro episodio Construye Tu Startup: Formularios para Agendar Dinámicos con Ajax (Envato Tuts+), Tu sabes que tan útiles pueden ser Ajax y jQuery para la usabilidad. Haciendo la programación interactiva con Ajax ha transformado la usabilidad del sitio.

Lo siguiente, quise mejorar un punto débil que he encontrado en la utilización del servicio. Francamente, consume mucho tiempo cuando envías invitaciones para sugerir múltiples opciones de fechas y horarios. Cada vez que envié una invitación para una reunión para mi propia startup, tenia que crear dos o tres opciones de fecha/horario manualmente — y eso era algo molesto.

En el episodio de hoy, Voy a guiarte a través de como hice simple el programar una reunión con muchas fechas y horarios relacionados en un solo paso. Específicamente,voy a describir como usé bootstrap, Ajax y jQuery para resolver el problema de elegir fechas y horarios. 

Bootstrap hizo fácil diseñar la característica para el escritorio, tablet y dispositivos móviles, y Ajax y jQuery lo hicieron rapido e interactivo.

Si no has probado aun Meeting Planner o Simple Planner, adelante y programa tu primera reunión. Busca el tema de este tutorial mientras eliges tus opciones de fechas y horarios.

Yo participo en los hilos de comentarios de abajo, así que dime que piensas También puedes encontrarme en Twiiter @lookahead_io. Estoy especialmente interesado si quieres sugerir nuevas características o temas para futuros tutoriales.

Como un recordatorio, todo el código de Meeting Planner esta escrito en el Framework de PHP Yii2. Si quieres aprender mas acerca de Yii2, revisa nuestra series paralela Programando con Yii2.

Diseñando la Solución

Building Your Startup - My Design Sketch for Date Time Repetition

Usando Meeting Planner con el tiempo, regularmente hubiese querido una forma de crear una serie de datos y horarios de forma consecutiva, como los siguientes tres dias a la 8:30 am o las siguientes tres semanas el miércoles a las 7 pm. Eso hace mas fácil ponerse de acuerdo con la gente cuando tienes múltiples  opciones para cuando te vas a reunir.

Mientras ahondaba en profundidad el pulir la interfaz de usuario, Finalmente tuve mi propio tiempo para enfocarme en este problema. Antes de escribir código alguno, Yo decidí vagamente esbozar lo que quería.

Decidí crear una cantidad repetitiva, tales como las próximas tres o cinco, y una unidad repetitiva, como horas, días, o semanas.

En otras palabras, digamos que estoy invitando al asistente de edición Tom McFarlin a un café y quiero ofrecerle cualquiera de las mañanas delos próximos tres días, entonces elijo dos y días para repetir después de elegir el día.

Manteniendolo Simple

No quería que la gente siempre se enfrentara con un formulario complejo solo para programar una reunión, así que separé la característica de repetición de fecha y hora con un enlace de opciones avanzadas que se muestra abajo. Tocando o dando clic en este enlace abre el formulario que se muestra debajo:

Building Your Startup - Advanced Date Time Repetition in Mobile

Comenzando Escribir Código

Para diseñar el formulario y que funcione tanto con el escritorio y dispositivos móviles, Aproveché Bootstrap. Esencialmente, Creé varas filas para el formulario con varias columnas de ancho que se colapsa en móviles. Vamos a ver.

Mucho de la magia de HTML sucede aquí, en /frontend/views/meeting-time/_form.php. Primero, aquí esta la fila con la Fecha, Hora, Duración y  el enlace de opciones avanzadas:

Al usar exitosamente dimensiones de columnas como estas en Bootstrap. la fila se extiende en el escritorio (como se ve abajo) y el mismo se colapsa en tres filas en móvil (visto arriba):

Building Your Startup - Advanced Date Time Repetition on Desktop

El jQuery toggleTimeAdvanced() para el enlace de opciones avanzadas abre el formulario de repetición al remover la clase hidden:

Nota: Todo el jQuery lo puedes encontrar en /frontend/web/js/meeting.js.

Esto también reinicia a cero la configuración de repetición cuando se cierra — esto fue una decisión de diseño para prevenir que se creen duplicados si la gente cierra el formulario de avanzadas.

Aquí esta el sub-formulario timeAdvanced:

El Bootstrap que usé aparece en una fila en escritorios y en dos filas en dispositivos móviles.

Aquí esta como se ve al agregar 3 opciones adicionales para cada dia consecutivo a las 9 am:

Building Your Startup - Advanced Date Time Repetition Form

A continuación, Actualicé la función addTime() para capturar y enviar los campos repeat_quantityrepeat_unit al controlador basado en PHP:

Las Startups son difíciles en el sentido que siempre estas corriendo para que las nuevas características estén echas. Por ejemplo, alguien (probablemente yo ya que soy el único programador) nunca ha transferido la duración seleccionada; así que, agregué eso también. Hasta el dia de hoy, todas las reuniones eran de 1 hora sin importar lo que los usuarios solicitaran. dicho lo suficiente. #startuplife.

Entonces, me cambié al código MVC basado en Yii Framework en mi /frontend/controllers/MeetingTimeController.php. Debajo, puedes ver el método AJAX actionAdd que responde a la solicitud de jQuery:

Básicamente, Creé un bucle usando un contador, $cnt, para incrementar las opciones de tiempo de inicio y de fin de la Reunión con $repeat_unit, ej. horas, días, o semanas:

Entonces aquí están mis resultados agregando tres espacios de tiempo adicionales cada día a las 9:00 AM:

Building Your Startup - Results of Date Repitition Over Four Days

Así que ahora, es mas fácil programar reuniones con la gente y ofrecerles varias fechas y horarios sucesivos como opciones para reunirse.

En conclusión

Espero que esto haya sido útil para que veas como se puede usar Bootstrap para crear mejores formularios y que se puede combinar con Ajax y jQuery para construir una experiencia simple e interactiva para tus usuarios.

Si no lo hiciste anteriormente, prueba programando una reunión en Meeting Planner con opciones repetitivas de fecha/hora y déjame saber lo que piensas.

¿Tienes tus propias opiniones? ¿Ideas? ¿sugerencias? Siempre puedes encontrarme en Twitter @lookahead_io directamente. Mira lospróximos tutoriales aquí en la serie Construye Tu Startup Con PHP.

En las próximas semanas, Voy a continuar puliendo la experiencia de usuario para hacer el servicio tan fácil de usar como sea posible. Por ejemplo, puedes notar que las notas de la reunión están ahora en su propia pestaña:

Building Your Startup - The New Discussion Tab

Y, para eliminar la confusión que estaban teniendo las personas entre la  disposición de la columna de interruptores si/no y la segunda columna de selección de lugar final, separé esta en un sub panel de botones inferior, Finalizar el horario. Solamente organizadores y participantes designados como organizadores ven este panel inferior, simplificando la vista común para los participantes típicos.

Building Your Startup - Finalize the Time via Buttons instead of Choose Switches

Bootstrap, jQuery y Ajax están atados parcial o completamente en construir ambas características también.

Espero que por ahora en las series, estés teniendo tus propias ideas de startup y pensando sobre escribir algo de código. Mantente sintonizado para aprender mas sobre como construyo y lanzo la mía.

Enlaces Relacionados

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.