pós engenharia de software

Prévia do material em texto

pós engenharia de software 
antes da páscoa: Poo e briefing de design patterns.
pós engenharia de software dia 04/05/2019
Padrões arquiteturais
Refactoring
Projeto.
Padrão de mercado em java usa Spring(que será mostrado no curso)
Independente da mudança arquitetural, o java se mantém por ser desacoplado dos padrões, e independente da mudança, ele acrescenta camadas para se compatibilizar.
Arquitetura de software:
Consiste em projetar a estrutura dos componentes do sistema e as regras de comunicação entre esses sistemas.
“Refs: valipour, M. Ac. brief software of survey software architecture concepts and service oriented architecture”.
Define através de modelos técnicos e representações de visões define desempenho, confiabilidade, escalonamento, manutenibilidade.
Tipos de arquitetura de software:
Arquitetura cliente servidor: aparelhos acessam a internet, e então servidor.
utilizava-se AWT, swing, applets.
Arquitetura monolítica: na arquitetura monolítica, numa única aplicação de software, a interface e usuário e código de acesso aos dados são combinados em único programa. 
arquitetura web(pode ter monolítico na web e web), massificação de sistema pela internet, grande impulsão pelo e-commerce.(em cima: html, js, mvc, no meio os serviços, e na base o banco de dados), fica em camadas, em ima (browser), (web server: business logic, data access), (data base). iniciou com servlet,(quem acesso, para que acessou, e de que forma quer ver(controler), jsp, javabeans(veículo de tráfego da informação, geralmente não apresenta), hoje utiliza-se melhorias disso.
________________________________________________
padrão arquitetural: MVC evolução do mostrado na imagem acima.(terá de ser usado no projeto final do curso)
hoje em dia pode-se implementar mvc completo com tecnologias front end(exeplo:Node-js),
orientação: java+ spring poe exemplo, para back-end do mvc.
controller trata o request(requisição), após passar pelo model e data base, ele joga para o view.
arquitetura em camadas: spring mvc(1 lugar), jsf(2 lugar), struts, google web toolkit, etc.
e então chegamos a arquitetura orientada a serviços, que funciona em camadas fatiadas, como um bolo em camadas e fatiado, desta forma precisa-se de um client mais especializado, tirando o controler de jogada, e acessando as regras de negócio diretamente, onde antes chamava-e de model agora para chamar-se serviços, e desta forma tem um melhor aproveitamento da arquitetura, e dsta forma o mercado está absorvendo mais a arquitetura orientada a serviços.
das camadas para as fatias: desacoplamento entre front-end e back-end, desacoplamento entre serviços, geralmente uso de barramento que gerencia acessos.
pesquisar: restfull?, springboot?,
arquitetura de microserviços: poe cada funcionalidade em sistemas separados, e, monolítica você replica tudo, em microserviços replica somente o que precisa.
o curso vai atuar em local depois replicar o que foi feito em nuvem etc.
mobile seria java android e depois ionic.
----
momento 1) 2 semanas - vai ser web - vamos desenvolver um proejto no eclipse, seguindo MVC2 puro, uma view(jsp jstl xhtml css js html), controlador (servlets), manipular objetos de modelo)
grande gargalo: controlador, em processamento e programação, toma muito tempo de desenvolvimento
momento 2 ) usando framework mvc,, ele abstrai o problema do conceito anterior usando arquivos de configuração, anotação etc., forma programática 
momento 3) fatiar a aplicação escalar em microserviços……rest, spring, springboot
1 e 2 é um único servidor de aplicação
3 varios mini servidores.
banco de dados está em todos (hibernate, etc)
MICROSERVIÇOS COM SPRING É PADRÃO DE MERCADO
o projeto será crud.
depois vamos entrar em mobile (java android e ionic)
depois clould
__________________________
trabalho iii: 13 rafael cunha, 7 hudson, 9 jones, 14 romulo.
trio, aplicar tudo que for aprendido no curso
professor vai passar diagrama de como vai ser o trabalho e o que usar.
___________________________________________
rio de janeiro 18/05/2019
javaEE para corporativas distribuída], sempre tomar cuidado com a versão que está sendo apresentado em cada ponto.
projeto web iniciado para teste, usando jsp, webxml, dynamic web project(create através do eclipe), 
obs.: bibliotecas do tomcat devem estar no web content(são 26 no total) ficam no diretório raiz
servlet é atrelado a cada serviço, ou sejam um pequeno servidor para processar e fornecer um pequeno serviço, ou: instanciar um serviço.
criação de servlets(package) dentro do mesmo cria-se uma classe, pode-se chamar: Helloservlet, extends httpServlet
ele da um service(ctrl+espaço) e inclui um protected void service por @Override…
criou-se um objeto printWriter(ele inclui um lib) para printar por exemplo no navegador, é uso parecido com println -> printWriter out = response.getWriter(); out.println(“<html>nananan”); [este comando printa na saida padrão do servlet, no caso browser, e desta forma usar html.
em web.xml incluir a tag 
<servlet> 
<servlet-name>helloServlet</servlet-name>
<servlet-class>servlets.HelloServlet</servlet-class>
 </servlet>
após isso deeve-se mapear:
<servlet-mapping>
<serletname>........
<url-pattern>/hello</url-pattern>
</servlet-mapping>
realizando um segundo teste (servlet test2)
ao contrário de realizar com mapeamento, realizar por: @WebServlet(“/hello2”) realizado acima do public class HelloServlet2 extends HttpServlet ……………………..
muito mais simples, eliminando todo xml digitado anteriormente.
-----------------consultar apostila java web caelum-----------------tem boas referências-------------
criado um insert client.jsp
onde é criado um form html para passar por campos de nome, email, endereço, com action para insertClient e posteriormente config e acesso ao banco…
após startar o xampp, e consultar o banco da última aula para saber se está tudo funcionando, foi inserido os pacotes da última aula no projeto da aula de hoje, (dao, javadb.jdbc, modelo, servlets, testes), 
lembrando que o action do form deve apontar para o recurso, la no servlet é utilizado o mesmo nome, em @webServlet(“/insertClient”) <- não esquecer do barra de forma alguma!!!
tudo isso faz parte do request, após o almoço será realizado a parte de response…
em insertClienteServlet.java trabalha-se a view e lança os dados que foram pegos pelo ation, nas variáveis correspondentes, instanciando um cliente e dando setNome setEmail etc.
em seguida lança-se no banco, mas quem realiza tal tarefa é o Dao, então cria-se uma instância de DAO (ClienteDao) pois este insere no banco através de dao.inserir(cliente);
-------------------------
criar um novo projeto no repositório do git como javaweb
feito deploy: pasta workspace do eclipse zipar os arquivos de dentro da pasta content
editar nome, e editar extensão para .war, copiar e colar dentro da pasta webapps do tomcat onde ele automaticamente irá extrair o conjunto de arquivos, ao acessar via navegador pode-se acessar pelo nome do arquivo por exemplo: foi realizado: web.war, logo no browser inserir localhost:8080/web…
------------
jsp………
jsp.in -> form -> nome, email, endereço ...
->
recurso->app servlet
->obj cliente
->
->cliente Dao
->
->bd -> tabela clientes
bd ->app servlet
servlet->response
jsp request, response = view
servlet = controller
obj cliente, ClienteDao, bd =Model
------
java server pages
dentro do html se jogar <% %> e dentro código java ele vai conseguir interpretar.
diretiva jsp usa bastante expressão.jsp usa bastante, la no arquivo.jsp terá <%= variavel %> esse é expressão.
<%@ import %> diretiva
para diminuir mais a quantidade de java no jsp, temos taglibs ou custom tags que é criar tags personalizadas porém não é uma boa prática.
realizado uso de reflection (line 13) testejstl.jsp, utilizando tag, no lugar de expression ou scriptlet, uso de tag: items="${dao.clientes}
próxima aula fecha em 1h mvc e servlet e jsp, e entra em framework mvc spring, 
------------------------------------------------------------
25/05/2019usando (jsp, jstl, servlet )javaEE
jstl:
exemplo de rodapé de site, ou aplicação onde há 200 páginas e o endereço da empresa muda, e o mesmo está exposto no rodapé, muda os 200 manualmente? não, pode-se usar um a tag(jstl) para isso de forma a otimizar o trabalho, por exemplo: <c:import url=”rodape.jsp”></c:import>
99% usa-se: import, if e for each… [pesquisar mais sobre param]
http://www.mhavila.com.br/topicos/java/tomcat.html
https://www.caelum.com.br/apostila-java-web/o-que-e-java-ee/#null
https://www.devmedia.com.br/instalacao-e-configuracao-do-apache-tomcat-no-eclipse/27360
https://www.jdevtreinamento.com.br/formacao-java-web-profissional/index.html?gclid=Cj0KCQjwz6PnBRCPARIsANOtCw3Yfis3bGl6ggNxfNimzlqxkTEEJIeUFvX7OGVnxaoxnGGSZyV3UrsaAkyzEALw_wcB
no controlador leva apenas o ( quem e onde ), o como deve seguir para as regras de negócios, conforme ja entendido através da apostila…
projeto no email para estudos, o controlador é montado de forma a rodar de forma universal independente da quantidade de regras de negócio, tudo graças a uma interface que fica responsável pelo poliformismo.
ensinado toda estrutura raiz do MVC java, com servlets, para entender como o spring funciona.
------------------------------------------------
aula dia 01/06/2019
mvc spring
com spring basta fazer: servlet controller, mapear, criar regra de negócio, e criar as views e responses, todo restante ja esta realizado pelo spring.
importar libs enviadas pelo professor via email
no dynamic web project, basta arrastar e soltar na pasta lib
apagar mysql connector pois será usado mariadb
usar também as libs usadas no último projeto
add build path
criar xml spring context com as configurações do spring(vide arquivo)
linha 2 até 11 indica as configurações do framework
linha 15 indica que a passagem de parâmetros será por anotação (ver linha 6 a 8 da próxima imagem, após realizar a anotação, e pressionando ctrl+espaço, o eclipse importa automaticamente as libs mostradas nas linhas 3 e 4 )
linha 13 indica que o package chama-se tasks, ele é criado na pasta src do projeto, depois de criar a mesma criamos outro package dentro chamado tasks.controller, onde criamos a class controller mostrada na imagem abaixo...
linha 18 mostra que deve-se criar a pasta pages em WEB-INF
linha 19 indica que a extensão default é jsp (boas práticas inserir esta linha)
-------------------------
criar package no src e criar o controler
linha 6 7 é controler
linha 8 9 10 é regra de negócio
linha 11 é a chamada da view
criamos
 tasks.controller
	TasksController
	TesteSpringMVC (usamos o para testar a estrutura)
tasks.dao
	taskDao (pegamos do drive)
tasks.jdbc
	ConnectionFactory (pegamos do drive)
tasks.model
	TaskJava
em web-inf criamos a folder ‘pages’ e dentro dela a folder ‘tasks’ para que os jsp relacionados as tasks fiquem dentro dela.
//BindingResult result faz parte da validação de o usuário escreveu erado no campo (quantidade minima de caracteres setado no task.java), asim o bindingresult pega e retorna pra própria pagina para não ficar em uma tela de erro de servidor.
além do size min usado e task.java pode-se usar outro parametro em conjunto que é o message e assim mostrar uma mensagem de validação no campo, por padrão e por boas práticas deve ser feito diferente e um exemplo disso pode-se criar um arquivo com nome de prorpiets e lá colocar as mensagens que por sua vez abre portas para internacionalização…
realizado criar, excluir, e metade do editar, ele da erro na hora de salvar a alteração.
conteudo completo saldo no pendrive
-----------------------------------
29/06/2019
mobile professor bernardo
sistemas de design
identidade visual de algo, material design(material IO) nativo google para desenhar o design, ja pelo IOS: design themes…(developer.apple.com)
android: java apple:objective c
android: kotlin apple: swift
android: android studio apple: xCode
android: googlePlay apple: AppleStore
através do google play console, obtém-se um dashboard sobre o desempenho da aplicação, menu de release management , e sistema de toda gestão de usuário etc.
através do appStore obtém-se o mesmo sistema de gestão da aplicação
estratégia de implementação: nativa: kotlin ou swift, pode-se usar native, ou react.native, que fará a transposição disso para o nativo do sistema, flutter em dart na base para dar acesso aos recursos do sistema tbm 
				web: html5, css3, js rodando em broswer, progressive web apps (WPA), que darão acesso aos recursos do dispositivos...
				híbrida: html5, css3, js rodando em broswer hospedado no telefone, que abre um web view, ou seja uma sessão, e através de 2 frameworks possiveis, como cordova ou capacitor que fará a parte de processamento servidor, e através disso obter todos recursos do telefone assim como o nativo
arquitetura: capacitor (capacitor.ionicframework.com)
capacitor framework:
· conceitos básicos
· fluxo de trabalho
· exercício: hello word
· plugins
· exercício: obtendo a localização do usuário
· plugins customizados
· exercício: criando plugin Echo
instalando android studio etc
no cmd checar versões:
node --version
npm --version
git --version
baixar e instalar o android studio (next next next nananananana)
baixar e instalar o webstorm (consultar emmet documentation para atalhos de codificação)
no webstorm
#criar o nosso projeto Node :D
### npm init
##no terminal da ide: npm install --save @capacitor/core @capacitor/cli
## npx cap init
##npx cap add android
##npx cap copy para lançar nova alteração realizada no adroid studio e poder visualizar por la
##npx cap serve roda o app no navegador tente: localhost:3333 e deixá-lo rodando direto para que qualquer alteração ja va direto para o simulador do androidstudio de forma que ao parar o app e dar play novamente ele ja aparece com as alterações
##npx cap sync tem a mesma função do copy, mas quando voce altera configurações deve-se usar o sync
para liberar permissão no android studio
	android studio na pasta app>manifest>AndroidManifest.xml
	dentro da tag application adicionar mais um android:usesCleartextTraffic="true">
	
	criar emulador para nexus 4
	no webstorm, arquivo capacitor.config.json adicionar:
	"server": {
		"url": "http://10.136.74.172:3333", // o ip deve ser o ip da sua máquina
		"hostname": "app"
	}
avançamos até plugins e la usamos plugin de geolocalização para printar no console a geolocalização do aparelho..
realizado através de:
abrir aba do chrome
digitar: chrome://inspect
abrir o referente ao celular
, abrir a aba console e digitar:
var output = output => console.log(JSON.stringify(output)); [enter]
Capacitor.Plugins.Geolocation.getCurrentPosition().then(output) [enter]
ele vai mostrar: native Geolocation.getCurrentPosition (#26620380)
abrir a tela do android studio que mostra o aparelho simulado e la vai estar pedindo para liberar o acesso a geolocalizão do aparelho…
ao clicar em sim ele mostrará a localização do aparelho:
result Geolocation.getCurrentPosition (#26620381)
capacitor-runtime.js:81 {"coords":{"latitude":37.421998333333335,"longitude":-122.08400000000002,"accuracy":20,"altitude":5,"altitudeAccuracy":0,"speed":0,"heading":0},"timestamp":1561832633000}
realizado de forma nativa, o envio do hello word e devolução via console
no android studio realizar:
: dentro da pasta app, java, com.example.hello…
criar classe: CustomNativePlugin ( é uma classe java)
fica assim:
package com.example.hello;
import com.getcapacitor.JSObject;
import com.getcapacitor.NativePlugin;
import com.getcapacitor.Plugin;
import com.getcapacitor.PluginCall;
import com.getcapacitor.PluginMethod;
@NativePlugin()
public class CustomNativePlugin extends Plugin {
 @PluginMethod()
 public void customCall(PluginCall call) {
 String message = call.getString("message");
 JSObject ret = new JSObject();
 ret.put("returnedMessage", message);
 call.success(ret);
 }
}
depois na classe MainActivity inserir: add(CustomNativePlugin.class);
no finaldo this ja existente….
stop aplicação, e play novamente, ir no navegador (chrome inspect, abrir aplicação por lá e no console difitar:)
var output = output => console.log(JSON.stringify(output));
depois:
Capacitor.Plugins.CustomNativePlugin.customCall({message: 'Hello World'}).then(output)
ele retornará:
{"returnedMessage":"Hello World"}
a ideia é que: de forma nativa ele envie a mensagem e retorne a mesma… 
comandos usados no w.s.
#criar o nosso projeto Node :D
### npm init
##no terminal da ide: npm install --save @capacitor/core @capacitor/cli
## npx cap init
##npx cap add android
##npx cap copy para lançar nova alteração realizada no adroid studio e poder visualizar por la
##npx cap serve roda o app no navegador tente: localhost:3333
##npx cap sync tem a mesma função do copy, mas quando voce altera configurações deve-se usar o sync
=====================================
06/07/2019
sobre a lib: 
RxJS Playground
https://github.com/baumblatt/rxjs-playground.git
programação reativa: paradigma de programação declarativa que se preocupa com fluxos de dados e com a propagação de mudanças
padrão de projeto: Observer (ideia: inversão de controle);
padrão de projeto: iterator (ideia: possibilidade de interagir em um conjunto sem se preocupar com a estrutura interna dele).
linguagem imperativa: onde me preocupo com as instruções que o programa deve executar...
linguagem funcional: paradigma de programação que trata a computação como uma avaliação de funções matemáticas e que evita estados ou dados mutáveis.
observable e seus operadores, (testado em aula os de criação: empty, from, of, interval)
observable é síncrono, na aula foi usado um setTimeOut para deixá-lo assíncrono mostrando que pode funcionar tbm desta forma…
exemplificado: (transformação: map, pluck, scan)
comentado: 	(combinação: startWith, withLatersFrom)
		(tratamento de erro: catchError, retry, retryWhen)
		(Utilitários: delay, tap)
		(Matemáticos e Agregação: count, max, reduce)
		Ordem Superior: concatAll, mergeMap, switchMap)
obs.:todas estas funções acontecem na automação, e podem ser usadas evitando reescrever código na mão
entidade de primeira ordem é tudo aquilo que posso guardar em uma variável (como uma função)
função de primeira ordem: quando pode chamar a função pela variável, e pode ser passada como parâmetro.
função de ordem superior: ou recebe como parâmetro uma função, ou ela retorna uma função.
“observable de ordem superior”: é um observable que emite um evento que é um observable em sí.
operador de ordem superior: transforma um observable de ordem superior em observable de primeira ordem ou o contrário.(transforma um evento em um observable)
capaz de receber como evento um observable e projetar os itens daquele observable.
comentado sobre os observable de ordem superior, e os operadores de ordem superior, e como funcionam.
------------ler react programming tutorial, artigo----------
------------ler two fundamental abstrations ----------------
pesquisar andré staltz (staltz.com)
paradigma, linguagem e framework - Angular (Core)
-> TypeScript (in five minutes)
	em java o objeto é uma instância de uma classe…
	em typeScript o obj atende uma classe…
	
-> Módulos angular.io
	pode-se fazer declarações(componentes, diretivas, pipes etc)
	pode-se fazer exports (tudo aquilo que será publico para outros módulos)
	pode-se fazer imports…
	pode-se fazer providers( cria serviços (design singleton) 
	pode-se fazer bootstrapp: criar componentes ‘’do nada’’, 
mostrado:
componentes e templates...
roteamento e navegação…
formulários…
http Client..
Angular CLI
--------------------------------------
no cmd:
npm install -g @angular/cli
abrir w.s.
new project…
angular CLI
nome: album-photos
passar 3 parâmetros (em aditional parameters):
	--routing true --style scss --skip-tests
ele irá baixar e instalar tudo o que é necessário.. 
após só dar play
src=>app=> new … Angular schematic.. module… digitar: core --routing [enter]
depois…
em cima da pasta core… repetir o processo e digitar: shared --module core [enter]
depois...
em cima da pasta app… repetir o processo e digitar: album --routing [enter]
depois…
em app-routing.module.ts… dentro de const routes:
depois..
const routes: Routes = [
 {path: '', pathMatch: 'full', redirectTo: 'core'},
 {path: 'core', loadChildren: () => CoreModule}
];
o coreMudule vai pedir ctrl espaço para importar…. escolher primeira opção..
depois…
em core routing.module.ts…
const routes: Routes = [
 {path: 'album', loadChildren: () => import('../album/album.module').then(mod => mod.AlbumModule)}
];
			
rio de janeiro 13 de julho 2019
born to kill!
então...depois do caos de montar a aplicação e sua estrutura básica, 11:17 matéria slide: biblioteca e extensão..
CDK doc do AngularMaterial layout… com codigos fonte…
mas para usar é preciso instalar… angular CLI para saber como instalar, neste caso:
clicar com direito no projeto, > new > angular dependence > angular material.. e ele instala…
usar o guia para entender como realizar as primeiras alterações nos exemplos…
· para ref do design usndo flex box material…. acessar: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
· usar o exemplo do heroes do angular para estudar o passo a passo
· material.io/icon
obs
para live reload
no android studio: abrir o AndroidManifest.xml
logo no inicio, no application inserir no final da lista:
android:usesCleartextTraffic="true"
ao iniciar no ws, usar
ng serve sync
ng serve --host 0.0.0.0.
obs.: conferir a config de ip no capacitor.config.json
para inserir imagem para testar o card… inserir o arquivo em assets, e la fica disponivel p uso no projeto, para usar assemelha-se a chamar uma imagem em html…
Reative form
Form builder
Gerar algum form para editar etc
-----------
Gestão de estado