¿Cómo crear una aplicación meteorológica en Android?

En este proyecto, construiremos una aplicación meteorológica. Esta aplicación mostrará la temperatura de una ubicación. Para obtener información meteorológica, necesitaremos una API. Una API (interfaz de programación de aplicaciones) es una función que permite que las aplicaciones interactúen y compartan datos utilizando varios componentes y microservicios. Para este proyecto, utilizaremos la API WeatherBit para obtener datos meteorológicos. WeatherBit API proporciona una forma rápida y elegante de obtener datos meteorológicos.

Descripción del proyecto

En este proyecto, crearemos una aplicación que encontrará las coordenadas de ubicación del dispositivo (longitud y latitud). Luego enviaremos estos datos a la API a través de una clave de API (que veremos más adelante). La API nos enviará un JSON del cual extraeremos los datos requeridos que son la temperatura y ciudad de la ubicación.

Implementación paso a paso

Paso 1: Crear un nuevo proyecto

Para crear un nuevo proyecto en Android Studio, consulte Cómo crear/iniciar un nuevo proyecto en Android Studio . Tenga en cuenta que seleccione Kotlin como lenguaje de programación.

Paso 2:

Archivos dibujables dibujables btn_bg6 . A continuación se muestra el código para el archivo btn_bg6.xml .

Artículo de referencia: ¿Cómo agregar una imagen a una carpeta dibujable en Android Studio?

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape>
            <gradient
                android:angle="0"
                android:startColor="#BBE1FD"
                android:endColor="#6CC7E3"
                android:type="linear"/>
        </shape>
    </item>
</selector>

Paso 3: obtenga la clave API 

Para obtener la clave API, simplemente inicie sesión en WeatherBit y suscríbase para obtener una API gratuita de Current Weather Data API. Después de hacerlo, recibirá una clave API y estará listo para comenzar.

Paso 4: Comprobación de permisos

Para que esta aplicación funcione, debemos solicitar tres permisos al sistema: 

• Ubicación aproximada : <uses-permission android:name=”android.permission.ACCESS_COARSE_LOCATION”/>
• Ubicación fina : <uses-permission android:name=”android.permission.ACCESS_FINE_LOCATION”/>
• Internet : <usos-permiso android:name=”android.permission.INTERNET”/>

Agregaremos el código para el permiso de uso en el archivo AndroidManifest.xml . Ver el siguiente código

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
 
    <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION"/>
    <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"/>
    <uses-permission android:name="android.permission.INTERNET"/>
    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
        <activity android:name=".MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
 
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>
 
</manifest>

Paso 5: Construyendo el Diseño

Agregaremos un botón y TextView en la única pantalla de la aplicación. Cuando el usuario haga clic en el botón, la temperatura y la ciudad de esa ubicación se mostrarán en TextView. Vea el código a continuación: 

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/weather_background"
    tools:context=".MainActivity">
 
    <Button
        android:id="@+id/btVar1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:background="@drawable/btn_bg6"
        android:padding="10dp"
        android:text="Get Weather"
        android:textSize="20dp" />
 
    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="40dp"
        android:layout_marginBottom="100dp"
        android:fontFamily="sans-serif-black"
        android:text="Get temperature here"
        android:textColor="#F6F8F5"
        android:textSize="25dp"
        android:textStyle="bold" />
 
</RelativeLayout>

Paso 6: Obtener las coordenadas del dispositivo

En este paso, obtendremos la última ubicación del dispositivo usando Google Play Services: 

• Configure los servicios de Google Play descargando sus componentes en el administrador SDK.
• Agregue la dependencia en build.gradle para la ubicación: » implementación com.google.android.gms:play-services-location:17.1.0″ , la versión puede cambiar más adelante.
• En el método onCreate() , cree una instancia del cliente del proveedor de ubicaciones fusionadas .
• Después de esto, use el método lastlocation() para llamar a la última ubicación. Consulte el código de Kotlin después del Paso 5.

