web services con php mysql y android- guia basica

ANDROFAST mysql, Webservices 5 comentarios
Hola amig@s como están les doy un saludo, les comento que a pedido de algunos usuarios hoy veremos una guía super pero super básica de como crear una web services y luego consumir dichos datos hacia nuestra app en android.
Importante: Primero les comento que esto sera super básico para programadores recién iniciándose, así que los super pro seguir su camino, también les dejo una documentación al respecto en este enlace, que es una webservices  peroooo como yo se que eres don vergas y doña vergas (sarcasmo activado) no van a leerlo entonces lo resumimos en una imagen hecha por tecnología alienigena (paint)..
Bien trasladamos a un caso de la vida real supongamos tu el que esta leyendo este tutorial…si tu don vergas que por no leer documentación leerás mi resumen, mira tu eres dueño de un super negocio que hace delivery de frutas y tienes muchos clientes y deseas llegar a todos, y que cosa tienen todos… pues tienen móviles entonces tu deseas que tus clientes compren tus frutas por una app y claro también por tu portal web entonces necesitas gestionar a tus clientes y tus productos y para eso necesitas una base de datos hasta ahí vamos bien pero como conectas la base de datos con tu portal web y la app, pues fácil con una webservices que no es mas que una colección de protocolos y estándares que sirven para intercambiar datos entre aplicaciones, en lenguaje simple nos servirá de puente para nuestras app y portales web, bien mas claro que el agua no puede ser, te he resumido 50 paginas de leer, ahora vamos al caso practico.

Paso 1) Crearemos nuestra base de datos en nuestro phpmyadmin, si eres nuevo te recomiendo que veas estos link primero:

      Como instalar xampp en windows guía

      como funciona phpmyadmin guia basica desde cero

Para nuestra base de datos llamada producto tendremos una tabla llamada fruta con los siguientes atributos id, nombre, color.

