Categorias
Tecnologia

Como Criar Indexar Configurar Páginas no Ionic 3

Como Criar Indexar Configurar Páginas no Ionic 3. Explico neste artigo como criar páginas no App feito em Ionic 3. Aprenda facilmente pelo óbvio e lógica.

Suponhamos que você precisa acrescentar algumas páginas no seu app.

Como Criar Indexar Configurar Páginas no Ionic 3: Criando Páginas

Então vamos até o “Terminal” para criar uma nova página.

Você já deve saber que no “Terminal” ou “Prompt de Comando”, você deverá caminhar até à pasta do App que está sendo criado.

Faça isso usando o comando “Cd <nome da pasta>

Uma vez que você digitar o comando “dir” no Prompt de Comando do windows ou “pwd” no Terminal do MAC e estiver dentro da pasta do seu App, faça o seguinte:

  1. Para gerar páginas pelo CLI basta digitar o comando:

$ ionic generate page <nome da pagina>

Como Criar Indexar Configurar Páginas no Ionic 3: Conversando Com o App

Nesse exemplo eu criei uma página chamada “Feed” e quero indexa-la na Home do App bem na “Aba do Rodapé”

Apesar de ter criado uma página, meu App ainda não sabe que ela existe. Então tenho que dizer para o meu App que eu criei uma nova página.

2. Devo observar que toda página que nós criamos ela gera 04 arquivos:

    1. Feed.html
    2. Feed.module.ts
    3. Feed.scss
    4. Feed.ts

É lógico que pra eu dizer ao App sobre a nova página, tenho que saber qual o nome que ela vai atender ou se identificar.

Como Criar Indexar Configurar Páginas no Ionic 3: Arquivo Módulo Criado

Eu encontro essa informação dentro do arquivo recém criado – “feed.module.ts”.

Ora, se eu vou falar para o meu App que eu criei uma página e preciso que ele faça a indexação, reconheça e me possibilite mostrar um link para essa nova página  – a lógica é eu saber qual arquivo do meu App é responsável por essa parte.

Tudo isso é muito óbvio e de fácil aprendizado e memorização.

Como Criar Indexar Configurar Páginas no Ionic 3: O Arquivo Módulo do App

Seguindo essa intuição, eu percebo que o arquivo responsável por isso deverá ter o mesmo sobrenome ou extensão do arquivo recém criado.

É justamente dentro do meu App que encontro o arquivo “app.module.ts”, e este é o responsável por fazer esse reconhecimento e falar para todo o aplicativo que essa página existe.

app.module.ts = É neste arquivo que declaramos todos os Módulos e Componentes iniciais que existem no App.

  • feed.modulo.ts (o arquivo modular que foi criado quando eu criei a página feed)
  • app.modulo.ts (o arquivo modular do App)

Modulação ou Modular – São os “Módulos” desse arquivo que declaram outros componentes e outras páginas.

Os programadores usam muito o termo “Vamos Modular” nossa aplicação, isto é, “Declarar” em alto e bom som que aquelas pequenas partes e páginas pertencem ao todo.

Como Criar Indexar Configurar Páginas no Ionic 3: Encontrando o Nome

Como Criar Indexar Configurar Páginas no Ionic 3

Observe na imagem acima, que o arquivo é o feed.module.ts e encontro o nome chamado de FeedPageModule.

É esse nome que vai ser reconhecido no arquivos modular do meu App.

Agora eu pego esse nome “FeedPageModule” e vou levar lá para o arquivo Modular do App, que se chama “app.module.ts”.

Aqui podemos entender algo muito bom – nós encontramos dois nomes quase iguais: FeedPageModule e FeedPage.

Isso é para não misturar as coisas, o FeedPage é o módulo e o nome FeedPageModule é o conjunto de todos os módulos que possa ter dentro deste arquivo.

Como Criar Indexar Configurar Páginas no Ionic 3: Importando o Novo Módulo

Veja na imagem a baixo, (imagem do artigo app.modulo.ts), quando eu coloco o nome do modulo recém criado, uma janelinha já me dá a dica para fazer uma “Decoração” deste módulo.

importar module

Vamos fazer algumas observações nesta imagem acima:

  • Essa janelinha aberta mostra informações diferente;
  • Vai depender do seu editor (eu uso VS Code);
  • Observe que eu inseri o nome do arquivo recém criado na parte “imports”;
  • Tive que acrescentar uma vírgula depois do nome IonicModule.forRoot(MyApp) para não dar erro e só assim colocar o novo nome em baixo;
  • Talvez quando você colocar, ele vai ficar riscado de vermelho mostrando que algo está errado. Se você trouxe o nome para este artigo, você deve “importar” lá em cima. No meu não ficou, porque instalei um plugin que importa automaticamente;

