Pacote de interface sgcUI Realtime: presença, notificações, atividade e logs ao vivo para Delphi, C++Builder e .NET

Consoles de operação, help desks, painéis de administração e telas de trading precisam responder às mesmas perguntas enquanto os dados continuam mudando: quem está online agora, o que precisa da minha atenção, quem alterou o quê e o que está falhando neste momento. O pacote de interface sgcUI Realtime responde a cada uma delas com um modelo e um conjunto de controles nativos, e conecta todos eles a um feed ao vivo com um único tipo de mensagem JSON.

O pacote Realtime UI em um minuto: presença, notificações, atividade e logs ao vivo, alimentados por uma única mensagem JSON. Também no YouTube.

O pacote de interface Realtime não é um produto separado. Cada peça fica no produto sgcUI que ela estende, sgcUICore, sgcNavigation, sgcToolbar, sgcDashboard e sgcGrid, nas units, pacotes e pacotes NuGet que você já usa, e segue a edição desse produto. Ele funciona em VCL e FireMonkey para Delphi e C++Builder, e em WinForms, WPF e Avalonia para .NET, com temas claro, escuro e de alto contraste, layouts da direita para a esquerda e 12 idiomas.

Presença: quem está online

TsgcUIPresenceModel mantém os usuários da sua aplicação com nome, iniciais, cor, imagem de avatar, status (online, ausente, ocupado ou offline), texto de status e hora do último acesso. Os controles leem o modelo e se redesenham sozinhos quando um status muda.

• Avatar (TsgcVCLAvatar): iniciais ou uma imagem com um indicador de status.
• Grupo de avatares (TsgcVCLAvatarGroup): avatares sobrepostos de uma equipe que se agrupam em um chip “+N” depois de MaxVisible.
• Indicador de presença (TsgcVCLPresenceIndicator): um indicador de status com seu texto, para listas de equipe.
• Os usuários do sgcChat agora também são usuários de presença, então um chat e uma lista de equipe compartilham as mesmas pessoas.

uses
  sgcUICore_Presence, sgcUICore_Presence_VCL;

procedure TfrmMain.LoadTeam;
begin
  // usually set in the Object Inspector
  sgcVCLAvatarGroup1.Model := FPresence;
  sgcVCLAvatarGroup1.MaxVisible := 5;

  FPresence.AddOrUpdate('u1', 'Alex Morgan');
  FPresence.AddOrUpdate('u2', 'Bianca Ruiz', uprAway, 'Back at 3');
  // later, when the status changes
  FPresence.SetStatus('u1', uprBusy, 'In a meeting');
end;

Notificações: toasts, caixa de entrada e selo de sino

TsgcNotificationModel guarda as notificações do usuário atual, com título, corpo, severidade, hora, estado de leitura, ações e grupo, e mantém a contagem de não lidas. Quatro peças a exibem:

• Toasts (TsgcVCLToastManager): toasts empilhados em um canto do formulário ou da tela que nunca tomam o foco, somem sozinhos, pausam enquanto o mouse está sobre eles e oferecem botões de ação. As cores de severidade vêm do tema.
• Caixa de entrada (TsgcVCLNotificationInbox): uma lista virtualizada agrupada por dia, com filtros Todas e Não lidas, marcar tudo como lido, dispensar e ações.
• Preferências (TsgcVCLNotificationPrefsEditor): uma grade de categorias e canais: no app, toast, e-mail e push. O gerenciador de toasts só mostra o que o usuário pediu.
• Selo de sino (TsgcToolbarBadgeLink): a contagem de não lidas como selo de um item da barra de ferramentas, “99+” acima de 99, e de um item do ribbon na edição Registrada.

uses
  sgcNavigation_Notification, sgcNavigation_Toast_VCL,
  sgcNavigation_Inbox_VCL, sgcToolbar_BadgeLink;

