Laravel App muestra clima a través de API
Imagen de liushuquan en Pixabay

En este tutorial aprenderás cómo crear con Laravel 9 una App que muestra el clima de una ciudad a través del consumo de una API de OpenWeatherMap. El repositorio GitHub del proyecto lo encuentras al final del post. Sin más, manos a la obra.

Requisitos previos

  1. Contar con ambiente de desarrollo como Wamp, Xamp o Laragon.
  2. Composer instalado globalmente.
  3. Crear una cuenta en openweathermap.org y contar con API key.

1. Obtener API key en openweathermap.org

Ve a openweathermap.org y accede a tu cuenta, sino tienes una cuenta crea una nueva llenando el formulario de registro:

Se abrirá una ventana nueva en la cual debes de agregar los datos que te piden:

Revisa tu cuenta de correo con la que te diste de alta y confirma tu cuenta de correo, al confirmar tu correo te volverán a enviar otro con tu API key.

2. Crear proyecto en Laravel 9

Abre una terminal de comandos en la raíz en donde estará tu app en Laravel y escribe la siguiente instrucción:

composer create-project laravel/laravel laravel-app-weather-api

Una vez que se termine de crear la carpeta de tu nuevo proyecto accede a ella desde la terminal de comandos escribiendo:

cd laravel-app-weather-api

3. Crear controlador y configurarlo

Para crear el controlador desde la terminal de comandos escribe:

php artisan make:controller WeatherController

Abre el archivo app/Http/Controllers/WeatherController.php agrega el método index el cual solo mostrará una vista y el método search en donde se realizará la petición:

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Illuminate\Support\Facades\Http;

class WeatherController extends Controller
{
  public function index(){

    return view('index');
}

  public function search(Request $request){

    $data = $request->validate([
    'city' => 'required'
    ]);

    $city = $data['city'];
    $key = config('services.owm.key');

    $response = Http::get("https://api.openweathermap.org/data/2.5/weather?q=".$city."&lang=es"."&appid=".$key)
      ->json();
    if($response['cod'] == "200") {

      $weather = $response['weather'][0]['description'];
      $main = $response['weather'][0]['main'];
      $temp = $response['main']['temp'] - 273;
      $name = $response['name'];
      $country = $response['sys']['country'];
      $ok = $response['cod'];

      return view('index', compact('weather', 'main', 'temp', 'name', 'country', 'ok'));
    } else {
      $notFound = true;
    return view('index', compact('notFound'));
    }
  }
}

4. Crear rutas

Con tu editor de textos abre el archivo routes/web.php y crea dos nuevas rutas, una será para la página principal y la otra para la petición get de consulta a la API, no olvides importar la clase WeatherController:

<?php

use Illuminate\Support\Facades\Route;
use App\Http\Controllers\WeatherController;

Route::get('/', [WeatherController::class, 'index']);
Route::get('/search', [WeatherController::class, 'search'])->name('search');

5. Agregar y configurar API key al proyecto

En el archivo .env que se encuentra en la raíz del proyecto agrega la variable global OWM_API_KEY y en ella asigna la API key que te llegó en el correo en el punto número uno:

Abre el archivo config/services.php y agrega el servicio que usará la API key para las peticiones, agrega el siguiente código:

'owm' => [
'key' => env('OWM_API_KEY'),
]

Laravel App muestra clima a través de API

6. Crear plantilla para la vista

Con tu editor de textos crea la carpeta resources/views/layouts y dentro de ella crea el archivo app.blade.php , para este tutorial utilice la plantilla de ejemplo de Bootstrap llamada cover que puedes ver aquí la cual modifique y los estilos los puedes encontrar en el repositorio de GitHub al final del post. Agrega el siguiente código:

<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" class="h-100">

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>Laravel Weather App</title>
<link href="/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="/css/cover.css" rel="stylesheet">

<style>
.bd-placeholder-img {
font-size: 1.125rem;
text-anchor: middle;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}

@media (min-width: 768px) {
.bd-placeholder-img-lg {
font-size: 3.5rem;
}
}

