Giter Club home page Giter Club logo

gql's Introduction

Cursó de graphql

Repositorio del curso sobre graphql, el repositorio consta de tags que permite identificar puntos clave sobre el curos.

Comenzando 🚀

Estas son intrucciones que nos permitirán obtener una copia del proyecto y su funcionamiento en tu máquina local para própositos de desarrollo y pruebas.

Sigue los pasos que a continuación se indican para poder desplegar el proyecto.

Pre-requisitos 📋

Para poder iniciar el proyecto necesitamos contar con una instalación.

  • NodeJS: es un entorno en tiempo de ejecución multiplataforma, de código abierto, para la capa del servidor basado en el lenguaje de programación ECMAScript,

  • Yarn: Yarn es un nuevo tipo de instalador de paquetes JavaScript y gestor de dependencias lanzado por Facebook.

  • SqlLite: SQLite es un sistema de gestión de bases de datos relacional compatible con ACID, contenida en una relativamente pequeña ​ biblioteca escrita en C

📝 Nota: Se recomienda usar las verciones LTS de nodejs.

Al contar con los requisitos solicitados se procederá a la instalación del proyecto realizado durante el cursó.

Instalación 🔧

Paso 1

Clonar el repositorio.

    $ git clone [email protected]:OrcaPracticas/GQL.git

Al terminar de clonar el repositorio tendremos una carpeta llamada GQL.

Paso 2

Colocarnos en la carpeta que nos genero la clonación del repositorio.

    $ cd ./GQL

Paso 3

Al estar en el directorio procederemos a ejecutar la instalación de las dependencias.

    $ yarn install

también podemos utilizar el comando

    $ npm i

📝 Nota: Realmente yarn puede ser opcional, pero seria bueno que lo revisaras en el caso de que no lo conoscas.

al terminar la instalción de las dependencias procederemos a correr la aplicación.

Paso 4

Antes de poder correr la aplicación es necesario generar la base de datos para esto ejecutaremos le comando siguiente.

    $ yarn db:migrate

o

    $ npm run db:migrate

el comando anterior nos permite crear las tablas para la Base de Datos.

Paso 5

Llenar las tablas con data Falsa para esto ejecutaremos el comando siguiente.

    $ yarn db:seed

o

    $ npm run db:seed

Hasta este punto contamos con nuestra base de datos y sus correspondientes Tablas cargadas con data Falsa

Paso 6

Procederemos a levantar nuestro servidor de graphql para esto ejecutaremos el comando siguiente.

    $ yarn start:gql

o

    $ npm start:gql

📝 Nota: El servidor se ejecuta en la url http://localhost:8080/graphql.

podremos ejecutar una pureba en nuestro servidor para verificar que todo corre de manera correcta podemos colocar el siguiente comando.

{
    cursos {
        id
        titulo
        descripcion
        profesor {
            id
            nombre
        }
        comentarios {
            nombre
            cuerpo
        }
    }
}

pulsamo el boton play esto ya nos tiene que estar lanzando resultados.

Paso 7

Procederemos a levantar al App que se conectara al servidor de GQL, para esto ejecutaremos el comando siguiente, (Es necesario abrir una nueva venta en la terminal).

    $ yarn start:app

o

    $ npm run start:app

📝 Nota: El servidor se ejecuta en la url http://localhost:3000,

Al termino de los pasos anteriores tendremos el proyecto en ejecución.

Paso 8

También podemos probar la consulta a un API REST , para esto ejecutaremos el comando siguiente, (Es necesario abrir una nueva venta en la terminal).

    $ yarn start:json

o

    $ npm run start:json

📝 Nota: El servidor se ejecuta en la url http://localhost:8081,

En el servidor de GQL podemos ejecutar el Comenzando

{
	findUSer(id: 2) {
        id
        name
        age
        email
  }
}

Deployment 📦

Es importante mencionar que el proyecto cuenta con tags que facilita el movimiento entre las etapas del desarrollo realizado durante el curso.

Cada una de las faces correspondientes al desarrollo generado durante el cursó, cada fase cuenta con su Release el cual tiene realción con un PullRequest que a su vez tiene relación con un Milestones el cuales tienen realación con issues y estos tienen relacionados los commits generados.