procedure TfrmMain.SetupNotifications;
begin
  sgcVCLToastManager1.Model := FNotifications;
  sgcVCLToastManager1.Preferences := FPreferences;
  sgcVCLNotificationInbox1.Model := FNotifications;
  // the unread count as the badge of the first toolbar item
  sgcToolbarBadgeLink1.Source := FNotifications;
  sgcToolbarBadgeLink1.Target := sgcVCLToolbar1;
  sgcToolbarBadgeLink1.ItemIndex := 0;

  FNotifications.Add('Deployed billing', 'Version 1.8 is live in 3 regions',
    nsvSuccess, 'deploy');
end;

Feed de atividades e trilha de auditoria: quem fez o quê

TsgcDashboardActivityModel registra quem fez o quê e quando: o autor, um verbo, o objeto, um resultado e, para fins de auditoria, o valor anterior e o posterior de cada campo alterado. Nomes, cores e avatares dos autores vêm do modelo de presença, então o feed e a lista da equipe sempre concordam.

• Feed de atividades (TsgcVCLActivityFeed): uma linha do tempo agrupada por dia com horas relativas em 12 idiomas, filtros por autor, verbo, tipo de objeto e texto, e paginação para carregar itens mais antigos.
• Trilha de auditoria (TsgcVCLAuditTrail): os mesmos itens como linhas que se expandem para mostrar cada campo alterado com seu valor antigo e novo.
• Blocos do dashboard: blocos Feed de atividades e Trilha de auditoria para o sgcDashboard, com uma caixa de busca, salvos no layout do dashboard.

uses
  sgcDashboard_Activity, sgcDashboard_Activity_VCL;

procedure TfrmMain.RecordApproval;
var
  oItem: TsgcDashboardActivity;
begin
  FActivity.Presence := FPresence; // actor names, colours and avatars
  sgcVCLActivityFeed1.Model := FActivity;
  sgcVCLAuditTrail1.Model := FActivity;

  oItem := TsgcDashboardActivity.Create;
  oItem.Id := 'a18';
  oItem.Time := FActivity.NowUTC;
  oItem.ActorId := 'u2';
  oItem.Verb := 'approved';
  oItem.ObjectName := 'Change request 102';
  oItem.Outcome := 'success';
  oItem.Changes.Add('status', 'pending', 'approved');
  // the model owns the item and inserts it by Time
  FActivity.AddActivity(oItem);
end;

Visualizador de logs ao vivo: o que está falhando agora

TsgcGridLogModel é um buffer circular thread safe de linhas de log com níveis de trace a fatal, uma origem, uma mensagem e propriedades, filtros de nível, origem e texto, e exportação em texto, JSON e CSV. Qualquer thread pode acrescentar linhas a ele; as mudanças chegam à tela em lotes. TsgcGridLogLink transforma qualquer sgcGrid em um visualizador de logs.

• Cores de nível vindas do tema e destaques por texto ou expressão regular.
• Follow tail mantém a linha mais recente à vista e para sozinho quando o usuário rola para cima para ler.
• Pause e Resume, e Copy lines para as linhas selecionadas.
• As linhas visíveis permanecem no lugar enquanto novas linhas chegam e as mais antigas saem do buffer.

uses
  sgcGrid_Log, sgcGrid_LogLink;

procedure TfrmMain.SetupLog;
begin
  FLog.Capacity := 100000;
  sgcGridLogLink1.Model := FLog;
  sgcGridLogLink1.Grid := sgcVCLGrid1;
  sgcGridLogLink1.FollowTail := True;
  sgcGridLogLink1.Active := True;
end;

// from any thread
FLog.Append(gllWarning, 'gateway', 'slow query 668 ms');

Dados ao vivo: uma mensagem para cada feed

Os quatro modelos leem o mesmo tipo de mensagem JSON, então uma única conexão pode transportar todos eles. Cada mensagem indica seu type e um op, e cada modelo pega apenas as suas:

