Mudanças entre as edições de "Programação Mobile no Garoa"
Ir para navegação
Ir para pesquisar
m (Juca moveu a página Programacao Mobile no Garoa para Programação Mobile no Garoa) |
|||
| (2 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( |
+ | criando o projeto(no terminal linux, windows, ...): |
$ ionic start <Nome_App> <tipo: blank, tabs, sidemnu> |
$ ionic start <Nome_App> <tipo: blank, tabs, sidemnu> |
||
| Linha 24: | Linha 24: | ||
$ ionic generate page <Nome_Tela> |
$ ionic generate page <Nome_Tela> |
||
| − | Para subir um emulador, o Ionic usa um |
+ | 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 |
||
| Linha 39: | Linha 39: | ||
2. Criar um ID para o input -> .html , exemplo: |
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: |
3. Declarar a variável no .ts da tela -> .ts , exemplo: |
||
''export class Page { id : any ; }'' |
''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: |
4. Para usar a variável passando para outra tela, exemplo: |
||
| − | ''goToPage(){ |
+ | ''goToPage(){'' |
| − | this.NavCtrl.push( HomePage, { |
+ | this.NavCtrl.push( HomePage, {'' |
| − | valor.this.id } ); |
+ | valor.this.id } );'' |
}'' |
}'' |
||
5. Recebendo a variável em outra tela --> '''HomePage.ts''' |
5. Recebendo a variável em outra tela --> '''HomePage.ts''' |
||
exemplo: |
exemplo: |
||
| − | ''export class HomePage { |
+ | ''export class HomePage {'' |
| − | public user : string; |
+ | public user : string;'' |
| − | constructor ( public navCtrl:NavController, |
+ | constructor ( public navCtrl:NavController,'' |
| − | public navParams ) { |
+ | public navParams ) {'' |
| − | this.user = this.navParams.get('valor'); |
+ | this.user = this.navParams.get('valor');'' |
}'' |
}'' |
||
| Linha 64: | Linha 64: | ||
<nowiki><h2> {{ user }} </h2></nowiki> |
<nowiki><h2> {{ user }} </h2></nowiki> |
||
''</ion-content>'' |
''</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
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