KeystoneJS (Node.js CMS & Web Application Platform)

Akash_Kuber_Square

Akash Kuber

18 de Enero 2018

Introducción de KeystoneJS

KeystoneJS es un marco de gestión de contenido genérico, lo que significa que puede utilizarse para desarrollar una variedad de aplicaciones web que utilizan Javascript. Es especialmente adecuado para el desarrollo de aplicaciones a gran escala como portales, foros, sistemas de gestión de contenido (CMS), proyectos de comercio electrónico y servicios web RESTful debido a su arquitectura modular y la separación limpia de diversas funcionalidades. KeystoneJS es un poderoso sistema de administración de contenido Node.js y un marco de aplicación web basado en express y mongoose. Keystone facilita la creación de sitios web y aplicaciones sofisticadas y viene con una hermosa interfaz de usuario del administrador generada automáticamente.

¿Por qué usar KeystoneJS?

KeystoneJS proporciona un conjunto estandarizado de componentes que permiten el desarrollo rápido y sencillo de aplicaciones web que pueden desarrollarse, mantenerse y extenderse rápidamente. KeystoneJS tiene una serie de características claves que hacen que valga la pena usar, incluyendo:

  • Modularidad – Keystone configurará express (el servidor web de facto para node.js) por usted y se conectará a su base de datos MongoDB utilizando Mongoose, el cual es el paquete líder de ODM.
  • Interfaz de usuario del administrador generada automáticamente – ya sea que la use mientras construya su aplicación o en producción como un sistema de administración de contenido de base de datos, la IU de administrador de Keystone le ahorrará tiempo y facilitará la administración de sus datos.
  • Gestión de sesiones – Keystone viene lista para usar con funciones de administración de sesiones y autenticación de características, incluido el cifrado automático para campos de contraseña.
  • Envío de correo electrónico – Keystone facilita la configuración, la vista previa y el envío de correos electrónicos basados en plantillas para su aplicación. También se integra con Mandrill.
  • Procesamiento de formularios – ¿desea validar un formulario, subir una imagen y actualizar su base de datos con una sola línea? Keystone puede hacerlo, según los modelos de datos que ya haya definido.
  • Campos de base de datos – ID, Strings, Booleans, fechas y números son los componentes básicos de su base de datos. Keystone se basa en estos tipos de campos útiles y reales como nombre, correo electrónico, contraseña, dirección, imagen y campos de parentesco

Instale el generador

Utilizará el generador KeystoneJS creado con Yeoman. En su directorio raíz ejecute:
npm install -g generator-keystone

Cree una carpeta para su proyecto

Cree su proyecto donde quiera:
mkdir my-test-project
Luego asegúrese de estar en su proyecto nuevo:
cd my-test-project

Ejecute el nuevo generador de proyectos

yo keystone
El generador le hará algunas preguntas sobre las características que le gustaría incluir, luego configurará y copiará todos los archivos que necesitará en su proyecto.
También instalará dependencias de npm para que esté listo para comenzar.

Ejecútelo en su línea de comandos de esta manera:

node keystone
Luego abra http://localhost:3000 para verlo en su navegador.

Estructura del proyecto

Con su paquete y web scripts en su lugar, es hora de andamiar los contenedores para el resto de su aplicación. Cree la siguiente estructura de directorio:
|--lib
| Custom libraries and other code
|--models
| Your application's database models
|--public
| Static files (css, js, images, etc.) that are publicly available
|--routes
| |--api
| | Your application's api controllers
| |--views
| | Your application's view controllers
| |--index.js
| | Initialises your application's routes and views
| |--middleware.js
| | Custom middleware for your routes
|--templates
| |--includes
| | Common .jade includes go in here
| |--layouts
| | Base .jade layouts go in here
| |--mixins
| | Common .jade mixins go in here
| |--views
| | Your application's view templates
|--updates
| Data population and migration scripts
|--package.json
| Project configuration for npm
|--web.js
| Main script that starts your application
También le recomendamos que su aplicación sea más simple de crear y mantener si usted refleja la estructura interna de sus directorios rutas/vistas y plantillas/vistas tanto como sea posible.

Modelos

