A Palette do AppInventor

Olá,

Hoje vamos falar da Palette que é apresentada quando voce inicia um novo projeto ou edita um projeto em andamento.
Bem, que opções há nela ?
Vamos lá , primeiro com a BASIC , que apresenta :

Nela podemos ver e brevemente descreverei a função de cada :
Button - arraste e defina os botões que voce irá precisar na aplicação.
Canvas - um painel retangular útil em caso de necessidade de desenhar algo, ou animação.
Checkbox - se algo precisa ser "checado", bom para testar valores True(V) e False(F).
Clock - funções relacionadas a relógio. Observar que utiliza clock interno para cálculos (em Millis).
Image - como o nome diz, para display de imagens.
Label - definir labels para identificaçào de campos ,display de valores de variáveis, etc.
ListPicker - mostra valores de uma lista (pré-definida ou construída).
PasswordTextBox - se vc precisa de um campo de senha...
TextBox - para entrar com texto(o valor pode ser númerico também). muito útil...
TinyDB - um db interno onde pode-se manter valores associados a nomes de variáveis. Os valores são PERSISTENTES, ou seja mantidos no aparelho (a não ser que a aplicação seja reinstalada ou seja forçada a remoção do dados da aplicação).
Obs : Todos os itens tem PROPRIEDADES , que aparecem em Properties(ã direita na tela de desenvovimento) que serão definidas. Ex : Conteúdo inicial de um Textbox , tamanho do fonte, cor do fonte, se é visível ou não etc..

Depois temos a MEDIA onde aparece :

Camcorder - funcões relacionadas a gravação da camera do aparelho.
Camera  - se sua aplicação vai capturar uma foto , essa é uma das funcionalidades deste objeto.Arraste para sua aplicação e teste.
ImagePicker - inserir alguma imagem já disponível no aparelho.
Player - normalmente associado a um arquivo SOM ou VÍDEO (arraste o objeto Player, clique nele em Components e depois faça UPLOAD para que seu arquivo seja parte da aplicação).
Sound - para reprodução de um arquivo .mp3, por exemplo (o processo de UPLOAD é o mesmo do Player).
VideoPlayer - reproduzir um vídeo. formatos permitidos : Windows Media Video (.wmv) format, 3GPP (.3gp), or MPEG-4 (.mp4).

Mais abaixo aparece SOCIAL onde temos :

ContactPicker - para mostrar os CONTATOS registrados no aparelho.
EmailPicker - mostra os EMAILS registrados .
PhoneCall - faça uma chamada telefonica.Nas propriedades pode-se informar o número a ser chamado , ou no BLOCKS EDITOR será setado o valor que poderá ser capturado de um TextBox, de uma List .
PhoneNumberPicker - mostra os números dos contatos registrados no aparelho.
Texting - se sua aplicação irá ENVIAR ou RECEBER SMS , arraste este componente e trabalhe com suas propriedades e blocos (veja abaixo) :

- QUANDO receber a mensagem de texto , o que fazer?


- Procedimento para executar o ENVIODEMENSAGEM



- conteúdo da mensagem de texto



- seta o número para o qual enviar a mensagem






e por último, TWITTER, para utilizar funções deste aplicativo.

Veja a necessidade de sua aplicação e arraste os componentes necessários.Não esqueça das Propriedades e que funcionalidades serão necessárias na lógica da aplicação, esta que será desenvolvida no Blocks Editor...

No próximo post , continuaremos com mais funções disponíveis na Palette.

Até o próximo,

Germinaro

Material sobre o AppInventor

OLá,

Claro, voce pode procurar no Google, no Bing, no Ask...
No próprio site do Appinventor MIT tem bastante informação(em inglês) .
Mas, se necessitamos algumas técnicas avançadas, então demanda pesquisa...
Há outros blogs, principalmente de quem escreveu os livros e também de envolvidos com o projeto, o qual era originalmente da própria Google e depois foi repassado ao MIT.

Mas, alguns livros que recomendo e que achei  de bom nível, ótimo para iniciantes :




Alguns podem ser comprados e baixados via Kindle , verifique no site.
O livro de David Wolber e de Jason Tyler encontrei à venda na livraria FNAC.
Bom, quando for desenvolver seu projeto, se surgirem dificuldades, então pedir ajuda aos
sites de busca...

