108
APP Inventor Anrã Fernandes Mestre em Ciência da Computação - UFJF GDG Três Rios / GDG Vassouras Eu escolho você!!

App Inventor: Eu escolho você!

Embed Size (px)

Citation preview

Page 1: App Inventor: Eu escolho você!

APP Inventor

Anrã FernandesMestre em Ciência da Computação - UFJF

GDG Três Rios / GDG Vassouras

Eu escolho você!!

Page 2: App Inventor: Eu escolho você!

Mestre em Ciência da Computação (Engenharia de Software / Banco de Dados)Professor Universitário e de Curso TécnicoOrganizador do GDG Três Rios e Vassouras

Oi, eu sou o Anrã!

Page 3: App Inventor: Eu escolho você!

O mercado Móvel...

Há tempo que o celular não é mais o mesmo queconhecemos tempos atrás!!

Page 4: App Inventor: Eu escolho você!

O mercado Móvel...

CELULARES FICAM UM POUCO MAIS INTELIGENTES

Page 5: App Inventor: Eu escolho você!

O mercado Móvel...

Page 6: App Inventor: Eu escolho você!

O mercado Móvel...

Page 7: App Inventor: Eu escolho você!

O mercado Móvel...

PONTO DE RUPTURA(2007)

Page 8: App Inventor: Eu escolho você!

O mercado Móvel...

MELHOR EXPERIÊNCIA WEB MÓVEL DE TODOS OS TEMPOS

LANÇAMENTO DO IPHONE (2007)

Page 9: App Inventor: Eu escolho você!

O mercado Móvel...

E partir daí, as surpresas continuaram...

Page 10: App Inventor: Eu escolho você!

O mercado Móvel...

http://mobileintelligence.corpbusiness.com.br/8edicao/index.php?menu=apresentacao

Page 11: App Inventor: Eu escolho você!

O mercado Móvel...

E isso, tem mudado os hábitos e comportamento das pessoas...

CUIDADO!

Você pode se ver em um ou mais dos

comportamentos que serão

apresentados!!!

Page 12: App Inventor: Eu escolho você!

O mercado Móvel...

Seus encontros com os amigos, nunca mais foram os mesmos!!!

Page 13: App Inventor: Eu escolho você!

O mercado Móvel...

Nem na rua, você se “desliga” do celular!!!

Page 14: App Inventor: Eu escolho você!

O mercado Móvel...

O que falar do banheiro então...

Page 15: App Inventor: Eu escolho você!

O mercado Móvel...

Page 16: App Inventor: Eu escolho você!

O mercado Móvel...

E no trabalho??

Page 17: App Inventor: Eu escolho você!

O mercado Móvel...

Na Sala de Aula...

Page 18: App Inventor: Eu escolho você!

O mercado Móvel...

O crescimento do mercado mobile foi tão grande e aconteceutão rápido, que vários desafios surgiram e vem aparecendono mercado.

o Revolução no mercado e tendências de TI

o Nova visão de gestão de projetos

o Nova visão na concepção de produtos

o Nova visão no desenvolvimento de sistemas

o Novo perfil de desenvolvedores

Page 19: App Inventor: Eu escolho você!

O mercado Móvel...

Desenvolvimento

� Arquitetura x Plataforma� Custo x Produtividade� Padrões de projetos� Boas práticas � Integração� Equipe� Disponibilidade / Store Apps� Linguagem / Framework

Page 20: App Inventor: Eu escolho você!

O mercado Móvel...

O mercado EXIGE entrega APPs cada vez mais

rápido e com o custo mais baixo.

Page 21: App Inventor: Eu escolho você!

O mercado Móvel...

Page 22: App Inventor: Eu escolho você!

O mercado Móvel...

nOVAS AlternATIvaS...

Page 23: App Inventor: Eu escolho você!

Linha de Produção de Apps

O que é uma Linha de Produção de Aplicativos?

Page 24: App Inventor: Eu escolho você!

Linha de Produção de Apps

Blz, Anrã! Mas o que nos motiva a

