{"id":27817940,"url":"https://github.com/reislcb/revisao-top","last_synced_at":"2025-05-01T15:29:14.056Z","repository":{"id":288257474,"uuid":"966373047","full_name":"ReisLcb/revisao-top","owner":"ReisLcb","description":null,"archived":false,"fork":false,"pushed_at":"2025-04-16T14:58:49.000Z","size":195,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-16T15:08:35.152Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ReisLcb.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-04-14T20:28:03.000Z","updated_at":"2025-04-16T14:58:53.000Z","dependencies_parsed_at":"2025-04-16T15:24:41.705Z","dependency_job_id":"089ea070-9c2f-47c6-9771-f5eaf0dbf7cc","html_url":"https://github.com/ReisLcb/revisao-top","commit_stats":null,"previous_names":["reislcb/revisao-top"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ReisLcb%2Frevisao-top","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ReisLcb%2Frevisao-top/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ReisLcb%2Frevisao-top/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ReisLcb%2Frevisao-top/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ReisLcb","download_url":"https://codeload.github.com/ReisLcb/revisao-top/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251898149,"owners_count":21661766,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-05-01T15:29:13.245Z","updated_at":"2025-05-01T15:29:14.049Z","avatar_url":"https://github.com/ReisLcb.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Clonando ou baixando repósitório em sua máquina\n- Para baixar este repoitório, clique em `code` e em `Download zip`\n    - Descompacte o arquivo zip, extraia em sua máquina e execute no Visual Studio Code\n- Para clonar este repositório em sua máquina, utilize o seguinte comando:\n   ```bash\n   git clone https://github.com/ReisLcb/revisao-top.git\n   ```\n\n- Para instalar as dependências, basta executar no terminal dentro da pasta local do projeto:\n  ```bash\n  npm install\n\n- Ao final da instalação, execute o projeto:\n  ```bash\n  ionic serve\n  ```\n\n# Criando projeto Ionic\n## Iniciando projeto\n- Primeiro, devemos verificar se o ionic CLI está instalado verificando sua versão:\n    ```bash\n    ionic -v \n    ## Ultima versão: 8.4.x\n- Caso não esteja instalado, instale o ionic CLI com o seguinte comando:\n    ```bash\n    sudo npm install -g @ionic/cli\n\n- Para iniciar, iniciaremos o nosso terminal (pode ser **Linux**, **PowerShell** ou **WSL**):\n    ```bash\n    ionic start nome-do-seu-projeto\n    ```\n    \n   - Para uma inicialização mais rápida, podemos preencher todos os argumentos com o seguinte comando:\n        ```bash\n        ionic start [nome] [template] [opções]\n        ## [nome] será o nome do projeto desejado (ex. meuApp)\n        ## [template] pode ser: 'blank', 'tabs', 'sidemenu', 'list' ou 'my-first-app' (depende do framework)\n        ## [opções] podem ser: --list, --type=\u003ctipo\u003e, --cordova, --capacitor e --id=\u003cid\u003e\n        ```\n     \n   - Como usaremos o angular standalone, podemos escrever:\n       ```bash\n       ionic start meuApp blank --type=angular-standalone\n       ## Considerando que nosso projeto será Blank\n       ```\n    \n- Navegue até a pasta do projeto:\n    ```bash\n    cd nome-do-seu-projeto\n- Para executar seu projeto, execute:\n    ```bash\n    ionic serve\n- E para abrir seu projeto no Visual Studio Code, execute:\n    ```bash\n    code .\n# Definindo novas páginas, serviços e rotas\n- Para definir uma nova página, basta executar:\n    ```bash\n    ionic generate\n    ## Usar este comando sem argumentos te dará uma tela para escolher o que deseja gerar\n    ```\n    - Para usar esse comando de forma mais rápida, pode executar:\n      ```Bash\n      ionic generate [schematic] [name]\n      ## [schematic] pode ser: 'page', 'directive', 'component' ou 'service' \n      ```\n\n    - Neste caso, no lugar de ```[schematic]``` escrevemos ```page``` ou `service`, e para ```[name]``` escrevemos o nome da nossa nova página ou serviço\n## Arquivo de rotas\n![image](https://github.com/user-attachments/assets/8fff08db-8500-45d5-9746-1ade71e08b02)\n\n### Solução simples\n- Caso a navegação seja entre páginas fixas, podemos usar:\n  \n  ![image](https://github.com/user-attachments/assets/c82b3523-60de-411a-8ffb-990b5fef3ba7)\n\n### Solução programática\n- Se precisar de mais controle, como redirecionamento condicional, podemos utilizar o Router no arquivo .ts\n  \n  1°: importamos o Router para o nosso projeto.\n  \n  ![image](https://github.com/user-attachments/assets/c57e8e06-7024-44d1-b629-f0feafcc2506)\n\n  2°: Injetamos o Router na nossa página.\n  \n  ![image](https://github.com/user-attachments/assets/eb8b17f2-24ed-4c84-8f44-5358ee68d560)\n\n  3° criamos um método para nos enviar para a página desejada.\n  ![image](https://github.com/user-attachments/assets/58e92c59-bb1d-414c-a009-d2fc0716983f)\n\n  4°: No arquivo .html de nossa página/componente, Chamamos nosso método abrirAbout() com a diretiva ```(click)```\n\n  ![image](https://github.com/user-attachments/assets/fd4b7ed4-e315-4046-af8c-9042d25f6d0f)\n\\\n\\\n\n# Serviços\n- Contém o código do backend do nosso projeto\n- Os métodos usados no projeto são declarados dentro da classe do serviço\n   ```typescript\n  import { Injectable } from '@angular/core';\n  import { Preferences } from \"@capacitor/preferences\"\n\n  @Injectable({\n    providedIn: 'root'\n  })\n   \n  export class ExemploService {\n     private atributo!:any // ! indica que o atributo não foi iniciado com algum valor\n     \n    constructor() {}\n  \n     async metodo(){\n       //corpo do código\n     }\n  }\n   ```\n## Instalação do Preferences\n  - Dentro da raíz do projeto, abra o terminal e digite:\n    ```bash\n    npm install @capacitor/preferences\n    ```\n  - O Capacitor é uma biblioteca que permite utilizar os componentes do dispositivo que executa o seu projeto\n      - Preferences é um serviço que permite armazenar e recuperar dados de forma persistente\n      - Auxílio para armazenar dados que serão utilizados por outra página\n      - Semelhante ao localStorage\n        ```typescript\n        export class UsuarioService {\n            private USER_KEY = \"user\" // Chave que será usada para identificar o objeto a ser armazenado\n          \n            async cadastrarUsuario(usuario:User):Promise\u003cvoid\u003e{\n                      await Preferences.set({ // Guarda o objeto\n                        key: this.USER_KEY,\n                        value: JSON.stringify(usuario)\n                      })\n                  }\n\n              constructor(){}\n        }\n        ```\n      - Para pegar o valor atrelado a chave, usamos:\n        ```typescript\n        Preferences.get({key: this.USER_KEY})\n        // Pode ser armazenado numa variável ou não\n        ```\n  ## Obter valores específicos do Preferences ou Promises\n  - O valor retornado por uma chamada `Preferences.get()` é sempre uma **Promise**\n  - Para armazenar o valor retornado de uma promisse em um atributo ou variável, é preciso usar os método `.then()`, `.catch()` e/ou `.finally()`\n  - Esses métodos recebem uma **Arrow function** recebendo como parâmetro o valor a ser recebido da promisse (sendo bem-sucedida ou não)\n    ```typescript\n      let p1 = new Promise((resolve, reject) =\u003e{\n            resolve(true)\n            reject(false)\n      }).then((valor) =\u003e return valor) // retorna o valor de 'resolve' caso a promise seja bem-sucedida\n        .catch((valor) =\u003c return valor) // retorna o valor de 'reject' caso a promise falhe\n    ```\n  - Para recuperar um dado do Preferences dentro do arquivo do front-end de uma página, basta realizar o mesmo processo:\n    ```typescript\n    import { Component } from '@angular/core';\n    import { FormsModule } from '@angular/forms';\n    import { IonicModule } from \"@ionic/angular\"\n    import { UsuarioService } from '../services/usuario.service';\n    import { Preferences } from '@capacitor/preferences';\n    \n    @Component({\n        selector: 'app-saida',\n        templateUrl: './saida.page.html',\n        styleUrls: ['./saida.page.scss'],\n        standalone: true,\n        imports: [IonicModule, FormsModule]\n    })\n    \n    export class SaidaPage {\n          nome:any = Preferences.get({key: \"loggedUser\"}).then((value:any) =\u003e this.nome = JSON.parse(value[\"value\"]).nome)\n          // Procura pelo usuário dentro do preferences\n          // Preferences.get({key: \"loggedUser\"}) retorna uma promisse\n          // .then() procura pelo valor caso a promisse retorne o objeto\n          // O objeto do usuário logado está na forma de string e o JSON.parse() muda para a notação de objeto\n          // Depois de convertido, pegamos a propriedade 'nome' do objeto e armazenamos dentro de this.nome\n        \n          constructor() {  }\n        \n          ngOnInit() {\n          }\n    }\n    ```\n\n# Fontes\n**Documentação Ionic: __[Ionic Framework](https://ionicframework.com/docs/cli)__** \\\n**Promises: __[MDN web docs](https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Promise)__** \\\n**Array.prototype.some(): __[MDN web docs](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/some)__** \\\n**Códigos e slides de Aula: __[Moodle](http://moodle.pep2.ifsp.edu.br/login/index.php)__**\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Freislcb%2Frevisao-top","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Freislcb%2Frevisao-top","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Freislcb%2Frevisao-top/lists"}