Baixe o app para aproveitar ainda mais
Prévia do material em texto
KODULAR: O GUIA QUASE COMPLETO A F E R R A M E N T A Q U E V A I R E V O L U C I O N A R S U A S I D E I A S O G U I A P A R A A P R E N D E R A D E S E N V O L V E R A P L I C A T I V O S D O Z E R O KODULAR EAGLE Autora Juliana Oliveira Fundadora do Programação em Blocos A autora não possui nenhum vínculo com as instituições e produtos citados, utilizando-os apenas para ilustrações. Kodular: O Guia Quase Completo E-mail - programacaoemblocos@juoliveira.com.br Site https://juoliveira.com.br/ Design e aprimoramento Vitória Gonçalves Sumário Introdução 1 O que é o Kodular 1.1 Primeiro Acesso 1.2 Criando Projeto 2 Dicas Especiais 3 Visão Geral dos Blocos 4 Dicas de Design 5 Dicas de Performance 6 Criando um Aplicativo 7 Como Importar Projetos 8 Criando Aplicativos Nível II 9 Material Icons 10 Utilizando Procedimentos 11 Utilizando Diversos Layouts 12 Banco de Dados 12.1 Firebase 12.2 Cloudinary 12.3 Airtable 12.3.1 Notas sobre o Airtable 13 Meu Curso 14 Extensões 15 Api's 16 Importar/Exportar Blocos 17 Java Bridge 18 Publicar Aplicativos 19 Links Úteis Antes de ler esse e-book, me responda uma coisa. Quantas vezes você realmente conseguiu concluir um tutorial aleatório que encontrou pelo Google sem perder a cabeça por conta de algum erro misterioso ou ambiguidade na explicação? O processo de aprendizagem é lento, não tem como ser rápido, além de que é infinito. E o pior de tudo é quando você percebe que ainda tem muito para aprender, pois como eu disse logo acima, o aprendizado é infinito. Sempre tem algo de novo para se aprender. Mas uma das piores coisas durante todo esse processo, é quando autores dos tutoriais os rodeiam inconscientemente distorcendo sua mente com palavras tipo, “simples assim”, “muito fácil”, ”obviamente”. Mas vamos lá, se alguma vez você já pesquisou por “como aprender lógica de programação”, claramente você possui algum interesse ou está começando a estudar na área de TI, precisamente no ramo de desenvolvimento de aplicações, então presumo que você tenha pesquisado também por algo similar a isso: “Por onde devo começar”, “É difícil programar?”, “Dicas para aprender a programar de forma rápida”, ”Quais atalhos para aprender a programar”. Para algumas pessoas aprender a programar no início pode ser um tanto que confuso, afinal de contas aprender linguagem de programação totalmente nova nem sempre é fácil, porém é a essência para desenvolver um aplicativo. Mas o que significa para você essa palavra, programar? Programar é assim, você tem um problema começa a estudar maneiras de solucionar, então (começa) a resolver por partes, até conseguir resolver tudo, tornando aquele (problema) pequeno. Tudo isso se torna um ciclo, onde todos os dias aparecerão problemas precisando de resoluções. A maior dificuldade para quem quer desenvolver aplicativo é saber todos aqueles códigos. E aí, já pensou em desenvolver seu aplicativo sem precisar se preocupar com isso? E é por isso que apresento o KODULAR Sim... ISSO É POSSÍVEL! Mas, o que é o Kodular? O Kodular é uma plataforma online que permite a criação de aplicativos android. Seu funcionamento consiste em apenas "arrastar" e "soltar" componentes a partir de uma tela em branco. Além disso, a plataforma permite testar em tempo real o que está sendo desenvolvido. “É um modelo de programação diferente, imagine aí você desenvolver um aplicativo apenas encaixando blocos sem a necessidade de digitar nenhuma linha de código” Primeiro acesso Clique no botão para acessar o site oficial Vamos então entrar no site oficial do Kodular para termos o nosso primeiro contato com a plataforma. FIQUE ATENTO! Aproveite para ler os termos da plataforma. E CHEGOU A HORA! VAMOS COMEÇAR... Criando projeto Essa é a área inicial onde ficam todos os seus aplicativos já criados. Clique em "create new project" para iniciarmos o nosso primeiro aplicativo. Coloque o nome que desejar, clique em "next" e uma nova tela de configuração aparecerá. SEJA CURIOSO, EXPLORE A FERRAMENTA! Essa tela de configuração fica ao seu critério as mudanças, nela você pode alterar o tema, versão do android, cores, mas tudo isso você pode modificar posteriormente. Vamos para o próximo passo. Todos os componentes ficam aqui. Aqui é a área de trabalho. Você poderá organizar os componentes como desejar. Aqui estão todas as configurações disponíveis para os componentes. Os componentes inseridos na área de trabalho são expostos aqui. Nosso primeiro aplicativo mudará a cor da tela quando clicarmos no botão. Acompanhe o passo a passo. Clique na em "Layout" >> "General >> "Vertical Arrangement" e arraste com o mouse até a área de trabalho. Agora vamos alterar algumas propriedades, o tamanho, alinhamento e cor. Esses Layouts servem para organizar os objetos dentro deles. Como a própria ilustração indica, o layout vertical organizar os elementos um abaixo do outro, já no horizontal, um ao lado do outro, já esses que possuem o nome "Scroll" eles inserem uma barra de rolagem, possibilitando a visualização de mais componentes inseridos. Coloque o alinhamento para "center", tanto no horizontal como no vertical. "Caso você sinta dificuldade em entender o que está escrito, ou você traduz a página caso esteja utilizando o navegador Chrome ou clica no canto superior direito em "Account" >> "Settings" e muda a linguagem para português." Esse símbolo marcado em azul se chama "fill parent", ou seja ele ocupa todo o espaço da tela, preenchendo o espaço total na tela do celular. Deixe as duas opções marcadas. Clique lá no canto direito em "background color" e esse "color picker" será aberto, escolha uma cor e clique em "set". Vamos inserir um botão para quando clicarmos a nossa tela mudar de cor. "User Interface" >> "Button", clique e arraste para a área de trabalho. . Mude o texto do botão e aperte enter. Observe que esse componente possui diversas propriedades que podem ser mudadas, caso queira, mude sua cor, tamanho, alinhamento, formato, sinta-se à vontade, Koder. Tentei passar o maior detalhe possível, mas se esforce ai também, você vai longe, esse é apenas o ponta pé inicial! Vamos agora aos blocos. No seu canto superior direito, clique em "blocks". Todos os elementos inseridos ficam na parte esquerda da sua tela. Clique no componente botão e escolha a opção do "clique", observe que temos diversas opções, mas iremos arrastar a primeira "when button click" Agora é com você, monte os blocos como demonstrado abaixo. Deixe eu te explicar a lógica, preste atenção: Quando o botão for clicado, a nossa horizontal mudará de cor, como definimos abaixo "Azul". Sempre que você for encaixar os blocos, fale baixinho para si mesmo, explicando o passo a passo de cada objeto encaixado, pode ter certeza que o seu raciocínio irá se desenvolver muito rápido. Antes de qualquer coisa você terá que baixar o aplicativo do Kodular no seu celular. Com o aplicativo já aberto, vá na aba de "test" e clique em "companion" e escaneie o QR code ou digite manualmente o código. Aguarde até que o aplicativo seja carregado e após isso fique a vontade para testar. Muitas vezes eu irei me referir a esse teste com a palavra "emular", que nada mais é do que uma maneira de reproduzir as funções de uma determinada aplicação, então, acostume-se com esse termo. Vamos testar nosso mini projeto? VAMOS APRIMORAR! Não desanime, essa aplicação foi para termos o primeiro contato juntos com a ferramenta! Continue a explorar e... Vamos começar o nosso primeiro contato com a variável global e o componente "pick a random item list" pois ele irá escolher nossas cores aleatoriamente. Veja o exemplo abaixo, mude suas cores e teste o aplicativo. * Variável Global: É uma variável acessíveil em qualquer parte do programa e podem ser utilizadas e modificadas a qualquer momento. Não há segredos no kodular, tudo é arrastar e soltar. A nossa variável global está armazenando as cores que desejamos ser mostrado no aplicativo, e para usar essascores basta você passar o mouse sobre o nome "cores" que duas opções aparecerão, escolha o "get" e insira no nosso pick a random. Essa serve para você adicionar mais espaços para colocar outras cores na sua lista, como demonstrado na imagem. Clique no item do lado esquerdo e arraste para o direito, colocando um abaixo do outro. Aqui vão 5 dicas rápidas para você seguir e obter um bom desempenho no desenvolvimento dos seus futuros projetos. Vejam: DICAS ESPECIAIS 1 – Faça tutoriais Após a leitura dessa e-book, assista vídeos, tutoriais que te ensine a aprender o básico. Lá no meu site existem diversos conteúdos para te guiar, inclusive tutoriais. Acessem: https://juoliveira.com.br 2 – Seja curioso Clique e arraste os blocos, monte sua lógica, testes e experimente componentes, emule o seu aplicativo e veja se está funcionando corretamente. Leia a documentação, não tenha medo de mergulhar de cabeça em algo novo. 3 – Pesquise na comunidade A comunidade do kodular é incrível, são centenas de conteúdo, dúvidas, ajudas, dicas.. Então, SEJA CURIOSO, e acesse agora mesmo https://community.kodular.io/ 4 - Leia os detalhes de cada componente Basta clicar na interrogação para aparecer uma breve descrição do componente, se for necessário, traduza. 5 – Teste aplicativos de terceiros Existem diversos arquivos para testes espalhados por ai, então SEJA CURIOSO, pesquise! Geralmente há tutoriais de terceiros que mostram exatamente aquilo que você procura, ou precisa saber. Lembrando que o seu formato tem que ser em .AIA para que você importe e teste os componentes, funcionalidades. Quem sabe algo possa acrescentar no seu projeto?! Ao final deste e-book eu disponibilizo alguns arquivos para futuros testes, basta apenas clicar. Cada componente tem uma breve explicação, clique na exclamação e a informação ficará disponível logo abaixo. VISÃO GERAL DOS BLOCOS PALETT E · Ao controle · Lógica · Matemática · Texto · Listas · Cores · Variáveis · Procedimentos · Qualquer componente AO CONTROLE if & if else Testa uma determinada condição. Se a condição for verdadeira, executa as ações em uma determinada sequência de blocos; caso contrário, os blocos serão ignorados. Testa uma determinada condição. Se o resultado for verdadeiro, executa as ações na seqüência -do dos blocos; caso contrário, executa as ações na seqüência -else de blocos. Testa uma determinada condição. Se o resultado for verdadeiro, executa as ações na seqüência -do dos blocos; Caso contrário, testa a declaração na seção -else if. Se o resultado for verdadeiro, executa as ações na seqüência -do dos blocos; caso contrário, executa as ações na seqüência -else de blocos. A imagem ao lado mostra como usar o bloco se else mutator. for each from to Executa os blocos na seção do para cada valor numérico no intervalo, começando em_de_e terminando em_a_, incrementando_número_de_o valor de_por_cada vez. Use o nome da variável fornecida, _number_ para se referir ao valor atual. Você pode alterar o nome_nome_ para outra coisa, se desejar. for each in list Executa os blocos na seção do para cada item na lista. Use o nome da variável, item , para se referir ao item da lista atual. Você pode mudar o name_item_ para outra coisa, se desejar. while Testa a condição de teste. Se true, executa a ação dada em - do e, em seguida, testa novamente. Quando o teste é falso, o bloco termina e a ação dada em -do não é mais executada. if then else Testa uma determinada condição. Se a instrução for verdadeira, executa as ações na sequência de retorno de blocos e retorna o valor de retorno; caso contrário, executa as ações na seqüência else- return de blocos e retorna o valor else-return. do Às vezes, em um procedimento ou outro bloco de código, você pode precisar fazer algo e retornar algo, mas, por várias razões, você pode optar por usar esse bloco em vez de criar um novo procedimento. evaluate but ignore result Fornece um "soquete fictício" para encaixar um bloco que tenha um plugue à esquerda em um local onde não há soquete, como uma das seqüências de blocos na parte do procedimento ou um bloco if. O bloco em que você se encaixa será executado, mas o resultado retornado será ignorado. Isso pode ser útil se você definir um procedimento que retorna um resultado, mas deseja chamá-lo em um contexto que não aceita um resultado. open another screen Abre a tela com o nome fornecido. open another screen with start value Abre outra tela e passa um valor para ela. get start value Retorna o valor inicial dado à tela atual. Esse valor é fornecido por meio da utilização de outra tela com valor inicial ou tela fechada com valor. close screen Fecha a tela atual. close screen with value Fecha a tela atual e retorna um valor para a tela que abriu este. close application Fecha o aplicativo. get plain start text Retorna o texto simples que foi passado para essa tela quando foi iniciado por outro aplicativo. Se nenhum valor foi passado, ele retorna o texto vazio. Para vários aplicativos de tela, use get start value em vez de obter um texto inicial simples. close screen with plain text Fecha a tela atual e passa o texto para o aplicativo que abriu este. Este comando é para retornar o texto às atividades que não são do App Inventor, não às telas do App Inventor. Para as telas do App Inventor, como em vários aplicativos de tela, use Fechar Tela com Valor, e não Fechar Tela com Texto Simples. break Sair do loop contendo LÓGICA true Representa o valor constante true. Use-o para definir valores de propriedade booleana de componentes ou como o valor de uma variável que representa uma condição. false Representa o valor constante false. Use-o para definir valores de propriedade booleana de componentes ou como o valor de uma variável que representa uma condição. no t Executa negação lógica, retornando false se a entrada for verdadeira e true se a entrada for falsa. = Testa se seus argumentos são iguais. · Dois números são iguais se forem numericamente iguais, por exemplo, 1 é igual a 1,0. · Dois blocos de texto são iguais se tiverem os mesmos caracteres na mesma ordem, com o mesmo caso. Por exemplo, " banana" _ ** _ não é igual a " Banana". · Números e texto são iguais se o número for numericamente igual a um número que seria impresso com esse texto. Por exemplo, 12.0 é igual ao resultado da junção do primeiro caractere " 1A" ao último caractere de " Teafor2". · Duas listas são iguais se tiverem o mesmo número de elementos e os elementos correspondentes forem iguais. Ele age exatamente da mesma forma que o bloco = encontrado no Math ≠ Testa para ver se dois argumentos não são iguais. and Esta se todas as condições lógicas são verdadeiras. O resultado é verdadeiro se e somente se todas as condições testadas forem verdadeiras. Quando você conecta uma condição ao testsoquete, outro soquete aparece para que você possa adicionar outra condição. As condições são testadas da esquerda para a direita e o teste é interrompido assim que uma das condições é falsa. Se não houver condições para testar, o resultado será verdadeiro. Você pode considerar isso como uma brincadeira de lógico. or Testa se algum conjunto de condições lógicas é verdadeiro. O resultado é verdadeiro se uma ou mais das condições testadas forem verdadeiras. Quando você conecta uma condição ao test soquete, outro soquete aparece para que você possa adicionar outra condição. As condições são testadas da esquerda para a direita e o teste é interrompido assim que uma das condições é verdadeira. Se não houver condições para testar, o resultado será falso. O site do Kodular disponibiliza a documentação dos seus componentes. Veja o restante no site abaixo: https://docs.kodular.io/blocks/control/#if DICAS DE DESIGN Segue aqui alguns sites que te auxiliará a criar layouts robustos e agradáveis. Para combinar cores e escolher layouts degrade: Basta clicar em qualquer imagem para acessar o site. O formato da fonte para importarno seu projeto é .ttf. Insira nos Assets e adicione ao componente desejado. https://www.netfontes.com.br/ https://www.urbanfonts.com/ https://www.dafont.com/pt/ http://www.abstractfonts.com/ Abaixo estão alguns sites que você poderá visitar e escolher fontes agradáveis para o seu aplicativo. Copie também esses links no seu navegador favorito para acessar: É dessa forma que você fará para importar a fonte desejada. Primeiro clica em "assets" depois em "upload asset". Para adicionar a fonte desejada, clique na label inserida e logo após clique em propriedades avançadas. Pronto, a fonte inserida estará disponível como na imagem ilustrada acima. DICAS DE DESIGN Algo que você precisa estar bastante atento é quanto aos conceitos de experiência de usuário (UX é a sua sigla em inglês). Estes princípios são de grande importância durante a produção de um projeto, já que são criados inúmeros aplicativos o tempo todo, então não basta apenas criar, é preciso haver a conversão do usuário. Segundo uma pesquisa do Google, um em cada cinco apps instalados é esquecido pelos usuários do Reino Unido em diferentes categorias como compras, restaurantes, delivery's e viagens. Confira algumas dicas abaixo: Dicas de design #1 A medida for sendo desenvolvido o aplicativo, teste-o em tempo real. Veja o tamanho dos textos, botões, cores e contrastes. #2 É necessário criar a tela principal funcional, caso o seu aplicativo tenha funcionalidades complexas, faça um breve tutorial explicando. Lembre-se em facilitar a vida do usuário e nunca o contrário. #3 Segundo alguns estudos da Google, aplicativos que possuem a ferramenta de busca tem a conversão maior de usuários. #4 Tente apenas avisar ao usuário o que realmente for importante através de notificações push. É importante que você analise bem a mensagem que será enviada. A mochila é um recurso de copiar e colar que funciona entre projetos e telas, sendo possível acessar por meio de qualquer projeto. O seu ícone está localizado no canto superior direito do espaço de trabalho. Note que na parte dos blocos tem uma mochila no seu canto superior direito. Ela serve para copiar e colar os blocos para diferentes telas e projetos, aquilo que você acha que é relevante ou reutilizável em outro aplicativo, então basta guardar dentro da mochila. Uma vez guardado, o seu código é transportado durante qualquer projeto, basta fazer o login para ter o acesso. DICAS DE PERFORMANCE Vou passar agora algumas dicas essenciais que poderão te ajudar ao longo da sua trajetória. Então para isso abra o kodular e vamos a prática. Mochila (Backpack) Como funciona o BackPack? DICA 1. DICAS DE PERFORMANCE Existe duas maneiras de armazenar os blocos na mochila. A primeira é clicando e arrastando o bloco desejado até ela, perceba que ao aproximar o bloco da mochila, ela muda a sua animação passando a ficar aberta. A segunda opção é clicando com o botão direito do mouse em cima do bloco desejado, veja abaixo: O procedimento de limpar a mochila é bem simples, basta você clicar com o botão direito em cima dela e selecionar a segunda opção como no exemplo: Limpando a Mochila Lembrando que a primeira opção permite você visualizar a documentação da Backpack. Como organizar os blocos Para manter a organização dos blocos enquanto programamos, aqui vão algumas dicas valiosas: Clicando na área de trabalho com o botão direito do mouse, algumas opções são dadas. É possível organizar os blocos de forma horizontal, vertical e por categorias. “Arrange Blocks Horizontally” “Arrange Blocks Vertically” “Sort Blocks by Category” Essas dicas servem muito quando se tem uma quantidade generosa de blocos sendo utilizados. DICAS DE PERFORMANCE Escondendo blocos Uma forma de você ganhar velocidade e um maior desempenho no seu projeto, eu aconselho a utilizar o “colapse blocks”, o resultado é o mesmo da imagem abaixo: Adicionar comentários aos seus blocos é de grande importância, pois mais na frente você pode esquecer o funcionamento daqueles blocos, sua importância, ou até mesmo uma implementação futura que passou na mente, enfim, são inúmeros questionamentos que se passam na cabeça do desenvolvedor. Toda ajuda é bem-vinda, não é mesmo? Adicionando comentários DICA 2 Clique com o botão direito no bloco desejado e "add coment" no meu caso escrito em inglês. Renomei os componentes DICA 3. Essa dica é essencial, pois ao renomear um componente você consegue trabalhar melhor com ele na área do blocos, utilizando o bloco correto, evitando erros, e longas procura. Alguns desenvolvedores costumam manter padrões para renomear os componentes, eu por exemplo costumo chamar uma label de lbl e acrescento sua função logo depois, exemplo: lbl_nome. Aprenda a definir padrões e notará uma melhora nos seus grandes projetos. DICA 4. Para encontrar um bloco de maneira rápida, basta digitar seu nome e diversas opções ficarão disponíveis para que você escolha o bloco desejado. Veja: Fazer cópias dos seus projetos para evitar perdas de alguma programação importante, isso é viável principalmente quando estamos fazendo testes com os blocos. DICA 5. Depois basta renomear o projeto. Ele vem com o nome copy predefinido, mas você pode alterar sem problemas. Utilizando componentes básicos I Criando um aplicativo Insira esses componentes abaixo na mesma ordem. Não esqueça de renomear os componentes, lembrem-se das dicas de performance. Neste tópico aprenderemos a utilizar diversos componentes em um só projeto. Para isso acontecer, criaremos diversas telas para que possamos interligar uma na outra e assim criar diversas funcionalidades. Siga o passo a passo e mãos a obra. Passo 1. Basta arrastar e soltar os componentes. O botão fica na Interface do Usuário (User Interface) e o Vertical em Layout. Na parte dos blocos iremos dar funcionalidade para o nosso botão e texto. Repita o procedimento e tente entender. Passo 2. Para que tenha efeito a parte do clique de mudança de tela, será necessário a criação da tela 2. Prontinho, agora é só testar o seu projeto. Passo 3. Agora vamos inserir os componentes da tela 2. São quatro botões, eles implicarão na mudança de cor do layout de acordo com a cor selecionada. Lembre-se de renomear os componentes. Passo 4. A configuração dos blocos é bem básica, leia comigo. Ao clicar no botão roxo o vertical acionará o background color roxo. Ao clicar no botão verde o vertical acionará o background color verde, e assim para as demais cores. Você está pronto para a próxima etapa? Se sim, vamos para a página dois, estou te esperando ansiosamente lá :) Ah, vale lembrar que todos os tutoriais estarão em um link disponível no final deste e-book. COMO IMPORTAR PROJETOS Após entrar na sua conta do kodular, clique na opção "IMPORT PROJECT", ele está posicionado no lado esquerdo da sua tela. Siga o passo a passo abaixo: TUDO PRONTO, agora basta acessar o projeto e ver todas as funcionalidades do aplicativo importado. Emule, modifique, seja curioso(a), sempre. Agora basta escolher a pasta que o projeto se encontra e clique em "import". SEJA BEM-VINDO(A) AO NÍVEL II Utilizando componentes básicos II O componente que iremos utilizar agora, será o "Web_View". Ele serve para exibir conteúdos da Web. No exemplo abaixo foi inserido: Dois Layouts um Vertical contendo o componente Web_View (ele se encontra na aba de "Connectivity" e no Layout Horizontal algumas imagens clicáveis com espaçamentos entre elas. Lembre-se de alterar o tamanho, coloque o vertical para ocupar a tela completa, "fill parent". Repita o procedimento abaixo e prossiga para o passo 2. Passo 1. Agora é só testar o seu projeto. Agora nos blocos, para cada "Go To URL" iremos direcionar para uma URL diferente. Como dito no passo 1, o componente Web View reproduz a página da internet dentro do aplicativo. Veja no exemplo abaixo como os seus blocos devem ficar. O primeiro link direcionará o usuário para a página da Globo, o segundo link parao meu site juoliveira.com.br e terceiro para o site do Material Icons. Passo 2. Feito isso basta testar o aplicativo no seu celular, caso não lembre como emular, volte para o início deste e-book. Material Icons Algo bem interessante no kodular, é a possibilidade de inserir ícones no projeto sem a necessidade de importar as imagens para o assets. Acesse o site https://material.io/resources/icons Com o seu projeto aberto, insira uma label e nas suas propriedades modifique sua fonte para Material Icons. Agora para o ícone aparecer visite o site que citei acima e escolha o desejado, copie e cole o nome do ícone no texto da label. Modifique seu tamanho e cor nas propriedades da label. A instrução abaixo é para que uma tela seja chamada ao mesmo tempo que a tela atual é fechada. Em resumo, é a forma correta de se fechar uma tela ao abrir outra. Está será a tela final, mas vou te explicar o passo a passo de como chegar até aqui. Utilizando Procedimentos Um procedimento é criado para que possamos utiliza- lo diversas vezes em qualquer parte da tela. Criamos ele e posteriormente o chamamos dentro de outro bloco de forma simples. Então... No canto esquerdo clique e arraste o componente de "procedimento" para criarmos a nossa estrutura. Lembrando que um procedimento é criado para que não seja necessário fazer repetições de código sempre que precisar daquela estrutura. Criado uma vez, este procedimento poderá ser utilizado em qualquer parte dos seu blocos na tela. Arraste o componente para a área dos blocos, e adicione um "input" clicando na Lembrando que eu também renomeei o procedimento para "Prox_tela" Você vai renomear o "x" do "input", no meu caso coloquei Screen. É ai que iremos definir a tela para qual direcionaremos o usuário. O procedimento que criamos ele irá verificar se o que foi clicado é verdadeiro, caso seja, o usuário será direcionado para outra tela, e a tela atual será fechada. Um botão foi inserido no design apenas para testarmos a função. Então quando o botão for clicado, chamaremos o nosso procedimento e colocaremos no "text" o nome da Tela que queremos ser direcionados após o clique. Lembra daquele "input" do procedimento? Olha ele ai, agora para utilizar basta pegar um text vazio e digitar o nome da screen que deseja ir. Agora é só testar o seu projeto. Vamos aprender a trabalhar com múltiplas telas? Primeiro eu gostaria de salientar que nem sempre é preciso criar diversas telas. Você pode também trabalhar com diversos Layouts Verticais no seu aplicativo definindo sua visibilidade como True/Verdadeiro quando estiver utilizando o layout e Falso/False quando não. O layout auxilia na organização dos componentes do aplicativo, o kodular oferece 5 tipos de layouts, veja abaixo: Horizontal Arrangement; Horizontal Scroll Arrangement; Vertical Arrangement; Vertical Scroll Arrangement; e Table Arrangement. Utilizando Diversos Layouts Quando for necessário inserir diversos componentes, o aconselhável é inserir um Layout com Scroll, pois ele contém uma barra de rolagem que auxilia na visualização dos componentes abaixo. Uma excelente forma de manter seu aplicativo mais leve é utilizando vários layouts numa mesma tela, por exemplo. O grande segredo de trabalhar com diversos layouts é em relação a sua visibilidade. Quando estiver utilizando o Layout de Contato, as demais precisam estar com a checkbox visible desmarcada, como no exemplo acima. Todos os layouts foram renomeados. O layout que estiver sendo utilizado deverá estar marcado a sua visibilidade. Ao final desse e-book um link estará disponível com alguns projetos para você se exercitar e continuar seu aprendizado. Então lembre-se de procurar através do nome do arquivo de acordo com as suas necessidades. Vamos continuar! BANCO DE DADOS Você sabe como funciona o armazenamento de dados em um aplicativo? O que é um Banco de Dados? É um ambiente no qual é possível armazenar dados de forma sistemática gerando uma coleção de dados. As informações armazenadas podem, posteriormente, serem extraídas para outras funções. Banco de dados disponíveis na plataforma - Firebase Database - Tiny DB - Tiny Web DB - SQlite * Utilizando o componente Web, podemos integrar o banco de dados MySQL. O que é comum, a integração do BD MySQL com PHP. Em paralelo tem o serviço de armazenamento através de planilhas com o componente Spreadsheet (Airtable). Esse serviço de armazenamento lembra muito o Excel, porém com muitas funcionalidades inovadoras, com um visual bem estruturado e moderno. Lá é possível armazenar diversos dados, além de possuir integrações com outras plataformas. Lembrando que o Airtable é gratuito, porém oferece também serviços pagos. Ao longo deste e-book nós iremos ver diversos exemplos do uso do Airtable. Fique ligado(a), que temos muita coisa para aprender :) Para armazenamento de imagens, vídeos e áudios: Mas afinal, você sabe a diferença do BD Firebase para os demais? Antes de começar a te explicar, vamos há alguns questionamentos: 1. Sou novo nesse mundo da programação. 2. Há, sou apenas um curioso. 3. Acabei caindo de paraquedas nessas plataformas de blocos. 4. Não entendo nada, apenas vejo tutoriais e copio. Se a soma desse questionamento for igual a 10 então comece a ler a partir do texto em negrito. Se a soma for inferior a 7 então comece a ler a partir do texto em itálico. Quando você curte o processo de aprendizado as coisas começam a fluir, o que vai fazer você conseguir aprender a programar nessa plataforma ou em outra qualquer não será apenas o fato de gostar, por paixão ou encantamento. O processo é longo e tudo isso vai exigir que você seja disciplinado, contínuo e muito paciente. Fico feliz que não tenha pulado etapas. E então vamos lá! - Cloudinary BANCO DE DADOS O Firebase é um banco de dados NOsql, onde promove soluções de armazenamentos de dados não relacional. Uma das suas principais vantagens em relação a isso é por não possuir schema, ou seja, não é necessário criar tabelas, definir chaves primárias e estrangeiras. Outra diferença em relação a outros bancos de dados, são os seus dados armazenados na cloud no formato JSON (Javascript Object Notation). Estrutura do Firebase Os dados do Firebase Realtime Database são armazenados como objetos JSON. Tente imaginar essa estrutura como uma árvore, onde esses dados são hospedados na nuvem e ao contrário de um banco de dados SQL, no firebase não há registros e nem tabelas. Na imagem abaixo estão alguns testes que eu utilizei em alguns projetos que foram lançados no meu curso da Udemy. Acesse o link na próxima página e conheça o curso, lá tem muito conteúdo legal! *Schema: É uma coleção de objetos de um banco de dados que serve para agrupar objetos, ou para realizar divisões departamentais. BANCO DE DADOS Algumas coisas só passam a fazer sentido quando são colocados em prática. Pensando nisso que eu reuni alguns vídeo para testes utilizando o Firebase. O vídeo abaixo é do Desenvolvedor Deivid Rothen, ele ensina você a fazer o CRUD, que na programação é conhecido como Create, Read, Update e Delete. São as quatro operações básicas que podem ser feitas num banco de dados. Inserir os dados e fazer a leitura deles. Editar e excluir os dados já existentes. Fique bem atento ao conteúdo, aprender a utilizar banco de dados será de suma importância para alcançar grandes objetivos. Firebase O Firebase possui diversas funcionalidades, o mesmo vem crescendo a cada dia. Então dito isso, dependendo do seu projeto vale a pena ver se é viável ou não. Bom, nosso próximo passo será desenvolver uma tela de login utilizando o firebase para autenticar usuários através de uma confirmação por sms. Firebase Aqui estão os preços que o Firebase oferece por seus serviços. Como citado anteriormente de forma breve, o componente CLOUDINARY permite fazer upload e armazenar mídias como imagens, vídeos e áudio. Cloudinary Então para isso, entre no site do Cloudinary,crie a sua conta e todas as credenciais estarão disponíveis desta forma. Depois de arrastar o componente para o projeto, é necessário inserir suas credenciais. Suas credenciais estarão aparecendo no cabeçalho do site na aba Dashboard, então basta copiar e colar todas as informações na propriedade do componente. Use este bloco para fazer upload do arquivo de mídia especificado para sua biblioteca de mídia Cloudinary. Este bloco é quando a mídia estiver carregada, ele informará se foi sucesso ou não o envio. Que tal construirmos uma aplicação utilizando o Airtable? Airtable para armazenar nossos dados Extensão do cardview Bom, a proposta deste tutorial é te ensinar a obter dados do airtable e colocar em vários cardviews, vamos lá para a prática? O que utilizaremos: Primeiro acesso Clique no link e abra o AIRTABLE para criar uma conta. Clique no botão + e escolha a opção "Import a spreadsheet" e adicione o nome da tabela, aqui eu coloque o nome cardview. Airtable Esta é a visão incial da nossa tabela pós criação. Com dois cliques você pode alterar nome da tabela, nome da coluna, sinta-se à vontade. Nossa planilha ficou assim, coluna id, título, hora, data, obs e imagem. Mãos a obra, preencha tudo ai no seu baseado na imagem abaixo, com as informações que você desejar. Quanto a coluna de imagem, esses links estão vindo do banco de dados do cloudinary. Crie uma conta lá e coloque as imagens que desejar, depois disso basta copiar o link para o airtable. 1 2 ...Vamos para os blocos agora. Sua tela precisa estar exatamente assim, procure os componentes e arraste para a sua tela. Depois disso, importe a extensão do cardview. Lembrando que para fazer o download você precisa acessar o final deste guia. Você precisa configurar suas spreadsheets, para isso, vá para o próximo passo observando esta imagem aqui, ok? 2 3 4 Repita isso para todas as spreadsheets. Clique em "Regenerate API key" e volte para a aba anterior. Esse procedimento precisa ser feito para que a chave seja gerada. Volte para a aba do seu airtable e clique em "Account" como na imagem ao lado. Com a aba anterior em aberto, clique em <> API Documentation. Após os cliques como ilustrado na imagem, agora basta pegar suas credenciais e retornar para a imagem 4 para preencher, o nome da tabela precisa estar corretamente também 5 6 7 8 Agora inicializamos a tela com a obtenção da primeira coluna de dados, acredito que você já esteja familiarizado o suficiente para acompanhar a imagem abaixo, correto? Não esqueça de criar as variáveis globais para cada spreadsheet que utilizaremos. Agora iremos obter os dados da nossa coluna. O bloco usado para a obtenção é o .Got Column. Para cada coluna atribuimos os seus valores - "values" onde ficará armazenado nas variáveis globais criadas lá em cima. Ao chegar na última coluna, colocaremos os dados em uma variável que posteriormente usaremos nos nossos CardViews. Criei um procedimento para criar listas vazias, para que toda vez que seja obtido os dados, primeiro verifique que eles não contenha informações. É ruim para você assimilar tudo na base da leitura e observação? Eu também tenho conteúdo em vídeo, assista agora mesmo essa aula gratuita, lá eu também mostro o resultado de como ficará o app. Não esquece de testar em! Bom, para você que possui dúvidas sobre o uso do airtable, leia com atenção. O seu uso é gratuito com algumas limitações, veja a abaixo pequenas diferenças: Notas sobre o AIRTABLE Gratuito: Registros na base: 1.200 Criação de base ilimitada Armazenar anexos: 2GB Plus $10/mês no plano anual: Registros na base: 5.000 Criação de base ilimitada Armazenar anexos: 5GB Pro $20/mês no plano anual: Registros na base: 50.000 Criação de base ilimitada Armazenar anexos: 20GB Todas essas informações estão contidas no site do airtable. Dependendo do seu projeto, vale muito a pena utilizar essa plataforma. MEU CURSO Clique no na imagem abaixo para entrar na página do meu curso. Acesse a grade curricular, veja a página inicial, lá tem toda a descrição e algumas aulas em aberto para você degustar. O curso passou por diversas atualizações desde o seu início. Vale a pena dar uma passadinha aqui para apreciar. Ah Juliana, eu nunca programei, esse é o meu primeiro contato. Ok! vou te explicar de forma simples e de fácil compreensão. Uma extensão é um recurso a mais que você tem para inserir nos seus projetos, exemplo, se você deseja inserir algum componente, mas o kodular não fornece, então uma extensão serve de alternativa. Existem diversos sites e desenvolvedores que nos fornecem esse tipo de ajuda, alguns pagos, outros gratuitos. Segue abaixo algumas extensões juntamente com o seu uso. EXTENSÕES Você já precisou usar extensões nos seus projetos? Extensão: Gradiente em um Layout. Essa extensão oferece cores degradê no layout horizontal ou vertical. Você pode inserir diversas cores na sua tela. No exemplo abaixo o criador da extensão utilizou 4 cores. *Lembrando que o formato das extensões é .aix EXTENSÕES Chegou a hora de testar outra extensão, desta vez em vídeo. Bom, é uma extensão de terceiros no qual é possível inserir um menu com submenu. Confira: Para adquiri a extensão mostrada no vídeo é necessário você baixar o aplicativo abaixo. Basta clicar na imagem para ser direcionado. Não limite a sua mente, há uma infinidade de ideias para serem colocadas em prática, você vai ficar esperando até quando? Vou te mostrar um site incrível com mais de 3.000 mil ideias de aplicativos. Vem comigo! O nome do site é "Ideas Watch" . Inúmeras ideias são postadas neste local, onde é possível ver a interação entre usuários, confesso que algumas ideias são sem nexo algum, porém é compensado com outras que são muito boas, então vale a pena conferir. Clique aqui no link e confira o site. Visão do site API'S Você sabe o que é e para que serve uma API? Application Programming Interface? Isso mesmo, a API é a interface ideal para que um sistema se comunique com outro sistema, compartilhando suas ações, ferramentas, padrões e protocolos, gerando uma conversa de sistema para sistema. As Api's possibilitam ter serviços como, reservas de hotéis, compras de passagens áreas ou até mesmo realizar cálculos de fretes. Tudo isso é realizado através de requisições de dados de sites web. Eu separei um vídeo sobre como integrar uma API simples do Mercado de Bitcoins. Nele é utilizado um componente web para obter os dados através do método Get, acionando a Url em questão. API'S Assista o vídeo abaixo para entender melhor sobre solicitações de dados via API. E ai, curtiu? Essa é uma das diversas formas de se fazer requisições de dados. Após a atualização do kodular novas implementações surgiram, como por exemplo a de importar e exportar blocos no formato png. Quando você exporta os blocos como imagem PNG, um arquivo XML também é adicionado à imagem. Portanto, quando você importa de volta para o Criador, ele analisa o arquivo XML e cria os blocos a partir dos metadados que estão dentro da imagem. Vamos entender como funciona. EXPORTANDO BLOCOS Selecione seu bloco desejado e clique com o botão direito do mouse. Depois clique na opção "Download de blocos como PNG" . Importar/Exportar Blocos Note que o download é do bloco selecionado e não de todos os blocos. IMPORTANDO BLOCOS Basta arrastar o bloco baixado para a tela de programação como mostrado na imagem abaixo. Importar/Exportar Blocos Esse recurso possui algumas limitações como por exemplo, o compartilhamento de blocos com terceiros e se caso você edite a imagem após o download. Caso precise compartilhar os seus blocos com alguém opte por fazer isso através do Google Drive, Dropbox e caso necessite enviar pelo Whatsapp, escolha a opção documento, pois caso envie diretamente da galeria, as propriedades da imagem é modificada. Lembre-se que o XML precisa ser mantido. Segundo a App Inventor Java Bridge é uma versão exploratória (alfa) do App Inventor quepermite gerar um equivalente em Java dos aplicativos que você criou. Java Bridge Curiosidade! Se você possui algum aplicativo pronto na plataforma do App Inventor, vale a pena testar transformando os seus blocos em linhas de código. Saiba mais: http://www.appinventortojava.com/ http://www.appinventor.org/jbridge Publicar aplicativos Você já se imaginou tendo um aplicativo publicado na playstore? Se a sua resposta for sim, logo abaixo tem o passo a passo para você publicar o seu primeiro app. Veja: Caso não saiba como exportar o seu projeto para transformar em apk, veja o procedimento abaixo. Publicar aplicativos Com o projeto finalizado, clique em "Export" e escolha se prefere escanear o QR Code para baixar o aplicativo direto no seu celular, ou se prefere apenas salvar no seu computador. Alguma dúvida sobre o procedimento? Entre em contato comigo: � Meu site https://juoliveira.com.br/ � Instagram: https://www.instagram.com/programacao_em_blocos/ �E-mail: programacaoemblocos@juoliveira.com.br Links úteis Acesse o link abaixo para fazer o download dos arquivos .aia para testes. Meu Canal | YouTube Arquivos .aia fornecido na comunidade do thunkable, aproveite! Canal Parceiro | YouTube
Compartilhar