usar uma Linha de Produção de Aplicativos?

O que é que eu ganho com isso?

Page 25: App Inventor: Eu escolho você!

Linha de Produção de Apps

o A necessidade de diversificar e liberar produtosrapidamente e eficientemente;

o Reduzir o tempo para o mercado;

o Tratar a diversidade de produtos de software domercado global.

o Facilidade no desenvolvimento de produtos comalto grau de similaridade entre si;

o Facilidade na reutilização de artefatos desoftwares, já que nessa abordagem o reuso éplanejado e executado de forma sistemática;

o Ganhos em termos de redução de custo, esforço,melhoria da qualidade e produtividade;

Page 26: App Inventor: Eu escolho você!

Linha de Produção de Apps

Linha de Produção de Aplicativos precisa ser desenvolvidapartindo de conceitos que levem a generalização de aplicações eque permitam instanciações para aplicações específicas.

Aplicações (Produtos) gerados podem se diferenciar em termos de:

o Comportamento;o Configuração física;o Atributos de qualidade;o Plataforma;

entre outros.

Page 27: App Inventor: Eu escolho você!

Linha de Produção de Apps

O conceito de Linha de Produtos tem sido aplicado nos maisdiversos cenários da área de software.

Page 28: App Inventor: Eu escolho você!

Linha de Produção de Apps

Exemplos de dois frameworks utilizados para gerar Aplicativosmóveis seguindo este conceito.

Page 29: App Inventor: Eu escolho você!

Linha de Produção de Apps

Exemplos de dois frameworks utilizados para gerar Aplicativosmóveis seguindo este conceito.

Page 30: App Inventor: Eu escolho você!

Linha de Produção de Apps

Massa Anrã!!Mas são só vantagens ???

Page 31: App Inventor: Eu escolho você!

Linha de Produção de Apps

As aplicações criadas através destas“abordagens” estão longe de serembonitas (personalizáveis), entretanto,são funcionais.

Page 32: App Inventor: Eu escolho você!

O que é o App Inventor?

Oba! Vamos conhecer o APP INVETOR

agora!!

Page 33: App Inventor: Eu escolho você!

O que é o App Inventor?

O App Inventor é uma plataforma para criação de aplicativos Android baseada na

web, que provê uma interface visual com o objetivo de permitir que qualquer pessoa, mesmo sem um profundo conhecimento de

codificação, possa construir aplicativos Android.

Page 34: App Inventor: Eu escolho você!

O que é o App Inventor?

O App Inventor foi originalmente criadono Google Labs, mas atualmentepertence ao MIT Labs, do Massachussets

Institute of Technology, USA, que vemempregando metodologias orientadaspor eventos em diversos aplicativos denatureza educacional.

O código do App Inventor é aberto, equalquer pessoa pode criar um ambientede desenvolvimento dele derivado.

Page 35: App Inventor: Eu escolho você!

O que é o App Inventor?

http://www.appinven tor.mit.edu/

Basta que o usuário tenha um computador conectado a internet e umbrowser que ele pode acessar a plataforma e começar a trabalhar.

Page 36: App Inventor: Eu escolho você!

O que é o App Inventor?

Por que o APP inventor é tão

fácil então?

O desenvolvimento “tradicional” de aplicativos para Android ouqualquer outra plataforma, requer conhecimento de linguagens deprogramação específica, por exemplo, o Java.

Isso torna o desenvolvimento de Apps mais difícil para nãodesenvolvedores.

Page 37: App Inventor: Eu escolho você!

O que é o App Inventor?

Porque o APP Inventor permite desenvolver

aplicativos sem conhecimento destes

conceitos!

Só que NÃO é tão simples assim!! :)

Lógica é fundamental!!!

Page 38: App Inventor: Eu escolho você!

O que é o App Inventor?

Mesmo assim...

o Não há necessidade de uma sintaxe formal.o Componentes e funções estão em "gavetas". Basta

encontrar, arrastar e soltar.

Page 39: App Inventor: Eu escolho você!

O que é o App Inventor?

