Desenvolvimento Web. [Versão 5 Maio/2019] Professor Emiliano S. Monteiro

Transcrição

1 Desenvolvimento Web [Versão 5 Maio/2019] Professor Emiliano S. Monteiro

2 API REST (PHP) Professor Emiliano S. Monteiro

3 API REST Significa Representation State Transfer. É um estilo de desenvolvimento ou arquitetura de aplicações web. É uma API que define um conjunto de funções que recebem requisições para processamento e enviam respostas via HTTP GET e POST. As API REST usam o protocolo HTTP, portanto podem ser usadas por qualquer linguagem. Uma API REST torna cliente e servidor independente. Exemplo de empresas que usam REST: Google, Bing, Magento, DropBox, Facebook, etc. Um exemplo é o uso de requisições http no twitter para pegar 5 mensagens com a palavra "java. Foi desenvolvida como uma dissertação de doutorado pelo Dr. Roy Fielding. Exemplo:

4 URL + parâmetros da API para os métodos Browser no desktop, Apicação desktop, PWA, aplicação nativa mobile, navegador mobile, etc. O cliente pode ser escrito em qualquer linguaem (C#, Java, ObjectPascal, PHP, Ruby, etc...) API REQUEST Response (json, XML...) API get post Put, delete.htaccess Arquivo de configuração usado pelo Apache, quando colocado no diretório ele é carregado pelo apache e usado para alterar configurações globais do apache como redirecionamentos. http REQUEST http response Dados Servidor separados ou não! Servidor MySQL (exemplo) curl é uma ferramenta para transferir dados de ou para um servidor, usando um dos protocolos suportados (ARQUIVO, FTP, FTPS, HTTP, HTTPS, IMAP, IMAPS, LDAP, LDAPS, POP3, SMB, SMBS, SMTP, SMTPS e TFTP). O comando é projetado para funcionar sem interação do usuário. O servidor pode ser escrito em qualquer linguaem (C#, Java, ObjectPascal, PHP, Ruby, etc...)

5

6 API REST PHP

7 Extensões de navegador Professor Emiliano S. Monteiro

8 Extensões de navegador São pequenos programas que modificam e ampliam a capacidade dos navegadores adicionando novas características e funcionalidades. São desenvolvidas utilizando a WebExtensions API, que é uma API para vários navegadores. As extensões podem ser desenvolvidas utilizando HTML, CSS e Javascript.

9 Arquivos borda manifest.json borda.js icons app_icon.png

10

11

12 Material design Professor Emiliano S. Monteiro

13

14

15

16 Inserir o Material Design no CSS: <link rel="stylesheet" href=" integrity="sha384- wxzngjnexng1nfsbm0ugrlfmqpwswr3lds2veinahp8n0zjw9vwsopbjv2x7wcvx" crossorigin="anonymous"> <script src=" integrity="sha384- KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src=" integrity="sha384- fa23zrq3g/j53melwqvjegjzu0sts+svzg8fxvwp+kjq1lwfaokcuoysnlkjc33u" crossorigin="anonymous"></script> <script src=" integrity="sha384-causukpeqafajspkdjv3z9t8e7rlpj1up0lkm/+ndtsarrovku069alsrpkkfbz9" crossorigin="anonymous"></script> <script>$(document).ready(function() { $('body').bootstrapmaterialdesign(); });</script>

17

18 VueJS, React e Angular Professor Emiliano S. Monteiro

19 Fonte:

20 Static site generator Professor Emiliano S. Monteiro

21

22

23 Low Code Development Professor Emiliano S. Monteiro

24

25 Fonte:

26

27 Single Page Applications (SPA) Professor Emiliano S. Monteiro

28 SPA Os aplicativos da Web de página única são construídos em torno do conceito de reescrever dinamicamente o conteúdo dessa única página. Isso é diferente do carregamento de páginas pré-renderizadas do servidor. Exemplo: Google Maps Fonte figura:

29 SPA Em uma página convencional, a cada chamada da aplicação ao servidor, o servidor deve preparar o HTML que será enviado ao cliente. Isso provoca uma atualização no lado cliente. Em uma abordagem SPA, após o 1º carregamento, as interações ocorrem através de chamadas AJAX e o retorno de dados é via JSON, Texto, desta forma a página pode se atualizar dinamicamente sem um carregamento total. Fonte figura:

30 SPA SPA permite que as aplicações fiquem mais fluídas e responsivas. Não existe a necessidade de reload de página. A arquitetura da página pode ser separada em apresentação (HTML) e lógica da aplicação (AJAX+JSON). Em uma aplicação SPA toda interação do usuário ocorre no lado cliente através de Javascript e CSS. O cliente não necessita saber como o servidor no back end implementa o tratamento de requisições. Cliente e Servidor são independentes.

31

32 Controllers Model Views

33

34 AJAX Significa: Asynchronous JavaScript and XML O Ajax usa XHTML para conteúdo, CSS para apresentação, Document Object Model e JavaScript para exibição de conteúdo. O AJAX junto com o JavaScript realizar a solicitação ao servidor, interpreta os resultados e atualiza a tela atual. XML, JSON e texto simples são usados para receber dados do servidor. AJAX é independente servidor da web. É orientado a dados.

35

36 Progressive Web Apps Professor Emiliano S. Monteiro

37 PWA É uma aplicação baseada nos seguintes conceitos: a) confiável (pode ser carregada independente do estado da rede. b) rápida (responde rapidamente às interações do usuário) c) rodam em tela cheia d) não necessitam de uma loja de aplicativos. e) rodam na tela inicial do sistema. pode receber notificações push. f) possuem um arquivo chamado App Manifest que controla vários aspectos da aplicação (como a aplicação aparece e é iniciada, ícones, orientação de tela, etc). g) Uma aplicação PWA é composta por um arquivo manifest.json é ele quem faz a instalação no celular. h) Deve possuir um arquivo index.html. i) Um Service worker, é um script executado em 2º plano atendendo as requisições da aplicação, desta forma a aplicação funciona off-line. Ele intercepta requisições e recupera dados do cache, se estes não existirem dai realiza um request.

38

39

40

41

42

43

44 WebAssembly Professor Emiliano S. Monteiro

45 WebAssembly (WASM) É um aprimoramento ao JavaScript, o código pode ser implementado em wasm e importado como um módulo JavaScript. WASM define um novo formato binário que pode ser lido (como um texto). Os navegadores podem entender o formato binário, receber código menor e montar páginas mais rápidas, desta forma WASM pode ser mais rápido que JavaScript. Permite o uso de primitivas incluindo uma ampla gama de tipos e operações, controle de fluxo, chamadas, etc, WebAssembly define uma Abstract Syntax Tree (AST) ou Syntax Tree, é a representação da estrutura do código fonte escrito em uma determinada linguagem... a AST é armazenada em formato binário. Poderá ser usado com threads, processamento paralelo, processamento de linguagens como C/C++/Rust. Blazor é framework.net para uso do C# e WASM.

46 WebAssembly (WASM) Blazor: Usa o WASM para compilar o C# para formato binário para sua execução em browsers. Mono: é um runtime.net que pode ser compilado para WASM. RAZOR: é uma sintaxe de marcação para que código (VB ou C#) possa ser incorporado em páginas HTML, permitindo que código possa rodar no servidor. Características do Razor: Blocos de código são colocados {...} Expressões inline (variáveis e funções) começam As declarações de código terminam com ; Variáveis são declaradas com a palavra-chave var Cordas são colocadas entre (aspas) O código c # é case sensitive Os arquivos C # têm a extensão.cshtml Exemplo de var minhamensagem = Ola Mundo"; } <p> O valor da mensagem

47

48

49

50

51

52

53

54 Microsoft Sharepoint Professor Emiliano S. Monteiro

55 SharePoint

56 SharePoint

57 Hospedagem gratuítas Professor Emiliano S. Monteiro

58

59

60 Referências

61 Referências rvices.doc/concepts/dfhws_definition.html