Creación de Web API, App Móvil y App Web con Blazor .NET 7.0 Parte 3

Continuaremos con la creación de la app móvil que consumirá el contenido de nuestra Web API.

Creamos un nuevo proyecto ,NET MAUI Blazor App.

Tecleamos el nombre de nuestro proyecto y seleccionamos la ruta.

Seleccionamos .NET 7.0 y creamos el proyecto.

Podemos ejecutar nuestra app para verificar que se haya creado correctamente, para esto necesitamos instalar un emulador de Android, seleccionamos Tools/Android/Android Device Manager.

Presionamos +Nueva y seleccionamos el tipo de emulador con el que realizaremos las pruebas.

Una vez instalado el emulador seleccionamos Windows Machine/Android Emulators/emulador.

Ejecutamos, se visualizará el mensaje, podemos dar OK.

Si visualizamos la siguiente pantalla se creó correctamente nuestro proyecto.

Instalamos el NuGet Newtonsoft.Json.

Ahora crearemos un folder llamado Models y dentro una clase llamada RegistroResponseModel.cs.

En dicha clase agregaremos los campos con los cuales realizaremos el CRUD.

Creamos una segunda clase en Models llamada MainResponseModel.cs.

En la clase MainResponseModel.cs manejaremos las respuestas de los procesos, IsSuccess puede ser True o False dependiendo la respuesta de la operación, ErrorMessage tendrá el error que se generó y Content tendrás el mensaje de la operación.

También crearemos un folder llamado Services y dentro una interfase llamada IRegistroService.cs.

En la interfase tendremos los métodos que utilizaremos en los procesos.

Creamos la clase RegistroService.cs dentro del folder Services.

En dicha clase implementaremos los métodos de la interfase.

Implementaremos el método GetAllRegistro(), crearemos una variable privada _webapibaseUrl que llamara la IP de nuestra Web API.

Tecleamos el código para obtener los datos de la API, en la variable url agregaremos el resto de la cadena de la API string url = $"{_webapiUrl}/api/Registros/GetAllRegistro"; verificamos si la respuesta es OK, leemos el contenido de la API con la variable response, deserializamos la información para poder ser mostrada en la tabla.

También registramos el servicio en MauiProgram.cs.

Editamos la página Pages\Index.razor e inyectamos el servicio IRegistroService.cs.

Tecleamos el código para mostrar todos los registros en la tabla.

También la página Pages\Index.razor creamos el inicializador que llamara el punto se servicio para obtener la lista de todos los registros.

Editamos Platforms\Android\AndroidManisfest.xml  y agregamos android:usesCleartextTraffic="true" para no tener problemas con el tráfico.

Comentaríamos todos los errores que nos aparezcan y ejecutamos la App, se visualizaran los registros en la pantalla inicial.

Ahora crearemos una página con la cual realizaremos el CRUD, botón derecho sobre la carpeta Pages, seleccionamos Add/Razor Component...

Lo llamaremos NuevoEditaRegistro.razor.

Asignamos el nombre "/nuevoRegistro", llamamos Model e inyectamos los servicios.

Creamos un poco de diseño con Bootstrap para llamar los INPUT de los campos.

Para poder revisar nuestro avance necesitamos llamar la página desde el navegador, para esto, editamos Shared/NavMenu.razor, podemos copiar todo el bloque y solo llamamos "nuevoRegistro" de la página  NuevoEditaRegistro.razor.

Ejecutamos la App, presionamos el navegador y seleccionamos Nuevo registro.

Podemos visualizar el diseño de la página.

Nuevo registro

Ahora crearemos el método para un agregar un nuevo registro, primero crearemos una clase en la carpeta Models llamada NuevoEditaRegistroRequest.cs que contendrá los campos de nuestra App.

En la interfase Services\IRegistroService.cs creamos el método Task<MainResponseModel> AddRegistro(NuevoEditaRegistroRequest registroRequest).

Implementamos el método en Services\RegistroService.cs.

Realizamos el código para el nuevo registro, serializamos el contenido con var serializeContent = JsonConvert.SerializeObject(registroRequest); posteriormente utilizamos el evento PostAsync(), validamos que todo este correcto y leemos los datos en var response = await apiResponse.Content.ReadAsStringAsync(); posteriormente deserealizamos con returnResponse = JsonConvert.DeserializeObject<MainResponseModel>(response);, por último, la variable url llama la ruta del Web API.

