Vou abordar dois pontos. Um para aqueles que estão escolhendo uma plataforma de desenvolvimento e outro para aqueles que já começaram a se aventurar mas não sabem como montar o quebra-cabeça. Usarei exemplos de código e os conceitos de programação que uso no desenvolvimento da interface do MyDevBot. - Dalton Salvatti

1. Angular >= 2
One Framework Mobile & Desktop

2. Palestrante - Dalton Salvatti
● Técnico e Engenheiro Eletricista com ênfase em eletrônica e telecomunicações
● MBA em Gestão empresarial Integrada Através de Sistemas ERP
● SAP FI Consultant
● 38 anos de experiência no desenvolvimento de softwares
● 20 anos de experiência no desenvolvimento de soluções empresariais
● 5 anos de experiência como Cientista de Dados
● Atualmente está:
○ desenvolvendo uma plataforma Low Code - MyDevBot
○ desenvolvendo um adaptador para a documentação eletrônica na Agrofértil
● Tecnologias: Java, Typescript, Angular, SQL, Computação em Nuvem, BI e IA.

3. Porque Angular
1. Linguagem Typescript muito semelhante ao Java.
2. Usa componentes reutilizáveis para criar as interfaces.
3. Pode ser usado tanto em Mobile, Browser e até mesmo em Desktop.
4. Muitas bibliotecas disponíveis.
5. Boa documentação.
6. Bom ambiente de desenvolvimento.
“Foco na manutenção do código e não em sua construção”

4. Estudo de Caso - Interface MyDevBot
1. Autorização OAuth2 (via Google/Facebook)
2. Componentes proprietários Menu, Tooltip, Formulário, Grade de navegação
3. Drag & Drop de paineis
4. Cadastro master-slave
5. Atualização real-time de valores com regras armazenadas em servidor
6. Interface de comunicação instantânea via sockets

5. Estrutura de um Projeto
1. App - Arquivos de inicialização do sistema
2. Components - componentes reutilizaveis
3. Core - biblioteca de utilitários
4. Objects - armazena dados de execução
5. Services - regras de negócio
6. Pipes - opcional

6. App - Arquivos de inicialização do sistema
@NgModule({
imports: [BrowserMod………...erModule.forRoot(routes)],
providers: [Title, Authenticati…...penOrNewTable],
declarations: [App, Login, Ma…………...omOther],
entryComponents: [TooltipContent],
bootstrap: [App]
})