Até o próximo,

Germinaro

Trabalhando com mais do que uma tela...

Digamos surja a necessidade de abrir uma outra tela ,  executar uma ação e voltar ã tela anterior.
Pois bem, tem solução.
Faça o seguinte :

1) No Screen Initialize da Screen1 , monte o bloco assim :

* ou seja , Screen1 abre com o START VALUE = true , então Open a Screen2.

Para voltar de Screen2 , insira no bloco VALUE = false:

Ficou mais fácil , adapte à sua necessidade.

Germinaro

Usando Fusion Tables Parte 2

Curso UDEMY : Android App in 1 Hour


Olá,

vamosà 2a. parte de nossa conversa sobre Fusion Tables.
Bem, definida a tabela no Google Drive , iremos então fazer uma aplicação simples que irá
INSERIR dados e posteriormente buscar os dados inseridos .

OK.

Então, crie um projeto novo e dê um nome a ele, por exemplo, Contatos.
Crie na tela de DESIGN uma viewer semelhante a esta :

1 Label com a propriedade text setada para : INSERT Contatos
1 Screen Arrangement/TableArrangements com 3 Rows / 2 Columns
* coloque lá na coluna 1 ---> 1 Label com Text=Nome , 1 Label com Text=email, 1 Label com Text=Telefone
* depois na COluna 2 , 1 Textbox de NomeTBNome, 1 Textbox de Nome=TBemail, 1 Textbox com Nome= Telefone.
1 Buttons de Nome = BTCadastra e com Text=INSERE

A barrinha preta vc faz assim...1 Label com propriedade with=(FILL PARENT) setada e Height=3pixels , BACKGROUND COLOR = Black
Abaixo  da barrinha coloque :
1 Label com Text = SELECT Contatos
1 TextBox de nome= nomecli
1 Button com Text = Buscar
1 Label  de nome (arraste um Label) e depois rename para dadoscliente
2 FusionTables components * FusionTable está na Palette , em NOT READY FOR PRIME TIME.


OK, feito isto vamos para o BLOCKS EDITOR...

O código (a ser explicado abaixo) para quando clicar no BTCadastra é este :

 Então , quando clicar no Button BTCadastra ,
1) Primeira coisa é setar o valor de SUA ApiKey (veja POST anterior como gerar sua APIKEY);
2) Depois montar a SQL(no bloco Set FusionTablesControl1.Query) , e fazer o INSERT(no caso, enviar a QUERY) na tabela (com o bloco Call FusionTablesControl1.SendQUery; .
* Observe que após o INSERT INTO , os caracteres são o ID (*) de sua tabela . O INSERT não será feito com o NOME de sua tabela usando o FusionTables.
   *para ter o ID de sua tabela vá no Google Drive, clique na sua tabela,depois em File / ABOUT THIS TABLE e copie o Encrypted ID , veja abaixo um exemplo :

COm os blocos acima, vc faz a INSERÇÃO(*) dos dados Nome, email  na sua tabela.
* os nomes dos campos tem que ser exatamente iguais aos que vc definiu quando da criação da tabela, inclusive observando maiúsculas e minúsculas), inseridos entre ASPAS SIMPLES.

Teste executando no emulador ou no Smartphone via Wifi.
Depois, verifique no Google Drive(abrindo sua tabela) se o insert foi executado.

Um detalhe, durante a execução, vai solicitar um LOGIN no Google, se vc definiu sua tabela como PRIVATE.
Para que outros possam ter acesso, vc terá que cadastrar o email de quem poderá acessar . Isto é feito no Google Drive , nas propriedades de SUA tabela.

Tudo certinho, vai funcionar e voce poderá incrementar sua QUERY como necessário. Vc poderá verificar que atualizou sua tabela no Google Drive (mantenha aberta a tabela no navegador enquanto executa a query para acompanhar se atualizou).
Importante : Em fase de testes , crie um campo label e capture o retorno da QUERY . Veja/adicione  o bloco na imagem acima , WHEN FusiontablesCOntrol1.GotResult. 
O erro mais comum é 400 Bad Request , neste caso a query mal-formada...

A sintaxe para montar sua SQL pode ser consultada neste link(*) (será desativado em ago/2017, veja abaixo) :
https://developers.google.com/fusiontables/docs/v1/sql-reference

