diff --git a/docs/guias/glitch.md b/docs/guias/glitch.md new file mode 100644 index 0000000..339cb65 --- /dev/null +++ b/docs/guias/glitch.md @@ -0,0 +1,187 @@ +# Alojando una aplicación en Glitch + +### ¿Qué es Glitch? + +**Glitch** es un host con editor online integrado ademas de ser muy fácil de usar. + +## Primeros pasos + +Deberemos crearnos una cuenta de **Glitch**. + +Le damos a `Sign in`. + +![20191105_160659](https://user-images.githubusercontent.com/53679397/68250465-980c1380-ffe6-11e9-959c-334ebae57179.png) + +Y nos saldrá esto. + +![20191105_160337](https://user-images.githubusercontent.com/53679397/68250545-bc67f000-ffe6-11e9-8015-f29cb993fab4.png) + +Podemos iniciar sesión con Facebook, GitHub, Google o crear una cuenta directamente desde ahí. + +Luego debemos ir a la parte de `New Project`. + +![20191105_161118](https://user-images.githubusercontent.com/53679397/68250752-3a2bfb80-ffe7-11e9-95bf-c2a59df8640a.png) + +Y nos saldrá esta pestaña donde le daremos a `hello-express`. + +![20191105_161139](https://user-images.githubusercontent.com/53679397/68250789-516ae900-ffe7-11e9-8190-79d88fe3d0ae.png) + + Y ya tendriamos nuestro primer proyecto. + +## Comenzando a programar + +Ahora que tenemos nuestro proyecto podemos comenzar a programar. + +Nos aparecera lo siguiente. + +![20191105_161456](https://user-images.githubusercontent.com/53679397/68250933-b0c8f900-ffe7-11e9-9436-a8821c73ad88.png) + +Esto solo una explicación que Glitch nos da. + +Después debemos darle acá. + +![20191105_161627](https://user-images.githubusercontent.com/53679397/68251014-e53cb500-ffe7-11e9-9281-a1e68370a687.png) + + Y aparecera lo siguiente. + +![20191105_161714](https://user-images.githubusercontent.com/53679397/68251067-01d8ed00-ffe8-11e9-9ecd-75853152e2e4.png) + +Iremos a `package.json`. + +![Screenshot_20191105-162641](https://user-images.githubusercontent.com/53679397/68251760-6ba5c680-ffe9-11e9-809a-a84244b72294.jpg) + +Le damos a `add package`. + +![Screenshot_20191105-150825](https://user-images.githubusercontent.com/53679397/68251815-85dfa480-ffe9-11e9-8f6a-d9516bcec3c5.jpg) + +Y buscamos discord.js le damos click y listo. + +![Screenshot_20191105-151133](https://user-images.githubusercontent.com/53679397/68251948-d525d500-ffe9-11e9-85cb-b254a99d316a.jpg) + +Luego iremos a la parte de `new file`. + +![20191105_161816](https://user-images.githubusercontent.com/53679397/68251160-29c85080-ffe8-11e9-9f4b-7d26381e7223.png) + +Y crearemos un archivo llamado `watch.json`. + +![Screenshot_20191105-162015](https://user-images.githubusercontent.com/53679397/68251304-76ac2700-ffe8-11e9-909b-8f69aa85d602.jpg) + +En este archivo pondremos lo siguiente. + +``` +{ +"install": { + "include": [ + "^package.json$", + "^.env$" + ] +}, + +"restart": { + "exclude": [ + "^public/", + "^dist/" + ], + + "include": [ + ".js$", + ".json" + ] +}, +"throttle": 900000 +} +``` + +Esto lo que hara es que cuando editemos algo no se guarde hasta 15 minutos después. + +Y ya tendriamos lista la parte de configuración + +## Comenzamos en serio + +Después de haber configrado todo debemos de ir a `server.js` (le podemos cambiar el server por cualquier otra cosa) donde empezaremos con el código. + +![Screenshot_20191105-163425](https://user-images.githubusercontent.com/53679397/68252191-7b71da80-ffea-11e9-9697-b5c2e395b234.jpg) + +Borraremos todo lo de `server.js`. + +![Screenshot_20191105-163446](https://user-images.githubusercontent.com/53679397/68252205-8462ac00-ffea-11e9-9914-b1208f1a78f0.jpg) + +Y pondremos lo siguiente. + +``` +const http = require('http'); +const express = require('express'); +const app = express(); + +app.use(express.static('public')); + +app.get("/", function (request, response) { + response.sendFile(__dirname + '/views/index.html'); +}); + +app.get("/", (request, response) => { + response.sendStatus(200); +}); + +app.listen(process.env.PORT); + +setInterval(() => { + http.get(http://${process.env.PROJECT_DOMAIN}.glitch.me/); +}, 280000); +``` + +Esto hara que su aplicación no se "duerma" (ya que las aplicaciones de Glitch se apagan después de 5 minutos). + +Después de haber agregado el código anterior podremos pasar el código del bot a este archivo. + +## Asignando monitores de Uptime Robot + +Aunque hayamos agregado el código para que no se "duerma" la aplicación se va seguir apagando. + +Lo que tendremos que hacer es darle a esa aplicación un monitor de Uptime Robot. + +¿Que es **Uptime Robot**? + +**Uptime Robot** es un servicio de monitoreo que revisa si tu aplicación esta encendida o apagada y si es este último caso se encendera sola gracias a un monitor. + +Tendremos que crearnos una cuenta para poder usar este servicio. + +Le damos aquí. + +![Screenshot_20191105-172909](https://user-images.githubusercontent.com/53679397/68255148-1b7f3200-fff2-11e9-8b96-791b5b32dbfd.jpg) + +Y despues en `sign-up`. + +![Screenshot_20191105-174303](https://user-images.githubusercontent.com/53679397/68255849-02778080-fff4-11e9-8d3a-e482920f4b18.jpg) + +Nos saldran 2 opciones un plan gratis y otro premium. + +![Screenshot_20191105-151705](https://user-images.githubusercontent.com/53679397/68255965-57b39200-fff4-11e9-812b-f627044c0b3b.jpg) + +![Screenshot_20191105-151725](https://user-images.githubusercontent.com/53679397/68255973-5edaa000-fff4-11e9-8434-f61723392fe3.jpg) + +Le daremos al plan gratis y nos redigira a la dashboard. + +![Screenshot_20191105-174948](https://user-images.githubusercontent.com/53679397/68256188-f3450280-fff4-11e9-9fd3-f7579c03ad36.jpg) + +Le daremos a + monitor y nos saldra una pestaña como la siguiente. + +![20191105_175148](https://user-images.githubusercontent.com/53679397/68256274-3bfcbb80-fff5-11e9-8ec7-b2dfd6464555.png) + +debe de quedar configurado asi. + +![Screenshot_20191105-175447](https://user-images.githubusercontent.com/53679397/68256396-a3b30680-fff5-11e9-8e88-3b8a1c9c1488.jpg) + +Para sacar la URL del bot tendremos que hacer lo siguiente. + +Vamos al proyecto de Glitch y le damos a `share`. + +![Screenshot_20191105-175842](https://user-images.githubusercontent.com/53679397/68256569-35227880-fff6-11e9-9df7-cb0d6e8f227b.jpg) + +Después a `live code`. + +![Screenshot_20191105-175929](https://user-images.githubusercontent.com/53679397/68256642-55eace00-fff6-11e9-89a3-392300be9025.jpg) + +Y copiamos el primer link. + +Guía redactada por J U N E#7089.