Exercício – Acessar recursos da plataforma no Blazor Hybrid

Concluído

Neste exercício, você adiciona a capacidade de salvar e carregar a lista de tarefas pendentes ao sistema de arquivos.

Adicionar botões de carregamento e salvamento

1. Vamos começar adicionando dois novos elementos <button> para o botão carregar e salvar sob <h3> e acima de nossa lista de tarefas no arquivo Todo.razor.

   @page "/todo"
   @using BlazorHybridApp.Data
   
   <h3>Todo (@todos.Count(todo => !todo.IsDone))</h3>
   
   <button @onclick="Save">Save</button>
   <button @onclick="Load">Load</button>
   
   <ul class="list-unstyled">
       @foreach (var todo in todos)
       {
           <li>
               <input type="checkbox" @bind="todo.IsDone" />
               <input @bind="todo.Title" />
           </li>
       }
   </ul>
   

2. Adicione dois métodos no bloco @code para funcionalidade Save e Load:

   private async Task Save()
   {
   }
   
   private void Load()
   {
   }
   

Salvar e carregar dados no disco

O .NET inclui o namespace System.IO que inclui a capacidade de carregar e salvar arquivos em disco. O MAUI do .NET mapeia essa funcionalidade para APIs nativas para você automaticamente; tudo o que você precisa fazer é especificar onde salvar o arquivo. Cada plataforma tem locais especiais para salvar dados do usuário. Os auxiliares do sistema de arquivos no .NET MAUI fornecem acesso para obter vários diretórios de plataforma, incluindo os diretórios de dados do cache e do aplicativo. Eles também pode carregar arquivos que são empacotados diretamente no aplicativo. Agora, vamos implementar o método Save usando System.Text.Json, que é integrado ao .NET.

1. Adicione as diretivas de uso para Microsoft.Maui.Storage, System.Text.Json e System.IO à parte superior do arquivo Todo.razor.

   @page "/todo"
   @using BlazorHybridApp.Data
   @using Microsoft.Maui.Storage
   @using System.IO
   @using System.Text.Json
   

2. Implemente Save serializando os dados em um string, criando o caminho para o arquivo e gravando o conteúdo no arquivo:

   private async Task Save()
   {
       var contents = JsonSerializer.Serialize(todos);
       var path = Path.Combine(FileSystem.AppDataDirectory, "todo.json");
       File.WriteAllText(path, contents);
       await App.Current.MainPage.DisplayAlert("List Saved", $"List has been saved to {path}", "OK");
   }
   

   Observe que também podemos acessar pop-ups de plataforma. Aqui, estamos exibindo um alerta quando o arquivo é salvo.

3. Implemente Load carregando os dados do disco, desserializando os dados e carregando itens na lista de tarefas:

   private void Load()
   {
       var path = Path.Combine(FileSystem.AppDataDirectory, "todo.json");
       if (!File.Exists(path))
           return;
       var contents = File.ReadAllText(path);
       var savedItems = JsonSerializer.Deserialize<List<TodoItem>>(contents);
       todos.Clear();
       todos.AddRange(savedItems);
   }
   

4. Salve o arquivo. Reinicie o aplicativo se ele ainda não estiver em execução.

5. Adicione itens, edite itens e marque itens como concluídos para testar o componente. Selecione o botão Save para salvar itens no disco, feche e reinicie o aplicativo ou faça alterações e selecione Load para carregar os dados salvos.