Antes de que pueda iniciar su aplicación Keystone, necesitará algunos modelos de datos. Comenzaremos con el modelo de usuario, que es especial; lo necesitamos para que Keystone pueda realizar la autenticación y la administración de la sesión. Cree los siguientes dos archivos en la carpeta /models models/index.js

Esta es la secuencia de comandos que incluye sus modelos. No necesita exportar nada.
require('./users.js');

models/users.js

Este script inicializa el modelo de Usuario. No necesita exportar nada, pero el modelo debe estar registrado con Keystone.
var keystone = require('keystone'),
 Types = keystone.Field.Types;
var User = new keystone.List('User');
User.add({
 name: { type: Types.Name, required: true, index: true },
 email: { type: Types.Email, initial: true, required: true, index: true },
 password: { type: Types.Password, initial: true },
 canAccessKeystone: { type: Boolean, initial: true }
});
User.register();

Autenticación y administración de sesiones

Para que Keystone proporcione autenticación y administración de sesión a su aplicación, se necesita saber algunas cosas (que ahora hemos configurado).

Resumen:
  • El opción modelo de usuario  debe ser el nombre del modelo que Keystone debe buscar para encontrar a sus usuarios. Si usa un nombre de modelo diferente, asegúrese de establecer la opción correctamente.
  • Si desea que su aplicación sea compatible con la gestión de la sesión, establezca la opción de sesión  en verdadero. Las sesiones de carga generan una pequeña sobrecarga, por lo que si su aplicación no necesita sesiones, puede desactivarla
  • Keystone tiene vistas integradas para iniciar y cerrar sesión. Para habilitarlas, establezca la opción de autenticación en verdadero. También puede implementar personalización de pantallas de inicio y cierre de sesión en las vistas de sus aplicaciones.
  • Las sesiones se conservan utilizando una cookie encriptada que almacena la identificación del usuario. Asegúrese de configurar la opción secreta de cookies en un string largo y aleatorio.
  • El modelo de usuario debe tener una propiedad canAccessKeystone (que puede ser un método virtual o un booleano almacenado) que indique si un usuario puede acceder a la IU de administración de Keystone o no. *Nota* Si elige usar un método virtual, configurar directamente el valor mongodb no se autenticará correctamente. Un método virtual es útil cuando los criterios de acceso son más complejos. Ver Mongoose virtuales

Rutas

Nuestro primer controlador de vista va a ser muy simple, simplemente renderizando una plantilla o modelo. Cree un archivo routes/views/index.jscomo este: routes/views/index.js

El controlador de ruta para nuestra página de inicio
var keystone = require('keystone');
exports = module.exports = function(req, res) {
 var view = new keystone.View(req, res);
 view.render('index');
}

Plantillas o Modelos

Ahora, para la plantilla, se representará nuestra ruta. El método de renderización method se ve en el directorio de vistas especificado en nuestro web.js, que configuramos en /templates/view. Primero, cree templates/views/index.jade: templates/views/index.jade

La plantilla para nuestra página de inicio
extends ../layouts/base
block content
 h1 Hello World

Middleware de ruta común

Al poner su middleware común en un archivo separado de routes/middleware.js mantiene su índice de ruta agradable y limpio. Si su archivo de middleware se vuelve demasiado grande, es una buena idea reestructurar cualquier funcionalidad significativa en módulos personalizados en su carpeta /lib

Funciones de Middleware

Keystone espera que las funciones de middleware acepten los siguientes argumentos:
  • req – un objeto de solicitud express
  • res – un objeto de respuesta express
  • next – el método para llamar cuando el middleware ha terminado de ejecutarse (incluidas las devoluciones de llamada internas)

Soporte de mensajes flash (no, no ese flash)

Keystone incluye soporte para mensajes ‘intermitentes’ a sus visitantes a través de la sesión. La configuración predeterminada anterior admite cuatro categorías, todas las cuales se pueden diseñar de forma diferente:
  • información
  • éxito
  • advertencia
  • error

Puede fácilmente soportar otros tipos de mensajes actualizando su middleware y la plantilla .jade que los representa (que veremos a continuación). Para usar mensajes flash en sus controladores de ruta, haga esto: req.flash('info', 'Some information!');

Bienes públicos