A Google mudou para versão2 em 2017 , veja as infos em :
https://developers.google.com/fusiontables/docs/v2/using


A seguir, mais detalhes sobre o processo.

Até lá,

Germinaro

Usando Fusion Tables com AppInventor - PARTE 1

Olá,

Vamos falar de um recurso mais avançado do AppInventor.
Vamos falar a API da Google chamada Fusion Tables.
O que sã0? São tabelas criadas no Google Drive que voce pode acessar pela sua aplicação AppInventor.
Ou seja, seus dados ficam na "nuvem"para serem acessados, editados, deletados e atualizados pela aplicação usando comandos SQL.
É um pouco, digamos até  bastante complicado, mas vamos lá.

O primeiro passo é ir na Google API Console :
Acessando lá , clique na aba à esquerda em SERVICES ,
Role até aparecer :

Coloque a Fusion Tables API em  : ON
* notou que tem um limite diário de 25000 requests (GRATUITO)?
Agora voce tem gerar a sua "particular"API KEY que será usada na aplicação para acessar as tabelas que voce criar.
Clique na aba à esquerda em API Acess  e proceda com a geração da API Key.
Todo request para a tabela que fores acessar vai necessitar desta API KEY, então, guarde ela em algum arquivo texto.
A API KEY é um texto criptografado no formato parecido com

AIzaSyAwTWyKnxxxxMju_1xxxxzu0A79SChf8 ... Ok?

Bem agora vamos adiante...clique no MENU bem acima e DRIVE, para acessar o Google Drive e criar uma tabela de teste...

Vais ver algo parecido com isto ao clicar em CREATE :

Clique agora em Fusion Table .. e vai aparecer :

Clique em Create Empty Table ...
Vai aparecer :

Uma nova tabela (New Table), vamos dar o nome de : Contacts (clique em FILE/RENAME )

OK...
Clique em EDIT e em ADD COLUMN.
Adicione as colunas : Nome, Email, Telefone (uma a cada vez...Nome e Email como texto e Telefone como number)...
Agora, vá em Tools / Select Columns e desmarque Text/Number/Location e Date ...
Temos nossa tabela básica que vamos operar pelo nosso programa :

No próximo post, o programinha com AppInventor para inserir dados nesta tabela...ok?
Guardou a API KEY? vamos precisar dela pois elaé a sua KEY para acessar/compartilhar estes recursos no Google Cloud....

Até lá,

Germinaro

Componente TinyDB

Olá,

Neste POST vamos falar do componente TinyDB , disponível no AppInventor e que pode ser usado como ferramenta para armazenar dados PERSISTENTES , ou seja, que permanecem no smartphone até que seja feita uma nova instalação do aplicativo , ou se vc deletar (em Aplicações, remover Dados desta Aplicação).

E como funciona?

Bem, na janela de DESIGN , arraste solte o componente TinyDB .
Vc verá que logo abaixo da Tela aparecerá um Non-Visible COmponent , o TinyDB.
Non-Visible, porque ele pertence ã aplicação , mas não aparece na tela de seu smartphone.

Este componente pode então ser utilizado na tela BLOCKS EDITOR para armazenar dados , e posteriormente recuperá-los.
É uma solução simples de armazenamento, ou seja , bom para guardar valores fixos.
A recuperação não oferece muitos recursos de "pesquisa"tal com uma SQL.
Falando nisso, há um outro componente de que falaremos mais tarde, chamado Fusion Tables que aumenta bastante a capacidade de armazenar e oferece recursos de pesquisa, inserção, deleção e Update bastante poderosos, já que utiliza uma quasi-SQL.

Vamos lá, como utilizar o TinyDB.

Uma vez que existe o componente , veremos no Blocks Editor (ã esquerda) o componente.
Clique nele e veremos os Blocos Associados ...
Assim :

O bloco Call TyniDB1.StoreValue vai armazenar no DB a tag (nome de sua variável text) e mais o valor a ser armazenado nela (valueToStore).
O bloco Call TinyDB1.GetValue por sua vez, busca o valor armazenado naquela sua variável.
Vamos a um exemplo ?
Digamos que naquele nosso programinha simples queremos armazenar o valor do Textbox1 no DB.

