Advertisement
  1. Code
  2. Parse

Comience a construir su blog con Parse.js: Migración a su propio servidor de análisis

by
Difficulty:BeginnerLength:LongLanguages:
This post is part of a series called Building Your Blog with Parse.js.
Get Started Building Your Blog With Parse.js: Categories

Spanish (Español) translation by Elías Nicolás (you can also view the original English article)

Final product imageFinal product imageFinal product image
What You'll Be Creating

Tristemente, Parse.com se está cerrando el 28 de enero de 2017. En la serie anterior, te acompañé durante todo el viaje de construcción de un sistema de blogs desde cero. Pero todo estaba basado en Parse.com, y si todavía está usando esas técnicas, su sitio web, por desgracia, dejar de funcionar para entonces.

Si todavía te gusta Parse.js (como yo), y quieres seguir usando, hay buenas noticias. La gente encantadora allí lo hizo el código abierto así que podemos funcionar nuestra propia copia en todos los servicios populares web hosting. Este tutorial tiene como objetivo ayudarle a realizar ese cambio y migrar de Parse.com a su propio servidor de análisis en Heroku.

No soy un experto en back-end, pero esta es la manera más fácil que encontré que funcionó. Si ve algún defecto y tiene mejores métodos para compartir, definitivamente deje un comentario a continuación.

Si sigue este episodio, la migración del servidor por sí mismo no será demasiado complicada. Con Docker, es incluso muy fácil configurar un panel Parse local, por lo que todavía puede ver y jugar con sus datos con facilidad.

Sin embargo, esta serie de tutoriales se realizó en base a la versión 1.2.19 de Parse.js; con el fin de conectarse a un servidor Parse autónomo, necesitamos actualizar la aplicación para ejecutar la versión 1.9.2. En la versión 1.5.0, Parse tomó soporte para Backbone, y eso significa que necesitamos algunos cambios importantes en el código. Vamos a agregar Backbone de nuevo a la página, y con una mezcla de Parse y Backbone allí.

Es una introducción bastante larga, pero no tengas miedo. Puede que tenga que depurar aquí y allá durante la migración, pero debería estar bien. Siempre puede comprobar mi código fuente o dejar un comentario a continuación-yo y esta fantástica comunidad aquí haremos todo lo posible para ayudarle.

Configurar y migrar para analizar el servidor

Primero lo primero, vamos a empezar a hacer un servidor de Parse. Parse ya ha hecho esto muy fácil con una guía de migración detallada y una larga lista de aplicaciones de ejemplo en todas las plataformas populares como Heroku, AWS y Azure.

Te guiaré por el más fácil que conozco: el combo Heroku + mLab. Es gratuito para empezar, y siempre se puede pagar por un mejor hardware y más almacenamiento dentro del mismo sistema. La única advertencia es que la versión gratuita de Heroku "dormiría" después de estar inactivo durante 30 minutos. Así que si los usuarios visitan su sitio cuando el servidor está "durmiendo", pueden tener que esperar unos segundos para que el servidor se despierte antes de que puedan ver los datos. (Si comprueba la página de demostración de este proyecto y no proporciona ningún contenido de blog, es por eso, dale un minuto y actualízalo).

Esta parte se basa en gran medida en la guía de Heroku para la implementación de un servidor Parse y la propia guía de migración de Parse. Acabo de escoger el camino más sencillo, más infalible allí.

Paso 1: Regístrese y cree una nueva aplicación en Heroku

Si todavía no tienes una cuenta de Heroku, hazlo. Es una plataforma muy popular para desarrollar y alojar pequeñas aplicaciones web.

Una vez registrado, vaya a su Heroku Dashboard y cree una nueva aplicación, que será su servidor.

Create new appCreate new appCreate new app

Dale un nombre si quieres:

Add app nameAdd app nameAdd app name

Paso 2: Añadir mLab MongoDB

Ahora necesita una base de datos para almacenar los datos. Y vamos a agregar mLab como un complemento.

Vaya a Recursos > Complementos, busque "mLab" y agréguelo:

Add mLab MongoDBAdd mLab MongoDBAdd mLab MongoDB

Sandbox es suficiente para el desarrollo, siempre se puede actualizar y pagar más para obtener más almacenamiento allí.

Una vez que haya agregado mLab, puede agarrar el MongoDB URI de la misma.

Vaya a Configuración> Variables de configuración en su Heroku Dashboard y haga clic en Reveal Config Vars.

Get MONGODB_URIGet MONGODB_URIGet MONGODB_URI

Allí usted puede ver el MongoDB URI para su base de datos. Copiarlo, y ahora podemos comenzar a migrar la base de datos.

Paso 3: Migración de la base de datos

