Skip to content

Guía para implementar de forma local el website de "El Salvador Conectado"

Jump to bottom
Mauricio Martínez edited this page Apr 23, 2020 · 6 revisions

Requerimientos:

Pasos:

Luego de haber instalado los requerimientos listados, hay que seguir ciertos pasos de configuración.

Configurar Wordpress

1. Agregar carpeta del proyecto wordpress al servidor PHP

Para poder proseguir hay que descomprimir el archivo de Wordpress que fué descargado. Ahora se procede con mover la carpeta descomprimida hacia la ruta donde se almacenan nuestros proyectos PHP. Seguir las instrucciones según el S.O (Sistema Operativo) que se esté utilizando.

  • Windows

  • GNU/Linux

    • Abrir consola y entrar con permisos de super usuario(root)
    • Brindar permisos de escritura a la ruta /var/www/html con el comando 
        chmod 755 /var/www/html
    • Mover la carpeta de wordpress a la ruta /var/www/html

2. Instalar plugins de Wordpress necesarios

Se necesitan instalar cuatro plugins:

Proceso de instalación - Plugins

  • Ingresar a la carpeta que contiene el proyecto de Wordpress
  • Ingresar a la carpeta wp-content/plugins
  • Abrir la consola del S.O en la ruta de la carpeta wp-content/plugins
  • Clonar wp-graphql con el comando
git clone https://github.com/wp-graphql/wp-graphql

git clone https://github.com/wp-graphql/wp-graphiql
  • Descargar el archivo que contiene el plugin Advanced Custom Fields
  • Descargar el archivo que contiene el plugin WPGraphQL for Advanced Custom Fields
  • Entrar a tu carpeta de Descargas y descomprimir los archivos recién descargados, dentro de cada una de las dos carpetas extraídas hay otra que contiene el plugin, estas carpetas tienen como nombre advanced-custom-fields y wp-graphql-acf respectivamente.
  • Ingresar a la carpeta que contiene el proyecto de Wordpress
  • Ingresar a la carpeta wp-content/plugins
  • Pegar las carpetas advanced-custom-fields y wp-graphql-acf recién extraídas de los plugins descargados.

Activación de los plugins

Ahora se procede con activar los plugins, para ello hay que abrir nuestro navegador e ingresar al servidor local de PHP, normalmente es http://localhost, además de agregar el nombre de la carpeta que contiene nuestro proyecto de Wordpress, dando como resultado algo parecido a http://localhost/wordpress

Si es primera vez que entras a esa dirección del navegador, Wordpress te mostrará instrucciones para poder completar el proceso de configuración, recuerda bien las credenciales que asignaste en la configuración.

Posteriormente entrar a la dirección http://localhost/wordpress/wp-admin para iniciar sesión en Wordpress y configurar los plugins.

  • Pasos

    • Entrar al menú de configuración de Wordpress, seleccionar Plugins -> Plugins instalados

      Plugins instalados

    • Activar los plugins

      Activar plugins Activar plugins Activar plugins

    • Una vez activados se mostrará los siguientes iconos;

      Plugin Instalado

    • Configurar permalinks de Wordpress

      • Entrar al menú de configuración de Wordpress, seleccionar Configuraciones -> Permalinks, seleccionar Post name y guardar los cambios

        Permalinks

    • Verificar que el endpoint de graphql está configurado correctamente y que podremos hacer uso de el. Entrar a la ruta donde se encuentra el proyecto de Wordpress http://localhost/wordpress/graphql, se tendrá que mostrar un mensaje como el siguiente el cual confirma que está bien configurado nuestro endpoint

      {
"errors":
   [
     {"message":"GraphQL Request must include at least one of those two parameters: \"query\" or \"queryId\"","category":"request"}
   ]
}

Crear y configurar página en Wordpress

Ahora se debe de crear una página en Wordpress que contendrá la información que se debe de mostrar en cada una de las páginas del sitio web.

Existen dos formas para poder iniciar la página de inicio junto con sus Advanced Custom Fields(ACFs); crearlos de forma manual o hacer el import de la tabla wp_posts.sql

Método importando la tabla WP_POSTS

Para éste método es necesario vaciar por completo la tabla wp_posts desde tu administrador de bases de datos, asi que si existen ya páginas o publicaciones hechas y no se quieren perder, éste método no es el adecuado ya que se perderá todo.

  • Entrar al administrador de bases de datos y a la DB asignada para el proyecto de Wordpress

  • Vaciar la tabla wp_posts

  • Descargar la tabla wp_posts en el siguiente enlace; WP_POSTS TABLE con todos los datos necesarios

  • Descomprimir la tabla recién descargada

  • Importar la tabla dentro de la DB asignada a Wordpress

  • Ingresar a la administración de Wordpress y en el menú seleccionar la opción Custom Fields, el resultado debe de ser como en las siguientes imágenes, que comprueba que todo salió bien.

    Listado Listado

Método manual creando todos los campos Advanced Custom Fields(ACFs) uno por uno

