Estrutura Básica de um novo projeto Ionic

 

    Olá amiguinhos e amiguinhas e amiguinhes, o lance de hoje é estrutura básica de um projeto novo em ionic, vamos utilizar o modelo blank, e se você está acompanhando a série das últimas postagens não preciso explicá-lo, para discutirmos isto utilizaremos ele.

    Então vamos iniciar o projeto blank, se você não lembra como criar um projeto blank leia atentamente este artigo, vamos dar o nome de teste001. Logo depois de criado, entre na pasta dele com cd teste001 e dê um ionic serve para subir o projeto no navegador para que possamos visualizar melhor as modificações que fizermos. 

    Depois do ionic serve o projeto subiu no navegador e agora é a hora de deixar o navegador com "cara" de celular, se não sabe fazê-lo leia este artigo. Agora abra seu Visual Studio Code, ah você ainda não instalou, então leia este artigo, já tem instalado? Então vamos seguir, se o seu Visual Studio Code estiver em inglês vá no menu File e logo depois Open Folder e procure a pasta do nosso projeto e clique em Open, se você estiver usando em português vá no menu Arquivo e logo depois Abrir Pasta e procure a pasta do nosso projeto e clique em Abrir. Enfim Seguindo as imagens abaixo:

Arquivo.

Abrir Pasta: irá abrir a tela de procura e procure a pasta do seu projeto (teste001), clique na pasta e clique em abrir.

Se você executou corretamente sua tela será a mesma acima.

Por enquanto o que importa para nós é a pasta SRC, esqueça o restante.

 

Dentro da pasta SRC você deve ater apenas a pasta APP.

 

Por fim você chegou na pasta que vamos trabalhar que é a HOME. Abrindo a pasta HOME você terá 5 arquivos que vamos discorrer abaixo. 

    Mais a frente veremos como criar uma tela, porém, uma verdade absoluta é de que (por enquanto) toda vez que criamos uma tela serão criados 6 arquivos. Estes 6 arquivos em conjunto formam a tela. Ok, entendi, mas para quê serve cada arquivo? Vamos então discorrer cada um.

    Tomamos a tela home como exemplo, a primeira coisa que percebemos é que todos os arquivos começam por home, com isto percebido vamos começar:

    home-routing.module.ts : contém as rotas internas a partir desta tela (entenderemos posteriormente).

    home.module.ts : contém os módulos / bibliotecas que ajudarão em programações mais personalizadas.

    home.page.html :  é neste arquivo que vamos inserir os componentes visuais, é onde vamos fazer o "esqueleto" de nossas telas, utilizando o HTML.

    home.page.scss : é o clássico, é onde damos cores e belos designer`s para nossas telas, utilizando o CSS.  

    home.page.spec.ts : que é onde realizamos os testes de software para mensurar a qualidade do software.

    home.page.ts : que é onde realmente fazemos a "coisa" acontecer, onde criamos as variáveis, os métodos e toda a lógica de programação, utilizando o TYPESCRIPT. 

    Agora, para fecharmos este artigo vamos fazer uma edição simples, vamos mudar a frase central de nosso aplicativo exemplo, a frase: "Ready to create an app?". Que se encontra, naturalmente, no arquivo home.page.html e que está na TAG ion-content que consequentemente está na TAG div:

 

tela inicial antes de modificarmos

local da modificação

frase modificada (trocamos por: Está pronto para criar seu app? )

 

tela modificada (não esqueça de salvar o arquivo modificado)

    Enfim, realizamos nossa primeira modificação com sucesso, simples, porém, com sucesso! No próximo artigo fazermos mais modificações simples para que vocês possam ir pegando o jeito, grande abraço e fiquem com Deus!!!