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

Ads

2 COMENTARIOS

Deja un comentario

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