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

Construye Tu Startup: Usando Rutas para una pagina Agenda Conmigo.

by
Difficulty:IntermediateLength:MediumLanguages:
This post is part of a series called Building Your Startup With PHP.
Building Your Startup: Leveraging Bootstrap, Ajax, and jQuery
Building Your Startup: Leveraging Crowdfunding

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.

Recientemente, Yo pregunte si nuestra serie de startup había inspirado a alguno de ustedes en su propias ideas emprendedoras y  a ponerte a escribir código. si es así, por favor comparte un poco con nosotros en los comentarios.

Vamos a Reunirnos, Visita Mi Pagina Agenda Conmigo

Por un largo tiempo desde que inicié este proyecto, He querido que Meeting Planner y Simple Planner tengan una pagina accesible públicamente que se pueda compartir con la gente para que programen una reunión contigo. En otras palabras, "Claro, Vamos a reunirnos, solo visita mi pagina de agenda conmigo en Meeting Planner, Soy Bernie Sanders (sin espacio)."

En el tutorial de hoy, voy a enseñarte que lo he echo usando enrutamiento de Yii y algunos de los problemas relacionados que aparecieron con ello.

Si no has probado aún programar una reunión, puedes ver como se hace en este vídeo:

La pagina Agenda Conmigo seria algo similar a la pagina Págame de PayPal:

Building Your Startup Schedule With Me - Paypal Pay Me

Yo participo en los comentarios de los temas abajo, así que cuéntenme lo ¡que piensan! También pueden encontrarme en Twitter @lookahead_io. Estoy especialmente interesado si quieres nuevas características o sugerir temas para futuros tutoriales.

Como recordatorio, todo el código para Meeting Planner está escrito en el Framework de PHP Yii2. Si te gustaría aprender mas sobre Yii2, revisa nuestra serie paralela Programando Con Yii2.

Vamos a empezar.

Planeando la Pagina Agenda Conmigo

Building Your Startup Schedule With Me - Bernie Sanders Schedule With Me

Nota: Bernie no es realmente un usuario de Meeting Planner, hasta donde yo se.

Cada usuario de Meeting Planner tiene un nombre de usuario único, ej. berniesanders, y he decidido usar esto para la URL del agenda conmigo. Hubieron algunos desafíos para esta característica:

  1. Diseñando la pagina
  2. Trabajando con el Enrutamiento de Yii para mapear una ruta principal para cada persona
  3. Manejando el registrarte, acceder, y el retorno a la agenda. 

Diseñando la Pagina

Inspirado por la pagina de Paypal Págame (arriba) y otros similares, Yo quería mantener las cosas simples inicialmente. Yo use una cuadricula responsiva con desplazamientos y centrada:

Aqui esta la vista para la pagina /frontend/views/meeting/scheduleme.php:

El código muestra la imagen de perfil que el usuario subió en la configuración del usuario o usa un Gravatar general.

Por supuesto, Usé /frontend/web/css/site.css para personalizar los margenes, bordes, y fondo:

Manejando los cambios de enrutamiento de Yii

El enrutamiento para como Yii maneja las solicitudes entrantes del navegador es manejado en /frontend/config/main.php bajo los componentes. Si no tienes cuidado al configurar esto, puedes destruir tu aplicación completa pues las solicitudes entrantes fallan y surgen las paginas de error.

Aquí esta el enrutador antes de agenda conmigo:

Ya antes he escrito un poco acerca de rutas en Como Programar Con Yii2: Comportamiento Inteligible. parte de nuestra serie Programando con Yii, y puedes leer mas trasfondo en la documentación de Yii.

En Construye Tu Startup: Reuniones Con Participantes Multiples, Escribí dos episodios sobre rutas dinámicas por nombre de usuario para URLs de reunión únicas como se muestra a bajo:

'<username>/<identity:[A-Za-z0-9_-]{8}>'=> 'meeting/identity',

