DESENVOLVIMENTO WEB SMARIO UNIDADE 1 UNIDADE 2 UNIDADE

DESENVOLVIMENTO WEB

SÚMARIO UNIDADE 1 UNIDADE 2 UNIDADE 3 UNIDADE 4 RUBY ON RAILS DJANGO REACT LARAVEL

UNIDADE 1 Ruby on Rails Guilherme Molinari Borges Eduardo Luiz Lima Davi Padilha

Tópicos da Unidade Apresentação do framework Ruby on Rails; Vantagens; Sites Criados; Instalação; Links Interessantes; Desenvolvimento; Síntese da Unidade;

Ruby 1995 - Japão Yukihiro Matsumoto 2000 - EUA Dave Thomas e Andy Hunt 2003 - Ruby on Rails David Heinemeier Hanson Jason Fried

Ruby Linguagem de programação interpretada; Open source com foco na simplicidade e na produtividade; Multiplataforma; Multiparadigma;

Site Oficial Ruby https: //www. ruby-lang. org/pt/

Site Oficial Rails https: //rubyonrails. org/

Exemplo

Gems São bibliotecas ou conjuntos de arquivos Ruby reutilizáveis, etiquetados com um nome e uma versão.

Site Oficial Gems https: //rubygems. org/

Bundle Gem que gerencia outras gems.

Rails Desenvolver sites dinâmicos, com o intuito de permitir o desenvolvimento ágil, com alta produtividade, escrevendo poucas linhas de código e tendo muito resultado como consequência. Ruby é uma linguagem de script interpretada para programação orientada a objetos com uma filosofia e sintaxe muito limpa que fazem com que programar seja elegante e divertido.

Vantagens Programar é muito mais rápido do que em outros frameworks e linguagens; Procura-se seguir as mesmas estruturas e prática de codificação; Rails é bom para Rapid Application Development(RAD), como framework é fácil incluir mudanças;

Vantagens Grande foco em testes e possui bons frameworks de testes; Rails e a grande maioria das bibliotecas são open source; Usa o padrão de arquitetura MVC (Model View Controller);

Princípio Cada pedaço do conhecimento deve ter uma representação única, não ambígua dentro de um sistema;

Sites Criados 1/3 https: //github. com/

Sites Criados 2/3 https: //www. hulu. com

Sites Criados 3/3 https: //twitter. com

Instalação Ruby Banco(Mysql, Postgree) Nodejs Rails

Links Interessantes https: //onebitcode. com/ https: //www. portalgsti. com. br https: //guides. rubyonrails. org/ https: //c 9. io/

Descrição da Unidade Vamos fazer um exercício para troca, doação ou venda de livros onde os usuários poderão postar seus livros e escrever mensagens para negociar livros de seu interesse. Funcionalidades: • Cadastro de livros (crud); • Cadastro de mensagens(crud); • Pagina inicial com apresentação dos livros;

Classes

Banco

Encerramento Síntese do que foi trabalhado: Apresentação da linguagem ruby e framework rails; Estrutura principal do projeto: Controllers; Views; Model; Arquivos de configuração de banco; Arquivos para estilização e configuração de script; Internacionalização;

26

UNIDADE 2

Desenvolvido por: • Antonio Carlos Mattos Pires • Fernando Niepchi • Lucas Tiago Bitencourt • Luiz Felipe Hrycyk

Objetivo • O objetivo desta Unidade, é demonstrar o framework Django como uma ferramenta para facilitar a criação de páginas web.

Sumário ● ● Apresentação do framework Instalação Desenvolvimento de um projeto Exercícios

O que é framework? • Basicamente, é um template com diversas funções que podem ser usadas pelo desenvolvedor. Com ele, é desnecessário gastar tempo para reproduzir a mesma função em diferentes projetos.

O que é framework? • Uma boa comparação é a da caixa de ferramentas. Só que, em vez de chaves de fenda e martelos, há bases para formulários de login, validação de campos e conexão com bancos de dados.

O que é framework? • Nesse sentido, como parte da tendências de buscar reduzir custos e aumentar a produtividade, o uso desse recurso tem se tornado cada vez mais popular.

O que é framework? • Hoje, já existe uma grande variedade de soluções disponíveis para as mais diversas linguagens, comunidades que testam e a criam diferentes funções.

O que é framework?

Django • • Django é um framework para desenvolvimento rápido para web, escrito em Python. O objetivo principal do Django é facilitar a criação de sites complexos com banco de dados orientado.

Django • Django enfatiza a capacidade de reutilização e a "conexão" de componentes. Além de permitir um desenvolvimento rápido e com o principio de evitar ao máximo a repetição.

Django • Django ainda fornece um administrativo que é capaz de criar, ler e excluir dados via interface e que é gerado dinamicamente a partir dos modelos criados através do ORM (Mapeamento Objeto-Relacional).

ORM • Mapeamento objeto-relacional (do inglês: Object-relational mapping) é uma técnica de desenvolvimento utilizada para reduzir a impedência da programação orientada a objeto utilizando bancos de dados relacionais.

ORM • As tabelas do banco de dados são representadas através de classes e os registros de cada tabela são representados como instâncias das classes correspondentes.