o Você não pode fazer coisas que não fazem sentido.o Bem menos abstrato que muitas linguagens.o Entre outras...

Que legal!!!

Page 40: App Inventor: Eu escolho você!

O que é o App Inventor?

E o que podemos criar

com ele?

o Aplicativos Educacionais

o com Vídeos, imagens, texto-para-voz

o Aplicativos de localização

o Jogos

o Controladores de Robôs

o Aplicativos para a Web

o Aplicativos pessoais

Page 41: App Inventor: Eu escolho você!

O que é o App Inventor?

Posso fazer tudo então?!!Sou o cara! Sou F***!

Não é bem assim!!!!

Page 42: App Inventor: Eu escolho você!

O que é o App Inventor?

o O APP Inventor não é um substituto para o Java (a linguagem

de programação de aplicativos Android).

o Não é uma ferramenta para criar jogos e aplicativoscomerciais.

o As aplicações criadas estão longe de ser bonitas.

Entretanto,elas são funcionais!

Page 43: App Inventor: Eu escolho você!

O que é o App Inventor?

Vamos conhecer o APP Inventor:

Page 44: App Inventor: Eu escolho você!

O que é o App Inventor?

Vamos conhecer o APP Inventor:

Ok!!! Como posso começar

Anrã?

Passo 1:

Ter uma conta de e-mail no G-mail.

Passo 2:

Para trabalhar com o APP Inventor éaconselhável utilizar o Firefox ouChrome.

Passo 3:

Abra o endereço:http://appinventor.mit.edu/explore/

Page 45: App Inventor: Eu escolho você!

O que é o App Inventor?

Vamos conhecer o APP Inventor:

http://ai2.appinventor.mit.edu/

Page 46: App Inventor: Eu escolho você!

O que é o App Inventor?

Se for a primeira vez que você acessa a Plataforma, vocêterá que confirmar seu e-mail e sua tela inicial apareceráda seguinte maneira:

Page 47: App Inventor: Eu escolho você!

O que é o App Inventor?

Para começar:

Page 48: App Inventor: Eu escolho você!

O que é o App Inventor?

Nosso primeiro APP

Component Designer

Page 49: App Inventor: Eu escolho você!

O que é o App Inventor?

APP Inventor vai trabalhar essencialmente com três partes:

1. Component Designer -> É usado para selecionarcomponentes para a aplicação e ajustar suaspropriedades.

2. Blocks Editor -> É usado para criarcomportamento para os componentes, que são osblocos.

3. Celular com sistema operacional Android ou osemuladores que fazem parte do App Inventor.

Page 50: App Inventor: Eu escolho você!

O que é o App Inventor?

O ComponentDesigner é

dividido em 4 partes!

Page 51: App Inventor: Eu escolho você!

O que é o App Inventor?

Palette - é onde ficam todos os componentesutilizáveis num aplicativo. Esta paleta é divididaem seções para facilitar a localização doscomponentes.

Para utilizá-los, basta arrastar e posicionarna Viewer.

Nem todos os componentes da paleta sãovisíveis, por exemplo, os componentes utilizados

para manipular e acessar recursos do celular,

como web, sensores não são visíveis.

Page 52: App Inventor: Eu escolho você!

O que é o App Inventor?

O Viewer (Visualizador) permiteo usuário organizar cada um dosseus objetos, montando oaplicativo como ele deve ser.

Uma janela de exibição simula atela de um smartphone com osistema operacional Android, porexemplo.

Page 53: App Inventor: Eu escolho você!

O que é o App Inventor?

Components - estão localizadostodos os componentes adicionadosna tela do programa.

Properties – Mostram as propriedades associadas a cada componente da tela do APP.

Page 54: App Inventor: Eu escolho você!

O que é o App Inventor?

Usaremos os seguintes componentes para construir o

nosso aplicativo:

Page 55: App Inventor: Eu escolho você!

O que é o App Inventor?

Legal!!Tô gostando!!Mas e as ações do APP?

Como fazer o APP fazer alguma coisa?

