10102015164939

Aprendendo a programar.
Captulo II
Aplicativos conectados, como
funcionam, ol mundo
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 usurios possam acessar.
O exemplo mais simples de se
compreender so as redes sociais, nas
quais um usurio compartilha informaes
com outros usurios da rede.
Exemplo - Rede social
Joo tira uma foto com seu telefone ou com sua cmera digital.
No momento de tirar a foto, ele no precisa conexo a Internet
para utilizar o aplicativo.
Depois, Joo chega a sua casa, onde tem conexo a Internet,
se conecta a uma rede social e carrega as fotos na Internet.

Esses arquivos viajam atravs da Internet para os servidores
da rede social.
Os servidores so simplesmente computadores que esto
ligados 24 horas no dia, com discos rgidos suficientemente
grandes para armazenar as fotos de Joo, Pedro, Jos, etc.
Os servidores procuram em seus registros quem so os amigos
de Joo, encontra que eles so Pedro e Paulo. Ento escreve
um aviso para quando eles se conectarem.
Quando Pedro, um amigo do Joo, se conectar rede social,
ele vai ver uma notificao no seu mural que dir "Joo
colocou um novo lbum de suas frias", e vai clicar nela.
O aplicativo se conecta com os servidores, onde esto
No exemplo acima observamos que
h trs componentes bsicos que
intervm no aplicativo.
Um navegador de Internet (Browser),
Um servidor de aplicativo,
Um servidor de dados.
Podemos resumir o funcionamento
de qualquer aplicativo em trs
partes.
Um local onde eu mostro as
informaes,
Um local onde eu decido o que fazer,
Um local onde eu armazeno o que
precisar.
Acesso a um aplicativo web

O usurio coloca o endereo do aplicativo web na barra do navegador
http://www.facebook.com
O pedido chega a um servidor. Um documento responde.
O documento viaja at o destino passando pelas mesmas sees 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 algum acessa um
site ou um aplicativo web e requer uma pgina ou clica em alguma seo.
O navegador de Internet essencialmente um exibidor de pginas web. Essas pginas no
esto fisicamente no computador, mas so requeridas ao servidor web, que o
computador do outro lado e que recebe todos os requerimentos do usurio.
Cada vez que realizado um requerimento a um servidor web, ele vai com todas as
informaes necessrias para que o servidor saiba o que responder.
Por exemplo, se eu estou em uma pgina que me pergunta o meu nome de usurio e
senha, essas informaes so 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.
Vamos fazer um
experimento.
Acesse qualquer web site.
Quando receber a resposta, clique com o boto direito sobre
a tela.
Depois, escolha a opo VER CDIGO FONTE
e voc vai ver diferentes smbolos.
Todas as pginas de Internet esto escritas em HTML.
possvel ver o cdigo HTML de qualquer pgina clicando
com o boto direito e selecionando VER CDIGO FONTE.
O cdigo HTML nos permite desenhar as TELAS de nosso
aplicativo. Cada um dos locais onde nosso usurio INTERAGE
com o aplicativo.
Aprender o cdigo HTML o primeiro passo para
comear a programar aplicativos.
Comear a programar
possvel comear a programar com
as ferramentas bsicas do
computador.
Siga com ateno os passos abaixo.
Abra o bloco de notas do Windows
localizado em Acessrios.
Transcreva esse cdigo exatamente igual.
Tente que no aparea nenhum smbolo
diferente do que estamos colocando.
Comear a programar
<!DOCTYPE html>
<html>
<head>
<title>Ola Mundo</title>
</head>
<body>
<h1>Ola Mundo</h1>
</body>
</html>
Comear 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 comeou a programar. J est
escrevendo cdigo fonte em formato HTML.
o primeiro passo para desenvolver aplicativos.
O que um ambiente de
desenvolvimento?
Mesmo que, na teoria, seja possvel programar utilizando s o
bloco de notas, esse programa no est completamente
preparado para ajudar a desenvolver aplicativos.
H aplicativos especficos 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 criao de aplicativos fique mais fcil.
Em um aplicativo funcionando em produo. Esses
componentes esto instalados em diferentes aparelhos, em
prdios especiais.
Para comear a desenvolver o aplicativo, possvel instalar
esses componentes em uma verso reduzida em um
computador comum.
O ambiente de desenvolvimento
A nica diferena entre nosso ambiente simulado e um
ambiente real que nosso computador tem uma
capacidade limitada de velocidade e processamento e
tambm no possui conexo Internet com a capacidade
necessria para atender a muitos usurios ao mesmo
tempo.
Os programadores no 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 acessvel para qualquer pessoa de qualquer
equipamento.
O que precisamos para um ambiente