ORM

• SQLite é uma biblioteca de código aberto (open source) desenvolvido na linguagem C que permite a disponibilização de um pequeno banco de dados na própria aplicação, sem a necessidade de acesso a um SGDB separado.

Alguns sites bem conhecidos que foram desenvolvidos com Django:

O Pinterest é uma rede social de compartilhamento de imagens

Instagram

Mozilla

The Washington Times

Disqus é um serviço online que oferece uma plataforma centralizada de discussões e postagem de comentários para sites.

Bitbucket é um serviço de hospedagem de projetos controlados através do Mercurial, um sistema de controle de versões distribuído.

Tipos de campos que podem ser informados no Python

Tipos de Campo • Field • Campo genérico para formulário. Todos os demais se extendem deste. • Char. Field • Usado para informar strings livres com largura definida. • Integer. Field • Permite somente valores numéricos inteiros. • Float. Field • Permite valores numéricos flutuantes. • Usado principalmente para valores onde não se sabe a quantidade de casas decimais definida. 51

Tipos de Campo • Decimal. Field • Permite valores numéricos flutuantes com número máximo de dígitos e de casas decimais. Muito usado para valores monetários e quantidades. • Date. Field • Permite a informação de uma data, no formato "YYYYMM-DD". • Time. Field • Permite a informação de uma hora, no formato "HH: MM: SS". 52

Tipos de Campo • Date. Time. Field • Permite a informação de uma data/hora, no formato "YYYY-MM-DD HH: MM: SS". • Regex. Field • Permite qualquer valor, desde que case com uma expressão regular definida. • Email. Field • Permite a informação de um endereço de e-mail. 53

Tipos de Campo • File. Field • Usado para fazer upload de arquivos. Seu uso necessita que a tag <form> em HTML tenha o parâmetro enctype="multipart/form-data". O arquivo enviado pelo usuário é armazenado no dicionário "request. FILES". • Image. Field • É semelhante ao "File. Field", com a diferença de que só permite o envio de arquivos de imagens. 54

Tipos de Campo • URLField • Permite a informação de um endereço URL, ou seja, endereços de sites e serviços na Web. • Boolean. Field • Permite valores lógicos: Verdadeiro ou Falso. Por padrão, exibe uma caixa de verificação para o usuário marcar "X". . 55

Tipos de Campo • Null. Boolean. Field • Permite valores lógicos mas também permite um valor neutro: "None". Por padrão não exibe uma caixa de verificação, mas sim um caixa de seleção com os três valores possíveis. • Choice. Field • Permite valores de uma lista de opções. Usado para se escolher entre uma lista de opções, como por exemplo: "Sexo: Masculino ou Feminino" ou "Nível: Iniciante, Intermediário ou Avançado" e assim por diante. 56

Tipos de Campo • Typed. Choice. Field • Semelhante ao "Choice. Field", mas permite definir uma função para forçar um tipo de dado específico. • Multiple. Choice. Field • Semelhante ao "Choice. Field", mas permite a seleção de várias opções de uma só vez (múltipla escolha). • Combo. Field • Permite a composição de vários outros campos, para validação em conjunto. 57

Tipos de Campo • Multi. Value. Field • Permite criar uma combinação de vários valores de tipos diferentes em um único campo. Usado para campos de valores compostos que devem ser informados como partes de um só campo. • File. Path. Field • Permite que o usuário escolha um arquivo de um caminho do disco rígido. • Split. Date. Time. Field • Campo de valor composto que separa a data e a hora em campos de entrada separados. 58

Tipos de Campo • IPAddress. Field • Permite a informação de endereços de IP. • Slug. Field • Permite a informação valores do tipo slug. Isso significa que somente caracteres em caixa-baixa (letras minúsculas), números e sinal de traço são permitidos. 59

Referências: • https: //tutorial. djangogirls. org/pt/django_installation/ • https: //docs. djangoproject. com/pt-br/2. 1/howto/windows/ • http: //pythonclub. com. br/instalacao-python-djangowindows. html • https: //www. youtube. com/channel/UCexpf. Xtye 8 o. Lj. TSWw. Kipcw/videos • Menezes, Nilo Ney Coutinho - Introdução à programação com Python : algoritmos e lógica de programação para iniciantes Menezes ISBN 9788575224083 (broch. ) - 2. ed.

61

UNIDADE 3 React Fabio Santos Felipe Niepchi Lucas Pontes Rubem Caggiano

Objetivo • O objetivo desta unidade é, mostrar de forma básica o uso da tecnologia React, para a construção de páginas WEB dinâmicas.

Sumário ● ● Apresentação do framework; Instalação Síntese da Unidade Referências

React • • O React é uma biblioteca Java. Script de código aberto para criação interfaces de usuário. Criado pela equipe do instagram, que logo depois foi comprado pelo Facebook. É mantido pelo Facebook e uma comunidade de desenvolvedores individuais e empresas. https: //reactjs. org/

React • • Ecossistema Javascript. Realizar as ações em tempo real. Consegue adicionar Html, css dentro do javascript. Ecossitema onde tudo fica em um unico lugar, não sendo necessario escrever em diversos lugares.

React • • DOM – Utilizado para gerar um comportamento de um componente. – Perda de performance. Virtual. DOM – Representação em memoria do DOM. – Sem perda de performance.

React • Virtual. DOM – Cria uma copia da sua arvore de componentes em memoria – Adiciona um ID para cada nó, para cada componente.

React • JSX – Especificação de sintaxe Javascript. – Permite escrever HTML puro dentro do javascript.

React • • • Diferença JSX x JQuery. JSX – <p>Meu Texto</p> Jquery – $[“<p>”]. text[“Meu Texto”]

React • React. – Components. – Props. – State.

React • Components. – Comparável as funções do Javascript. – Pode ou não possuir parâmetros de entrada. – Sempre vai ter um retorno. • HTML. – Função Render().

React • • Props. – Parâmetros de entrada. State. – E o estado do seu component.

Instalação • • Para a utilização do React será necessário a instalação do Node. Js. https: //nodejs. org/en/

Instalação • Node. js – é um interpretador de código Java. Script, opensource, focado em migrar a execução de código Javascript do lado do cliente para servidores. – Seu objetivo é ajudar programadores na criação de aplicações de alta escalabilidade.

Instalação • • • Para a criação do projeto será usado o Create React app. Ele é um “starter-kit” para projetos React criado pelo Facebook. Quando um novo projeto é criado, é adicionada apenas uma única dependência, o pacote react-scripts.

Instalação • Create React App. – Facilidade de criação do projeto. – Configura todo o webpack sozinho. – Webpack inclui: React, JSX, ES 6, Flow, Autoprefix CSS, Unit Test, Live Server. – Possível gerar um bundle para um ambiente de produção.

REFERÊNCIAS • https: //reactjs. org/ • https: //medium. com/by-vinicius-reis/o-que-e-react-ng 2 -auleria-vuee 34 b 0 c 77 b 5 a 1 • https: //willianjusten. com. br/comecando-com-react/ • https: //github. com/facebook/react • https: //nodejs. org/en/ • http: //nodebr. com/o-que-e-node-js/ • https: //www. w 3 schools. com/nodejs_intro. asp • https: //jsx. github. io/ • https: //medium. com/@milfont/jsx-a-resposta-do-react-pra-resolverdefinitivamente-um-problema-99 f 572316 eb 5 • https: //braziljs. org/blog/jsx/ • https: //rafaell-lycan. com/2016/entendendo-create-react-app/ 78

79

UNIDADE 4 Daniel Brayon de Castro Everaldo Nunes dos Santos Guilherme de Paula Ferreira Lucas Vinícius Gemieski

Conteúdo da Apresentação • • • Objetivos Apresentação do Framework Instrução Sobre a Instalação Desenvolvimento da Tarefa Resumo do Atividade

Objetivos • Objetivo Geral – Construir uma aplicação web básica (CRUD) referente a um sistema de comércio de livros estilo SEBO utilizando o Framework Laravel dentro do sistema operacional virtualizado Ubuntu.

Objetivos • Objetivos Específicos – Criar uma interface gráfica composta por formulários e tabelas para manipulação de dados – Trabalhar com o Framework de forma que seja possível: • • Cadastrar um Item Alterar um item cadastrado Listar os itens cadastrados Excluir os itens da lista

O Laravel • Link Site Oficial – https: //laravel. com/ • Principais Características do Framework • Ferramenta para desenvolvimento rápido com foco em PHP • Livre e de código aberto

Vantagens • Tecnologia com grande potencial emergente • Utiliza o Composer como gerenciador de dependências • Documentação Intuitiva – Link para documentação do Laravel: • http: //laravel. com/docs

Vantagens • Sistemas de rotas simplificados • Interação com as tabelas do banco através do Eloquent e Query. Builder Ø Eloquent » É possível implementar sua aplicação sem ter que escrever SQL puro misturado ao código. Ø Query. Builder » construtor de Querys • Utiliza o Artisan Console como interface de linha de comando dentro do Laravel.

Sistemas desenvolvidos com laravel • • • https: //studiostomp. nl/ https: //ambassadorpark. be/en http: //www. creativespaces. net. au/ https: //www. morganshotelgroup. com/ https: //www. unicred. com. br/poa/ http: //www. cmconsultafacil. com. br

Desenvolvimento da aplicação • Para o Desenvolvimento serão disponibilizados alguns códigos que se referem a partes mais extensas do desenvolvimento da aplicação. • Outros partes serão codificadas no ato • O desenvolvimento é dividido basicamente em 3 classes seguindo o padrão de desenvolvimento conhecido por MVC – Modelo – Visão – Controlador

Como resultado final será obtida a seguinte estrutura Tela Inicial

Tela de Listagem de Itens

Tela de Cadastro de Livro

Tela Com Itens

Tela de Alteração de Registro

Conclusão • Através dessa unidade foi possível identificar alguns itens que favorecem o desenvolvimento de uma aplicação construída com o Framework em questão, mostrando que a ferramenta além de prática é totalmente viável para a resolução de um determinado problema.