Então , arraste e solte o bloco Call TinyDB1. StoreValue e conecte no bloco When Button1.Click.

Fica assim :

E agora, vamos buscar o valor armazenado em var1 e mostrar em Label1

Dá para ver que os blocos "se encaixam"?
O que fizemos?
Quando clicou no Button1, armazenamos o valor do Textbox1 na variável var1 do DB e logo a seguir buscamos o valor aramazenado na var1 (no DB ) e atribuimos ao Bloco Label1.Text uma CHAMADA ao TinyDB GetValue da variável var1.

Claro, bem simples, para entender ...

Então , StoreValue e GetValue... isso aí...

Até o próximo post,

Germinaro

Blocos

Embora no Blocks Editor voce tenha ã esquerda o Menu com as Built-Ins (pré-construídas) , tem um link rápido para acessar estas opções.

No Blocks Editor, clique em QUALQUER PARTE da tela. Irá aparecer :
Definitions  - Blocos para definição de variáveis e procedures ;
Text - Blocos para trabalhar com textos;
Lists - Blocos para trabalhar com Listas ;
Math  - Blocos matemáticos;
Logic  - Blocos Lógicos ;
Control - Blocos para tratar IFs, ELSEs , WHENs , FOREACHs ;
Colors - Blocos com atribuição de cores.



Então, se vc precisa de um bloco de TEXT , clique em Text para selecionar :

Para saber o significado de cada , escolha e clique , irá aparecer o bloco e apontando no bloco o significado . Exemplo de maketext:

Os SEUS Blocos (gerados a partir de suas definições na tela de DESIGN) irão aparecer na aba MY BLOCKS , associados aos nomes criados . 


Até o próximo,

Germinaro

Modos de rodar a Aplicação

Olá, vamos a mais um Post sobre o AppInventor.

Como comentei no post anterior , vamos ver como testar a aplicação no smartphone, ao invés de no simulador.

Vá até o  Google Play Store de seu smartphone com Android e procure por MIT AICompanion.
Clique para instalar...

Uma vez instalado, voce vai precisar conectar o smarphone na sua WiFi e o computador que estiver desenvolvendo o seu aplicativo também.

Em seu smartphone clique no ícone do MIT Companion.
Vai aparecer bem acima ..Your IP Address is : 192.168.0.2 (por exemplo)
OK, está conectado.

Agora, vamos ao computador...

Na tela de Android Blocks Editor (o Editor de Blocos, não o editor da tela-design) , clique bem acima ã direita em - CONNECT TO DEVICE - e escolha - WIFI - 
Vai aparecer um código (sempre aleatório) que vc vai digitar no smartphone (tb pode escanear o QR Code).
Assim:

Se conectou, vc já está vendo a aplicação ativa no smartphone (após a mensagem Listening for AppInventor ...).
Lembre : a aplicação não está instalada, sómente rodando via wifi.
Qualquer alteração que vc fizer na lógica, na tela , nas propriedades, são refletidas NA HORA ...

Para INSTALAR no smartphone, faça assim :

1) Na outra tela, a tela de DESIGN, veja bem acima ã direita - PAckage for Phone -
2) Clique em - Download to the Connected Phone , ou seja, instala no smartphone conectado via wifi...
    Vc pode tb salvar em seu computador (Download for this computer) e enviar via email para instalar depois.
Um esclarecimento ... o pacote INSTALÁVEL sempre tem a extensão .APK ... então seu projeto vai gerar um arquivo , por exemplo , meuprograma.apk 

Então, temos 3 opções :

1) rodar via simulador;
2) rodar via Wifi ;
3) Instalar o pacote no smartphone .

Isso aí, até o próximo post.

Germinaro

Post Inicial Blog appinventordeveloper

Este é o Post Inicial deste Blog que batizei de appinventodeveloper .
A idéia é postar por aqui informações , idéias, dicas sobre o framework de desenvolvimento de aplicações para celulares com sistema operacional Android disponibilizada gratuitamente pelo MIT  e que torna a curva de aprendizado (intuitivo) de programação para smartphones e tablets com Android bem mais rápida.
Para começar, vá para a página do PROJETO em :
http://beta.appinventor.mit.edu