Construido con 🛠️

Esta practica se construyo utilizando las siguientes tecnologias.

Body-parser Casual Knex Objection Sqlite3 Apollo-Boost Apollo-Server-Express React-Apollo React Graphql Express

Autores ✒️

Licencia 📄

Este proyecto está bajo la Licencia MIT mira el archivo LICENSE.md para detalles.

⌨️ con ❤️ por Konami12 😊

gql's People

Contributors

konami12 avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar

gql's Issues

Crear app con react

Al contar con la respuesta delos issues #30 #31, se procederá a realizar la configuracion y armado del desarrollo con react, el cual tiene que cumplir co.

  • Listado de cursos

Configuración

Al contar con las instalaciones que se marcan en le issue #30 en necesario crear los comandos

  • Comando para correr el App
  • Comando para correr el servidor de GQL

Modularización del esquema

Por buenas prácticas se recomienda modularizar el contenido del esquema.

  • Separar Resolvers
  • Separa Schemas
  • El ejemplo donde se usaban generar carpeta donde el ejemplo quede intacto
  • Colocar comentarios relacionados al desarrollo para facilitar el entendimiento de terceros

Instalación de dependencias

Durante el curso se implementara el uso una base esta base estara integrada en sqlite, por lo que es necesario instalar las siguientes dependencias.

  • Crear rama add/DataBase

  • sqlite3: Gesto de base de datos

  • objection: un ORM para Node.js que pretende mantenerse al margen y hacer que sea tan fácil como sea posible utilizar toda la potencia de SQL y el motor de base de datos subyacente.

  • knex: (Generador de consutltas para Postgres, MSSQL, MySQL, MariaDB, SQLite3, Oracle, and Amazon Redshift ), diseñado para ser flexible y portatil.

Integrar los modelos a graphQL

al resolver el issue #17 es necesario realizar la integración de los modelos para que GQL pueda extraer los datos correspondientes de sqlite

Implementar Apollo

Al terminar el curso es necesario realizar la implementación de las nuevas de los paquete instalados, el mas importante es

  • Instalar nuevas dependencias
  • Realizar nuevas configuraciones de ser necesario
  • Adaptar codificación a las novedades que ofrece Apollo

Instalar casual

Es necesario instalar la dependencias casual como dependencia de desarrollo

  • Instalar casual

Instalación de dependencias

Instalación de dependnecias para la integracion con react

Dependencies

  • apollo-boost : Permite crear el cliente de conexion al servidro GQL
  • graphql-tag: Permite crear un literal string el cual sera interpretado como el query que sera enviado al servidor GQL
  • react
  • react-apollo: Permite la integracion con react
  • react-dom

Development Dependencies

  • react-scripts

Instalar dependencias

Es necesario instalar nuevas dependencias para poder realizar la integración

  • axios
  • json-server

Implementar errores

Al borrar un usuario es necesario que se muestre un error como lo que vemos.

{
  "data": {
    "profesorDelete": null
  },
  "errors": [
    {
      "errorCode": "A55",
      "name": "GraphQLError",
      "mensaje": "El registro con el id 44 no se puede elmiar"
    }
  ]
}

Crear modelos de las tablas

Al resolver los issues #14 #15 es necesario crear los modelos para cada una de las dependencias.

  • Modelo Cursos
  • Modelo Comentarios
  • Modelo Profesores

Configuracion inicial

Acciones realizadas

  • Inicializacion del server de express
  • Creación del schema base
  • Configuración de las dependencias en .babelrc
  • Configuración del archivo .gitignore
  • Seteo de comando para iniciar el server

Crear mocks

Al contar con la instalación de casual es necesario crear los siguientes mocks

  • Mock Cursos
  • Mock Profesores
  • Mock Comentarios

Tomar en cuenta que los datos que contiene el mock serán aleatorios

Uso de api rest

Como ejemplo final es necesario usar un api que nos regrese un json para esto tenemos que tener resuelto el issue #38

Carga de datos en las tablas

