Flask es una API de Python que nos permite construir aplicaciones web. Fue desarrollado por Armin Ronacher. El marco de Flask es más explícito que el marco de Django y también es más fácil de aprender porque tiene menos código base para implementar una aplicación web simple. Un marco de aplicación web o marco web es la colección de módulos y bibliotecas que ayuda al desarrollador a escribir aplicaciones sin escribir códigos de bajo nivel, como protocolos, gestión de subprocesos, etc. Flask se basa en el kit de herramientas WSGI (Interfaz de puerta de enlace del servidor web) y el motor de plantillas Jinja2. El siguiente artículo demostrará cómo usar Flask para el backend mientras se desarrolla una aplicación de Android.
Implementación paso a paso
Paso 1: instalación de matraz
Abra la terminal e ingrese el siguiente comando para instalar el matraz
pip install flask
Paso 2: Agregar dependencias de OkHttp al archivo build.gradle
OkHttp es una biblioteca desarrollada por Square para enviar y recibir requests de red basadas en HTTP. Para realizar requests HTTP en la aplicación de Android, utilizamos OkHttp. Esta biblioteca se utiliza para realizar llamadas síncronas y asíncronas. Si una llamada de red es síncrona, el código esperará hasta que recibamos una respuesta del servidor con el que intentamos comunicarnos. Esto puede dar lugar a latencia o retraso en el rendimiento. Si una llamada de red es asíncrona, la ejecución no esperará hasta que el servidor responda, la aplicación se ejecutará y, si el servidor responde, se ejecutará una devolución de llamada.
Dependencias de Android
Agregue las siguientes dependencias al archivo build.gradle en Android Studio
implementation("com.squareup.okhttp3:okhttp:4.9.0")
Paso 3: trabajar con el archivo AndroidManifest.XML
Agregue la siguiente línea arriba de la etiqueta <application>
<uses-permission android:name="android.permission.INTERNET"/>
Agregue la siguiente línea dentro de la etiqueta <application>
android:usesCleartextTraffic="true">
Paso 4: secuencia de comandos de Python
- @app.route(“/”) está asociado con la función showHomePage(). Supongamos que el servidor se ejecuta en un sistema con dirección IP 192.168.0.113 y número de puerto 5000. Ahora, si se ingresa la URL «http://192.168.0.113:5000/» en un navegador, se ejecutará la función showHomePage y devolver una respuesta «Esta es la página de inicio».
- app.run() alojará el servidor en localhost, mientras que app.run(host=”0.0.0.0″) alojará el servidor en la dirección IP de la máquina
- Por defecto se usará el puerto 5000, podemos cambiarlo usando el parámetro ‘puerto’ en app.run()
Python
from flask import Flask
# Flask Constructor
app = Flask(__name__)
# decorator to associate
# a function with the url
@app.route("/")
def showHomePage():
# response from the server
return "This is home page"
if __name__ == "__main__":
app.run(host="0.0.0.0")
Ejecutar el script de Python
ejecute el script de python y el servidor se alojará.
Paso 5: trabajar con el archivo activity_main.xml
- Cree un diseño de restricción .
- Agregue un TextView con ID ‘nombre de página’ al diseño de restricción para mostrar las respuestas del servidor
- Por lo tanto, agregue el siguiente código al archivo activity_main.xml en Android Studio.
XML
<?xml version="1.0" encoding="utf-8"?> <androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@color/white" tools:context=".MainActivity"> <TextView android:id="@+id/pagename" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_marginStart="12dp" android:layout_marginEnd="12dp" android:textAlignment="center" android:textColor="@color/black" android:textSize="16sp" android:textStyle="bold" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" /> </androidx.constraintlayout.widget.ConstraintLayout>
Paso 6: trabajar con el archivo MainActivity.java
Vaya al archivo MainActivity.java y consulte el siguiente código. En primer lugar, necesitamos un cliente OkHttp para realizar una solicitud
OkHttpClient okhttpclient = new OkHttpClient();
A continuación, cree una solicitud con la URL del servidor. En nuestro caso, es “http://192.168.0.113:5000/”. Observe ‘/’ al final de la URL, estamos enviando una solicitud para la página de inicio.
Request request = new Request.Builder().url("http://192.168.0.113:5000/").build();
Ahora, haga una llamada con la solicitud anterior. El código completo se da a continuación. Se llamará a onFailure() si el servidor está inactivo o no se puede acceder, por lo que mostramos un texto en TextView que dice ‘servidor inactivo’. Se llamará a onResponse() si la solicitud se realiza correctamente. Podemos acceder a la respuesta con el parámetro Response que recibimos en onResponse()
// to access the response we get from the server response.body().string;
A continuación se muestra el código del archivo MainActivity.java . Se agregan comentarios dentro del código para comprender el código con más detalle.
Java
import android.os.Bundle;
import android.widget.TextView;
import android.widget.Toast;
import androidx.appcompat.app.AppCompatActivity;
import org.jetbrains.annotations.NotNull;
import java.io.IOException;
import okhttp3.Call;
import okhttp3.Callback;
import okhttp3.OkHttpClient;
import okhttp3.Request;
import okhttp3.Response;
public class MainActivity extends AppCompatActivity {
// declare attribute for textview
private TextView pagenameTextView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
pagenameTextView = findViewById(R.id.pagename);
// creating a client
OkHttpClient okHttpClient = new OkHttpClient();
// building a request
Request request = new Request.Builder().url("http://192.168.0.113:5000/").build();
// making call asynchronously
okHttpClient.newCall(request).enqueue(new Callback() {
@Override
// called if server is unreachable
public void onFailure(@NotNull Call call, @NotNull IOException e) {
runOnUiThread(new Runnable() {
@Override
public void run() {
Toast.makeText(MainActivity.this, "server down", Toast.LENGTH_SHORT).show();
pagenameTextView.setText("error connecting to the server");
}
});
}
@Override
// called if we get a
// response from the server
public void onResponse(
@NotNull Call call,
@NotNull Response response)
throws IOException {pagenameTextView.setText(response.body().string());
}
});
}
}
Nota:
- Asegúrese de que la aplicación de Android se ejecute en un dispositivo que esté conectado a la misma red que el sistema que aloja el servidor. (si el servidor del matraz se ejecuta en una máquina que está conectada a WIFI ‘ABC’, necesitamos conectar nuestro dispositivo Android a la misma red ‘ABC’)
- Si la aplicación no se conecta al servidor, asegúrese de que su firewall permita conexiones en el puerto 5000. De lo contrario, cree una regla de entrada en la configuración avanzada del firewall.
Producción:
Aplicación de Android en ejecución
Paso 7: Comprobación de las requests realizadas en Python Editor
Si se realiza una solicitud, podemos ver la dirección IP del dispositivo que realiza la solicitud, la hora en que se realizó la solicitud y el tipo de solicitud (en nuestro caso, el tipo de solicitud es GET).
Solicitud POST
Podemos usar el cliente okhttp para enviar datos a través del servidor. Agregue la siguiente línea a las declaraciones de importación
from flask import request
Necesitamos establecer el método de una ruta como POST. Agreguemos un método y asociémosle una ruta. El método imprime el texto que ingresamos en la aplicación de Android en la consola en pycharm. Agrega las siguientes líneas después del método showHomePage() .
@app.route("/debug", methods=["POST"])
def debug():
text = request.form["sample"]
print(text)
return "received"
El guión completo se muestra a continuación.
Python
from flask import Flask
# import request
from flask import request
app = Flask(__name__)
@app.route("/")
def showHomePage():
return "This is home page"
@app.route("/debug", methods=["POST"])
def debug():
text = request.form["sample"]
print(text)
return "received"
if __name__ == "__main__":
app.run(host="0.0.0.0")
Cree un DummyActivity.java en Android Studio. Esta actividad se iniciará una vez que obtengamos una respuesta del servidor del método showHomePage() . Agregue las siguientes líneas en la devolución de llamada onResponse() en MainActivity.java .
Intent intent = new Intent(MainActivity.this, DummyActivity.class); startActivity(intent); finish();
Paso 1: trabajar con el archivo activity_dummy.xml
XML
<?xml version="1.0" encoding="utf-8"?> <androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@color/white" tools:context=".DummyActivity"> <EditText android:id="@+id/dummy_text" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginStart="12dp" android:layout_marginEnd="12dp" android:backgroundTint="@color/black" android:hint="enter any text" android:textColor="@color/black" android:textColorHint="#80000000" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" /> <Button android:id="@+id/dummy_send" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Send" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toBottomOf="@+id/dummy_text" app:layout_constraintVertical_bias="0.1" /> </androidx.constraintlayout.widget.ConstraintLayout>
Paso 2: Trabajar con el archivo DummyActivity.java
- Usamos un formulario para enviar los datos usando el cliente OkHTTP.
- Pasamos este formulario como parámetro a post() mientras construimos nuestra solicitud.
- Agregue un onClickListener() para realizar una solicitud POST.
- Si se envían los datos y recibimos una respuesta, mostramos un brindis que confirma que se han recibido los datos.
A continuación se muestra el código para el archivo DummyActivity.java . Se agregan comentarios dentro del código para comprender el código con más detalle.
Java
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.EditText;
import android.widget.Toast;
import androidx.appcompat.app.AppCompatActivity;
import org.jetbrains.annotations.NotNull;
import java.io.IOException;
import okhttp3.Call;
import okhttp3.Callback;
import okhttp3.FormBody;
import okhttp3.OkHttpClient;
import okhttp3.Request;
import okhttp3.RequestBody;
import okhttp3.Response;
public class DummyActivity extends AppCompatActivity {
private EditText editText;
private Button button;
private OkHttpClient okHttpClient;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_dummy);
editText = findViewById(R.id.dummy_text);
button = findViewById(R.id.dummy_send);
okHttpClient = new OkHttpClient();
button.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
String dummyText = editText.getText().toString();
// we add the information we want to send in
// a form. each string we want to send should
// have a name. in our case we sent the
// dummyText with a name 'sample'
RequestBody formbody
= new FormBody.Builder()
.add("sample", dummyText)
.build();
// while building request
// we give our form
// as a parameter to post()
Request request = new Request.Builder().url("http://192.168.0.113:5000/debug")
.post(formbody)
.build();
okHttpClient.newCall(request).enqueue(new Callback() {
@Override
public void onFailure(
@NotNull Call call,
@NotNull IOException e) {
runOnUiThread(new Runnable() {
@Override
public void run() {
Toast.makeText(getApplicationContext(), "server down", Toast.LENGTH_SHORT).show();
}
});
}
@Override
public void onResponse(@NotNull Call call, @NotNull Response response) throws IOException {
if (response.body().string().equals("received")) {
runOnUiThread(new Runnable() {
@Override
public void run() {
Toast.makeText(getApplicationContext(), "data received", Toast.LENGTH_SHORT).show();
}
});
}
}
});
}
});
}
}
Producción:
Comprobación de la consola del matraz
Aquí podemos ver que la aplicación de Android realizó una solicitud POST. incluso podemos ver los datos que enviamos a través del servidor
Publicación traducida automáticamente
Artículo escrito por rohittofficialwork y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA