MVA microsoft

1. Aprendendo a programar.
Capítulo II
Aplicativos conectados, como
funcionam, olá mundo

2. Aplicativos conectados
• Na atualidade, muitos dos aplicativos precisam
estar conectados. Seja porque preciso interagir
com outras pessoas ou porque o mesmo
aplicativo precisa de dados armazenados em
outro local para que outros usuários possam
acessar.
• O exemplo mais simples de se compreender são
as redes sociais, nas quais um usuário
compartilha informações com outros usuários da
rede.

3. Exemplo - Rede social
• João tira uma foto com seu telefone ou com sua câmera digital. No momento
de tirar a foto, ele não precisa conexão a Internet para utilizar o aplicativo.
• Depois, João chega a sua casa, onde tem conexão a Internet, se conecta a uma
rede social e carrega as fotos na Internet. Esses arquivos viajam através da
Internet para os servidores da rede social.
• Os servidores são simplesmente computadores que estão ligados 24 horas no
dia, com discos rígidos suficientemente grandes para armazenar as fotos de
João, Pedro, José, etc.
• Os servidores procuram em seus registros quem são os amigos de João,
encontra que eles são Pedro e Paulo. Então escreve um aviso para quando eles
se conectarem.
• Quando Pedro, um amigo do João, se conectar à rede social, ele vai ver uma
notificação no seu mural que dirá "João colocou um novo álbum de suas
férias", e vai clicar nela.
• O aplicativo se conecta com os servidores, onde estão armazenadas as
fotografias e as mostra no navegador de Pedro.

4. Aplicativos conectados
• No exemplo acima observamos que há três
componentes básicos que intervém no
aplicativo.
– Um navegador de Internet (Browser),
– Um servidor de aplicativo,
– Um servidor de dados.

5. Aplicativos conectados
• Podemos resumir o funcionamento de
qualquer aplicativo em três partes.
– Um local onde eu mostro as informações,
– Um local onde eu decido o que fazer,
– Um local onde eu armazeno o que precisar.

6. Acesso a um aplicativo web
• O usuário coloca o endereço do aplicativo web na barra do navegadorhttp://www.facebook.com
• O pedido chega a um servidor. Um documento responde.
• O documento viaja até o destino passando pelas mesmas seções pelas quais passou o pedido.
• O documento chega ao computador de destino.
• É realizado o renderizado do aplicativo, ou seja, o desenho da interface.
• Com essa imagem tentamos representar o que acontece cada vez que alguém acessa um site ou um
aplicativo web e requer uma página ou clica em alguma seção.
• O navegador de Internet é essencialmente um exibidor de páginas web. Essas páginas não estão
fisicamente no computador, mas são requeridas ao servidor web, que é o computador do outro
lado e que recebe todos os requerimentos do usuário.
• Cada vez que é realizado um requerimento a um servidor web, ele vai com todas as informações
necessárias para que o servidor saiba o que responder.
• Por exemplo, se eu estou em uma página que me pergunta o meu nome de usuário e senha, essas
informações são enviadas junto com o requerimento, o servidor toma esses dados e fornece uma
resposta.
• Essa resposta é lida pelo navegador da Internet e podemos ver um resultado.

7. Vamos fazer um experimento.
• Acesse qualquer web site.
• Quando receber a resposta, clique com o botão direito sobre a tela.
• Depois, escolha a opção VER CÓDIGO FONTE
• e você vai ver diferentes símbolos.
• Todas as páginas de Internet estão escritas em HTML.
• É possível ver o código HTML de qualquer página clicando com o
botão direito e selecionando VER CÓDIGO FONTE.
• O código HTML nos permite desenhar as TELAS de nosso aplicativo.
Cada um dos locais onde nosso usuário INTERAGE com o aplicativo.
• Aprender o código HTML é o primeiro passo para começar a
programar aplicativos.

8. Começar a programar
• É possível começar a programar com as
ferramentas básicas do computador.
• Siga com atenção os passos abaixo.
– Abra o bloco de notas do Windows localizado em
Acessórios.
– Transcreva esse código exatamente igual. Tente
que não apareça nenhum símbolo diferente do
que estamos colocando.

9. Começar a programar
<!DOCTYPE html>
<html>
<head>
<title>Ola Mundo</title>
</head>
<body>
<h1>Ola Mundo</h1>
</body>
</html>

10. Começar a programar
• Salve o arquivo, no momento de salvar, escolha o
nome ola.html.
• Salve o arquivo como arquivo tipo *.*
• É importante que o nome do arquivo acabe em
HTML.
• Clique duas vezes sobre o arquivo e veja se ele é
aberto em um web browser.
• Você começou a programar. Já está escrevendo
código fonte em formato HTML. É o primeiro
passo para desenvolver aplicativos.

11. O que é um ambiente de
desenvolvimento?
• Mesmo que, na teoria, seja possível programar utilizando só o bloco
de notas, esse programa não está completamente preparado para
ajudar a desenvolver aplicativos.
• Há aplicativos específicos que fazem com que o desenvolvimento
de aplicativos seja muito mais simples.
• O ambiente de desenvolvimento é um conjunto de ferramentas e
programas que você precisa instalar em seu computador para que a
criação de aplicativos fique mais fácil.
• Em um aplicativo funcionando em produção. Esses componentes
estão instalados em diferentes aparelhos, em prédios especiais.
• Para começar a desenvolver o aplicativo, é possível instalar esses
componentes em uma versão reduzida em um computador comum.