Deberá agregar su propio css, javascript, imágenes y otros archivos a su proyecto. En los ejemplos anteriores, estamos incluyendo /styles/site.min.css y /js/lib/jquery-1.10.2.min.js.
Keystone servirá cualquier activo estático que coloque en el directorio público. Esta ruta se especifica en web.js mediante la opción estática.
También generará automáticamente archivos .css or comprimidos .min.css cuando se encuentre un archivo .lesscorrespondiente en la carpeta pública, como se especifica en web.js con la opción less. Para obtener más información sobre LESS, consulte lesscss.org.

Producción vs. Desarrollo

Keystone aplica diferentes configuraciones en los modos de producción y desarrollo. El entorno estará predeterminado para el desarrollo, por lo que debe establecer la variable de entorno NODE_ENV para producción en sus servidores de producción para un mejor rendimiento. Su aplicación puede detectar en qué entorno se está ejecutando llamando a keystone.get(‘env’). Cuando implemente su aplicación KeystoneJS para producción, asegúrese de establecer su variable de entorno ENV para producción. Puede hacer esto configurando NODE_ENV=production en su archivo .env, que se maneja mediante dotenv.

Crear un usuario administrador

Para empezar, necesitaríamos un usuario para administrar el sitio. KeystoneJS incluye un código para la creación de un usuario administrador por defecto cuando la aplicación se inicia por primera vez. El usuario se crea utilizando el marco de actualizaciones provisto por KeystoneJS. Las actualizaciones proporcionan una manera fácil de inicializar su base de datos, transferir datos cuando cambian sus modelos o ejecutar scripts de transformación en su base de datos.
El administrador predeterminado se crea con el siguiente código que se almacena en/updates/0.0.1-admins.js con las siguientes credenciales :
  • correo electrónico – user@keystonejs.com
  • contraseña – admin
1 exports.create={
2 User:[
3 {'name.first':'Admin','name.last':'User',email:'user@keystonejs.com',
4 password:'admin',isAdmin:true}
5 ]
6 };

El sitio de administración de KeystoneJS

Inicie nuestra aplicación utilizando el comando node keystone.js y abra http://127.0.0.1:3000/keystone/signin en su navegador. Debería ver la página de inicio de sesión de administración que se muestra a continuación.

keystone-js-1
Inicie sesión usando las credenciales del usuario creado en el paso anterior.

Agregando dinámicamente columnas a la interfaz de usuario del administrador

Una de las características más útiles para mirar datos en la interfaz de administración es la capacidad de agregar dinámicamente las columnas que nos interesan sin tener que modificar la definición del modelo en el código. El menú desplegable de columnas en la parte superior derecha enumera todos los campos definidos en nuestro modelo. Las columnas que se han enumerado en la opción de columnas predeterminadas aparecerán con marcas al lado de ellas. A continuación, podemos elegir las columnas adicionales con las que estamos interesados trabajar.

Keystone-js-columns

Si se eligió un campo personalizado, se agregará al final de los encabezados de las columna mostradas. Podemos restablecer la lista de columnas mostradas al estado original utilizando la opción ‘Restablecer a predeterminado’ que aparecerá en el menú desplegable una vez que se hayan seleccionado una o más columnas.

Deshabilitar la interfaz de usuario de administrador

Puede desactivar la interfaz de usuario de administrador configurando la opción sin cabeza (sin encabezado) en verdadero. Esto le permitirá utilizar keystone.start() o keystone.routes(app) sin que Keystone cree enlaces de ruta para las rutas de la interfaz de usuario de administrador en /keystone

Servicios

Google Analytics
Keystone tiene soporte para el seguimiento de Google Analytics en la interfaz de usuario del administrador. Para habilitar el seguimiento, configure las siguientes opciones de configuración:
ga property String
Your Google Analytics Property
Will default to process.env.GA_PROPERTY
ga domain String
Your Google Analytics Domain
Will default to process.env.GA_DOMAIN

Google Maps

El tipo de campo de ubicación de KeystoneLocation field type admite la integración con Google Maps API para mejorar automáticamente los valores (incluido el descubrimiento de latitud y longitud) a través de Places Autocomplete API.
Para habilitar estas características, obtenga una clave API de Googley habilite las API de Google Maps v3 y Google Places, luego configure las siguientes opciones:
keystone.set('google api key', 'your-browser-key');
keystone.set('google server api key', 'your-server-key');
keystone.set('default region', 'au'); // optional, will limit autocomplete results to Australia