de desenvolvimento?
1. Ter um browser de Internet (na
verdade, prefervel 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
informaes;
Montagem do ambiente de
desenvolvimento
Para instalar todos os browsers de Internet, podemos
fazer download de sua respectiva pgina de Internet.
Um programador sempre precisa ter instalados todos os
navegadores existentes. Cada um deles tem
caractersticas diferentes e necessrio testar nosso
aplicativo em diferentes navegadores.
Sempre prefervel ter instalada A LTIMA VERSO DO
NAVEGADOR compatvel com seu sistema operacional.
Tambm prefervel que seu navegador no tenha
instaladas barras de terceiros, e nem plugins fora da
instalao padro. 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.
prefervel no ter essas barras.
Montagem do ambiente de
desenvolvimento
Voc ainda no acabou. Para desenvolver precisa dois
componentes fundamentais: o servidor web e o servidor
de dados.
possvel 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 instalao, recomendamos que voc faa download e
instale o set de ferramentas abaixo.
Microsoft Visual Studio Web Express Edition
Microsoft SQL Server Express Edition
https://www.dreamspark.com/
Alguns esclarecimentos importantes

Voc deve tomar muito cuidado com os aplicativos que instala
quando monta seu prprio ambiente de desenvolvimento. Se
voc instalar software de procedncia duvidosa, possvel que
seu computador tenha vrus ou que esse software no funcione
corretamente.
Por via das dvidas, no instale software desnecessrio. Evite ter
3 antivrus ao mesmo tempo; evite ter software de
monitoramento. Eles so programas teis para manter o equipo
livre de vrus, mas so bastante problemticos para os ambientes
de desenvolvimento.
Sabemos que voc um geek, mas a partir de agora, voc deve
cuidar de no instalar programas desnecessrios no computador.
Evite instalar software pirata ou que possa infetar o computador.
Ol Mundo no Visual Studio

No menu inicial do Windows, em Programas, abrimos o Microsoft
Visual Studio.
No menuArquivo, clicamos emNovo web site ASP.NET
MVC.
Ento vai aparecer uma janela nova.
Em Templates instalados, clique emC#e, depois,
escolhaweb site ASP.NET MVC.
No quadroLocalizao web, escolhemosSistema de
arquivose, a seguir, escrevemos o nome da pasta na qual
queremos armazenar as pginas do site.
Por exemplo, escrevemos o nome de pasta C:\BasicWebSite.
Clicamos emAceitar.
O Visual Studio cria um projeto web que inclui funcionalidades
que ajudam a desenhar.
Ol Mundo no Visual Studio

Na parte da direita, so includas as partes de cdigo HTML
utilizadas pelo aplicativo para mostrar as diferentes vistas.
Vamos editar a vista: home.cshtml.
Abrimos clicando duas vezes e escrevemos o cdigo 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 tringulo verde).
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 (no possvel realizar alteraes se o aplicativo est sendo
executado, sempre pare o aplicativo para realizar mudanas).
Abra a viso Default.cshtml e clique na seo Viso Desenho.
Na parte esquerda do Visual Studio h uma caixa de ferramentas de desenho
visual.
Escolha um componente e arraste at a viso.
Caso voc no lembrar algum cdigo 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 cdigo para todos os componentes
HTML, mas se voc se esquecer de algum, pode utilizar o desenhador Visual
para ajud-lo.
Realize algumas alteraes arrastando componentes para a viso e clique
play.
As alteraes realizadas so refletidas em seu aplicativo.

10102015164939

Enviado por

Dados do documento

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

10102015164939

Enviado por

Direitos autorais:

Formatos disponíveis

Aprendendo a programar.

Exemplo - Rede social

Depois, Joo chega a sua casa, onde tem conexo a Internet,

se conecta a uma rede social e carrega as fotos na Internet.

Acesso a um aplicativo web

O que precisamos para um ambiente

Alguns esclarecimentos importantes

Ol Mundo no Visual Studio

Ol Mundo no Visual Studio

Desenho com Visual Studio

Você também pode gostar