Exercício - Acesse os recursos da plataforma no Blazor Hybrid

Neste exercício, você adiciona a capacidade de salvar e carregar a lista todo no sistema de arquivos.

Adicionar botões de carregar e salvar

1. Vamos começar por adicionar dois novos <button> elementos para os nossos botões de carregar e salvar, abaixo do <h3> e acima da nossa lista de tarefas no ficheiro 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 @code bloco para Save e Load funcionalidade:

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

Salvar e carregar dados em disco

O .NET inclui o System.IO namespace que inclui a capacidade de carregar e salvar arquivos no disco. O .NET MAUI 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 os dados do usuário. Os auxiliares do sistema de arquivos no .NET MAUI fornecem acesso para obter vários diretórios de plataforma, incluindo o cache e os diretórios de dados do aplicativo. Ele também pode carregar arquivos que são agrupados diretamente no aplicativo. Agora, vamos implementar o método usando Saveo System.Text.Json , que é incorporado ao .NET.

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

   @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");
   }
   

   Note que também podemos aceder a pop-ups da plataforma. Aqui, exibimos um alerta quando o arquivo é salvo.

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

   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. Guarde o ficheiro. Reinicie o aplicativo se ele ainda não estiver em execução.

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