Amazon S3

KeystoneJS es compatible con Amazon S3para carga de archivos y alojamiento con el tipo de campoS3File.Para usar el campo S3File en su aplicación, regístrese para una cuenta, cree un bucket S3 y obtenga su clave y su secreto. A continuación, establezca la opción de s3 config para un objeto que contenga su configuración(observe el ejemplo a continuación)Alternativamente, configure la variable de entorno S3_BUCKET,S3_KEYS3_SECRET

.

keystone.set('s3 config', { bucket: 'my-bucket', key: 'my-key', secret: 'my-secret' });

Almacenamiento de Windows Azure

KeystoneJS es compatible con Windows Azure Storage e para la carga de archivos y alojamiento, con el tipo de campo AzureFile. Para usar el campo AzureFile en su aplicación,  registrese para obtener una cuenta, ingrese en el portal Azure Management . Cree una cuenta de almacenamiento con nuevo (botón), servicios de datos, almacenamiento. En la página de la cuenta de almacenamiento obtenga el acceso (nombre de la cuenta, clave (clave primaria o secundaria)) con el botón “manage access key”. A continuación, establezca la opción de azurefile config para un objeto que contenga su configuración.

keystone.set('azurefile config', { account: 'my storage account', key: 'secret api key' });

Cloudinary

Cloudinary es un servicio de carga / cambio de tamaño / alojamiento de imágenes que facilita la implementación de la administración de imágenes en su aplicación KeystoneJS utilizando los tipos de campo CloudinaryImage y CloudinaryImages. Para usar los campos de imagen de Cloudinary en su aplicación, regístrese para obtener una cuenta (Cloudinary ofrece un nivel gratis con hasta 500MB de almacenamiento, 50,000 imágenes y 1GB de transferencia de datos) y obtenga su nombre de nube, clave de API y API secretas.
Si está atendiendo a través de HTTPS y desea asegurarse de que las imágenes de la nube también se almacenen en servidor a través de HTTPS, configure la cloudinary securecomo verdadera..
keystone.set('cloudinary config', { cloud_name: 'my-cloud', api_key: 'abc', api_secret: '123' });
// or
keystone.set('cloudinary config', 'cloudinary://api_key:api_secret@cloud_name' );
// optional, will prefix all built-in tags with 'keystone_'
keystone.set('cloudinary prefix', 'keystone');
// optional, will prefix each image public_id with [{prefix}]/{list.path}/{field.path}/
keystone.set('cloudinary folders', true);
// optional, will force cloudinary to serve images over https
keystone.set('cloudinary secure', true);

Embed.ly

Embed.ly es un servicio que analizará una url (por ejemplo, el enlace de inserción de YouTube) y devolverá una gran cantidad de información útil, como el nombre del proveedor, metadatos de resumen, ancho y alto de los videos, así como un enlace limpio para usar por incrustamiento de medios en sus puntos de vista. Ofrecen un plan gratuito de hasta 5.000 urls por mes. El Embedly field type es una manera fácil de integrar su API con su aplicación KeystoneJS. Para configurar KeystoneJS para admitir la API de Embed.ly, simplemente regístrese para obtener una cuenta, obtenga su clave de API y configure la opción embedly api key.
Esta opción tendrá como valor predeterminado la variable de entorno EMBEDLY_API_KEY si está configurada.
keystone.set('embedly api key', 'your-key');

Mandrill

Mandrill es un servicio de infraestructura de correo electrónico escalable y asequible que le permite enviar correos electrónicos fácilmente. Ofrecen un plan gratuito de hasta 12,000 correos electrónicos por mes. Para configurar KeystoneJS para admitir la API de Mandrill, simplemente regístrese para obtener una cuenta, obtenga su clave de API, y configure las opciones de nombre de mandrill api key y usuario mandrill. Estas opciones se establecerán de forma predeterminada en la variable de entorno MANDRILL_API_KEY y MANDRILL_USERNAME si está configurada.
keystone.set('mandrill api key', 'your-key');
keystone.set('mandrill username', 'your-username');

 

Request a quote