Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/riantavares/be-the-hero-mobile

📱[React Native] Cliente mobile do projeto Be The Hero
https://github.com/riantavares/be-the-hero-mobile

Last synced: 3 days ago
JSON representation

📱[React Native] Cliente mobile do projeto Be The Hero

Host: GitHub
URL: https://github.com/riantavares/be-the-hero-mobile
Owner: RianTavares
Created: 2020-03-31T22:12:40.000Z (over 4 years ago)
Default Branch: master
Last Pushed: 2023-01-26T18:51:09.000Z (almost 2 years ago)
Last Synced: 2024-04-28T06:40:34.524Z (7 months ago)
Language: JavaScript
Homepage:
Size: 3.86 MB
Stars: 1
Watchers: 2
Forks: 0
Open Issues: 16
Metadata Files:
- Readme: README.md

Awesome Lists containing this project

README

“Querer vencer significa já ter percorrido metade do caminho.”

## :rocket: Sobre esse projeto

Este projeto é o cliente mobile de um projeto parte da Semana Omnistack de 2020 ofertada pela RocketSeat.
Na semana Omnistack desenvolvemos um projeto desde seu back-end em NodeJs com integração ao database SQlite, seu cliente web com ReactJs e seu cliente mobile com React Native

O Intuito da aplicação mobile, ou seja, deste projeto, é listar entidades "Casos", que foram cadastradas no banco anteriormente através do cliente web por entidades "ONGs" (usuários propriamente ditos). Esses "Casos" possuem detalhes sobre algo que tenha ocorrido e que a "ONG" precise de financiamento, constando informações como o valor solicitado pela ONG e contato para que o usuário do APP possa ajudar/doar para o no "Caso" selecionado.

## Links para todos as aplicações deste sistema
- Cliente web para gerenciar "Casos": [https://github.com/RianTavares/be-the-hero-front](https://github.com/RianTavares/be-the-hero-front)

- Servidor com endpoints e gerenciamento de dados: [https://github.com/RianTavares/be-the-hero-server](https://github.com/RianTavares/be-the-hero-server)

## Telas do projeto

## Como rodar a aplicação

1. Faça o download ou clone o projeto
2. Tenha [Node.js e npm](https://nodejs.org/it/) instalado em sua máquina
3. Rode `npm install` na pasta `mobile`
4. instale [Expo-CLI](https://docs.expo.io/versions/latest/get-started/installation/) globalmente em sua máquinha
5. Inicie o app através do comando `expo start`
6. O projeto agora está rodando. Uma aba se abrirá em seu navegador padrão com um QR caso você queira simular o projeto em seu dispositivo e com a opções de simular em um SDK previamente configurado (iphone com x-code ou android com Android studio)

#### Tecnologias utilizadas para este projeto

Este projeto foi criado utiliziando [Expo](https://docs.expo.io/versions/v37.0.0/) que é uma estrutura e uma plataforma para aplicações universais do React. É um conjunto de ferramentas e serviços criados em torno do React Native e plataformas nativas que ajudam a desenvolver, criar, implantar e iterar rapidamente em iOS, Android e aplicativos da web a partir da mesma base de código JavaScript / TypeScript.

Um fator importante para a escolha deste framework no desenvolvimento do projeto foi a não necessidade de SDK's como x-code e/ou android studio instalados para simular o projeto. Este framework traz uma solução capaz de testar seu app em seu dispositivo. Isso facilita demais visto que a proposta deste projeto foi compartilhada com outras centenas de desenvolvedores.

Para configurar as rotas neste projeto foram utilizados os seguintes pacotes:

```js
import { NavigationContainer } from "@react-navigation/native";

import { createStackNavigator } from "@react-navigation/stack";
```

O navegador de pilha do React Navigation fornece uma maneira para o seu aplicativo fazer a transição entre telas e gerenciar o histórico de navegação. Se o seu aplicativo usar apenas um navegador de pilha, será conceitualmente semelhante ao modo como um navegador da Web lida com o estado de navegação - o aplicativo envia e exibe itens da pilha de navegação à medida que os usuários interagem com ele, e isso faz com que o usuário veja telas diferentes. A principal diferença entre como isso funciona em um navegador da Web e no React Navigation é que o navegador de pilha do React Navigation fornece os gestos e animações que você esperaria no Android e iOS ao navegar entre rotas na pilha.

#### :)

- Se você curtiu o projeto não esquece de dar uma :star:
- Me segue lá no Instagram também [@riantavareson](https://www.instagram.com/riantavareson/) :heart:
- E claro, me segue aqui no [github](https://github.com/RianTavares) né :)

Licença

GNU GENERAL PUBLIC LICENSE