Mudanças entre as edições de "Programação Mobile no Garoa"

De Garoa Hacker Clube
Ir para navegação Ir para pesquisar
 
(6 revisões intermediárias por um outro usuário não estão sendo mostradas)
Linha 18: Linha 18:
 
== Primeiros Passos ==
  
== Primeiros Passos ==
   
−
criando o projeto(exemplo no terminal linux):
 +
criando o projeto(no terminal linux, windows, ...):
−  
 
$ ionic start <Nome_App> <tipo: blank, tabs, sidemnu>
  
$ ionic start <Nome_App> <tipo: blank, tabs, sidemnu>
   
−
depois, a qualquer momento durante o projeto, se desejado inserir uma página(opcional):
 +
depois, a qualquer momento durante o projeto, se desejado inserir uma página(opcional):
⚫
 
 
$ ionic generate page <Nome_Tela>
  
$ ionic generate page <Nome_Tela>
   
−
Para subir um emulador, o Ionic usa um sever e usa o browser:
+
Para subir um emulador, o Ionic usa um server e usa o browser:
 
$ ionic serve -c
 
$ ionic serve -c
 
--> importante: deve estar na pasta do projeto
  
--> importante: deve estar na pasta do projeto
   
 
=== Estrutura de pastas / arquivos do projeto ===
  
=== Estrutura de pastas / arquivos do projeto ===
−
<Pasta_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>''
  +
<nowiki><h2> {{ user }} </h2></nowiki>
  +
''</ion-content>''
   
 
== 2018-AGO-17 ==
  
== 2018-AGO-17 ==

Edição atual tal como às 15h45min de 15 de novembro de 2018

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(no terminal linux, windows, ...):
$ 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 server 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
Disponível em “https://garoa.net.br/mediawiki/index.php?title=Programação_Mobile_no_Garoa&oldid=28236”