Vaya a Parse.com y encuentre la aplicación que desea migrar. La versión de código abierto de Parse Server sólo admite una aplicación por servidor, por lo que si desea tener varias aplicaciones, debe repetir este proceso y crear varios servidores. Ahora solo elige uno.

Dentro de esa aplicación, vaya a Ajustes de aplicación > General > Administración de aplicaciones y haga clic en Migrar.

Start MigrateStart MigrateStart Migrate

Y luego pegar en el MongoDB URI que acaba de copiar, y comenzar la migración.

Connect MongoDBConnect MongoDBConnect MongoDB

Pronto deberías ver esta pantalla:

Syne DoneSyne DoneSyne Done

Eso significa que ahora debe tener todos sus datos en su mLab MongoDB. Es bastante fácil, ¿verdad?

Pero no finalices tu aplicación todavía, vamos a esperar hasta que podamos ver y jugar con esos mismos datos desde nuestro panel de análisis local y luego volver y finalizarlo.

Paso 4: Implementar Parse Server

Ahora, con la base de datos ya migrada, podemos implementar Parse Server.

Si todavía no tienes una cuenta de GitHub, sigue adelante y haz una. Es probablemente el lugar más popular donde la gente comparte y administra su código.

Con su cuenta de GitHub, bifurca el repo oficial de Parse Server.

Fork official Parse Server example repoFork official Parse Server example repoFork official Parse Server example repo

A continuación, vuelva a su Heroku Dashboard. En el método Deploy > Deployment, elija GitHub y conéctese a su cuenta de GitHub.

Después de eso, busque analizar y busque su repositorio de ejemplo parse-server-example y conéctese.

Connect to GitHubConnect to GitHubConnect to GitHub

Si todo funciona, deberías ver que esté conectado de esta manera:

Repo ConnectedRepo ConnectedRepo Connected

Ahora, desplácese hasta la parte inferior de la página. En Distribución manual, haga clic en Desplegar rama.

Deploy BranchDeploy BranchDeploy Branch

Verá su Parse Server que está siendo desplegado, y pronto verá esta pantalla:

Successfully deployedSuccessfully deployedSuccessfully deployed

Haga clic en el botón Ver y verá esta página:

View Server PageView Server PageView Server Page

Eso significa que su servidor ahora está funcionando felizmente! Y la URL que ves es la URL de tu servidor. Lo necesitarás más tarde.

Sé que se siente increíble ver esta línea simple y saber que el servidor está en marcha. Pero créanme, el powerhouse está funcionando allí. Y tu aplicación ya puede leer y escribir.

Si desea comprobar de nuevo, puede ejecutar algo como esto:

Configurar un panel de análisis local

Si eres un ninja de línea de comandos, probablemente estarás bien desde aquí. Pero si eres como yo y disfrutas de la interfaz amigable del Parse Dashboard, sigue esta parte para configurar tu propio Parse Dashboard en tu máquina local, para que puedas ver visualmente y jugar con tus datos de Parse de la manera que estás acostumbrado.

Una vez más, puede instalar su tablero en un puñado de maneras. Sólo voy a mostrarte la forma más sencilla en mi experiencia, usando Docker.

Paso 1: Instalar Docker

Si no tiene Docker, instálelo primero (Mac | Windows).

Se pone un entorno entero en una caja, por lo que no es necesario seguir el tutorial de instalación local bastante complicado y saltar a través de aros en Terminal.

Paso 2: Generar la imagen de Parse Dashboard

Con su docker funcionando, clone el repositorio de Parse Dashboard en su computadora y entre en ese repo.

Para los principiantes absolutos de GitHub, apenas descárguelo como archivo zip.

Download Parse Dashboard RepoDownload Parse Dashboard RepoDownload Parse Dashboard Repo

Descomprimirlo y ponerlo en una ubicación que pueda recordar. Abra su aplicación de terminal si está en Mac, escriba cd  (necesita un espacio después de cd allí) y arrastre la carpeta en.

Drag in unzipped folderDrag in unzipped folderDrag in unzipped folder

A continuación, pulse Intro.

Usted debe ver algo como esto, y eso significa que usted está en el lugar correcto.

Ahora, puede comprobar rápidamente si su Docker está instalado correctamente pegando en este comando:

Si muestra la versión en la que está, de la siguiente manera:

Está instalado y puedes continuar.

Si en cambio, dice:

Debe comprobar de nuevo si ha instalado Docker correctamente.

Con Docker correctamente instalado, pegue este comando y presione Enter:

Eso le construirá una imagen local (no dude en ignorar la jerga de docker) para Parse Dashboard.

Verá muchas líneas de desplazamiento. No te asustes, solo dale un poco de tiempo, y verás que termina con algo como esto:

Eso significa que ha terminado: la imagen se ha construido con éxito.

Si ejecuta el comando docker images, lo verá allí:

