Happy

Instruções para visita e/ou adoção

{shelter.instructions}

105 |

106 | 107 | Segunda à Sexta
108 | {shelter.opening_hours} 109 |

110 | 111 | {shelter.open_on_weekends ? ( 112 |

113 | 114 | Atendemos
115 | fim de semana 116 |

117 | ) : ( 118 |

119 | 120 | Não atendemos
121 | fim de semana 122 |

123 | 124 | )} 125 |

O que é o Happy?

A Next Level Week é um evento online gratuito promovido pela Rocketsat, em que durante 5 dias desenvolvemos uma aplicação completa. Na trilha Omni, a proposta foi criar uma aplicação web e mobile em que lares adotivos podem cadastrar seus endereços e informações para pessoas visitarem.

Eu decidi mudar a proposta da aplicação, e transformei o Happy em um buscador de abrigos de animais, ajudando a unir pessoas e seus futuros melhores amigos. 10 |

Como usar?

Repositório FRONTEND. 22 |

Repositório BACKEND. 23 |

Repositório MOBILE. 24 | 25 | ```bash 26 | 27 | $ git clone https://github.com/mjulialobo/happy.git 28 | $ git clone https://github.com/mjulialobo/happy-backend.git 29 | $ git clone https://github.com/mjulialobo/happy-mobile.git 30 | 31 | # entre na pasta do projeto 32 | 33 | $ cd happy 34 | 35 | ``` 36 | ### 💻 Rodando o Happy web 37 | 38 | Entre na pasta 39 | 40 | ```bash 41 | 42 | $ cd web 43 | 44 | ``` 45 | Instale as dependências 46 | 47 | ```bash 48 | 49 | $ yarn 50 | 51 | # ou, caso use npm 52 | 53 | $ npm install 54 | 55 | ``` 56 | 57 | Rode a aplicação 58 | 59 | ```bash 60 | 61 | $ yarn start 62 | 63 | # ou, caso use npm 64 | 65 | $ npm start 66 | 67 | ``` 68 | 69 | Caso você tenha uma conta no [mapbox](https://www.mapbox.com/), pode usar seu token para utilizar o mapa da aplicação. No entanto, se você não quiser 70 | ter este trabalho, sem problemas, por padrão já tem um mapa configurado para uso. 71 | 72 | Caso queira, vá para a seção do Mapbox. 73 | 74 | ### 🌐 Rodando o Servidor 75 | 76 | Entre na pasta 77 | 78 | ```bash 79 | 80 | $ cd backend 81 | 82 | ``` 83 | Instale as dependências 84 | 85 | ```bash 86 | 87 | $ yarn 88 | 89 | # ou, caso use npm 90 | 91 | $ npm install 92 | 93 | ``` 94 | 95 | Rode o servidor 96 | 97 | ```bash 98 | 99 | $ yarn dev 100 | 101 | # ou, caso use npm 102 | 103 | $ npm dev 104 | 105 | ``` 106 | 107 | ### 📱 Rodando o Happy mobile 108 | 109 | Entre na pasta 110 | 111 | ```bash 112 | 113 | $ cd mobile 114 | 115 | ``` 116 | Instale as dependências 117 | 118 | ```bash 119 | 120 | $ yarn 121 | 122 | # ou, caso use npm 123 | 124 | $ npm install 125 | 126 | ``` 127 | 128 | Rode o mobile 129 | 130 | ```bash 131 | 132 | $ yarn start 133 | 134 | # ou, caso use npm 135 | 136 | $ npm start 137 | 138 | ``` 139 | 140 | Depois de fazer isso, irá abrir o metro bundler no seu navegador. A partir de agora você tem algumas opções para acessar o app. 141 | 142 | #### 1 - Emulador Android 143 | Na página do metro bundler, clique em "Run on Android device/emulator" e espere carregar. Tenha em mente que é necessário ter passado pelo processo de instalação 144 | do android sdk, etc. 145 | 146 | #### 2 - Emulador IOS 147 | Na página do metro bundler, clique em "Run on iOS simulator" e espere carregar. 148 | 149 | #### 3 - Seu smartphone 150 | Baixe o aplicativo do Expo: 151 | - [iOS](https://itunes.apple.com/app/apple-store/id982107779) 152 | - [Android](https://play.google.com/store/apps/details?id=host.exp.exponent&referrer=www) 153 | 154 | Depois de baixar, volte a página do metro bundler e escaneie o QR Code com o app do Expo. 155 | 156 |
157 | 158 | Se tudo deu certo, o app deve estar disponível agora! 👩🏽‍🔧 159 | 160 | --- 161 | 162 | ## 🗺 Mapbox 163 | 164 | Siga as instruções para usar o mapbox no lugar do openstreetmap. 165 | 166 | - Em "https://account.mapbox.com/", copie seu token. 167 | - Na raiz do projeto web crie um arquivo chamado ".env" 168 | - Dentro desse arquivo, digite "REACT_APP_MAPBOX_TOKEN =" e cole seu token logo depois. 169 | - Entre no arquivo "OrphanagesMap.tsx", descomente o trecho de código correspondente as linhas 34, 35 e 36. 170 | - No mesmo arquivo, comente a linha 32. 171 | 172 | Se você fez tudo corretamente, estás usando a API do mapbox com seu Token na página do mapa. 😄 173 | 174 | --- 175 | 176 | 177 |

