.NET Maui, .NET MAUI Community Toolkit

Guardando archivos con .NET MAUI Community Toolkit

Saber como guardar archivos en nuestras aplicaciones en muy importante, sin embargo, la percepción ha sido que la implementación puede ser tediosa. Afortunadamente, con el .NET MAUI Community Toolkit usando FileSaver, ya puedes guardar archivos mucho más rápido. En este artículo te mostraré todos los elementos necesarios para lograrlo.


En primer lugar… ¿Qué necesito saber?

¿Qué es .NET MAUI Community Toolkit?

➖ Es una colección de elementos reutilizables como animaciones, converters, behaviors, entre otros, para desarrollar aplicaciones para iOS, Android, macOS y WinUI usando MAUI.

✍️ Importante! Agregar esta configuración a tu proyecto solo una vez es suficiente para beneficiarte completamente del Community Toolkit. Si ya lo implementaste con otro feature del NuGet,  puedes omitir este paso.

🔧 ¿Aún no lo has implementado? ¡Miralo aquí!

➖ Agrega desde el siguiente NuGet: Community.Toolkit.Maui

➖ Ahora inicialicemos: Ve a tu archivo MauiProgram.cs

En el método CreateMauiApp, verás la siguiente línea: .UseMauiApp<App>(),  justo debajo, agrega lo siguiente:

⚠ No olvides agregar using CommunityToolkit.Maui; en la parte superior de la clase.


Configuraciones requeridas por plataforma

Una vez que tengas lista la instalación de .NET MAUI Community Toolkit. Continuemos agregando algunas configuraciones de plataforma. Para implementarlas, siga las instrucciones añadidas a continuación:

La imagen tiene un atributo ALT vacío; su nombre de archivo es if_android_313085.png

En Android: Ve a  PlataformaAndroid ➖ AndroidManifes.cs y agrega el siguiente código:

       En Tizen: Ve a Plataforma ➖ Tizentizen-manifest.xmly agrega el siguiente código:

🚧  Para iOS/MacCatalyst y Windows no necesita una configuración adicional.


¡Empecemos!

¿Qué es el FileSaver?

Es una API que forma parte .NET MAUI Community Toolkit la cual permite seleccionar un archivo y guardarlo en una carpeta de destino en el sistema de archivos de su dispositivo.

¿Cómo implementarlo?

Paso 1⃣ : Usemos inyección de dependencia

Para este ejemplo, usaremos Inyección de Dependencia. Si quieres saber más sobre este tema puedes entrar al artículo .NET Dependency Injection.

Registra el FileSaver: Para el primer paso, necesitamos usar el FileSaver, que se encarga de guardar el archivo en el sistema. Dado que usaremos Inyección de Dependencia, debemos registrarlo.

Para hacer esto, ve al MauiProgram.cs, navega hasta el método CreateMauiApp y agrega el siguiente código después del constructor:

Inyectando el servicio: Ahora ve a tu MainPage.xaml.cs e inyectemos el File Saver como te muestro a continuación:

Paso 2⃣:  Guardando el archivo

Usaremos el método SaveAsync(), que muestra un cuadro de diálogo en la pantalla que nos permite seleccionar un archivo y guardarlo en una carpeta de destino en el sistema de archivos. Este método contiene el siguiente conjunto de propiedades:

➖Ruta inicial: Esta es la ruta inicial (sugerida) que aparece por defecto en el cuadro de diálogo cuando el usuario va a guardar su archivo. – Es de tipo string.

➖ Nombre de archivo: Al guardar un archivo se le presenta al usuario un nombre sugerido, que se puede editar o mantener como está. Es imprescindible incluir la extensión del archivo en el nombre sugerido. – Es de tipo string. – [Obligatorio]

➖ Stream: Esta es una abstracción de un flujo de bytes. Aquí, administrará todo el contenido del archivo que desea guardar. – Es de tipo Stream. – [Obligatorio]

➖ CancellationToken: Permite enviar una cancelación de la operación que estás realizando. – Es de tipo CancellationToken. – [Obligatorio]

Ahora veamos cómo hacerlo en código.

Agrega el token de cancelación: Para hacerlo busca el comentario en el paso 1 que dice “Add the CancellationToken here”” y agrega la siguiente línea de código:

⚠ Si quieres cancelarlo, solo tienes que hacer lo siguiente:

Para preparar el contenido del archivo que vamos a guardar, primero debemos crear un nuevo método, en este ejemplo le llamaremos SaveFile. Dentro, verás dos líneas de código que explico a continuación:

🔹 Creamos un stream que luego pasaremos como parámetro al método SaveAsync. Para este ejemplo, usaremos texto, pero puedes reemplazarlo con otro tipo de contenido que desees guardar.

🔹 Llamamos al método SaveAsync, usamos “SampleFile.txt” como el nombre de archivo sugerido.

Finalmente, ¡veamos el resultado!


Temas adicionales

FileSaverResult

FileSaverResult cubre el resultado devuelto por el método SaveAsync. Contiene un conjunto de propiedades y métodos que pueden ayudar a determinar si la operación fue exitosa o si hubo una excepción, entre otras informaciones como se muestra a continuación:

🔹 Ruta del archivo: Es una propiedad que se refiere a la ubicación en el disco donde se guardó el archivo. – Es de tipo string.

🔹 Exception: Devuelve una Excepción en caso de que falle la operación de guardado.

🔹 IsSuccessful: Indica el éxito de la operación devolviendo un valor booleano.

🔹 EnsureSuccess: Es un método que verifica si la operación fue exitosa.

Para acceder a estos métodos y propiedades, simplemente guarda el resultado de SaveAsync utilizando await y no olvides hacer el método asíncrono.


¡Y listo! 😎 A partir de ahora, ¡Ya sabes como guardar archivos en tus aplicaciones de .NET MAUI! 💚💕

<Label Text=”¡Gracias por leer mi articulo! 👋” />

Articulo en inglés:

https://askxammy.com/saving-files-with-net-maui-community-toolkit/

Referencias:

Gerald Versluis’s Video

https://learn.microsoft.com/en-us/dotnet/communitytoolkit/maui/essentials/file-saver?tabs=tizen?WT.mc_id=DT-MVP-50033

 

Leave a Reply

Your email address will not be published. Required fields are marked *