😳 👏🏿 🙋🏿 Em dias de dúvida, em dias de dolorosa deliberação 🤶🏼 🚵🏿 🙌🏿

Neste artigo, quero lhe contar como visualizei as estatísticas da pandemia em andamento e compartilhar os recursos que você pode encontrar usando a Avalonia UI para isso.

Do autor

, . . — MIT .

Introdução

Este artigo pressupõe que você já pode criar um aplicativo simples usando o AvaloniaUI. Caso contrário, consulte os tutoriais AvaloniaUI ou Habr .

Dados

Antes de tudo, surgiu a questão de onde obter os dados mais recentes e uma pesquisa rápida no Google encontrou a seguinte API que atendia a todos os meus requisitos:

Informações gerais sobre o mundo
Informações gerais para cada país
História para cada país

Estrutura de aplicação

O aplicativo consiste em 3 telas diferentes.

Screenshots

Os movimentos entre as telas são construídos usando o roteamento . Uma característica interessante nesse momento foi a transferência do gatilho da rota para o UserControl.

Para fazer isso, seu ViewModel teve que aceitar Action:

 public CountriesVM(IScreen screen, Action<Country> a)

 CurrentCountyCommand = 
            CountriesCommand = ReactiveCommand.CreateFromObservable(
                () => Router.Navigate.Execute(new CountriesVM(this,GoToCurrentCountry))
                );
....
  public void GoToCurrentCountry(Country c)
        {
            CurrentCountyCommand.Execute(c);
        }

E a chamada para esta ação é selecionar um item na lista:

public Country SelectedCountry
        {
            get => _country;
            set
            {
                this.RaiseAndSetIfChanged(ref _country, value);
                A.Invoke(value);
            }
        }

Inquéritos

Para chamadas para API, a biblioteca flurl foi usada. Que usa internamente o HttpClient e o Newtosoft e é uma extensão para seqüências de caracteres.

Portanto, a obtenção de um modelo a partir de uma solicitação pode ser implementada em uma linha:

 var allCases = await "https://corona.lmao.ninja/all".GetJsonAsync<AllCases>();

Imagens

Para trabalhar com a imagem usando flurl, obtivemos um fluxo que precisava ser compactado no fluxo de memória para criar uma instância do Bitmap:

private async Task<Bitmap> GetFlag(String flagUrl)
        {
            var flagStream = await flagUrl.GetStreamAsync();
            var memoryStream = new MemoryStream();
            flagStream.CopyTo(memoryStream);
            memoryStream.Position = 0;
            var bitmap = new Bitmap(memoryStream);
            return bitmap;
        }

Coleta e Filtragem

Dados dinâmicos do ReactiveUI foram usados para exibir a coleção .

 SourceList<Country> countries = new SourceList<Country>();
 private ReadOnlyObservableCollection<Country> _collection;
 public ReadOnlyObservableCollection<Country> Collection => _collection;

countries.Connect().Filter(filter).ObserveOn(RxApp.MainThreadScheduler).Bind(out _collection).Subscribe();

Também decidi adicionar um filtro para procurar rapidamente um país por nome ou abreviação ISO3 .

Para fazer isso, a cadeia de pesquisa foi vinculada à propriedade:


        public string FilterName
        {
            get => _filterName;
            set { this.RaiseAndSetIfChanged(ref _filterName, value); }
        }

Regra de filtro adicionada:

        private Func<Country, bool> Filter(string filterName)
        {
            if (string.IsNullOrEmpty(filterName)) return x => true;
            return x => x.Name.ToUpper().Contains(filterName.ToUpper()) || x.ISO3.Contains(filterName.ToUpper());
        }

E o próprio filtro é criado:

  var filter = this.WhenValueChanged(x => x.FilterName).Select(Filter);

Exibição de gráfico

Para gráficos, usei a biblioteca Oxyplot do AvaloniaUI.

Infelizmente, a versão está desatualizada no nuget ou eu não o encontrei, então você pode usar o pacote de nuget que criei ou arrastar a fonte com o github.

Para funcionar, você precisa adicionar ao App.xaml:

<StyleInclude Source="resm:OxyPlot.Avalonia.Themes.Default.xaml?assembly=OxyPlot.Avalonia"/>

Para exibir um eixo com uma data específica, e não um número arbitrário (no qual o oxyplot converte a data para o trabalho interno), você deve especificar o tipo de eixo na marcação:

           <avalonia:Plot.Axes>
               <avalonia:DateTimeAxis StringFormat="yyyy-MM-dd" Position="Bottom"></avalonia:DateTimeAxis>
           </avalonia:Plot.Axes>

Fontes e aplicações

Usando a publicação dotnet , compilei binários para as principais plataformas ( aqui ) e para aqueles que estarão mais interessados. O código fonte pode ser encontrado no github .

Em vez de um posfácio

Esse aplicativo é baseado em uma API de terceiros e espero que em breve essa API não seja mais suportada, pois não haverá necessidade.

Lave suas canetas e sente-se em casa. E o suporte para Avalonia pode ser encontrado aqui .

Em dias de dúvida, em dias de dolorosa deliberação