Resultados

Note: gif distorts images and colors

Happy - Web

Happy - Mobile

([]); 25 | const [previewImages, setPreviewImages] = useState([]) 26 | 27 | function handleMapClick(event:LeafletMouseEvent){ 28 | const {lat, lng} = event.latlng 29 | setPosition({ 30 | latitude: lat, 31 | longitude:lng, 32 | }) 33 | } 34 | async function handleSubmit(event: FormEvent){ 35 | event.preventDefault(); 36 | 37 | const {latitude, longitude} = position; 38 | 39 | const data= new FormData(); 40 | 41 | data.append('name', name); 42 | data.append('about', about); 43 | data.append('latitude', String(latitude)); 44 | data.append('longitude',String(longitude)); 45 | data.append('instructions', instructions); 46 | data.append('opening_hours', opening_hours); 47 | data.append('open_on_weekends', String(open_on_weekends)); 48 | 49 | images.forEach(image=>{ 50 | data.append('images', image); 51 | }) 52 | 53 | await api.post('shelters', data); 54 | 55 | alert('Cadastro realizado com sucesso!') 56 | 57 | history.push('/app'); 58 | 59 | } 60 | 61 | 62 | function handleSelectImages(event: ChangeEvent) { 63 | if (!event.target.files) { 64 | return 65 | } 66 | 67 | const selectedImages = Array.from(event.target.files) 68 | 69 | setImages(selectedImages); 70 | 71 | const selectedImagesPreview = selectedImages.map(image => { 72 | return URL.createObjectURL(image); 73 | }); 74 | 75 | setPreviewImages(selectedImagesPreview); 76 | } 77 | 78 | 79 | return ( 80 |

81 | 82 | 83 |

84 |

85 |

86 | Dados 87 | 88 | 94 | 97 | 98 | {position.latitude !== 0 && } 99 | 100 | 101 | 102 |

103 | Nome 104 | setName(event.target.value)} /> 108 |

109 | 110 |

111 | Sobre Máximo de 300 caracteres 112 |

setAbout(event.target.value)} />
117 |             </div>
118 | 
119 |             <div className="input-block">
120 |               <label htmlFor="images">Fotos</label>
121 | 
122 |               <div className="images-container">
123 |                 <label htmlFor="image[]" className="new-image">
124 |                   <FiPlus size={24} color="#15b6d6" />
125 |                 </label>
126 |                 {previewImages.map(image =>{
127 |                   return(
128 |                     <img key={image} src={image} alt={name}/>
129 |                   )
130 |                 })}
131 |               </div>
132 | 
133 |               <input multiple  onChange={handleSelectImages} type="file" id="image[]"/>
134 |               
135 |             </div>
136 |           </fieldset>
137 | 
138 |           <fieldset>
139 |             <legend>Visitação</legend>
140 | 
141 |             <div className="input-block">
142 |               <label htmlFor="instructions">Instruções de visita e/ou adoção</label>
143 |               <textarea 
144 |                 id="instructions"
145 |                 value= {instructions} 
146 |                 onChange={event => setInstructions(event.target.value)} />
147 |             </div>
148 | 
149 |             <div className="input-block">
150 |               <label htmlFor="opening_hours">Horário de Funcionamento (de-até)</label>
151 |               <input 
152 |               id="opening_hours"
153 |               value= {opening_hours} 
154 |               onChange={event => setOpeningHours(event.target.value)}
155 |                />
156 |             </div>
157 | 
158 |             <div className="input-block">
159 |               <label htmlFor="open_on_weekends">Atende fim de semana</label>
160 | 
161 |               <div className="button-select">
162 |                 <button 
163 |                   type="button" 
164 |                   className={open_on_weekends ?'active': ''}
165 |                   onClick={() => setOpenOnWeekends(true)}
166 |                   >Sim
167 |                 </button>
168 | 
169 |                 <button type="button"
170 |                   className={!open_on_weekends ?'active': ''}
171 |                   onClick={() => setOpenOnWeekends(false)}
172 |                   >Não
173 |                 </button>
174 |               </div>
175 |             </div>
176 |           </fieldset>
177 | 
178 |           <button className="confirm-button" type="submit">
179 |             Confirmar
180 |           </button>
181 |         </form>
182 |       </main>
183 |     </div>
184 |   );
185 | }
186 | 
187 | // return `https://a.tile.openstreetmap.org/${z}/${x}/${y}.png`;
188 |

--------------------------------------------------------------------------------

Leve a felicidade para casa

{shelter.name}