* atenção -> o PRÉ-REQUISITO para que desenvolvas e TER uma CONTA GOOGLE (um email no gmail).
Lá tem muita coisa para ler e aprender(Learn), mas ã medida que os projetos se tornam mais complexos, então vais precisar  pesquisar na Internet (p. ex : YouTube ) ou mesmo adquirir livros sobre o assunto.

O programador precisa, claro , conhecer conceitos simples de programação com IF, WHEN, DO, CALL,  o que é um Button, um TextBox, um Label, o que é SEND, RECEIVE , enfim, o significado destes mnemônicos (em inglês)  e muitos outros mais.
Bem, a programação é visual , com Blocos pré-construídos.
Veja abaixo um exemplo bem simples :

Bem simples, ou seja, quando CLICAR no Botão de nome - mostradados (mostradados.click) , então DO (ou , faça) :
1) atribuir ao Label2.Text o valor que está no TinyDB(db local) da TAG- hora1 , depois aos labels Label3, Label8 e Label9.

ENtão vá para a página inicial, entre com seu email do Google e vai abrir no navegador a IDE inicial.
Clique em My Projects e depois em NEW (Dê um nome a seu programa).
Clique no nome do programa e vai abrir uma tela com :
1) Uma Palette com objetos que vc vai escolher dependendo do que seu programa vai fazer (Button, Checkbox, Image, Textbox, Label etc.) .
- Por exemplo , puxe e solte na tela que estás vendo um TEXTBOX , depois um Button, e depois um Label .
2) Ã direita, em COmponents, vão aparecer os nomes , TextBox1, Button1 e Label1 , se clicar neles vai ver BEM Ã DIREITA as propriedades (Properties) de cada um (que vc poderá mudar, p ex  ajuste, tamanho , cor, etc). Troque as propriedades , ex : clique em Button1 e nas propriedades clique em Text e mude para OK ;
3) Agora o PULO DO GATO...Olhe acima , ã direita e vais ver (OPEN BLOCKS EDITOR) , isto vai precisar de que vc tenha JAVA instalado em seu computador. Vai abrir o editor de blocos,, que é onde vc vai colocar a LÓGICA do programa.
Clique lá , vai abrir outra página...pode demorar um pouco ... então vc vai trabalhar com 2 páginas...

4) Vc vai ver na nova página que abriu isso :

Clique em Button1 e vais ver os blocos :

PUXE o Bloco - when Button1.CLick para direita (na área de desenvolvimento).
OK?
Então : WHEN (quando) Button1.Click(clicar no Button1) , DO (Faça :)
Mas, faça O QUÊ..Bem , aí é com você, mas para nosso exemplo,
Clique ã esquerda em Label1 , role para baixo até encontrar :

e PUXE para direita  SET Label1.Text to , arrastando AtÉ ENCAIXAR no bloco que já está lá (do Button1) ... Encaixou? ...se não encaixar, está incorreto...isto evita muitos erros.

Fica assim :

e mais uma coisinha só , estamos quase lá....
Entã0, quando clicar no Button1 , vai setar Label1.Text para ?

Claro, vc vai digitar qq coisa no Textbox e ele vai aparecer em Label1.
Vamos lá,
Clique ã esquerda em Textbox1 , e arraste o objeto Textbox1.text até ENCAIXAR .

Nosso programa FINAL fica assim :

AH ! Mas precisamos TESTAR para ver se funciona.
Claro, claro..tem o SIMULADOR...mas tarde , no outro post vou falar sobre TESTAR no seu smartphone AO VIVO.
Mas, por enquanto, vamos lá ...
Na janela de desenvolvimentodo programa , clique em NEW EMULATOR.
Vai abrir o emulador de um celular como abaixo. Aguarde, demora um pouco.
Após abrir, proceda como se estivesse operando o celular (desbloqueie puxando o cadeado).
Bem , vai aparecer assim:

Agora, vamos rodar a NOSSA aplicação ...
clique em Connect To Device e depois em emulator-5554 ,
Aguarde e a aplicação já vai rodar ..

Estás vendo na tela do emulador ?
Digite alguma coisa no TextBox...
A mesma coisa vai aparecer no Label (abaixo).

Simples, não é ? Mas pode complicar..e bastante..não se assuste...

Básico do Básico do Básico...mas deu pra ter uma idéia ?

Vamos lá...explore um pouco ...  até o próximo POST...

Até lá ,

Germinaro