Como criar uma APP (Mobincube)

Transcrição

1 Como criar uma APP (Mobincube) Este módulo irá ensinar-lhe como criar e disponibilizar uma APP (Aplicação) usando o programa Mobincube. A produção de uma APP constitui uma competência informática avançada. Por conseguinte, pressupõe-se que as competências básicas e intermédias já tenham sido adquiridas e estejam sedimentadas. O módulo aborda os seguintes assuntos: O que é o Mobincube; Como criar uma conta no Mobincube; Como criar uma APP no Mobincube; Como adicionar uma loja à Aplicação; Como alterar o aspeto da Aplicação; Como publicar a Aplicação. O que é o Mobincube O Mobincube é um programa de desenvolvimento de software que existe na Internet e que permite criar Aplicações de qualquer tipo (educacionais, de entretenimento, de produtividade...). Como se trata de um programa que existe na Internet, não tem de o instalar no seu computador. Basta criar uma conta online (o Monincube permite inscrições grátis). Como criar uma conta no Mobincube

2 Para criar uma conta no Mobincube, deverá começar por entrar no espaço web do programa: Uma vez na página de entrada do programa deve clicar em Cadastre-se grátis (ou Free sign up) - ver Figura 1. Figura 1 - ecrã de entrada no Mobincube Entrará numa página de boas-vindas, onde deve preencher a ficha de adesão com os seus dados: nome de utilizador, palavra passe e direção de correio eletrónico. Finalmente, deve cliar no botão Criar conta (Create Account). Note bem: também pode aceder ao Mobincube a partir das redes sociais. Porém, por questões de segurança, é preferível criar uma conta.

3 Também por razões de segurança, o programa Mobincube enviará uma mensagem de confirmação da criação de conta para a direção de correio eletrónico que indicou. Deve então ir ao seu e seguir as instruções fornecidas na mensagem recebida para validar a sua conta no Monincube (clicar no link fornecido na mensagem). Note bem: como esta mensagem de confirmação de criação de conta é uma mensagem automaticamente gerada, o seu correio eletrónico pode considerar que se trata de correio não desejado. Por isso, caso a mensagem de confirmação de conta no Mobincube não lhe apareça na caixa de entrada do seu , procure-a no SPAM porque pode ter sido direcionada para aí. Após ter confirmado a sua conta no Mobincube, deve voltar à página de entrada do programa e clicar em Login (ver Figura 1). A seguir, autentique-se com o nome de utilizador e a palavra passe que definiu quando se registou e clique em Iniciar sessão. Como criar uma APP no Mobincube Tendo já iniciado sessão no Mobincube, clique no botão + Criar uma nova APP (Create a new App) - ver Figura 2. Figura 2 - Botão + Criar uma nova APP (Create a new App)

4 Seguidamente verá surgir um ecrã que lhe pede para dar um nome à sua APP e que deverá preencher (Note que a qualquer momento poderá alterar este nome). Por baixo encontra duas opções: ou opta por usar um formato pré-definido (Wizard), ou opta por criar a sua APP a partir do zero - neste caso escolhe uma aplicação em branco (Blank) - Ver Figura 3. Figura 3 - Opções de criação: formato pré-definido (Wizard) ou em branco (Blank) Neste tutorial vamos escolher uma aplicação em branco (Blank) - para escolher, basta clicar no botão Criar (Create) que se encontra por baixo de cada opção (Ver figura 3). O ecrã seguinte é a página central do programa e tem o aspeto que pode ver na imagem 4.

5 Inserir uma imagem com o ecrã central do program - faz falta aqui para dar uma visão geral. Figura 4 - Ecrã central do Mobincube De entre as opções deste ecrã, clique no botão Alterar dados (Modify data) para personalizar a informações da sua aplicação. No ecrã que então surge (Ver figura 5) pode alterar o nome inicialmente dado à aplicação. Deve ainda escolher a Língua (Language) que será usada (neste caso o Português), a Categoria em que a aplicação de inscreve (neste caso, Educação) e escrever uma breve descrição da App que vai fazer. O campo Informação da Versão (Version Information) permite-lhe atualizar os dados / as informações das várias versões da APP que for realizando ao longo do tempo. O botão Editar ícone (Edit Icon) permite escolher uma imagem que servirá de capa (ou ícone) da Aplicação. Essa imagem pode ser pesquisada na Internet, ou pode carregar uma imagem que tenha arquivada no seu computador. Quando tiver terminado de preencher esta ficha, deve clicar em Gravar (Save).