Como Criar Indexar Configurar Páginas no Ionic 3: Observando a Importação

Analisando a imagem a baixo, do arquivo app.module.ts, na parte de baixo eu informei que existe uma nova página.

Automaticamente ele importou lá em cima (automaticamente porque instalei um plugin que faz isso para mim), talvez você deverá fazer manualmente.

De qualquer forma, se o ionic 3 não encontrar, ele vai ascender uma “lâmpada pequena” ao lado e com o mouse em cima dela, ela trará alguma informação útil.

Como Criar Indexar Configurar Páginas no Ionic 3 2

Observe que depois da palavra “FROM”, isto é, De Onde Veio Este Arquivo, ele mostra a seguinte linha:

import { FeedPageModule } from ‘./../pages/feed/feed.module’;
  • ./../pages = Eu saí da pasta “app” onde estou e fui para a pasta “src” e entrei na pasta “pages”;
  • /feed/ = Dentro da pasta “pages” eu encontrei outra pasta com o nome “feed”
  • feed.module = Dentro da pasta “feed” eu encontrei o arquivo feed.module.ts

Ou seja, ele tem que encontrar naturalmente onde está este artigo.

Esse é o mesmo princípio para todos estes outros arquivos que você vê e será assim para todos que eu importar para o arquivo app.module.ts

Uma boa prática, é você carregar ela para a parte de baixona sequência. Neste caso ela vai ficar abaixo da linha “Import { SplashScreen } …

Como Criar Indexar Configurar Páginas no Ionic 3: Acrescentando no Tabs

Até agora, eu só informei ao meu App que existe mais uma página, e que essa página se chama “Feed”.

Agora, eu preciso saber onde está o arquivo de onde vou colocar o “Link” para abrir a nova página, no caso, a “Feed”.

Essa imagem logo a baixo é da Home do App e o arquivo que mostra estes três ícones se chama “Tabs”.

É exatamente nele que vou colocar o novo link para a nova página Feed.

arquivo tabs ionic 3

No Visual Studio, eu vou abrir então o arquivo “tabs.ts” e perceber que existe estes três nomes da imagem: Home, About, Contact.

Agora eu preciso criar um quarto nome com o mesmo nome que ele se apresenta dentro de seu arquivo.

Veja que agora, não estamos mais mexendo no arquivo com extensão “module” e sim com a extensão apenas “ts”

  • Tabs.ts e o Feed.ts

ionic 3 page

Observando as setas brancas, mostramos que estamos agora no arquivo de extensão “Ts” e não mais o “Module”.

Estamos ligando o arquivo “feed” que criamos com o arquivo “Tabs”, pois é dele que vai sair o link para a nova página.

Observamos também o risco “vermelho” no FeedPage porque ele não encontrou esse nome.

Ao mesmo tempo, ele acrescenta uma “lâmpada amarela” pra tomar alguma ação.

ionic 3 feed page

Ao colocar o mouse em cima do amarelinho ele nos mostra as opções. Basta pegar a importação que tudo se corrige.

Novamente, para manter a otimização, leve a linha importada lá em cima para a sequência após a linha “import { HomePage }…

Como Criar Indexar Configurar Páginas no Ionic 3: Acrescentando Ícone

Agora eu preciso de ir no arquivo “Tabs.html” porque ele é realmente a casca de fora, digamos assim.

Neste artigo vemos as três linhas e cada uma relacionada ao link onde também mostra o ícone para ser clicado. Veja:

ionic 3 paginas

Agora vamos copiar a mesma linha e alterar as informações conforme ficou a baixo

Como Criar Indexar Configurar Páginas no Ionic 3 2

Veja que na última linha eu alterei os nomes escritos em alaranjado para:

  • tab4Root
  • Feed
  • contacts

O último nome “contacts” permaneceu o mesmo porque esse é o nome do ícone, mas você poderá colocar outro se desejar.

Veja o trabalho final

menu ionic 3

Para ficar “perfeito”, eu posso acessar o arquivo “feed.html” para editar as escritas

 

Este é o artigo Como Criar Indexar Configurar Páginas no Ionic 3, e esperamos que tenha sido útil para você

Deixe uma resposta