Enrutamiento avanzado - respondiendo una pregunta

Clase 22 de 35 • Curso de Node.js con Hapi

Resumen

Para crear la funcionalidad de respuesta, creamos un método nuevo en el modelo de preguntas llamado answer. Este método nos permitirá insertar con push el objeto con la respuesta individual para una pregunta que será almacenada en un arreglo child llamado answers.

Luego definimos el método respectivo en el controlador de las preguntas y creamos la ruta que manejará el envío de las respuestas desde el formulario.

Es importante tener en cuenta que el ID de la pregunta que estamos respondiendo, corresponde a un input de tipo hidden en la vista, por lo que debemos asignar apropiadamente su valor a partir del key recibido en la ruta.

Finalmente, actualizamos la vista de detalles de pregunta, recordando que las respuestas son un arreglo en la base de datos de Firebase, por lo que deberemos recorrerlo igualmente con la instrucción {#each ... } ... {/each} de handlebars.

Para el conteo de las respuestas crearemos un helper personalizado de handlebars y lo registraremos en el index.js con el método .registerHelper( ‘<nombre helper>’, <función helper> ). Los helpers son funciones de JavaScript que están disponibles globalmente en la aplicación para ser incluídas en cualquiera de las vistas.

Julio J Yépez

student•

En el helper del conteo, pudiéramos validar si el arreglo de respuestas viene en null para devolver 0, y así no tendríamos que incluir el tag #if en la plantilla.

Julio J Yépez

student•

Por cierto en el helper usamos Object.keys( answers ).length y no answers.length porque answers no es realmente un arreglo simple sino más bien una lista o colección, y ésta no dispone directamente de la propiedad length, por lo que hay que usar este artificio de crear un arreglo de llaves a partir de la colección y luego sí, acceder a la propiedad length de dicho arreglo.

Jecsham Castillo

student•

Tienes razón

Henry Tabima Giraldo

student•

no sería mejor crear un modelo para “answer” ?

Adrian Estrada

teacher•

Tienes razón, pero por tiempo en el curso no es conveniente, seria otra clase adicional de solo repaso

Annderson Rey Sánchez

student•

Para evitar el if dentro del archivo index.hbs podemos poner el siguiente código en el index.js

handlerbars.registerHelper('answerNumber', (answers) =&gt; {
  if (!answers) return 0;
  const keys = Object.keys(answers).length;
  return keys;
});

en el archivo index.hbs solo agregamos esto

{{answerNumber question.answers}}

Carlos Pinto

student•

Excelente aporte buen hombre, muchas gracias!

Francisco Garcia [C6]

student•

controller.question.js

'use strict'

const questions = require('../models/index').questions

async function createQuestion(req, h) {
    let result

    try {
        result = await questions.create(req.payload, req.state.user)
        console.log(`Pregunta creada con el ID: ${result}`)
        return h.response(`Pregunta creada con el ID: ${result}`)
    } catch (error) {
        console.error(`Ocurrio un error: ${error}`)

        return h.view('ask', {
            title: 'Crear pregunta',
            error: 'Problemas creado la pregunta'
        }).code(500).takeover()
    }
}

async function answerQuestion(req, h) {
    let result
    try {
        result = questions.answer(req.payload, req.state.user)
        console.log(`Respuesta creada: ${result}`)
    } catch (error) {
        console.error(error)
    }

    return h.redirect(`/question/${req.payload.id}`)
}

module.exports = {
    createQuestion: createQuestion,
    answerQuestion: answerQuestion
}

models.questions.js

'use strict'

class Quiestions {
    constructor(db) {
        this.db = db
        this.ref = this.db.ref('/')
        this.collection = this.ref.child('questions')
    }

    async create (data, user) {
        const ask = {
            ...data
        }
        ask.owner = user
        const question = this.collection.push()
        question.set(ask)

        return question.key
    }

    async getLast(amount) {
        const query = await this.collection.limitToLast(amount).once('value')
        const data = query.val()
        return data
    }

    async getOne (id) {
        const query = await this.collection.child(id).once('value')
        const data = query.val()
        return data
    }

    async answer (data, user) {
        const answers = await this.collection.child(data.id).child('answers').push()
        answers.set({
            text: data.answer, 
            user: user
        })
        return answers
    }
}

module.exports = Quiestions

Alejandro Adrián Mendieta Troche

student•

A la funcion answerQuestion agregué un if() que evalúa si el usuario está o no está logueado. Si no lo esta, lo redirecciona al login.

async function answerQuestion (req, h) {
  if (!req.state.user) {
    return h.redirect('/login')
  }
  let result
  try {
    result = await questions.answer(req.payload, req.state.user)
    console.log('Respuesta creada' + result);
  } catch (error) {
    console.error(error);
  }

  return h.redirect('/question/' + req.payload.id)
}```

Carlos Difilippo

student•

Podrías mostrar el formulario de respuesta si esta logueado y sino un mensaje algo así como "Para responder a esta pregunta inicia sesión" y hasta podrías poner un mini form de login ahí mismo...

Naldo Duran

student•

✌

Naldo Duran

student•

😊✌

Juan Carlos García Esquivel

student•

Modifique un poco el código y quedo así: index.js

handlebars.registerHelper('answerNumber', (answers) =&gt; {
  if (answers === undefined) {
    return 0;
  }
  const keys = Object.keys(answers);
  return keys.length;
});

index.hbs

&lt;h3&gt;
  {{answerNumber question.answers}}
&lt;/h3&gt;

Gustavo César Ramírez Bautista

student•

Me sigue gustando más como se ve con pug... El punto es que pug acepta bloques de código dentro de la vista

extends ./layout/layout

block content
  main.container-fluid(role="main")
    .jumbotron.bg-white
      .container
        h1.display-3 FAQ
        p
          | The best place to learn and for those who are learning, ask a question
          | to clarify your doubts and share your knowledge if you know the answer

    .container
      h2.mb-4 Last Questions
      if questions 
        each q, key in questions
          .card.bg-white.mb-3
            .card-body
              .row
                .col-2.text-center
                  a.text-dark(href="#")
                    -
                      let numAns = 0;
                      if(q.answers){
                       numAns = Object.keys(q.answers).length
                      }
                    h3=numAns
                    | Answers
                .col-10.d-flex.align-items-stretch
                  h4.mt-3
                    a.text-dark(href="/question/"+key)= q.title
          hr
      else 
        .card.bg-white.mb-3
          .card-body
            .row
              .col-2.text-center
                h3 
              .col-10.d-flex.align-items-stretch
                h4.mt-3= error

block footer
  include ./partials/footer
block scripts
  include ./partials/scripts

Diego Andres Cabrera Rojas

student•

no es malo tener el id en el input vacio , ya que se puede ver en inspeccionar > elementos ?, o si hay ?

Jose Daniel Molina

student•

En el modelo de questions, en la funcion getOne, pueden modificar data.answers para que quede ordenado, siguiendo el ejemplo de un compañero de la clase anterior quedaría así.

  async getOne(id){
    const query = await this.collection.child(id).once('value');
    const data = query.val();
    const orderedAnswers = {};
    Object.keys(data.answers).reverse().map(key => orderedAnswers[key] = data.answers[key]);
    return {
      ...data,
      answers: orderedAnswers,
    };
  }```

Jorge Méndez Ortega

student•

me agrado la funcion que tiene handlerbars, me gustaria aplicar esa parte con express js

Enrutamiento avanzado - respondiendo una pregunta

Introducción

Qué necesitas para este curso y qué aprenderás sobre Node.js con Hapi

Conceptos principales de hapi y creación de nuestro primer servidor

Breve historia y estado actual

Creando un sitio básico con Hapi

El objeto h, response y sus herramientas

Uso de plugins - Contenido estático

Plantillas con Handlebars

Renderizado de vistas - Layout y template del home

Recibiendo parámetros en una ruta POST - Creación del registro

Definir una mejor estructura con buenas prácticas en Hapi

Validando la información - Implementando Joi

Introducción a Firebase

Creando un modelo y guardando en firebase

Implementando el login y validación del usuario

Autenticación de usuarios - Cookies y estado

Manejando errores

Visualización de errores

Controlar el error 404 en inert y el error de validación

Repaso - Creación del modelo y controlador para preguntas

Repaso - Creación de las rutas para crear preguntas

Listar las últimas preguntas en el home

Aplicacion de conceptos avanzados

Enrutamiento avanzado - visualizando una pregunta

Enrutamiento avanzado - respondiendo una pregunta

Generando la lógica de la plantilla según si es creador o contribuidor

Métodos de servidor - respuesta correcta

Usando métodos de servidor

Manejo del caché - Agregando el home al caché

Procesamiento de archivos - Aceptando imágenes

Logging con Good - Monitoreando el servidor

Creación de plugins - Teoría

Creación de plugins - Implementando un API REST

Estrategías de autenticación - Asegurando el API REST

Seguridad básica - Asegurando el servidor contra CSRF

Seguridad básica - Asegurando el servidor contra XSS

Herramientas de desarrollo

Depuración del proyecto

Ecosistema de Hapi