{"type":"presence","op":"upsert","user":{"id":"u7","presence":"away","statusText":"Lunch"}}
{"type":"notification","op":"add","notification":{"id":"n2","title":"Build 812 passed","severity":"success"}}
{"type":"activity","op":"add","item":{"id":"a20","actorId":"u7","verb":"updated","objectName":"Invoice INV-17"}}
{"type":"log","op":"append","entry":{"level":"warning","source":"api","message":"Slow query"}}

Três fontes ao vivo conectam os modelos a um servidor por meio do sgcWebSockets: TsgcUILiveSource_WebSocket, TsgcUILiveSource_MQTT e TsgcUILiveSource_SSE. Cada fonte se conecta a um cliente que você já configurou, com sua URL, credenciais, TLS e reconexão, e entrega cada mensagem aos seus bindings. As mensagens que chegam em uma thread de trabalho são aplicadas na thread principal em um único lote, então uma rajada de mil linhas de log custa uma única visita à interface do usuário. Um binding também pode escolher um tópico MQTT, um nome de evento SSE, um filtro ou um caminho dentro de um envelope da aplicação.

uses
  sgcWebSocket, sgcUICoreWS_Live, sgcUICoreWS_Live_WebSocket;

procedure TfrmMain.ConnectLive;
var
  oSource: TsgcUILiveSource_WebSocket;
begin
  oSource := TsgcUILiveSource_WebSocket.Create(Self);
  oSource.Client := sgcWebSocketClient1;
  // every message carries its type, so each model takes only its own
  oSource.Bindings.Add.Target := FPresence;
  oSource.Bindings.Add.Target := FNotifications;
  oSource.Bindings.Add.Target := FActivity;
  oSource.Bindings.Add.Target := FLog;
end;

As fontes ao vivo são da edição Registrada e exigem o sgcWebSockets, como toda ponte sgcWebSockets do sgcUI. Sem um servidor, ou em uma build Community, a aplicação chama a API do modelo: AddOrUpdate e SetStatus, Add ou Post, AddActivity e Append.

Todas as plataformas, claro e escuro

Os mesmos modelos e o mesmo JSON funcionam em todas as plataformas. Os controles .NET são controles nativos de WinForms, WPF e Avalonia com os mesmos nomes nos pacotes esegece.sgcUICore, esegece.sgcNavigation, esegece.sgcToolbar, esegece.sgcDashboard e esegece.sgcGrid, e todos os temas da suíte, inclusive o escuro e o de alto contraste, chegam aos novos controles.

A demo operacional Realtime

A demo operacional Realtime reúne todas as peças em uma única tela: uma lista da equipe, toasts com a caixa de entrada e as preferências, um selo de sino, o feed de atividades e a trilha de auditoria, e um log ao vivo, tudo conduzido por um simulador embutido, de modo que funciona sem servidor. Ela acompanha as demos do Delphi Suite para VCL, FireMonkey e C++Builder, e as demos do .NET Suite para WinForms, WPF e Avalonia, e o simulador produz a mesma sequência em todas as plataformas. Uma segunda demo VCL, RealtimeLive, envia as mesmas mensagens por um servidor WebSocket in process e um TsgcUILiveSource_WebSocket, e um campo de URL permite conectá-la ao seu próprio servidor.

Edições

Cada peça segue a edição do produto que a contém. As peças de presença do sgcUICore e as peças de log do sgcGrid estão em todas as edições, inclusive na Community, e as mensagens de presença também. As peças de notificação e selo precisam do sgcNavigation e do sgcToolbar, no sgcUI Standard ou superior, e as peças de atividade precisam do sgcDashboard, no sgcUI Professional ou superior. Os pacotes .NET Community gratuitos também as incluem, enquanto a edição Community do Delphi traz somente o sgcGrid. As mensagens ao vivo de notificação, atividade e log, o ribbon como destino de selo e as três fontes ao vivo são da edição Registrada. Leia a página do pacote de interface Realtime e a ajuda do pacote de interface Realtime para os detalhes de cada produto.

Dúvidas ou comentários? Entre em contato, você receberá uma resposta de quem escreveu o código.