Newsletter para devsEntra
Masterclass

Crea una API con datos abiertos y píntala en un mapa de LeafletJS (I)

Backend y frontend desacoplados dentro de la misma plataforma.

Duración total: 01:32:43

Código descargable

Acceso 100% online

Descripción de la masterclass

Creamos un backend basándonos en una capa de datos abiertos. Son monumentos de Castilla y León, pero podría ser cualquier otra cosa que tuviera coordenadas.

Lo que haremos será pintarlo en un mapa usando LeafletJS.

En esta primera parte nos centramos en el proceso de importación de los datos y como los exponemos hacia el exterior mediante una API Rest.

Marcas de tiempo

00:00 Extra: Presentación del LiveChallenge

04:22 Arquitectura de la aplicación

08:16 Usando datos abiertos

13:09 Convertir JSON en CSV (¡Perla!)

20:07 API con Laravel

24:50 Crear modelo de datos

28:20 Migración de base de datos

32:00 Leer el error (¡Perla!)

37:00 Importar CSV a la base de datos

40:10 Shell de PHP y Laravel con Tinker

46:44 Eloquent ORM

52:50 Ruta para mostrar resultados de la API

58:00 Mapas con Leaflet

1:01:00 Plantilla base en Laravel

1:04:17 Preparando lo necesario para el mapa

1:08:25 Javascript en Laravel

1:13:40 Inicializando Leaflet

1:19:21 Primer marker en el mapa

1:21:10 Cargar datos de la API en el mapa con fetch

1:26:48 Formato GeoJSON

¿Qué necesitas saber?

Trabajaremos con el framework Laravel de PHP y la base de datos MySQL a nivel básico.

Para el front usaremos JavaScript.

Nivel de dificultad

Intermedio

Tecnologías utilizadas

  • JavaScript
  • LeafletJS
  • PHP
  • Laravel
  • MySQL
  • CSV

Código

Recursos

Contenidos relacionados en danielprimo.io

Suscríbete o identíficate para ver el vídeo al completo.

Explora los capítulos

1. Extra: Presentación del LiveChallenge [20:07]

Extra: Presentación del LiveChallenge

[04:22]

Arquitectura de la aplicación

[03:54]

Usando datos abiertos

[04:53]

Convertir JSON en CSV 🔥

[06:58]

2. API con Laravel [37:53]

API con Laravel

[04:43]

Crear modelo de datos

[03:30]

Migración de base de datos

[03:40]

Leer el error 🔥

[05:00]

Importar CSV a la base de datos

[03:10]

Shell de PHP y Laravel con Tinker

[06:34]

Eloquent ORM

[06:06]

Ruta para mostrar resultados de la API

[05:10]

3. Mapas con Leaflet [34:43]

Mapas con Leaflet

[03:00]

Plantilla base en Laravel

[03:17]

Preparando lo necesario para el mapa

[04:08]

Javascript en Laravel

[05:15]

Inicializando Leaflet

[05:41]

Primer marker en el mapa

[01:49]

Cargar datos de la API en el mapa con fetch

[05:38]

Formato GeoJS

[05:55]

Descubre todo lo que puedes conseguir sucribiéndote a Web Reactiva

Contenido nuevo todas las semanas

Una comunidad de developers colegas en telegram

Desafíos y retos de programación para que mejores tus habilidades

400 horas de contenido en audio y vídeo

Entrevistas y masterclass en directo con los/las mejores profesionales

Precio

24€Matrículaplus15€Al mes

  • Contenido disponible 24/7
  • Audios y videos
  • Retos y desafíos
  • Todo el código descargable
  • Comunidad de developers
  • Acceso premium completo