.b-example-divider {
height: 3rem;
background-color: rgba(0, 0, 0, .1);
border: solid rgba(0, 0, 0, .15);
border-width: 1px 0;
box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15);
}

.b-example-vr {
flex-shrink: 0;
width: 1.5rem;
height: 100vh;
}

.bi {
vertical-align: -.125em;
fill: currentColor;
}

.nav-scroller {
position: relative;
z-index: 2;
height: 2.75rem;
overflow-y: hidden;
}

.nav-scroller .nav {
display: flex;
flex-wrap: nowrap;
padding-bottom: 1rem;
margin-top: -1px;
overflow-x: auto;
text-align: center;
white-space: nowrap;
-webkit-overflow-scrolling: touch;
}

</style>

</head>

<body class="d-flex h-100 text-center text-white">

<div class="d-flex w-100 h-100 p-3 mx-auto flex-column">
<header class="mb-auto">
<div>
<h3 class="float-md-start mb-0">Laravel Weather App</h3>
<nav class="nav nav-masthead justify-content-center float-md-end">
<a class="nav-link fw-bold py-1 px-0 active" aria-current="page" href="#">Home</a>
<a class="nav-link fw-bold py-1 px-0" href="#">Features</a>
<a class="nav-link fw-bold py-1 px-0" href="#">Contact</a>
</nav>
</div>
</header>

@yield('content')

<footer class="mt-auto text-white-50">
<p>Cover template for <a href="https://getbootstrap.com/" class="text-white">Bootstrap</a>, by <a
href="https://twitter.com/mdo" class="text-white">@mdo</a>.</p>
</footer>
</div>

</body>

</html>

Recuerda que los archivos CSS los encuentras en el repositorio de GitHub del proyecto, el link esta al final del post.

7. Crear vista principal

Crea el archivo resources/views/index.blade.php que es donde mostrará la vista principal del la app y agrega el siguiente código:

@extends('layouts.app')

@section('content')
<main class="px-3">
<div class="container">
<div class="row">
<div class="col-md-8">
<h2>Búsqueda Global del Clima</h2>
<form action="{{ route('search') }}" method="get">
@csrf
<div class="form-group">
<label for="city">
Introduce el nombre de la ciudad
</label>
<input type="text" class="form-control mt-2" name="city" id="city"
placeholder="Nombre de la ciudad">
@error('city')
<span class="text-danger">{{ $message }}</span>
@enderror
</div>

@isset($notFound)
<div class="alert alert-danger mt-3" role="alert">
Ciudad no encontrada, intente de nuevo!
</div>
@endisset

<button type="submit" class="btn btn-success mt-3">Consultar</button>
</form>
</div>

<div class="col-md-4">
@isset($ok)
<div class="col-md-12">
<h5>{{ $main }}</h5>
<h1>{{ intval($temp) }}&deg;C</h1>
</div>

<div class="col-md-12">
<h3>{{ $name }}, {{ $country }}</h3>
</div>

<div class="col-md-12">
<h4>{{ $weather }}</h4>
</div>
@endisset

</div>
</div>
</div>

</main>
@endsection

8. Probar el funcionamiento de la app

Desde la terminal de comandos escribe la instrucción:

php artisan serve

Desde el navegador web ve a http://127.0.0.1:8000/ verás la vista principal de tu app:

Ahora realiza alguna consulta, en mi caso consultaré la ciudad en donde vivo actualmente que Juárez, MX., :

Laravel App muestra clima a través de API

Como puedes ver realiza la consulta por GET y trae la respuesta con la información.

En la respuesta trae más datos para mostrar, puedes hacer modificaciones y mostrar la humedad, la sensación térmica, la velocidad del viento, la temperatura mínima y máxima (que no es precisa), presión barométrica, entre otros datos, te lo dejo de tarea.

Conclusión

En este tutorial creaste una App en Laravel 9 que muestra el clima a través del consumo de una API externa. Si te sirvió este tutorial te invito a compartirlo en tus redes sociales y si tienes dudas o comentarios déjalos en la caja de comentarios, estaré al pendiente de ellos. Saludos.

Documentación OpenWeather.org.

Repositorio GitHub

Deja un comentario

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.