Angular >= 2 - One Framework Mobile & Desktop

Angular >= 2 - One Framework Mobile & Desktop

• 1.
  Angular >= 2 OneFramework Mobile & Desktop
• 2.
  Palestrante - DaltonSalvatti ● 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. LinguagemTypescript 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 umProjeto 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 - Arquivosde 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 UmComponente - 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 umComponente - Construtor constructor(private changeDetectorRef : ChangeDetectorRef , private sysEscopoManager : SysEscopoManager , private ifDataTypeManager : IfDataTypeManager , private formatter: Formatter) {
• 9.
  Classe de UmComponente - 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 UmComponente - 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 - Bibliotecade 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 - ExemploSysTabela 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() exportclass 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?