Para éste método no hay complicaciones de tener más páginas o grupos de Advanced Custom Fields(ACFs) creados, solamente se necesita confirmar que no existe página con el nombre content-page-home ni el grupo de ACFs llamado; cf_content-page-home

  • Crear página principal y sus respectivos Advanced Custom Fields(ACFs)

    • Crear página

      • Ingresar a la administración de Wordpress por medio de la ruta http://localhost/wordpress/wp-admin e iniciar sesión
      • Por medio del tablero de opciones seleccionar la opción de pages/páginas y crear una nueva página con el nombre content-page-home, asegurarse que la URL Slug tiene el mismo nombre.
      • Guardar la página

    • Crear los AFCs

      • Ingresar a la administración de Wordpress por medio de la ruta http://localhost/wordpress/wp-admin e iniciar sesión

      • Por medio del tablero de opciones seleccionar la opción de Custom Fields y crear un nuevo grupo con el nombre cf_content-page-home

      • Hay que configurar el grupo para que pueda ser visible para el endpoint que utiliza /graphql, las configuraciones son las siguientes;

        cf_content-page-home cf_content-page-home

      • Ahora sin guardar aún el grupo de ACFs, procederemos a agregar los campos necesarios para poder almacenar información que será mostrada, debido que la explicación para poder agregarlos es un poco extensa solamente se tomó captura de la forma en cómo deben de estar configurados los campos. Para más información sobre cómo agregarlos, qué botones presionar para hacerlo, éste video del creador del plugin te muestra cómo hacerlo. VIDEO: WPGraphQL for ACF

      • Imágenes que muestra la configuración de cada sección que se debe agregar. Cada imágen es una sección de la página principal del sitio web. Cada configuración estará encerrada con un recuadro rojo, respetar los nombres de la imágen ya están configurados para que exactamente ellos sean consultados y mostrados en la página principal.

        • Header [PNG] 
          Textos necesarios:
  - El Salvador es más
  - si está conectado
  - Únete ahora →
  - El Salvador es más
  - https://unete.elsalvadorconectado.org
  - https://images.unsplash.com/photo-1531206715517-5c0ba140b2b8?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1650&q=80
  - El Salvador Conectado
  - Perry Grone
  - https://unsplash.com/@perrygrone
  - https://unsplash.com/photos/lbLgFFlADrY
        • Motivaciones [PNG] 
          Textos necesarios:
  - ¿Qué nos motiva?
  - El Salvador, como a todos... pero también nos mueven los siguientes pilares
  - https://user-images.githubusercontent.com/13499566/80039393-f2296400-84b4-11ea-83e3-1c738a2dac0e.png
  - Acceso a información
  - https://user-images.githubusercontent.com/13499566/80039469-1c7b2180-84b5-11ea-81b4-994e919dd3c6.png
  - Generar soluciones
  - https://user-images.githubusercontent.com/13499566/80039487-28ff7a00-84b5-11ea-9939-21db93da6974.png
  - Ayudar en la crisis
  - https://user-images.githubusercontent.com/13499566/80039528-3b79b380-84b5-11ea-885a-dd3197cd302e.png
  - Combatir la desinformación
  - https://user-images.githubusercontent.com/13499566/80039549-47fe0c00-84b5-11ea-9139-94a092cf9c85.png
  - Ciudadanos Empoderados
        • ¿Quiénes somos? [PNG] 
          Textos necesarios:
  - Somos una comunidad tecnológica en acción
  - Queremos centralizar y organizar el aporte de nuestros profesionales para generar soluciones tecnológicas que ayuden a la población más vulnerable.
  - El primer reto es llegar a quiénes no tienen acceso a internet.
  - Lee más sobre nosotros
  - /quienes-somos
  - https://images.unsplash.com/photo-1521737604893-d14cc237f11d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1063&q=80
  - El Salvador Conectado
  - Annie Spratt
  - https://unsplash.com/@anniespratt
  - https://unsplash.com/photos/hCb3lIB8L8E
        • Iniciativas 
          Textos necesarios:
  - Iniciativas
  - Algunas de las oportunidades que hemos identificado para impactar positivamente en nuestra nación ante el inminente efecto de la pandemia COVID-19 están enfocadas a: ampliar la disponibilidad de la información brindada por el gobierno, contribuir a la comunicación digital asertiva, sistematizar y agilizar procesos de espera, democratizar el acceso a internet.
  - Lee más sobre nuestras iniciativas
  - /iniciativas

      • Guardar los cambios. Listo

Configurar Gatsby

1. Instalar gatsby de manera global

Abrir la consola del S.O(Sistema Operativo), digitar

npm install -g gatsby-cli

2. Clonar el repositorio del website de El Salvador Conectado

  • Pasos

    • Debes de entrar a la dirección de archivos donde gustar tener el proyecto del website
    • Abrir la consola del S.O en la dirección ya escogida
    • Clonar el repositorio con el siguiente comando
    git clone https://github.com/svconectado/website

3. Configurar el proyecto del website

  • Pasos

    • Entrar a la carpeta del website
    • Abrir con un editor de texto el archivo llamado gatsby-config.js
    • Modificar donde encuentres el atributo url: ya que tienes que colocar la ruta donde se encuentra el endpoint de Wordpress que hace uso de graphql, el cual en éste ejemplo fué http://localhost/wordpress/graphql
    • Guardar el archivo gatsby-config.js
    • En la misma ruta raiz donde se encuentra el proyecto de website abrir la consola del S.O y digitar el comando
    npm install
    • Para empezar el funcionamiento del website, digitar el comando
    npm run develop

    Al terminar de hacer los procesos necesarios te dará la instrucción que ya puedes acceder a el sitio desde la ruta http://localhost:8000/ y con ese dar por finalizado el proceso de configuración local del sitio web de El Salvador Conectado


[Errores] Posibles errores a la hora de compilar el proyecto con el comando npm run develop:

Si se muestra en consola o en el navegador un mensaje como el siguiente, quiere decir que nuestro Wordpress no tiene contenido para mostrar, por tal motivo trata de agregar contenido básico desde la ruta de administración de Wordpess http://localhost/wordpress/wp-admin y con eso debería de bastar para que el error no se siga mostrando.

Errores

Clone this wiki locally