Postagens

Mostrando postagens de junho, 2022

Modelos de apps ionic para começar um novo projeto - parte II

Imagem
      Olá amiguinhos e amiguinhas, neste post finalizaremos os modelos que usamos para iniciar um novo projeto com o ionic framework!     Sem frescuras já comecemos pelo list , para criarmos um aplicativo com este modelo damos o seguinte comando no prompt de comando (se você chegou agora convido a ler este artigo para entender melhor esta parte): ionic start nomeDoAplicativo04 list --type=angular       Assim ele criará um projeto com este modelo, mas o que faz este modelo? Ele cria um aplicativo com uma lista de itens clicáveis levando a telas personalizadas conforme o item clicado, as imagens abaixo demonstram ele executado após o "ionic serve": Tela da lista Item clicado     Por fim o último modelo é o mais complexo de todos o my-first-app , que cria um aplicativo com 3 abas, sendo a segunda aba um gerenciador de galeria de fotos tiradas pelo app. O comando para criar o projeto é:    ionic start nomeDoAplicativo05 my-first-app --type=angular Vejamos a tela e a dinâmi

Modelos de apps ionic para começar um novo projeto - parte I

Imagem
       Saudações calorosas senhoras e senhores, neste post discutiremos os modelos que usamos para iniciar um novo projeto com o ionic framework, ele será divido em 2 partes para que não fique tãããão grande, ok!!!     Quando comparamos o framework ionic com o microsoft word, por exemplo, conseguimos entender melhor estes modelos iniciais. Toda vez que vamos iniciar um documento no word, principalmente as versões mais atuais, ele pede que escolhamos um modelo, e geralmente escolhemos o modelo em branco e assim iniciamos um documento, no ionic a dinâmica é a mesma, possuímos 5 modelos que podemos iniciar nosso projeto que são: tabs, sidemenu, blank, list e my-first-app , e discutiremos cada um deles em detalhes logo abaixo!     Comecemos pelo tabs , para criarmos um aplicativo com este modelo damos o seguinte comando no prompt de comando (se você chegou agora convido a ler este artigo para entender melhor esta parte): ionic start nomeDoAplicativo01 tabs --type=angular       Assim ele cr

Criação de novo projeto com Ionic

Imagem
      Sim meu amiguinho e amiguinha, no último post vimos como preparar o computador para programarmos em ionic, e hoje vamos criar nosso primeiro projeto!!! Vocês estão prontos? Então vamos lá!     Abra o prompt de comando (ou cmd), geralmente quando você abre o prompt de comando, por padrão ele cai no seguinte endereço (no Windows): c:\Users\NomeDoUsuário>_     Estando neste endereço você estará dentro da pasta do seu usuário e na maioria das vezes não colocamos nada, diretamente, nesta pasta, desta forma vamos criar uma pasta na raiz (C:) apenas para organizar nossos futuros projetos, combinado?     Desta forma dê o seguinte comando seguido sempre de um ENTER : cd \     Assim você estará na raiz (C:), agora vamos criar a pasta ao qual vamos colocar todos nossos projetos, lembrando que isto não é obrigatório e muito menos influencia no funcionamento do projeto, estamos apenas organizando nossas coisas, vamos ao comando: md ionic     Pronto, criamos a pasta ionic, agora entremos ne

Instalação Ionic

Imagem
    Saudações queridos, queridas e querides!!!!     Neste, vamos ajudá-lo(a/e) na instalação do framework IONIC (versão WINDOWS), o que vamos precisar: Navegador (o que for do seu gosto) NodeJS Ionic Framework Visual Studio Code     O navegador é necessário não apenas para baixar as ferramentas mas também para ver seu trabalho pronto . O NodeJS é quem será o back para sustentar todo o framework. O próprio ionic é claro e por fim o Visual Studio Code que será nossa IDE para desenvolvimento.     Muuuuuuuuuuuuuito bem, vamos começar com o NodeJS, primeiramente baixe-o no site: NodeJS , baixe sempre a versão LTS e não a current, a diferença entre elas é que a LTS está a mais tempo no mercado e já está com vários problemas resolvidos já a current é a versão mais nova onde os programadores ainda estão melhorando, entendeu? Voltemos, apos baixado clique duas vezes para executar e aparecerá a seguinte tela:       Nela é só dar next (na verdade toda a instalação é next, next, next)       É só a