Page 56: App Inventor: Eu escolho você!

O que é o App Inventor?

No APP Inventor, toda a programação ocorre no BlockDesigner.

Page 57: App Inventor: Eu escolho você!

O que é o App Inventor?

Block - Local onde estãodispostos todos os blocosutilizados para programação.

o Buit-in - blocos decomandos mais gerais(operações lógicas,matemáticas e de controle).

Page 58: App Inventor: Eu escolho você!

O que é o App Inventor?

o Screen1 - todos os objetosque você inseriu noprograma e ações quepodem ser realizadas sobrecada um destescomponentes.

Page 59: App Inventor: Eu escolho você!

O que é o App Inventor?

Block - Local onde estão dispostos todos os blocosutilizados para programação.

Aqui ficam os nossos blocos de código!

Page 60: App Inventor: Eu escolho você!

O que é o App Inventor?

Page 61: App Inventor: Eu escolho você!

O que é o App Inventor?

Page 62: App Inventor: Eu escolho você!

O que é o App Inventor?

Além das ações, os objetos possuem tambémeventos.

Um aplicativo basicamente executa açõesquando um evento acontece.

Como que estas ações são

inicializadas?

Page 63: App Inventor: Eu escolho você!

O que é o App Inventor?

Verdade! Quando o usuário clica em um botão, por exemplo, é um evento

que está acontecendo.

Page 64: App Inventor: Eu escolho você!

O que é o App Inventor?

Temos vários tipos de eventos no APP Inventor:

- Sensor events- App (Screen) launch events- Animation events- timer events

and others.

Page 65: App Inventor: Eu escolho você!

O que é o App Inventor?

Evento + Ação

Page 66: App Inventor: Eu escolho você!

O que é o App Inventor?

Page 67: App Inventor: Eu escolho você!

O que é o App Inventor?

Que massa Anrã!!!

Posso começar a programar então??

Page 68: App Inventor: Eu escolho você!

O que é o App Inventor?

Claro!!!!!

Nosso APP irá apenas receber um nome (Zé) e quando ousuário clicar no botão, aparecerá uma mensagem!!

Só isso!!

Page 69: App Inventor: Eu escolho você!

O que é o App Inventor?

Então...

Page 70: App Inventor: Eu escolho você!

O que é o App Inventor?

Page 71: App Inventor: Eu escolho você!

O que é o App Inventor?

A mensagem que queremos que seja exibida é aseguinte:

“Que a força esteja contigo Zé”

Page 72: App Inventor: Eu escolho você!

O que é o App Inventor?

Page 73: App Inventor: Eu escolho você!

O que é o App Inventor?

Page 74: App Inventor: Eu escolho você!

O que é o App Inventor?

Page 75: App Inventor: Eu escolho você!

O que é o App Inventor?

Assim está o nosso aplicativo.

Como testar??

Page 76: App Inventor: Eu escolho você!

O que é o App Inventor?

Para testar...

Page 77: App Inventor: Eu escolho você!

O que é o App Inventor?

Testando usando o MIT AI2 Companion.

Para isso, precisaremos instalá-lo em nosso celular.

Page 78: App Inventor: Eu escolho você!

O que é o App Inventor?

50 anos depois...

Page 79: App Inventor: Eu escolho você!

O que é o App Inventor?

Depois de instalado...

Page 80: App Inventor: Eu escolho você!

O que é o App Inventor?

Page 81: App Inventor: Eu escolho você!

O que é o App Inventor?

Page 82: App Inventor: Eu escolho você!

O que é o App Inventor?

Page 83: App Inventor: Eu escolho você!

O que é o App Inventor?

Page 84: App Inventor: Eu escolho você!

O que é o App Inventor?

Page 85: App Inventor: Eu escolho você!

O que é o App Inventor?

Vamos fazer o nosso App falar esta saudação!!

Bacana!! Mas tem como melhor esta

apresentação?

Que a Força esteja contigo

Zé.

Page 86: App Inventor: Eu escolho você!

O que é o App Inventor?