Editamos NuevoEditaRegistroRequest.cs y agregamos el método NuevoEditaRegistroDetalle(), que será donde realizamos el alta de nuevo registros, así como la modificación de los mismos.

Crearemos propiedades private de todos los campos con private int folio;, crearemos un objecto con los datos a actualizar del modelo NuevoEditaRegistroRequest.cs con var nuevoeditaRegistroRequest = new NuevoEditaRegistroRequest y las vinculamos con Folio = folio, también debemos vincular las propiedades con los INPUT con @bind="folio", llamaremos var response = await RegistroService.AddRegistro(nuevoeditaRegistroRequest); y en caso de no haber ningún error se inicializan los campos y se visualiza el mensaje de alta efectuada, por último asignamos   @onclick="NuevoEditaRegistroDetalle" al botón Grabar.

Ejecutamos la App, seleccionamos el navegador y presionamos Nuevo registro.

Se visualizará la pantalla donde debemos teclear todos los datos solicitados, al final debemos presionar el botón Grabar y se visualizará el mensaje "El registro ha sido agregado".

Al ir a Home se visualizará el nuevo registro en la lista.

Editar y modificar registro

Crearemos los métodos para actualizar y buscar registros en la Services\IRegistroService.cs. 

Implementáremos los métodos de la interfase en Services\RegistroService.cs, el método UpdateRegistro() que es muy parecido al método AddRegistro(), para ello utilizaremos en evento PutAsync().

También crearemos el método GetRegistroByID(), ya que, con él, llamaremos la información del registro seleccionado en la lista, para ello utilizaremos en evento GetAsync().

Para la edición de los registros de la lista ingresaremos a Pages\Index.razor y agregaremos un método y llamaremos el modelo RegistroResponseModel.cs, se visualizará un mensaje donde se deberá seleccionar una opción, Editar o Eliminar.

Ingresaremos una directiva @page "/editaRegistro/{registroID:int}" en Pages\NuevoEditaRegistro.razor, para obtener el ID y con ellos los datos del registro.

También agregamos una propiedad como parameter con la cual obtendré el ID del registro. 

Crearemos un nuevo método para sincronizar el inicializador que llamara la API con los datos existentes del registro, para ello utilizaremos el método GetRegistroByID() que se ubica en Services\RegistroService.cs.

En el procedimiento NuevoEditaRegistroDetalle() de la página Pages\NuevoEditaRegistro.razor,  agregamos la condición para grabar los cambios de los registros, llamaremos el método UpdateRegistro().

Inyectaremos el administrador del servicio de navegación @inject NavigationManager NavManager; en  Pages\Index.razor.

Teclearemos el nombre de la página editaRegistro que se ubica en Pages\NuevoEditaRegistro.razor, con el identificador que llamara el detalle del registro.

Ejecutamos la App y seleccionamos algún registro, se visualizará el mensaje "Selecciona una opción", seleccionamos "Editar".

Se visualizarán los datos del registro seleccionado, realizamos algún cambio y presionamos Grabar, si todo está correcto se visualizar el mensaje "Los cambios han sido guardados".

Eliminar registro

Por último, realizaremos la eliminación del registro, agregamos el método DeleteRegistro() en la interfase Services\IRegistroService.cs.

Implementaremos el método de la interfase en  Services\IRegistroService.cs, llamaremos la url DeleteRegistro de nuestra Web API, para eliminar un registro se necesita un identificador por eso no podemos llamar DeleteAsync(), en su caso llamaremos una solicitud de tipo mensaje http con var request = new HttpRequestMessage(); configuraremos el método de punto de solicitud para eliminar los puntos con  request.Method = HttpMethod.Delete; llamaremos la información de la url con  request.RequestUri = new Uri(url); el contenido del punto llamara la información serializada con request.Content = new StringContent(serializeContent, Encoding.UTF8, "application/json"); y el vez de llamar DeleteAsync() llamare el método de enviar SendAsync() para que la solicitud sea aprobada.

Ahora en el archivo Pages\Index.razor llamare el servicio del DeleteRegistro() que se ubica en Services\IRegistroService.cs, y se enviara el ID, en caso de no haber ningún error se llama OnInitializedAsync() que mostrara la lista de registro actualizada.

Ejecutamos la App, seleccionamos un registro y presionamos Eliminar.

En caso de no existir algún error se enviará de nuevo a la lista de registros actualizados.

Podrás generar un archivo .APK para instalarlo en tu celular Android.

En la siguiente publicación terminaremos con la creación de un sitio Web que consuma la Web Api.