Paso 3: Connect Parse Dashboard para analizar el servidor

Ahora, eso es solo una imagen, y todavía no es un servidor en ejecución. Cuando se ejecuta, queremos que se conecte con el servidor de análisis y el MongoDB que acabamos de construir.

Para ello, primero tenemos que crear unas cuantas claves en Heroku, para que pueda decirle a quién conceder acceso a los datos.

Vaya a su Heroku Dashboard y vuelva a Ajustes > Variables de configuración. Esta vez, necesitamos agregar dos variables: APP_ID y MASTER_KEY. APP_ID puede ser algo fácil de recordar, mientras que MASTER_KEY tiene que ser una contraseña realmente larga y complicada.

Add APP_ID and MASTER_KEYAdd APP_ID and MASTER_KEYAdd APP_ID and MASTER_KEY

Ahora con esas claves, podemos escribir un archivo de configuración simple en el directorio raíz de su carpeta Parse Dashboard. Puede utilizar todo desde vim a TextEdit o Notepad; el objetivo es crear un archivo de texto config.json con este contenido:

Y, por supuesto, reemplazar tu your-app-url con la URL del enlace "Ver" (la página que dice "sueño de ser un sitio web"), pero mantén la /parse allí al final; reemplace su-app-id y su-master-key con las variables de configuración que acaba de agregar; y déle un nombre a su aplicación y reemplace su your-app-name por él.

Guarde el archivo y ejecute el comando ls en Terminal para asegurarse de poner el config.json en el lugar correcto.

Si ves config.json en esta lista, eres bueno para seguir adelante.

Ahora ejecute el comando pwd para obtener el lugar en el que se encuentra:

Copia esa ruta.

A continuación, pegue este comando para crear un contenedor Docker (nuevamente, puede ignorar esta jerga) y ejecute su Parse Dashboard. Recuerda reemplazar mi camino con el camino que acabas de obtener.

De arriba a abajo, este comando hace estas cosas (que también puede ignorar):

Si todo se ejecuta, le devolverá una cadena larga sin mensaje de error. Como esta:

Y ahora su Parse Dashboard está funcionando! Compruébelo en http://localhost:8080/.

Podría ser lento y mostrar una página en blanco inicialmente, pero sólo darle un par de minutos y verá una pantalla de inicio de sesión:

Local Parse Dashboard LoginLocal Parse Dashboard LoginLocal Parse Dashboard Login

Ahora puede iniciar sesión con el user como el nombre de usuario y pasar como la contraseña pass -se define en el config.json en caso de que no se dieron cuenta antes. También puedes cambiarlos a lo que quieras.

Y usted verá esta interfaz familiar de su máquina local y puede jugar con sus datos (ahora en mLab MongoDB) de la manera que siempre lo hace.

Local Parse DashboardLocal Parse DashboardLocal Parse Dashboard

Un par de notas finales sobre este panel de control local:

En primer lugar, puede detener y iniciar este contenedor de ahora en adelante en cualquier momento con estos dos comandos:

Así que cuando reinicies tu computadora, no necesitas seguir los pasos anteriores de nuevo, solo dile que empieces de nuevo.

Y en segundo lugar, si tiene varios servidores Parse, no necesita crear múltiples paneles de Parse. Sólo tienes que agregar varias aplicaciones en el config.json así:

Cada vez que realice cambios en config.json, deberá reiniciar el contenedor de Docker:

Y entonces verás los cambios que hiciste.

Paso 4: Finalizar la migración

Ahora juega con tu nuevo Parse Dashboard, y si todo funciona, ahora puedes volver a Parse.com y finalizar la migración.

Finalize migrationFinalize migrationFinalize migration

Entonces, si comprueba sus aplicaciones y el tablero de mandos, verá que todos ellos mágicamente apuntan a su nuevo servidor sin ningún problema. </ script>Cambie a la versión más reciente:1<script src = "// npmcdn.com/parse/dist/parse.min.js"> </ script>También, vamos a agregar lodash y Backbone. Ahora que Parse ha dejado de soportar Backbone, debemos incluirlo para seguir usando las vistas y el router.

Actualizar el código para ejecutarse en Parse 1.9.2

¡Esto es genial! Ojalá pudiera permanecer así y podríamos terminar este tutorial temprano. Pero como ya he mencionado, tu antigua aplicación Parse.js sigue dependiendo de los servidores de Parse.com para apuntarlo al nuevo servidor correcto. Y dejará de funcionar después del 28 de enero de 2017.

Para que funcione para siempre (con los dedos cruzados) debemos dejar de usar las claves JavaScript para apuntar a la aplicación (que se basa en Parse.com para averiguar a qué base de datos apuntar) y apuntan directamente a nuestro servidor parse.

Paso 1: Actualizar las bibliotecas de JavaScript