Paso 7: analizar JSON después de obtenerlo

Para obtener JSON , necesitamos usar Volley Library para realizar una solicitud de cliente HTTP

• Agregue ‘implementación com.android.volley:volley:1.1.1’ al archivo de la aplicación gradle.
• Cree el http para el JSON. Por ejemplo: «https://api.weatherbit.io/v2.0/current?» + “lat=” + ubicación?.latitud +”&lon=”+ ubicación?.longitud + “&key=”+ api_id1. Aquí ya hemos generado la clave API, así como las coordenadas de ubicación.
• Realice una solicitud desde esta URL y obtenga los datos.

Paso 8: trabajar con el archivo MainActivity.kt

Actividad principal.kt Actividad principal.kt

import android.annotation.SuppressLint
import android.location.Location
import android.os.Bundle
import android.util.Log
import android.widget.TextView
import androidx.appcompat.app.AppCompatActivity
import com.android.volley.Request
import com.android.volley.Response
import com.android.volley.toolbox.StringRequest
import com.android.volley.toolbox.Volley
import com.google.android.gms.location.FusedLocationProviderClient
import com.google.android.gms.location.LocationServices
import kotlinx.android.synthetic.main.activity_main.*
import org.json.JSONObject
 
class MainActivity : AppCompatActivity() {
     
    // weather url to get JSON
    var weather_url1 = ""
 
    // api id for url
    var api_id1 = "030314b750cc43e7b39e503dfe37150c"
     
    private lateinit var textView: TextView
    private lateinit var fusedLocationClient: FusedLocationProviderClient
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
         
        // link the textView in which the
        // temperature will be displayed
        textView = findViewById(R.id.textView)
         
        // create an instance of the Fused
        // Location Provider Client
        fusedLocationClient = LocationServices.getFusedLocationProviderClient(this)
        Log.e("lat", weather_url1)
         
        // on clicking this button function to
        // get the coordinates will be called
        btVar1.setOnClickListener {
            Log.e("lat", "onClick")
            // function to find the coordinates
            // of the last location
            obtainLocation()
        }
    }
 
    @SuppressLint("MissingPermission")
    private fun obtainLocation() {
        Log.e("lat", "function")
        // get the last location
        fusedLocationClient.lastLocation
            .addOnSuccessListener { location: Location? ->
                // get the latitude and longitude
                // and create the http URL
                weather_url1 = "https://api.weatherbit.io/v2.0/current?" + "lat=" + location?.latitude + "&lon=" + location?.longitude + "&key=" + api_id1
                Log.e("lat", weather_url1.toString())
                // this function will
                // fetch data from URL
                getTemp()
            }
    }
 
    fun getTemp() {
        // Instantiate the RequestQueue.
        val queue = Volley.newRequestQueue(this)
        val url: String = weather_url1
        Log.e("lat", url)
         
        // Request a string response
        // from the provided URL.
        val stringReq = StringRequest(Request.Method.GET, url,
            Response.Listener<String> { response ->
                Log.e("lat", response.toString())
                 
                // get the JSON object
                val obj = JSONObject(response)
                 
                // get the Array from obj of name - "data"
                val arr = obj.getJSONArray("data")
                Log.e("lat obj1", arr.toString())
                 
                // get the JSON object from the
                // array at index position 0
                val obj2 = arr.getJSONObject(0)
                Log.e("lat obj2", obj2.toString())
                 
                // set the temperature and the city
                // name using getString() function
                textView.text = obj2.getString("temp") + " deg Celsius in " + obj2.getString("city_name")
            },
            // In case of any error
            Response.ErrorListener { textView!!.text = "That didn't work!" })
        queue.add(stringReq)
    }
}

Producción:

Nota: Antes de ejecutar la aplicación, asegúrese de que la ubicación en el dispositivo esté activada y que la aplicación tenga acceso a ella.

Enlace GitHub: https://github.com/njdunk07/NJ-Weather-GFG