7. Exemplo de Um Componente - Navegação
@Component ({
selector: 'cadastroNavegacao' ,
template: `
<div class="navegacao">
<div tabIndex='0' class="scrollArea"
(scroll)="onScroll($event)" (mousemove)="mouseMoving($event)"...>
<table>
<th[style.transform]="translateXY"....>
<div><span>ID</span><span...></span></div></th>
<th *ngFor="let sysViewItem of _sysEscopo.getSysViewItemsWoPriKey(); index as col;"
[style.transform]="translateY">
<div><span>{{sysViewItem.columnName}}</span><span></span></div></th>
<tr *ngFor="let sysRegistroI of getSysRegistros(); index as row;" #register...>
<td style.transform]="translateX"...>{{getLinhaId(sysRegistroI)}}</td>
<td *ngFor="let celula of getLinhaWoId(sysRegistroI); index as col;"...>
<div...>{{celula}}</div></td>
</tr>
<th...><div><span>&Sigma;</span><span></span></div></th>
<th...*ngFor="let celula of getSummaryWoId(); index as col;">
<div...>{{celula}}</div></th>
</table>
</div>
<menu... [anchor]="xxxxx" [sysActions]="xxx" [sysTarefas]="xxx" (execTask)="xxx"></menu>
<menu ...></menu>
</div>` ,

8. Classe de um Componente - Construtor
constructor(private changeDetectorRef : ChangeDetectorRef ,
private sysEscopoManager : SysEscopoManager ,
private ifDataTypeManager : IfDataTypeManager ,
private formatter: Formatter) {

9. Classe de Um Componente - Input
@Input()
set sysEscopo(sysEscopo: SysEscopo) {
if (_sysEscopo === this._sysEscopo) return;
if (this.sysEscopo !== undefined) {
this.sysEscopoWasInvalidated.unsubscribe();
this.sysEscopoWasRefreshed.unsubscribe();
this.sysValorsWasUpdated.unsubscribe();
}
this._sysEscopo = sysEscopo;
if (sysEscopo !== undefined) {
this.sysEscopoWasRefreshed =
sysEscopo.sysEscopoWasRefreshed.subscribe(() => {
this.changeDetectorRef.markForCheck();
});
this.sysValorsWasUpdated =
sysEscopo.sysValorsWasUpdated.subscribe(() => {
this.changeDetectorRef.markForCheck();
});
}
}

10. Classe de Um Componente - Obtendo dados
getSysRegistros (): SysRegistro[] {
return this.sysEscopoManager .getSysRegistros (this._sysEscopo);
}
getLinhaId(sysRegistro: SysRegistro): string {
if (!sysRegistro) return '~';
const linhaId = sysRegistro.id;
if (!sysRegistro.changedAt) return linhaId;
if (!sysRegistro.savedAt) return linhaId + ' >';
if (sysRegistro.changedAt > sysRegistro.savedAt) return linhaId + ' >';
return linhaId;
}

11. Core - Biblioteca de Utilitários de Conversão
/**
* Converte um array de strings para uma relaçào de strings
* separados por ", " (virgula).
* Acrescenta aspas se necessário.
*/
public static toLista(valores: string[], separador: string = ', ', charAspa: string = '''): string
{
if (valores == null) return null;
let lista: string;
let i = 0;
for (let valor of valores) {
if (valor == null) continue;
if (i > 0) lista += separador;
if (charAspa.length > 0) valor = valor.replace(charAspa, charAspa + charAspa);
lista += charAspa + valor + charAspa;
i++;
}
return lista.toString();
}

12. Objects - Exemplo SysTabela
export class SysTabela {
/** Código da tabela formatada no banco de dados.
readonly id: number;
/** Nome técnico da tabela. */
readonly name: string;
/** Pacote ao qual a tabela pertence. */
readonly packageId: number;
readonly sysPackage: SysPackage;
/**
* Nome amigável da tabela
* Usado apenas para fornecer título e referencia amigável ao usuário.
* Também pode ser usada como chave para sistemas multilinguais.
*/
readonly alias: string;

13. Object SysTabela - Continuação
/**
* Relação de campos da Tabela Formatada.
* Usado para armazenar os objetos SysCampos da tabela para orientar
* a apresentação das informações na tabela de detalhes dos formulários de cadastro.
*/
readonly sysCampoById: {[key: number]: SysCampo; } = {};
readonly sysCampoByName: {[key: string]: SysCampo; } = {};
readonly sysCampos: SysCampo[] = [];
readonly sysViewItems: SysViewItem[] = [];
sysLigacaos: SysLigacao[];

14. Object SysTabela - Construtor
constructor(objTabela: any) {
this.id = objTabela.id;
this.packageId = objTabela.packageId;
if (objTabela.sysPackage)
this.sysPackage = new SysPackage(objTabela.sysPackage);
this.name = objTabela.name;
this.alias = objTabela.alias;
this.ordem = objTabela.ordem;
const objSysCampos = objTabela.sysCampos;
for (const objSysCampo of objSysCampos) {
const sysCampo = new SysCampo(this.id, objSysCampo);
const id = sysCampo.id;
const name = sysCampo.name;
this.sysCampoById[id] = sysCampo;
this.sysCampoByName[name] = sysCampo;
this.sysCampos.push(sysCampo);
}
...

15. Object SysTabela - Serializador Json
public toJson(): any {
const type = SysTabela.name;
const id = this.id;
const name = this.name;
return {type, id, name};
}

16. Serviço - SysTabelaManager
@Injectable()
export class SysTabelaManager {
private relativeUrlTabela = 'metadata/tabela/${tabelaId}';
public sysTabelaByCode: { [id: number]: SysTabela } = {};
private sysAbas: SysAbas;
sysTabelaWasInvalidated = new EventEmitter<SysTabela>();
constructor (private restClient: RestClient) {
this.readSysAbas();
}
....
}

17. Serviço SysTabelaManager - Continuação
async getSysTabela(sysTabelaId: number): Promise<SysTabela> {
if (!sysTabelaId) return undefined;
let sysTabela = this.sysTabelaByCode[sysTabelaId];
if (sysTabela !== undefined) return sysTabela;
const args = new Map<string, string>();
args.set('${tabelaId}', sysTabelaId.toString());
try {
const json = await this.restClient.getAsPromise(this.relativeUrlTabela, args);
if (!json) return undefined;
sysTabela = new SysTabela(json);
this.sysTabelaByCode[sysTabelaId] = sysTabela;
setTimeout(() => this.readSysLigacaos(sysTabelaId));
return sysTabela;
} catch (error) {
return undefined;
}
}

18. Pipe - NoSanitize
@Pipe({ name: 'noSanitize' })
export class NoSanitize implements PipeTransform {
constructor(private domSanitizer: DomSanitizer) {}
transform(html: string): SafeHtml {
return this.domSanitizer.bypassSecurityTrustHtml(html);
}
}
<td class="image" [innerHtml]="getHtmlImage(sysActionI) | noSanitize"></td>

19. Perguntas?