6 Figura 5 - Ficha com os dados da versão da Aplicação Poderá então dar início à construção da sua Aplicação. Comece por clicar no botão Edição (Edit), que encontra no menu superior do ecrã (Ver figura 6). Figura 6 - Menu superior do ecrã, com a opção Edição (Edit) assinalada A aplicação funciona com vários ecrãs. Cada ecrã apresentará as informações que escolher aí colocar.

7 Para mais informações sobre as funções específicas de cada ecrã e os botões que permitem estabelecer diferentes ligações, consulte as Notas Informativas que se encontram no final deste tutorial. Para adicionar ou modificar ecrãs à sua aplicação deve recorrer às opções que se encontram no menú lateral (ver Figura 4??) e selecionar a opção que se encontra no topo. Barra lateral. Opção a selecionar. Figura 7 - Opções do menu lateral Com esta opção selecionada, poderá ver todos os ecrãs da aplicação e respetivos nomes. No caso de uma aplicação nova, esta só terá o ecrã inicial, que será também o ecrã principal, ao qual deverão ser adicionados novos ecrãs, cada qual com sua funcionalidade.

8 Ao ecrã principal, por defeito, é dada a designação de Mainscreen. Para alterar este nome para "Ecrã principal" deve clicar no botão ao lado que tem o símbolo da roda dentada e de seguida no lápis (ver figura 8). Figura 8 - Botão com o símbolo da roda dentada e opções a que dá acesso Verá surgir uma caixa de texto onde deve escrever o novo nome do ecrã e seguidamente clicar em ok (ver figura 9). Note bem que carateres especiais, como acentos e pontuação, podem causar erros ao executar a aplicação, logo não devem ser utilizados ao dar nome aos ecrãs.

9 Figura 9 - Renomeação do ecrã principal Para adicionar mais ecrãs, deve clicar no símbolo + e seguidamente preencher o campo de texto com o nome pretendido, clicando seguidamente em ok (ver figura 10). Figura 10 - campo de texto para dar nome a um ecrã Deverá ainda atribuir um tipo ou uma funcionalidade aos ecrãs existentes. Pode escolher, por exemplo, Lista de opções (option list) e seguidamente clicar em ok para confirmar a sua opção (Ver figura 11).

10 Figura 11 - atribuição de uma função a um ecrã Seguidamente deve optar pelo modo de edição da Lista de opções (Option List) para poder começar a compor essa lista (ver figura 12): Figura 12 - ecrã "lista de opções" em modo de edição