Crear script que permite llenar las tablas creadas en el issue #14, es necesario que la data se fake por lo que se recomienda utilizar la dependencia casual esta instalación se resolvió en el issue #10,

  • Crear script para poblar la tabla de Cursos
  • Crear script para poblar la tabla de Profesores
  • Crear script para poblar la tabla de Comentarios

Crear readme

Crear readme describiendo de manera muy breve como se corre el proyecto

Usar Mocking

Utiliza la opción del mock, para generar datos falsos por lo cual considerar las tareas siguientes,

  • #10 Instalación de causual
  • #11 Crear mocks
  • Configurar la opcion addMockFunctionsToSchema
  • Resolver el siguiente query
{
    cursos {
        id
        titulo
        descripcion
        profesor{
            id
            nombre
            nacionalidad
            genero
            cursos{
                id
            }
        }
        raiting
        comentarios{
            id
            nombre
            cuerpo
        }
    }
}

Creación de tablas con referencia a los Schemas

Es necesario crear los scripts que contrariaran las tablas que tendrán relación con los schemas creados en el issue #4,

  • Proponer estructura de carpetas
  • Tabla para Cursos
  • Tabla para Profesores
  • Tabla para Comentarios

Construcción de querys

Los querys que se estarán ejecutando del lado de graphql necesitan una estructura base de la cual si lo vemos son muy genéricos por lo que seria recomendable crear un script que permite agilizar la estructuración de los querys.

Nota: Recordemos que estamos utilizando objection como ORM

Estructura de los querys.

// Comando que permite instertar un registro
Profesor.query().insert(args.profesor)

// Comando que permite actualizar un registro
Profesor.query().patchAndFetchById(args.profesorId, args.profesor)

// Comando que permite borrar un registro
 Profesor.query().findById(args.profesorId).then((profesor) => {
        return Profesor.query().deleteById(args.profesorId).then((filasBorradas) => {
          if (filasBorradas > 0) return profesor
          throw new Error(`El profesor con id ${args.profesorId} no se pudo eliminar`)
        })
      })

Planificar schema

Al realizar la configuración inicial (#2) se genero un Schema solo con la finalidad de que todo funcionaba correctamente, Es importante realizar la planificación del Schema que se utilizara durante el curso por lo que en necesario cumplir con las tareas siguientes.

  • Diagrama base del Schema
  • Creación del schema
  • Colocar comentarios por entidad creada
  • Indicar si algún campo puede ser obsoleto en un futuro.

Coniguración BD

Al terminar con los issues #13 #14 #15 #17, se procedera a realizar la configuración para la base de datos

  • Crear archivo db.sqlite (Base de Datos)

  • Crear archivo de configuracion knexfile.js

  • Crear comando db:migration dentro de package.json, dicho comando tiene que permitir crear las tablas indicadas en el issue #14

  • Crear comando db:seed dentro de package.json, dicho comando tiene que cargar data usando los scripts creados en el issue #15

Nota: Para poder realizar pruebas es recomendable instalar sqllite3 al tenerlo instalado corremos el comando sqllite3 [ruta de la BD] esto habilitara la consola en la cual podremos ejecutar comandos de SQL

Intalacion de dependencias

Instalación inicial de las dependencias necesarias para iniciar el proyecto

Dependencies

  • body-parser
  • express
  • graphql
  • graphql-server-express
  • graphql-tools

Development Dependencies

  • babel-cli
  • babel-minify
  • babel-plugin-inline-json-import
  • babel-preset-env
  • babel-register
  • nodemon

Crear Resolver

Es necesario generar los los resolvers los cales permiten realizar el mapeo de los datos correspondientes a nuestros esquemas.

  • Crear mocks que para cada entidad necesaria
  • Realizar la configuración para llenar los datos de las instancias definidas en el schema
  • Al terminar las 2 tareas anteriores es necesario resolver el siguiente query
{
    cursos {
        id
        titulo
        descripcion
        profesor{
            id
            nombre
            nacionalidad
            genero
            cursos{
                id
            }
        }
        raiting
        comentarios{
            id
            nombre
            cuerpo
        }
    }
}

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.