Meu RH

Atalhos

Árvore de páginas

Versões comparadas

Versão antiga 5

changes.mady.by.user Valdemar Machado Junior

Gravado em

comparado com

Nova versão Atual

changes.mady.by.user Vitor Rafael Leite

Gravado em

Chave

  • Esta linha foi adicionada.
  • Esta linha foi removida.
  • A formatação mudou.

Será necessário a instalação dos recursos abaixo:

Ao finalizar todos, reinicie sua máquina.

Configuração das variáveis de ambiente:

  • Pesquise no Windows por Editar a variável de ambiente, acesse a aba avançado e clique em Variáveis de ambiente.
  • Crie as seguintes variáveis:

Image Added

  • Selecione a variável Path, e edite a mesma, inserindo os seguintes campos:

Image Added

Configuração do GIT e Clone do repositório.

Image Added

    • Selecionar clone, e copiar a URL:

Image Added

    • Acesse a pasta onde ficará o projeto, e abra o CMD na mesma. Digite o comando git clone + (CTRL V). 
    • Caso peça as credenciais, você consegue elas clicando em Generate Git Credentials, localizado no print acima.
  • Após abrir a IDE do Visual Studio Code no projeto, nós vamos mudar para a branch feature_push_capacitor–-mvp onde fica localizado todo o novo código referente a atualização do IONIC.
    • Abra o projeto no CMD.
    • Digite o comando git checkout feature_push_capacitor–-mvp. Caso pela as credenciais, são as mesmas do passo acima.
    • Digite o comando git pull.

Configuração do ambiente na IDE.

Caso não seja a primeira vez que você acesse o repositório, faça o seguinte:

  • Exclua as pastas .angular, www, node_modules, package-lock.json (caso possua) 
  • Desinstale o Angular e IONIC CLI, com:
    • npm uninstall –g @angular/cli
    • npm uninstall –g @ionic/cli
  • Limpe o cache com npm cache clean -–force

Instalando as interfaces de linha de comando:

  • Instale o Angular CLI: npm install –g @angular/cli@15
  • Instale o IONIC CLI: npm install –g @ionic/cli e npm install –g ionic
  • Verifique através do ng version e ionic version se as versões estão com:
    • Angular 15.
    • IONIC 7.
  • Instale as dependências do projeto com npm i
  • Execute o comando ionic cap sync, para sincronização das dependências. Caso ainda não tenha instalado o capacitor, ele irá sugerir, só seguir o comando proposto.
  • Rode o comando ionic cap build android, ele irá abrir o Android Studio onde iremos seguir com os próximos passos.

Configuração do Android Studio e instalação do Android SDK 33.

  • Ao abrir o IDE, vá no meu superior em File, abra o Settings e pesquise por sdk.
  • Na aba SDK Platforms, selecione o Android SDK Plataform 33.

Image Added

  • Na aba SDK Toolts, selecione 33.0.2.

Image Added

  • Após isso, clique em Apply e depois OK.

Abrindo o emulador com o aplicativo.

  • Selecione no canto superior direito a configuração do executado:

Image Added

  • Adicione um novo e configure da seguinte maneira:

Image Added

  • Após isso clique em Apply e depois OK.
  • Acesse a aba Device Manager e depois clique em Create Device.

Image Added

  • Selecione o Hardware necessário, os que possuem ícone da Playstore estarão com o root desligado, caso contrário o aplicativo irá barrar a abertura do mesmo pois está permissão não pode ser usada no Meu RH.

Image Added

  • Selecione o SDK desejado, apertando no ícone de download ao lado do nome e depois retornando a está página para ir em Next.

Image Added

  • Na última etapa, personalize o nome conforme desejar e clique em Finish.
  • Selecione o emulador criado e execute no botão setado.

Image Added

  • Irá abrir uma tela somente com o emulador, e no terminal terá a opção para visualizar o log do emulador.

Image Added

Depurar pelo VSCode

  • Será necessário instalar a extensão abaixo, pois a mesma é a oficial do IONIC para realizar a depuração.

Image Added

  • Após instalado, terá um novo menu a esquerda, acesse o mesmo e clique em Skip for Now:

Image Added

  • Feito isso, clique em Debug e selecione seu dispositivo:

Image Added

Para o dispositivo emulador ser identificado, ele tem que estar com o aplicativo aberto.

Para o celular ser identificado, ele tem que possuir um apk do tipo Debug (gerado pelo ionic cap run android) e o celular ser configurado da seguinte forma:

  • Celular conectado no USB do computador, com o tipo de conexão MIDI.
  • Celular possuir modo desenvolvedor ligado.
  • Celular possuir modo depuração por USB ativado

Para iniciar o desenvolvimento ou até o mesmo o debug das aplicações mobile, será necessário executar os passos abaixo: 

  • Possuir as variáveis de ambiente abaixo configuradas. Caso não tenha, realizar a criação das variáveis
    • JAVA_HOME;
    • ANDROID_HOME;
    • ANDROID_SDK_ROOT;
    • Path - JAVA_HOME;
    • Path - ANDROID_HOME;
    • Path - ANDROID_HOME\tools;
    • Path - ANDROID_HOME\platform-tools;
    • Path - C:\gradle-7.6.x\bin;

Caminho para as variáveis de ambiente: 

Digitar na barra de tarefas: Sobre o computador e selecionar o item que será exibido:

Image Removed

Clicar em Configurações Avançadas do Sistema:

Image Removed

Selecionar a opção Variáveis de Ambiente: 

Image Removed

Incluir as variáveis citadas:

Image Removed

Image Removed

  • Abrir o Visual Studio Code e verificar se a extensão Cordova Tools está instalada e habilitada. Se não tiver, efetuar a instalação da extensão e ativá-la. Após a instalação da extensão será necessário reiniciar o Visual Studio Code. 
  • Abrir solução e executar o comando npm i ou npm i --force para a instalação das dependências.
  • No Visual Studio Code:
    • Localizar o arquivo launch.json, digitando Ctrl + P e o nome do arquivo.
      Ao encontrar o arquivo, efetuar a exclusão do mesmo. Após será criado novamente.

...

    • No canto esquerdo selecionar a opção Debug. Ao abrir a nova aba, clicar no botão Run and Debug e selecionar a opção Cordova.
      Caso não ocorra nada, selecionar a opção "Show all automatic debug configurations", depois a opção Add Configuração e a opção Cordova. Por fim, marcar a opção "Server to the browser (ionic server)";
    No terminal, executar o comando abaixo: 
    ionic serve -nobrowser
    Se o comando for executado com sucesso, após exibir a URL:
    No combo no canto esquerdo selecionar a opção "Server to the browser (ionic server)" e clicar no botão de Play.
    Image Removed