No botão Designer -> Selecione a Guia Media -> componenteTextToSpeech

Page 87: App Inventor: Eu escolho você!

O que é o App Inventor?

Próximo Passo -> ir para a opção Blocks

Page 88: App Inventor: Eu escolho você!

O que é o App Inventor?

Hora de construir (melhorar) nosso código...

O que temos...

O que precisamos ter...

Page 89: App Inventor: Eu escolho você!

O que é o App Inventor?

Como podemos fazer isso?

1)

2)

Page 90: App Inventor: Eu escolho você!

O que é o App Inventor?

Como podemos fazer isso?

3)

Page 91: App Inventor: Eu escolho você!

O que é o App Inventor?

Como podemos fazer isso?

4)

Agora é só testar!!!

Page 92: App Inventor: Eu escolho você!

Publicação no Google Play

Posso publicar meu APP

no Google Play para meus amiguinhos baixar?

Page 93: App Inventor: Eu escolho você!

Publicação no Google Play

1º Passo: Ter um conta de desenvolvedor Google.

Esta conta possibilitará seu acesso a Google Playe custa USD 25 (pagamento único).

Page 94: App Inventor: Eu escolho você!

Publicação no Google Play

2º Passo: Acessar o endereço:

https://play.google.com/apps/publish/signup/

Será através dele que você fará o upload do seuaplicativo!

Page 95: App Inventor: Eu escolho você!

Publicação no Google Play

3º Passo: Feito o cadastro eautorizado o pagamento vocêestará apto a "subir" seuaplicativo.

Page 96: App Inventor: Eu escolho você!

Publicação no Google Play

Tá bom!!

Mas onde está meu aplicativo??

Como “subo” ele?

4º Passo: Gerar o .apk do nosso aplicativo(AppInventor gera o arquivo da aplicaçãoatravés do menu Build / Save .apk to mycomputer)

Page 97: App Inventor: Eu escolho você!

Publicação no Google Play

5º Passo: Cuidar da versão do nosso Aplicativo!!

Toda vez que fizer oUPLOAD do mesmoaplicativo, a Version Name

tem que ser diferente.

Page 98: App Inventor: Eu escolho você!

Publicação no Google Play

Ainda não...Faltam mais

algumas coisas!!

Tudo pronto Anrã ?

Agora precisamos acertar mais alguns

detalhes que o Google vai nos pedir!

Page 99: App Inventor: Eu escolho você!

Publicação no Google Play

1º : Pelo menos duas telas do seu aplicativo!

Page 100: App Inventor: Eu escolho você!

Publicação no Google Play

2º : Fazer a descrição do seu aplicativo!!

Page 101: App Inventor: Eu escolho você!

Publicação no Google Play

3º : Informar um ícone para a sua aplicação.

Page 102: App Inventor: Eu escolho você!

Publicação no Google Play

4º : Categorizar a sua aplicação.

Page 103: App Inventor: Eu escolho você!

Publicação no Google Play

5º : Informar seu e-mail de contato.

Page 104: App Inventor: Eu escolho você!

Publicação no Google Play

6º : Por último, informar o valor do seu app!

GRATUITO -> você não poderá optar por cobrar este app no futuro.

PAGO -> o mínimo é USD 2 e máximo USD 200 ...

Se optar por PAGO, o Google cria um Google Wallet noqual você poderá acompanhar os RENDIMENTOS deseu aplicativo.

Page 105: App Inventor: Eu escolho você!

Publicação no Google Play

Agora é só Publicar!!!

Importante:O tempo para o seu aplicativo aparecer no Google Play eseus amiguinhos poderem baixar é de mais ou menos 3horas...

Page 106: App Inventor: Eu escolho você!

Concluindo...

Muito bem! Chegar lá você

vai, jovem padawan.

Te vejo por aí!

Page 107: App Inventor: Eu escolho você!

Dúvidas???Manda aí!

Page 108: App Inventor: Eu escolho você!

Obrigado ;) [email protected]

/AnraFernandes

/AnrafelFernandes

/+AnrafelFernandesPereira