12. O ambiente de desenvolvimento
• A única diferença entre nosso ambiente simulado e um
ambiente real é que nosso computador tem uma
capacidade limitada de velocidade e processamento e
também não possui conexão à Internet com a capacidade
necessária para atender a muitos usuários ao mesmo
tempo.
• Os programadores não desenvolvemos os aplicativos no
ambiente real, mas sempre no ambiente simulado, o
ambiente de desenvolvimento.
• Assim, podemos testar o aplicativo quantas vezes
quisermos, e só quando ele estiver livre de falhas e cumprir
com tudo quanto quisermos que realize, vamos publicá-lo
para que seja acessível para qualquer pessoa de qualquer
equipamento.

13. O que precisamos para um ambiente
de desenvolvimento?
1. Ter um browser de Internet (na verdade, é
preferível ter instalados TODOS os browsers
de Internet existentes);
2. Ter um servidor onde programaremos o
comportamento do aplicativo;
3. Ter um servidor de banco de dados para
armazenar e recuperar informações;

14. Montagem do ambiente de
desenvolvimento
• Para instalar todos os browsers de Internet, podemos fazer download
de sua respectiva página de Internet.
• Um programador sempre precisa ter instalados todos os navegadores
existentes. Cada um deles tem características diferentes e é necessário
testar nosso aplicativo em diferentes navegadores.
• Sempre é preferível ter instalada A ÚLTIMA VERSÃO DO NAVEGADOR
compatível com seu sistema operacional.
• Também é preferível que seu navegador não tenha instaladas barras de
terceiros, e nem plugins fora da instalação padrão. Geralmente, essas
barras provocam um funcionamento anormal dos aplicativos e
complicam muito na hora de ter que verificar o correto funcionamento
dos aplicativos que vamos desenvolver. É preferível não ter essas
barras.
• Uma vez instalados, recomendamos instalar as ferramentas Firebug
respectivas para cada browser.

15. Montagem do ambiente de
desenvolvimento
• Você ainda não acabou. Para desenvolver precisa dois
componentes fundamentais: o servidor web e o servidor de
dados.
• É possível instalar o servidor web e o servidor de dados de
forma manual, escolhendo entre diferentes fabricantes.
• Neste curso, vamos utilizar as ferramentas de
desenvolvimento da Microsoft. Portanto, para simplificar a
instalação, recomendamos que você faça download e
instale o set de ferramentas abaixo.
– Microsoft Visual Studio Web Express Edition
– Microsoft SQL Server Express Edition
• https://www.dreamspark.com/

16. Alguns esclarecimentos importantes
• Você deve tomar muito cuidado com os aplicativos que instala
quando monta seu próprio ambiente de desenvolvimento. Se você
instalar software de procedência duvidosa, é possível que seu
computador tenha vírus ou que esse software não funcione
corretamente.
• Por via das dúvidas, não instale software desnecessário. Evite ter 3
antivírus ao mesmo tempo; evite ter software de monitoramento.
Eles são programas úteis para manter o equipo livre de vírus, mas
são bastante problemáticos para os ambientes de desenvolvimento.
• Sabemos que você é um geek, mas a partir de agora, você deve
cuidar de não instalar programas desnecessários no computador.
• Evite instalar software pirata ou que possa infetar o computador.

17. Olá Mundo no Visual Studio
• No menu inicial do Windows, em Programas, abrimos o Microsoft
Visual Studio.
• No menu Arquivo, clicamos em Novo web site ASP.NET MVC.
• Então vai aparecer uma janela nova.
• Em Templates instalados, clique em C# e, depois, escolha web site
ASP.NET MVC.
• No quadro Localização web, escolhemos Sistema de arquivos e, a
seguir, escrevemos o nome da pasta na qual queremos armazenar
as páginas do site.
• Por exemplo, escrevemos o nome de pasta C:BasicWebSite.
• Clicamos em Aceitar.
• O Visual Studio cria um projeto web que inclui funcionalidades que
ajudam a desenhar.

18. Olá Mundo no Visual Studio
• Na parte da direita, são incluídas as partes de código HTML
utilizadas pelo aplicativo para mostrar as diferentes vistas.
• Vamos editar a vista: home.cshtml.
• Abrimos clicando duas vezes e escrevemos o código a seguir:
<html>
<head>
<title>Meu primeiro aplicativo em Visual Studio</title>
</head>
<body>
<h1>Meu primeiro aplicativo em Visual Studio</h1>
</body>
</html>
• Salvamos e clicamos play (o ícone do triângulo verde).

19. Desenho com Visual Studio
• Já dissemos que desenvolver aplicativos no ambiente de desenvolvimento é muito
mais simples e há menos possibilidade de erros.
• Pare o aplicativo (não é possível realizar alterações se o aplicativo está sendo
executado, sempre pare o aplicativo para realizar mudanças).
• Abra a visão Default.cshtml e clique na seção Visão Desenho.
• Na parte esquerda do Visual Studio há uma caixa de ferramentas de desenho
visual.
• Escolha um componente e arraste até a visão.
• Caso você não lembrar algum código HTML, o desenhador Visual permite arrastar
diretamente o componente desejado para a tela, para desenhar mais facilmente.
• Ao finalizar este curso, você vai saber o código para todos os componentes HTML,
mas se você se esquecer de algum, pode utilizar o desenhador Visual para ajudá-
lo.
• Realize algumas alterações arrastando componentes para a visão e clique play.
• As alterações realizadas são refletidas em seu aplicativo.