Projet

Application native de météo

• Les données méologiques recupérées via une api WEATHER API

• La persistance avec AsyncStorage

MeteoApp Sketch

Accueil	Page Detail

MeteoApp Screenshots (Réalisations)

Accueil	Page Detail	Page Favoris	Liste Favoris

Explication

• Accueil

  • Affichage de la liste des météos par ville,
  • Search bar pour rechercher

• Page de Détails

  • Affichage avec des couleurs et images dynamiques des autres informations complètes sur la météo du jour d'une ville
  • Un boutton [+] pour ajouter la météo actuelle de la ville au Favoris
  • Un boutton [Favoris] en bas de la page pour naviger sur la liste des Favoris

• Page de Favoris

  [*] Page de tous les favoris de tous les villes

    - Affiche de la liste des villes, pour naviger sur la page de favoris de la ville
  

  [*] Page de Favoris d'une ville

    - Les favoris sont affichés avec un composant UI qui comporte un boutton de suppression du favoris
  

Notation checklist

• Documentation (6 pts)
  • Application sketches (4 pts)
  • A Readme describing your project/application. (2 pts)
• Basics (20 pts (- 2))
  • Navigation (3 pts)
    • Tab bottom navigation (2 pts) AND at least one button (1 pts)
  • Redux Store (10 pts)
    • Read data from redux store (2 pts)
    • Update data to redux store with actions and reducers (slice = 0) (4 pts)
    • Update data to redux store using redux-thunk (API AND|OR AsyncStorage) (4 pts)
  • Display list of items (2 pts)
    • FlatList or VirtualizedList or SectionList
  • Display dynamic image (2 pts)
  • Binding child component props (1 pts)
  • Handle a TextInput correctly (2 pts)
    • Beware of keyboard management
• Application features (14 pts (- 2))
  • Retrieve data using the Web API (6 pts)
    • Handle fetch success callback (3 pts)
    • Handle fetch error callback (3 pts)
  • Store favorite data into phone storage (2 pts)
  • Write Tests (6 pts (- 1))
    • all actions payload (1 pts)
    • all reducers case (2 pts)
    • [-] one UI Component (3 pts)

Directory Structure

source
│  
└───Meteo
    │───Components
    |    
    │───Data
    │      
    |   
    │───redux
    |    │──actions
    |    │──reducers
    |    │──store.ts
    |    └──constants.ts
    |
    │───Screens
    |
    |       
    │───tests
    |    
    └───thunk
         

Installation

$ npm install

Local Development

$ npm start

Author :

• Augustin AFFOGNON