[MÚSICA] En este vídeo voy a hablar de la quinta y última iteración de la aplicación de blog que va a ser una parte de este curso. Sin embargo no se sorprenda si ve que la aplicación de blog vuelve a aparecer en un curso posterior. Le voy a mostrar aquí cómo añadir un poco de Ajax a la aplicación blog. A medida que lleguemos Ajax, también me gustaría refactorizar la aplicación. Vamos a echar un vistazo a nuestra aplicación de blog, yendo a app, luego views y luego vamos a ir a show html.erb. Y esto es lo que actualmente ocurre si intentamos mostrar uno de sus post, muestra el título, luego el cuerpo del post y luego habrá unos enlaces en la parte inferior de la página. Me gustaría refactorizar esto, les mostraré cómo. Me gustaría refactorizar el archivo de post show.html.erb de la siguiente forma, lo primero que quiero hacer en la parte superior es tener el código para mostrar un post particular. Debajo de esto quisiera mostrar todos los comentarios que se asocian con este post, y debajo de esto vamos a tener un formulario para añadir nuevos comentarios para este post en particular. Y luego vamos a poner los mismos enlaces en la parte inferior, la edición y enlaces de vuelta. Hay lugares en que voy a tener que cambiar algunas cosas son estos dos, tenemos el código para mostrar un post pero no tenemos el código aquí para visualizar el formulario para crear una nueva entrada. Como parte de esta refactorización voy a crear algo en Rails llamado parcial. Y un parcial es un fragmento de código vista. Lo primero que voy a hacer es el parcial para los posts, así que voy a mostrar un post para ello voy a crear un div, y este es un método de ayuda para la creación de un div. Voy a entregarlo al post y vamos a imprimir el título de la entrada, y esto está en Ruby incrustado como h2 según el encabezado y este método de aquí h lo que hace es que se escapa de HTML, así que si usted tiene cosas extrañas en el título, va a ser capaz de escapar de ellas y producir HTML adecuado para permitir que se muestren en el navegador. La siguiente línea muestra el cuerpo del post, así que de nuevo primero escapamos de HTML inseguro, simple_format producirá un formato HTML simple. Guardamos todo esto en views post en el fichero _post.html.erb. Es muy importante que los parciales tengan un guión bajo como primer carácter en su nombre de archivo. El objetivo conjunto de los parciales es refactorizar el código para crear estos fragmentos que puedan ser utilizados una y otra vez. Voy a enseñarle cómo, volviendo a nuestro show.html.erb puedo quitar todo esto código, este era el código para mostrar el título y el cuerpo y luego simplemente llamamos al parcial. Así es como se hace, simplemente render post. Y post sabe que debe buscar post.html.erb con el guión bajo antes en el subdirectorio post. Ahora vamos a crear un parcial para añadir comentarios y a continuación los post. Así que voy al directorio views comentarios y creo un archivo llamado _comment.html.erb y vamos a poner esto. Vamos a crear un div para nuestros comentarios y aquí se trata un poco de formato HTML. Lo primero dice que se trata de un párrafo que es lo que significa que pongo strong por lo que queremos que sea enfatizado, sea el estilo enfatizado y luego vamos a poner posted. Y vamos a utilizar este método de ayuda time_ago_in_words que nos dirá cuánto tiempo hace que fue creado este documento en particular y en palabras. Ahora note que no estoy utilizando el símbolo de @, esto se ve que aquí, estoy tratando con una larga lista de comentarios por lo que este div va a tener que funcionar para cada uno de estos comentarios. Vamos a utilizar este parcial ahora en nuestro método show. Así que lo colocaremos aquí, lo que voy a hacer es que voy a crear un div para todos los comentarios, voy a dar una identificación de div a todos esos comentarios y aquí está el parcial. [AUDIO EN BLANCO] Voy a llamar este parcial en cada uno de los comentarios individuales, por lo que aquí va post.comments y luego utilizaré reverse porque quiero mostrar todos los comentarios en orden cronológico inverso. El comentario más reciente debería aparecer en la parte superior y el más antiguo en la parte inferior. Vamos a seguir adelante y vamos a guardar esto, ponemos en marcha al servidor y vemos si todo sigue funcionando. Iniciamos el servidor y si voy a localhost:3000 vemos que aparece la aplicación Rails. Vamos a ver si todavía puedo ver mis posts y aquí están, y si echo un vistazo a un post determinado veremos que todo está funcionando, aquí está el título de post, el cuerpo y luego las observaciones o los comentarios en orden cronológico inverso y por último los enlaces en la parte inferior de la página. Aquí está el código por el formulario, así que vamos a utilizar el método form_for. Solo copiamos esto, vamos a explicarlo más tarde cuando tengamos una oportunidad para hablar en HTML. Voy a pasar un post y lo vamos a crear un nuevo comentario, esto va a ser la base para el formulario. Este remote true es como vamos a llamar a JavaScript. Hay una etiqueta llamada New Comment que parece [INAUDIBLE] y esto es el control. Este es el área del texto donde vamos a entrar nuestro texto para el comentario. Luego hay un botón enviar que aparecerá en la parte inferior, vamos a guardar esto y poner en marcha al servidor a ver si esto funciona ahora. Simplemente pulso actualizar para ver qué pasa, y veremos que se genera un error, hay un problema que dice que no hay ninguna ruta para post_comments_path. Le voy a mostrar la razón de esto y cómo solucionarlo. Para mostrar cuál es el problema, vaya a la red de su aplicación Rails y escriba rake routes y verá que hay un montón de rutas que están disponibles pero ninguna para post seguido de comments. Para arreglar esto, tenemos que ir al subdirectorio config y seleccionemos routes.rb y esto es lo que hay ahora. Lo que tenemos que hacer es añadir lo que se llama un subrecurso, que se describe con más detalle aquí abajo, dice que si usted va a crear sus recursos, debe hacerlo de esta manera. Y esto es lo que vamos a tener que hacer ahora debido a que un comentario es un recurso para un post. Nos gustaría crear un conjunto de rutas que sean post seguidos de comentarios. Y así es como se hacen, se abre la instrucción do y luego se anida este recurso comments dentro de esta declaración do. Volvamos a nuestra consola de sistema operativo a ver si tenemos una nueva ruta. De nuevo escriban rake routes y debería haber un montón de rutas nuevas asociadas con el subrecurso para comentarios. Y aquí están, vamos a recuperar esta página web y vemos si podemos conseguir [INAUDIBLE] correctamente. Tengo que reiniciar el servidor porque cada vez que cambio de ruta eso hay que hacerlo. Vamos a cargar esta página y ver si las cosas se han arreglado. [AUDIO EN BLANCO] Y por supuesto todo funciona, eso está mucho mejor, por lo tanto ahora tenemos nuestro propio post, tenemos los comentarios debajo de él y en la parte inferior tenemos un formulario. Hay algo más que necesitamos hacer, sin embargo con el fin de que este formulario funcione adecuadamente, recuerde que le dije que este remote true produce una llamada a JavaScript. El formato llamar al método create comments controller así que tenemos que decirle a comments controller que sea compatible con JavaScript y así es como se hace esto. Hay que ir a comments controller, desplácese hacia abajo hasta que encuentre el método de create y necesitará escribir una nueva línea llamada format.js, este llamar a un fichero llamado js.erb existe, así es que crea views comments y lo que necesita es un nuevo archivo llamado create.js.erb. Y aquí está, aquí están los comandos del jQuery que he colocado en él. La primera línea que era una nueva variable y lo que hace es representar el contenido y luego se utiliza el método j, para escapar de todo aquello que sea peligroso para JavaScript. Luego me estoy escondiendo esto, esto es un método jQuery oculto y luego voy por un nuevo comentario en el div comment que hemos creado y luego lo voy a hacer aparecer poco a poco con fadeIn slow. Así que el comentario que debajo del id comment va a aparecer lentamente de lo que da un aspecto agradable el usuario puede ver el nuevo comentario entrando. Y lo último necesario es reestablecer el formulario para que el usuario pueda introducir otro comentario. Vamos a echar un vistazo a cómo se ve en el navegador, ahora vamos a entrar un nuevo comentario y vamos a ver qué pasa. Me gustaría y luego vea que en la parte superior aparece. Miren que bien. Acabamos de añadir JavaScript a nuestra aplicación de blog. Esto está muy bien. [AUDIO EN BLANCO]