Esto rompe muchas de las rutas de dos-elementos tales como meeting/[meeting_id] hasta que subí el mapeo mas dinámico sobre el para tener precedencia:

Y la ruta de cualquier elemento secundario con letras necesitaba ser definida estáticamente por que nuestras cadenas  de identidad para reuniones son de ocho caracteres, ej. features.

Rutas como features están fijas, las cuales van a un controlador sites y a una acción features como se muestra arriba. Las características restantes son mapeadas dinámicamente como en:  '<controller:\w+>/<action:\w+>'=> '<controller>/<action>',.

Intentando crear una ruta de un solo elemento dinámicamente como /[nombredeusuario], ej. https://meetingplanner.io/berniesanders, rompió muchas de las rutas de un solo elemento como https://meetingplanner.io/about y las paginas de recordatorios  https://meetingplanner.io/reminder.

Asi que empece a definir estáticamente muchas de ellas.

Aquí esta el enrutado final con las nuevas direcciónes estáticas para rutas de una sola palabra:

Y puedes revisar "la pagina de Bernie" y programar una reunión con el: 

https://simpleplanner.io/berniesanders

Nota: Meeting Planner y Simple Planner trabajan de forma intercambiable, y tengo ambos sitios para ofrecer a los usuarios múltiples marcas. Simple Planner es para encuentros sociales, y Meeting Planner es mas para cosas relacionadas con trabajo.

Manejando el Registro y Acceso desde la Pagina Agenda Conmigo. 

Mucha gente que inicialmente visita una pagina agenda conmigo no tendrán una cuenta con nosotros. Así que serán redirigidos a la pagina de registro o acceso cuando den clic en Agenda Conmigo.

Después de que se registren, queremos regresarlos a la pagina de creación de la reunión con el propietario de la pagina agenda conmigo ya agregado como participante. Usamos setReturnUrl para hacer esto:

Esto actualiza la cesión (usualmente a través de una cookie) así que después de que una persona se registre o acceda, serán retornados a la pagina del objetivo.

Aquí esta el método /frontend/controllers/MeetingController.php actionScheduleme completo:

Agregando el Propietario de la Pagina Agenda como un Participante

Aquí esta el método /frontend/controllers/MeetingController.php actionCreate:

este procesa el id de usuario propietario de la pagina agenda conmigo como $with_id para agregarlo como participante. Y también verifica primero que no este establecida ya una reunión entre las dos personas —para prevenir duplicados:

Originalmente agregue la característica para prevenir que los usuarios crearan nuevas reuniones cuando ya había otra nueva reunión vacía que habían creado anteriormente.

Viendo hacia adelante

Habrán algunas cosas sobre esta página que limpiaré en el futuro al hablar con usuarios reales y obtener una retroalimentación. quizá voy a compartir automáticamente los días y horas para reuniones mas frecuentes del usuario. Y voy a crear una configuración de usuario para desactivar tu pagina en caso de que no la quieras.

En Conclusión

Todo el trabajo que he echo recientemente con Bootstrap para crear una mejor interfaz adaptativa para Meeting Planner hizo para mi mas fácil crear rápidamente el código de la pagina agenda conmigo.

Asegurarme de que las nuevas rutas de Yii funcionaran y no rompieran nada en el sitio fue la parte mas difícil de esto. Yo también  revise todas mis llamadas Ajax para asegurar que ninguna de ellas fuera afectada.

Espero que el tutorial de hoy fuera útil par ti al aprender a personalizar las URL del sitio para tu usuario base y lo básico del enrutamiento en MVC.

¿Tienes tu propia opinión? ¿Ideas? ¿retroalimentación? Siempre puedes encontrarme en Twitter @lookahead_io directamente. Mira los próximos tutoriales aquí en la serie Construye Tu Startup Con PHP.

De nuevo, si aún no has probado Meeting Planner o Simple Planner, adelante y programa tu primera reunión.

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.