11 Para adicionar opções deve clicar no sinal + que se encontra no topo do ecrã. Seguidamente será necessário preencher 3 campos com informação (ver figura 13): - Text - onde deverá escrever a designação da opção (ex: website ESES) - Action - o tipo de ação que a opção realizará (ex: Open URL) - Destination - o destino da ação (para a ação "Open URL" o destino será o URL a abrir, logo o website da ESES: Com esta informação, a primeira opção da lista de opções está criada. Figura 13 - Informação a preencher para uma opção da lista de opções Para criar mais opções, procede-se da mesma maneira. Para este tutorial, criaremos mais duas opções, uma designada "Contactos" e outra "Facebook" às quais não atribuímos nenhuma ação. O ecrã principal, de tipo "lista de opções" terá agora o aspeto que pode ver na figura 14.

12 Figura 14 - Ecrã principal de tipo "Lista de opções" Seguidamente, há que criar ecrãs para associar às várias opções criadas na lista de opções do ecrã principal. Para tal, primeiro terá de selecionar a primeira opção do menu do lado direito do ecrã (ver figura 7) Seguidamente deve clicar no botão com o sinal de +. E finalmente deve dar ao ecrã o nome da opção "Contactos". Deve proceder do mesmo modo para criar outro ecrã a que dará o nome de "Facebook". Feito isto, terá os ecrãs tal como pode ver na Figura 15. Note que quando o tipo de ecrã não está definido, esse ecrã ficará marcado com um ponto de interrogação (tal como se verifica com o ecrã "facebook").

13 Figura 15 - Ecrã principal e ecrãs criados No caso do ecrã "contactos", este foi definido também como uma lista de opções (option list), seguindo o procedimento já explicado. Porém, neste caso, ao entrar no ecrã que solicita informações, são adicionadas duas novas opções (sem nenhuma ação, por enquanto): Telefone e (ver figura 16). Figura 16 - Opções do ecrã "Contactos"

14 Seguidamente, na opção "Telefone" já será identificada uma ação (action) - neste caso "Call" (telefonar) e em destino (destination) será colocado o número de telefone para onde ligar, sem esquecer de o fazer preceder por + e o indicativo do país (ex: ). Na opção , a ação (action) será "Open URL" e em destino (destination) coloca-se o endereço de pretendido com o prefixo mailto: (ex: mailto:geral@ese.ipsantarem.pt ) Para definir a função do ecrã Facebook, clicamos novamente no botão com a imagem da roda dentada e selecionamos a primeira opção (à esquerda do lápis) - ver figura 17. Figura 17 - Definindo a funcionalidade do ecrã "Facebook" Seguidamente escolhemos o modo "Facebook". Finalmente, basta colocar o ID da página de facebook com a qual se pretende estabelecer a ligação (neste caso: EscolaSuperiordeEducacaodeSantarem) - ver figura 18.

15 Figura 18 - Estabelecendo ligação ao Facebook Outra funcionalidade que pode ser atribuída a um ecrã é a funcionalidade "Web". A diferença entre a funcionalidade "Open url" e a funcionalidade "Web" é a seguinte:

16 - O modo open url abre o link da página com a aplicação predefinida do utilizador, por exemplo: Google Chrome, Firefox, Safari, sendo portanto os links visualizados através de outra aplicação. - O modo web incorpora a página, não saindo da aplicação, não havendo, portanto, aplicações externas para visualizar o link. A página aparecerá em branco, no entanto isto é normal, apenas aparecerá corretamente ao testar a aplicação no dispositivo de destino. Para se obter a funcionalidade Web, no campo ação (action) haverá que escrever "Go to screen" e no campo Destino (Destination) haverá que escrever, por exemplo, browser ou Youtube (ver figura 19). Figura 19 - Ecrãs que realizam diferentes ações Como adicionar uma loja à aplicação O Mobincube permite adicionar uma loja à sua aplicação. Para tal, deve criar um novo ecrã (de acordo com o procedimento já explicado), ao qual dará o nome de Loja. Seguidamente, deve atribuir uma função a esse ecrã. Deve fazer como já foi explicado: clicar no botão com a roda dentada e, a seguir, escolhe a primeira opção, da esquerda. No menu de escolha do tipo de ecrã selecione Loja (Shop):

17 Após selecionar a opção Loja (Shop) terá de preencher os campos relacionados com o pagamento (ver figura 20). Figura 20 - Campos a preencher para a opção Loja (Shop) Note que os pagamentos que a Monincube permite são efectuados pelo sistema Paypal. Por conseguinte, deverá ter uma conta neste serviço. - No campo API Username deve escrever o seu do paypal. - No campo API Password escreve a sua password do paypal. - No campo Signature indica o nome que pretende que apareça no pagamento (por exemplo, se indicar um nome, como António Silva, verá que os seus pagamentos serão efetuados a António Silva). - No campo Euro ( ) definimos o tipo de moeda (neste caso será o Euro - ). Para adicionar à loja o anúncio dos produtos que pretende vender, estando ainda no ecrã da loja, que acabou de criar, deve descer na página até encontrar os campos que vê na figura 21:

18 Figura 21 - Campos a preencher para adicionar um produto à loja Para adicionar um produto à loja, tem de preencher todos os campos desta ficha: - No campo Select deve colocar uma imagem do produto; - No campo Product name especifique o nome do produto; - No campo Reference deve indicar a referência do produto (Note que a referência deve ser única para cada produto, pois é essencial para a boa organização desses produtos); - No campo Price introduza o preço do seu produto em unidades (ex: se o produto custar 5 euros, deve escrever simplesmente 5); - No campo Description apresente uma descrição do produto; Termine a adição do produto clicando no botão Add. Se pretender adicionar mais produtos, repita estes passos para cada produto que adicionar. Como alterar o aspeto da aplicação O Mobincube permite alterar vários elementos a fim de personalizar a sua aplicação.

19 Querendo mudar o tipo de letra da sua aplicação, comece por selecionar a opção Propriedades da App (App properties) - um botão com duas rodas dentadas que se encontra no menu do lado direito do ecrã - a segunda opção a contar de cima no menu (ver figura 22): Figura 22 - Destaque para o botão Propriedades da App (App properties) No ecrã seguinte, selecione o ícone T (de Texto) e escolha a fonte e o tamanho que desejar (ver figura 23). Figura 23 - Opções de estilo de letra

20 Para modificar a cor de fundo, deve clicar no botão Propriedades do ecrã (Screen properties) - é a terceira opção do menu do lado direito do ecrã (ver figura 24). Figura 24 - Destaque para o Botão Propriedades do ecrã (Screen properties) Seguidamente deve selecionar a opção Cor de fundo (Background color) e definir aí a cor de fundo para a sua aplicação clicando em cima do quadrado que tem a cor atual. Caso prefira ter uma imagem de fundo, clique na opção Imagem de fundo (Background image) - Ver figura 25.

21 Figura 25 - Opções "cor de fundo" e "Imagem de fundo" Se quiser alterar as cores do calendário da App, deve começar por selecionar a opção Propriedades da App (App properties). Seguidamente, selecione a opção Desenho do Calendário (Calendar design) o ícone é a penúltima opção. Poderá aí modificar as cores conforme desejar (ver figura 26).

22 Figura 26 - Opções de cor para o calendário Como publicar a aplicação Terminada a aplicação, deve visualizar o aspeto com que esta ficou. Para tal, selecione a opção Pre-visualizar (Preview) na barra de menu superior (ver figura 27). Figura 27 - Botão Visualizar (Preview) Pode ainda escolher o ambiente em que pretende efetuar a pre-visualização, Android ou ios. Para escolher o ambiente Android deve clicar no botão pedir (Request) - ver figura 28.

23 Figura 28 - Pedir Pre-visualização em ambiente Android Seguidamente verá surgir uma janela com a informação que vê na Figura 29: Figura 29 - Pedido de versão de demonstração

24 Deve clicar em Sim (Yes) para dar início ao processo que demorará normalmente entre 2 e 5 minutos. Seguidamente poderá aceder à sua aplicação com o seu smartphone, através de um link ou da leitura de um QR Code (Ver figura 30). Figura 30 - link e QR Code de acesso a uma aplicação Uma vez descarregada e instalada a aplicação no smartphone, pode testá-la. Se verificar que há elementos a melhorar, basta que regresse à opção Edição (Edit) e realize as alterações desejadas. Para tornar a verificar como ficou, deve repetir a Pré-visualização seguindo os passos já explicados.

25 Quando estiver satisfeito com a sua aplicação, poderá publicá-la. Para tal, deve selecionar a opção Publicar (Publish) que se encontra no menu superior (ver figura 31). Figura 31 - Opção Publicar (Publish) Terá que aceitar as condições de utilização clicando em Ok (Ver figura 32).

26 Figura 32 - Aceitação das condições de utilização Deverá ainda aguardar a produção da aplicação (Ver figura 33). Figura 33 - Publicação da Aplicação Depois de publicada a aplicação, as opções de partilha são múltiplas: Android e HTML5 (Ver figura 34), Android (Ver figura 35), iphone e ipad (Ver figura 36) ou Windows Phone (Ver figura 37).

27 Figura 34 - Android e HTML5

28 Figura 35 - Android

29 Figura 36 - iphone e ipad

30 Figura 37 - Windows Phone Note bem que quantas mais forem as plataformas nas quais partilhar a sua aplicação, tanto maiores serão as possibilidades de chegar a um público mais vasto. Notas Informativas (alguns botões do Mobincube) Botão que permite criar uma lista de opções no ecrã.

31 ?????? - Botão que permite adicionar texto, vídeos, tabelas, texto online (disponíveis em websites) e separadores. Botão que permite adicionar uma imagem, ocupando metade do ecrã e realiza a ação que escolhermos (ir para um url, fazer uma chamada, etc.).?????? - Botão que permite adicionar eventos/compromissos num calendário. Botão que permite incorporar uma página web Outros botões que permitem estabelecer ligações, nomeadamente com o facebook, com o twitter, com o Google + ou com o Youtube (entre outros):

32