Programação Mobile no Garoa

Grupo de estudos Ionic Android Framework / Desenvolvimento Mobile no Garoa Hacker Clube

O que: Grupo de estudos Ionic Android Framework / Desenvolvimento Mobile 
Quando: Às sextas-feiras, das 19:30h às 21:30h.
Onde: Na Sede do Garoa Hacker Clube.
Associado responsável: Marcelo campos
Tutor do Grupo de estudos: Fellype Cazorino
Grupo no Telegram: Consulte a lista de grupos do Garoa no Telegram.

Apresentação com Links para Download dos softwares necessários e instruções:

Thread na Lista de Emails do Garoa

Grupo do Telegram

Primeiros Passos

criando o projeto(exemplo no terminal linux):
$ ionic start <Nome_App> <tipo: blank, tabs, sidemnu>

depois, a qualquer momento durante o projeto, se desejado inserir uma página(opcional): 
$ ionic generate page <Nome_Tela>

Para subir um emulador, o Ionic usa um sever e usa o browser: 
$ ionic serve -c 
 --> importante: deve estar na pasta do projeto

Estrutura de pastas / arquivos do projeto

<Pasta_do_Projeto>
  <src> : Pages = Telas, extensões .html .scss .module.ts
<Pasta App>
   Módulos, ao criar uma tela adicionar aqui: app.module.ts : declarar "declarations" e "entryComponents"
dica: Para saber o nome da tela abrir o .ts dela (<NomePagina.ts>) e ver a linha "export class"

Passando Valores entre Telas

1. Capturar o valor desejado, exemplo: <input> -> .html

2. Criar um ID para o input -> .html , exemplo:
 <ion-input type text [(ngModel)] = "id"> </ion-input>

3. Declarar a variável no .ts da tela -> .ts  , exemplo:
 export class Page { id : any ; }
 onde "id" é a variável e "any" o tipo

4. Para usar a variável passando para outra tela, exemplo:
 goToPage(){
 this.NavCtrl.push( HomePage, {
    valor.this.id } );
 }

5. Recebendo a variável em outra tela --> HomePage.ts
 exemplo:
 export class HomePage {
   public user : string;
   constructor ( public navCtrl:NavController,
                 public navParams ) {
                 this.user = this.navParams.get('valor');
 }

6. Exibir valor recebido --> HomePage.html
  <ion-content padding>
    <h2> {{ user }} </h2>
  </ion-content>

2018-AGO-17

Primeiro Encontro do Grupo

Se possível, leve seu notebook

Objetivos do dia

* bate papo sobre
* apresentação e introdução ao framework Ionic

2018-AGO-24

- Instalação do framework Ionic
- Criação e configurações quick start de projeto
- Passagem de valores de variáveis entre telas

2018-AGO-31

Sugestões de atividades para essa sexta:

- Exibir o login como home page (sem exibir as abas)
- Fazer tela de cadastros
- Fazer validação de login. Se o usuário existir, exibir as abas do app, senão exibir mensagem de login inválido.
- Pesquisar como armazenar os cadastros de usuários no Storage do Ionic (Banco de Dados)
- Pesquisar como usar autenticação com o Firebird ou Autenticação com Google, Facebook através de outro serviço.

2018-SET-07

- Revisão e  1os passos no quadro / lista

2018-SET-14

- Pondo em prática alguns conceitos