Primero vamos a actualizar el archivo Parse.js que estamos utilizando en index.html.

En lugar de usar la versión 1.2.19:

Cambie a la versión más reciente:

También, vamos a agregar lodash y Backbone. Ahora que Parse ha dejado de soportar Backbone, debemos incluirlo para seguir usando las vistas y el router.

Paso 2: Señale a su servidor de análisis

Luego, vayamos a site.js.

Lo primero que hay que actualizar la función Parse.initialize() para que apunte a su propio servidor Parse.

Anteriormente podría verse así:

Ahora, apúntelo a su servidor Parse.

Paso 3: De React a Backbone

Continuando, vamos a hacer una actualización rápida para cambiar todo el Parse.View, Parse.Router y Parse.history a Backbone.View, Backbone.Router y Backbone.history. Ya no son compatibles con Parse, así que necesitamos tener un fallback.

No es lo más agradable del mundo mezclar y combinar clase Class como esa, pero si quieres hacer los cambios mínimos en tu código y hacerlo correr, esto podría ser la forma más fácil.

Paso 4: De la colección a la consulta; De fetch para find

Ahora, otra cosa que Parse dejó de apoyar es la Collection. Y es mucho más espinoso que los otros tres. Cambiar de Parse.Collection a Backbone.Collection no funcionará. Necesitamos reescribir la lógica usando las consultas de Parse.

Usaré la colección Blogs como un ejemplo para mostrarte cómo podemos actualizar nuestro blog para trabajar con el nuevo Parse.js.

Anteriormente, primero definimos una Class para Blogs:

Y luego en la función BlogRouter.start() creamos una instancia de esa clase para contener la colección de bloques.

Después de eso, llamamos a fetch() en esa colección para obtener datos de blogs. Como en BlogRouter.index():

Ahora, sólo podemos eliminar esa declaración de clase y hacer de BlogRouter.blogs una consulta de análisis:

Y cuando lo llamamos, en lugar de fetch() usamos find().

Esta parte puede tomar un tiempo ya que tenemos bastantes casos de uso diferentes sobre esta serie. Puede que tenga que depurar un poco-en este momento, incluso si los datos se buscan correctamente, la página no se procesará correctamente todavía. Si prefieres ver las cosas render mientras las arreglas, lee hasta el final, y luego empieza a cambiar tu código y depurar.

Paso 5: Compruebe los objetos de vista

Cuando todos los datos se recogen correctamente, lo siguiente que debe comprobar son los datos que pasa a los objetos View.

Anteriormente, podíamos pasar todo lo que queríamos a un objeto Ver. En este ejemplo, pasamos el nombre de username directamente a los blogsAdminView para que pudiéramos saludar a los usuarios por sus nombres de usuario.

Esto también dejaría de funcionar cuando cambiamos la View para que se amplíe desde el objeto Backbone.View. Sólo podemos pasar en model y collection ahora.

Así que tenemos que pasar en el currentUser como un modelo:

Y cambiar el BlogsAdminView en consecuencia.

Una vez más, puede que tenga que probar y depurar un poco para que todo funcione.

Paso 6: Actualizar las plantillas del manillar para adaptarse a la nueva estructura de datos

Y finalmente, entre los cambios de versión, la estructura de datos de Parse Object también cambió un poco.

Antes, cada objeto tenía este aspecto:

Ahora, esta es la nueva estructura:

Esto significa que también debemos actualizar nuestras plantillas de Handlebar para procesar los nuevos datos correctamente:

Por ejemplo, anteriormente para las categorías en la barra lateral escribimos la siguiente plantilla:

Ahora necesitamos actualizar {{objectId}} para ser {{id}} y {{name}} para ser {{attributes.name}}.

Ahora su página se procesará.

Una vez más, si usted no recuerda la lógica del sitio completamente claramente, usted puede ser que necesite saltar a través de algunos aros un poco aquí. Si te quedas atascado, siempre puedes comprobar mi código fuente.

Conclusión

Ahi tienes. Esperemos que pueda ayudarle a guardar sus datos antes de que Parse.com se apague o revivir su código cuando lo necesite. Perderá todos los datos después del 28 de enero de 2017, pero si actualiza el código, volverá a funcionar.

Una vez más, estoy increíblemente triste porque Parse.com no estará funcionando más y esta serie de tutoriales no funcionará para los recién llegados (a menos que sigan refiriéndose a esta parte final). Pero espero que ayudó a algunas personas a aprender a codificar un sitio web.

A partir de este momento, si decides migrar o aprender un nuevo idioma, es totalmente tuyo. Espero que sea un poco más fácil porque usted aprendió algunos conceptos útiles aquí.

¡Los mejores deseos! Y déjeme un comentario si encuentra esta serie útil.

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.