Te dejo el código de la base de datos
CREATE TABLE `fruta` (
  `id` int(11) NOT NULL,
  `nombre` varchar(50) NOT NULL,
  `color` varchar(50) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

ALTER TABLE `fruta`
  ADD PRIMARY KEY (`id`);

ALTER TABLE `fruta`
  MODIFY `id` int(11) NOT NULL AUTO_INCREMENT;

Ahora necesitamos crear nuestro puente, que digo nuestra webservices que nos servirá para conectar los datos de la BD con nuestra app, para ello crearemos dos archivos uno llamado Conexion.php y otro llamado Registrar.php.

Creamos el archivo Conexion.php

<?php
//Define tu host aquí.
$HostName = "localhost";

//Defina su nombre de usuario de la base de datos aquí.
$HostUser = "root";

//Defina la contraseña de su base de datos aquí.
$HostPass = "12345";

//Defina el nombre de su base de datos aquí.
$DatabaseName = "producto";
?>

Creamos el archivo Registrar.php

<?php

include 'Conexion.php' ;
 
 $con = mysqli_connect($HostName,$HostUser,$HostPass,$DatabaseName);
 
 $nombre = $_POST['nombre'];
 $color = $_POST['color'];

 $Sql_Query = "insert into fruta(nombre,color) values ('$nombre','$color')";
 
 if(mysqli_query($con,$Sql_Query)){
 
 echo 'Datos enviados con éxito';
 
 }
 else{
 
 echo 'Inténtalo de nuevo';
 
 }
 mysqli_close($con);
?>

Nuestros archivos php deben estar guardados en una carpeta dentro de nuestro htdocs del xampp yo le llamare a la carpeta frutas y quedara de la siguiente forma:

Creamos nuestra app en Android Studio un nuevo proyecto llamado AppWebServicesBasico

Dejamos con estas opciones y le damos next.

Seleccionamos una nueva actividad en blanco “Empty Activity”  siguiente.

Dejamos nuestro activity con su nombre por defecto MainActivity y clic en finalizar

Ahora vamos a nuestro AndroidManifest y debemos agregar un permiso

Este es el permiso.

<uses-permission android:name="android.permission.INTERNET"/>

Y el documento quedara así:

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.androidmorefast.pc.appwebservicesbasico">
    <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>

Ahora debemos ir a nuestro buil.gradle y abrirlo.

Una vez abierto debemos agregar el siguiente código:
useLibrary'org.apache.http.legacy'

Quedando de la siguiente manera como muestro en la imagen:

Ahora debemos crear la parte gráfica de nuestra app necesitamos dos editText y un botón para tener el siguiente resultado:

Puedes ingresar todo manualmente o te dejo el código entras en modo texto y reemplazas

Reemplazamos el código que hay ahí por este:
<?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:id="@+id/activity_main"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context="com.androidmorefast.pc.appwebservicesbasico.MainActivity">

        <TextView
            android:id="@+id/textView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentTop="true"
            android:layout_centerHorizontal="true"
            android:gravity="center"
            android:text="Enviar datos al servidor"
            android:textSize="20dp"
            android:textColor="#000000" />

    <EditText
        android:id="@+id/txtNombre"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:layout_below="@+id/textView"
        android:layout_marginTop="28dp"
        android:ems="10"
        android:gravity="center"
        android:hint="Ingresa Nombre"
        android:inputType="textPersonName" />

    <EditText
        android:id="@+id/txtColor"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/txtNombre"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="46dp"
        android:ems="10"
        android:gravity="center"
        android:hint="Ingresa Color"
        android:inputType="textPersonName" />

    <Button
        android:id="@+id/button"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/txtColor"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="38dp"
        android:text="Enviar datos " />

    </RelativeLayout>

Ahora a llegado el momento de meter mano al codigo, tu MainActivity.java debería de quedar así.

package com.androidmorefast.pc.appwebservicesbasico;

import android.os.AsyncTask;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.EditText;
import android.widget.Toast;
import org.apache.http.HttpEntity;
import org.apache.http.HttpResponse;
import org.apache.http.NameValuePair;
import org.apache.http.client.ClientProtocolException;
import org.apache.http.client.HttpClient;
import org.apache.http.client.entity.UrlEncodedFormEntity;
import org.apache.http.client.methods.HttpPost;
import org.apache.http.impl.client.DefaultHttpClient;
import org.apache.http.message.BasicNameValuePair;
import java.io.IOException;
import java.util.ArrayList;
import java.util.List;

public class MainActivity extends AppCompatActivity {

    String ServerURL = "http://192.168.8.133/Frutas/Registrar.php" ;
    EditText nombre, color;
    Button button;
    String TempNombre, TempColor;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        nombre = (EditText)findViewById(R.id.txtNombre);
        color = (EditText)findViewById(R.id.txtColor);
        button = (Button)findViewById(R.id.button);

        button.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {

                ObtenerDatos();

                InsertaDatos(TempNombre, TempColor);

            }
        });
    }

    public void ObtenerDatos(){

        TempNombre = nombre.getText().toString();

        TempColor = color.getText().toString();

    }

    public void InsertaDatos(final String nombre, final String color){

        class SendPostReqAsyncTask extends AsyncTask<String, Void, String> {
            @Override
            protected String doInBackground(String... params) {

                String NombreHolder = nombre ;
                String ColorHolder = color ;

                List<NameValuePair> nameValuePairs = new ArrayList<NameValuePair>();

                nameValuePairs.add(new BasicNameValuePair("nombre", NombreHolder));
                nameValuePairs.add(new BasicNameValuePair("color", ColorHolder));

                try {
                    HttpClient httpClient = new DefaultHttpClient();

                    HttpPost httpPost = new HttpPost(ServerURL);

                    httpPost.setEntity(new UrlEncodedFormEntity(nameValuePairs));

                    HttpResponse httpResponse = httpClient.execute(httpPost);
                    HttpEntity httpEntity = httpResponse.getEntity();


                } catch (ClientProtocolException e) {

                } catch (IOException e) {

                }
                return "Datos insertados con éxito";
            }

            @Override
            protected void onPostExecute(String result) {

                super.onPostExecute(result);

                Toast.makeText(MainActivity.this, "Datos enviados con éxito", Toast.LENGTH_LONG).show();

            }
        }

        SendPostReqAsyncTask sendPostReqAsyncTask = new SendPostReqAsyncTask();

        sendPostReqAsyncTask.execute(nombre, color);
    }

}

Si revisan el código hay una parte que dice lo siguiente:

String ServerURL = "http://192.168.8.133/Frutas/Registrar.php" ;
Como ven hay una IP esa ip es de mi computadora ustedes deben de averiguar la ip de su computadora y cambiarla por la suya, pues así a la hora de que prueben su aplicación desde su celular o emulador genymotion, la aplicación sabrá que nuestro server se encuentra ahí.
Importante: si usas tu celular, entonces este debe estar conectado vía wifi, para que tanto tu movil como tu pc estén en el mismo rango de Ips.

Bien hasta ahora ya esta funcionando nuestra app movil pero según nuestra imagen de la webservices también deberíamos poder consumir los datos por una web app para ello crearemos un archivo html llamado Registrar.html y lo guardaremos junto a nuestros archivos php

El código del archivo html sera el siguiente:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Registrando por una web app</title>
</head>
<body>
 <form action="Registrar.php" method="post">
   Nombre :<input maxlength="25" size="25" name="nombre" />
 <br />
   Color:<input maxlength="35" size="25" name="color" />
 <br />
  <input type="submit" value="Registrar" />
 </form>
</body>
</html>

Se vera como la siguiente imagen al seguir la url de la webservices:
http://192.168.8.133/Frutas/Registrar.html

En cualquier caso ya se por la app movil o por la app web debe registrar los datos que le enviamos:

, ,

5 comentarios en «web services con php mysql y android- guia basica»

  4. Pingback: como funciona phpmyadmin guia basica desde cero | ANDROFAST

Deja una respuesta

Tu dirección de correo electrónico no será publicada.

WhatsApp chat