Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs: add fr translations for architecture, getting-started, index, testing, and why-bloc #4273

Merged
merged 11 commits into from
Nov 16, 2024
117 changes: 117 additions & 0 deletions docs/src/content/docs/fr/architecture.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,117 @@
---
title: Architecture
description: Vue d'ensemble des modèles d'architecture recommandés pour l'utilisation de Bloc.
---


import DataProviderSnippet from '~/components/architecture/DataProviderSnippet.astro';
import RepositorySnippet from '~/components/architecture/RepositorySnippet.astro';
import BusinessLogicComponentSnippet from '~/components/architecture/BusinessLogicComponentSnippet.astro';
import BlocTightCouplingSnippet from '~/components/architecture/BlocTightCouplingSnippet.astro';
import BlocLooseCouplingPresentationSnippet from '~/components/architecture/BlocLooseCouplingPresentationSnippet.astro';
import AppIdeasRepositorySnippet from '~/components/architecture/AppIdeasRepositorySnippet.astro';
import AppIdeaRankingBlocSnippet from '~/components/architecture/AppIdeaRankingBlocSnippet.astro';
import PresentationComponentSnippet from '~/components/architecture/PresentationComponentSnippet.astro';

![Bloc Architecture](~/assets/concepts/bloc_architecture_full.png)

L'utilisation de la librairie bloc nous permet de séparer notre application en trois couches :

- Presentation
- Logic Métier (Business Logic)
felangel marked this conversation as resolved.
Show resolved Hide resolved
- Data
- Repository
- Data Provider

Nous allons commencer avec la couche la plus basse (la plus éloigné de l'interfacer utilisateur) et remonter jusqu'à la couche de Présentation.
felangel marked this conversation as resolved.
Show resolved Hide resolved

## Couche Data

Le rôle de la couche Data est de récupérer et de manipuler des données provenant d'une ou plusieurs sources.

La couche Data peut être divisée en deux parties :

- Repository
- Data Provider

Cette couche est le niveau le plus bas de l'application, elle interagit avec les bases de données, les requêtes réseau et d'autres sources de données asynchrones.

### Data Provider

Le rôle du Data Provider est de fournir des données brutes. Il doit être générique et polyvalent.

Le Data Provider permet généralement d'intéragir avec des API simple afin d'effectuer des opérations [CRUD](https://en.wikipedia.org/wiki/Create,_read,_update_and_delete).
felangel marked this conversation as resolved.
Show resolved Hide resolved
Nous pourrions avoir des méthodes `createData`, `readData`, `updateData`, et `deleteData` qui feront partie de notre couche Data.

<DataProviderSnippet />

### Repository

La couche Repository est un wrapper d'un ou plusieurs Data Provider avec lesquels la couche Bloc communique.

<RepositorySnippet />

Comme vous pouvez le constater, notre couche Repository peut interagir avec plusieurs Data Provider et effectuer des transformations sur les données avant de transmettre le résultat à la couche Logic Métier.

## Couche Logique Métier (Business Logic layer)

La fonction de la couche de Logique Métier est de répondre aux entrées provenant de la couche Présentation avec de nouveaux états. Cette couche peut dépendre d'un ou plusieurs Repository afin de récupérer les données nécessaire à la construction de l'état de l'application.
felangel marked this conversation as resolved.
Show resolved Hide resolved

Considérez la couche Logique Métier comme le pont entre l'interface utilisateur (couche Présentation) et la couche Data. La couche Logique Métier est informée des événements/actions de la couche Présentation et communique alors avec le Repository afin de construire un nouvel état que la couche Présentation pourra appliquer.

<BusinessLogicComponentSnippet />

### Communication de Bloc-à-Bloc

Because blocs expose streams, it may be tempting to make a bloc which listens to another bloc. You should **not** do this. There are better alternatives than resorting to the code below:
Comme les blocs mettent à disposition des flux, il peut être tentant de créer un bloc qui écoute un autre bloc. Vous ne devriez **pas** faire ça. Il existe de meilleures alternatives que le code ci-dessous :

<BlocTightCouplingSnippet />

Bien que le code ci-dessus ne comporte pas d'erreurs, il présente un problème plus important : il crée une dépendance entre deux blocs.

En règle générale, il faut éviter à tout prix les dépendances entre deux entités de la même couche architecturale, car elles créent un couplage fort difficile à maintenir. Étant donné que ces deux blocs résident tous les deux dans la couche architecturale de la Logique Métier, aucun des deux blocs ne devraient connaître l'existence de l'un autre bloc.

![Application Architecture Layers](~/assets/architecture/architecture.png)

Un bloc ne doit recevoir des informations que par le biais d'événements et de Repository injectés (c'est-à-dire des Repository qui sont passés au bloc via son constructeur).

Si vous êtes dans une situation où un bloc doit répondre à un autre bloc, vous avez deux autres options. Vous pouvez soit faire remonter le problème d'une couche (couche de Présentation), soit le faire descendre d'une couche (couche Domain).

#### Relier des Blocs à travers la couche Présentation

Vous pouvez utiliser un `BlocListener` pour écouter un bloc et ajouter un événement à un autre bloc lorsque le premier change.

<BlocLooseCouplingPresentationSnippet />

Le code ci-dessus empêche `SecondBloc` d'avoir besoin de connaître `FirstBloc`, créant ainsi un couplage faible. L'application [flutter_weather](/tutorials/flutter-weather) [utilise cette technique](https://github.com/felangel/bloc/blob/b4c8db938ad71a6b60d4a641ec357905095c3965/examples/flutter_weather/lib/weather/view/weather_page.dart#L38-L42) pour changer le thème de l'application en fonction des informations météorologiques reçues.

Dans certains cas, il n'est pas préférable de coupler deux blocs dans la couche Présentation. En revanche, il est souvent logique que deux blocs partagent la même source de données et se mettent à jour lorsque ces données changent.

#### Relier des Blocs à travers la couche Domain

Deux blocs peuvent écouter un flux provenant d'un Repository et mettre à jour leur état indépendamment l'un de l'autre chaque fois que les données du Repository changent. L'utilisation de Repository réactifs pour maintenir la synchronisation des états est courante dans les applications d'entreprise à grande échelle.

En premier lieu, créez ou utilisez un Repository qui met à disposition un flux de données (`Stream`). Par exemple, le Repository suivant met à disposition un `Stream` infini comportant cinq idées d'applications.

<AppIdeasRepositorySnippet />

Le même Repository peut être injecté dans chaque bloc qui doit réagir aux nouvelles idées d'applications. Voici un `AppIdeaRankingBloc` qui creer un état pour chaque idée d'application provenant du Repository ci-dessus :
felangel marked this conversation as resolved.
Show resolved Hide resolved

<AppIdeaRankingBlocSnippet />

Pour en savoir plus sur l'utilisation des flux avec Bloc, voir [How to use Bloc with streams and concurrency](https://verygood.ventures/blog/how-to-use-bloc-with-streams-and-concurrency).

## Couche Presentation

Le rôle de la couche Presentation est de déterminer comment elle doit s'afficher, en fonction d'un ou plusieurs états de bloc. Elle doit également gérer les entrées de l'utilisateur et les événements du cycle de vie de l'application.

La plupart des flux d'applications commencent par un événement `AppStart` qui déclenche la récupération des données qui vont être présenter à l'utilisateur.
felangel marked this conversation as resolved.
Show resolved Hide resolved

Dans ce scénario, la couche Presentation provoquerait un événement `AppStart`.

En plus de cela, elle devra déterminer ce qu'il faut afficher à l'écran en fonction de l'état de la couche Bloc.

<PresentationComponentSnippet />

Jusqu'à présent, bien que nous ayons vu quelques extraits de code, tout cela est resté assez théorique. Dans la section tutoriel, nous allons mettre en pratique ces concepts en réalisant plusieurs exemples d'applications.
36 changes: 36 additions & 0 deletions docs/src/content/docs/fr/getting-started.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
---
title: Démarrer
description: Tout le nécessaire pour débuter avec Bloc.
---


import InstallationTabs from '~/components/getting-started/InstallationTabs.astro';
import ImportTabs from '~/components/getting-started/ImportTabs.astro';

## Packages

L'écosystème bloc contient plusieurs packages listés ci-dessous :

| Packages | Description | Lien |
| ------------------------------------------------------------------------------------------ | --------------------------- | -------------------------------------------------------------------------------------------------------------- |
| [angular_bloc](https://github.com/felangel/bloc/tree/master/packages/angular_bloc) | AngularDart Components | [![pub package](https://img.shields.io/pub/v/angular_bloc.svg)](https://pub.dev/packages/angular_bloc) |
| [bloc](https://github.com/felangel/bloc/tree/master/packages/bloc) | Core Dart APIs | [![pub package](https://img.shields.io/pub/v/bloc.svg)](https://pub.dev/packages/bloc) |
| [bloc_concurrency](https://github.com/felangel/bloc/tree/master/packages/bloc_concurrency) | Event Transformers | [![pub package](https://img.shields.io/pub/v/bloc_concurrency.svg)](https://pub.dev/packages/bloc_concurrency) |
| [bloc_test](https://github.com/felangel/bloc/tree/master/packages/bloc_test) | Testing APIs | [![pub package](https://img.shields.io/pub/v/bloc_test.svg)](https://pub.dev/packages/bloc_test) |
| [flutter_bloc](https://github.com/felangel/bloc/tree/master/packages/flutter_bloc) | Flutter Widgets | [![pub package](https://img.shields.io/pub/v/flutter_bloc.svg)](https://pub.dev/packages/flutter_bloc) |
| [hydrated_bloc](https://github.com/felangel/bloc/tree/master/packages/hydrated_bloc) | Caching/Persistence Support | [![pub package](https://img.shields.io/pub/v/hydrated_bloc.svg)](https://pub.dev/packages/hydrated_bloc) |
| [replay_bloc](https://github.com/felangel/bloc/tree/master/packages/replay_bloc) | Undo/Redo Support | [![pub package](https://img.shields.io/pub/v/replay_bloc.svg)](https://pub.dev/packages/replay_bloc) |

## Installation

<InstallationTabs />

:::note
Pour commencer à utiliser bloc, le [Dart SDK](https://dart.dev/get-dart) doit être installé au préalable sur votre machine.
felangel marked this conversation as resolved.
Show resolved Hide resolved
:::

## Imports

Maintenant que nous avons installé Bloc avec succès, nous pouvons créer notre fichier `main.dart` et importer le package `bloc`.

<ImportTabs />
79 changes: 79 additions & 0 deletions docs/src/content/docs/fr/index.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,79 @@
---
template: splash
title: Bloc State Management Library
description: Documentation officielle de la bibliothèque de gestion d'état Bloc. Supporter pour Dart, Flutter et AngularDart. Inclut des exemples et des tutoriels.
felangel marked this conversation as resolved.
Show resolved Hide resolved
banner:
content: |
✨ Visite le
<a href="https://shop.bloclibrary.dev">Bloc Shop</a> ✨
editUrl: false
lastUpdated: false
hero:
title: Bloc <sup><span style="font-size:0.4em">v8.1.4</span></sup>
tagline: Une bibliothèque de gestion d'états prévisibles pour Dart.
image:
alt: Bloc logo
file: ~/assets/bloc.svg
actions:
- text: Démarrer
link: /getting-started/
variant: primary
icon: rocket
- text: Voir sur GitHub
link: https://github.com/felangel/bloc
icon: github
variant: secondary
---

import { CardGrid } from '@astrojs/starlight/components';
import SponsorsGrid from '~/components/landing/SponsorsGrid.astro';
import Card from '~/components/landing/Card.astro';
import ListCard from '~/components/landing/ListCard.astro';
import SplitCard from '~/components/landing/SplitCard.astro';
import Discord from '~/components/landing/Discord.astro';

<SponsorsGrid />

<hr />

<CardGrid>

<SplitCard title="Démarrer" icon="rocket">
```sh
# Ajoute un bloc ton projet
dart pub add bloc
```

Notre [guide de démarrage](/getting-started) possède des instructions étape par étape pour commencer à utiliser Bloc en juste quelques minutes.
felangel marked this conversation as resolved.
Show resolved Hide resolved

</SplitCard>

<Card title="Explorer avec des tutoriels" icon="star">
Complète les [tutoriels officiels](/tutorials/flutter-counter) pour apprendre les meilleurs pratiques et créer une variété d'applications avec Bloc.
felangel marked this conversation as resolved.
Show resolved Hide resolved
</Card>

<Card title="Développer avec Bloc" icon="laptop">
Explore des [applications demo](https://github.com/felangel/bloc/tree/master/examples) de qualité et entièrement testé
felangel marked this conversation as resolved.
Show resolved Hide resolved
tel qu'un compteur, un timer, une liste infini, une application de météo, une todo-list et plus encore!
</Card>

<ListCard title="Apprendre" icon="open-book">

- [Pourquoi utiliser Bloc?](/why-bloc)
- [Concepts fondamentaux](/bloc-concepts)
- [Architecture](/architecture)
- [Tester](/testing)
- [Conventions de nommage](/naming-conventions)

</ListCard>

<ListCard title="Integration" icon="puzzle">
felangel marked this conversation as resolved.
Show resolved Hide resolved
- [Integration pour VSCode](https://marketplace.visualstudio.com/items?itemName=FelixAngelov.bloc)
- [Integration pour IntelliJ](https://plugins.jetbrains.com/plugin/12129-bloc)
- [Integration de Mason CLI ](https://github.com/felangel/bloc/blob/master/bricks/README.md)
- [Templates customisées](https://brickhub.dev/search?q=bloc)
- [Outils de developpeur](https://github.com/felangel/bloc/issues/2748)
felangel marked this conversation as resolved.
Show resolved Hide resolved
</ListCard>
</CardGrid>

<Discord />
65 changes: 65 additions & 0 deletions docs/src/content/docs/fr/testing.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,65 @@
---
title: Tester
description: Les bases de l'écriture de tests pour vos blocs.
---


import CounterBlocSnippet from '~/components/testing/CounterBlocSnippet.astro';
import AddDevDependenciesSnippet from '~/components/testing/AddDevDependenciesSnippet.astro';
import CounterBlocTestImportsSnippet from '~/components/testing/CounterBlocTestImportsSnippet.astro';
import CounterBlocTestMainSnippet from '~/components/testing/CounterBlocTestMainSnippet.astro';
import CounterBlocTestSetupSnippet from '~/components/testing/CounterBlocTestSetupSnippet.astro';
import CounterBlocTestInitialStateSnippet from '~/components/testing/CounterBlocTestInitialStateSnippet.astro';
import CounterBlocTestBlocTestSnippet from '~/components/testing/CounterBlocTestBlocTestSnippet.astro';

Bloc a été conçu pour être extrêmement facile à tester. Dans cette section, nous allons voir comment tester un bloc de manière unitaire.

Par souci de simplicité, nous allons écrire des tests pour le `CounterBloc` que nous avons créé dans [Core Concepts](/bloc-concepts).

Pour rappel, l'implémentation du `CounterBloc` ressemble à ça :
felangel marked this conversation as resolved.
Show resolved Hide resolved

<CounterBlocSnippet />

## Configuration

Avant de commencer à écrire nos tests, nous avons besoins d'ajouter des framework de test dans nos dépendances,
felangel marked this conversation as resolved.
Show resolved Hide resolved

Nous allons ajouter [test](https://pub.dev/packages/test) et [bloc_test](https://pub.dev/packages/bloc_test) à notre projet.
felangel marked this conversation as resolved.
Show resolved Hide resolved

<AddDevDependenciesSnippet />

## Tester

Commençons par créer le fichier `counter_bloc_test.dart` afin de tester notre `CounterBloc` et importons le package de test.

<CounterBlocTestImportsSnippet />

Ensuite, nous devons créer notre `main` ainsi que notre groupe de tests.

<CounterBlocTestMainSnippet />

:::note
Les groupes servent à organiser des tests unitaires et à créer un contexte dans lequel vous pouvez partager un `setUp` et un `tearDown` communs à tous les tests du groupe.
:::

Commençons par créer une instance de notre `CounterBloc` qui sera utilisée dans tous nos tests.

<CounterBlocTestSetupSnippet />

Maintenant, nous pouvons commencer à écrire des tests unitaires.

<CounterBlocTestInitialStateSnippet />

:::note
Nous pouvons exécuter tous nos tests avec la commande `dart test`.
:::

À ce stade, nous devrions avoir notre premier test réussi! Écrivons maintenant des tests plus complexe en utilisant le package [bloc_test](https://pub.dev/packages/bloc_test).
felangel marked this conversation as resolved.
Show resolved Hide resolved

<CounterBlocTestBlocTestSnippet />

Nous devrions être en mesure d'exécuter les tests et de constater qu'ils passent tous.

C'est aussi simple que ça, tester devrait être un jeu d'enfant et nous devrions nous sentir en confiance lorsque nous apportons des modifications et que nous refactorisons notre code.

Vous pouvez vous référer à l'application [Weather App](https://github.com/felangel/bloc/tree/master/examples/flutter_weather) pour un exemple d'application entièrement testée.
32 changes: 32 additions & 0 deletions docs/src/content/docs/fr/why-bloc.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
---
title: Pourquoi utiliser Bloc?
description: Un aperçu de ce qui fait de Bloc une solution solide pour la gestion d'état.
felangel marked this conversation as resolved.
Show resolved Hide resolved
sidebar:
order: 1
---


Bloc permet de facilement séparer les composants visuels de la logigue métier, rendant votre code `rapide`, `facile à tester` et `réutilisable`.
felangel marked this conversation as resolved.
Show resolved Hide resolved

Lorsqu'on développe des application de qualité destinés à être utilisé en production, la gestion des états devient critique.
felangel marked this conversation as resolved.
Show resolved Hide resolved

En tant que développeurs, nous souhaitons :

- connaître l'état de notre application à tout moment.
- tester facilement chaque cas pour nous assurer que notre application réagit correctement.
- record every single user interaction in our application so that we can make data-driven decisions.
felangel marked this conversation as resolved.
Show resolved Hide resolved
- travailler de manière aussi efficace que possible et réutiliser des composants au sein de notre application ainsi que dans des applications différentes.
- permettre à de nombreux développeurs de travailler en harmonie en suivant des modèles et des conventions communes.
- développer des applications rapides et réactives.
felangel marked this conversation as resolved.
Show resolved Hide resolved

Bloc a été conçu pour répondre à tous ces besoins et bien plus encore.

Il existe beaucoup de solution pour gérer les états et décider laquelle utiliser peut être une tâche laborieuse. Il n'y a pas de solution parfaite! Ce qui est important est de choisir celle qui correspond le mieux à ton équipe et à ton projet.
felangel marked this conversation as resolved.
Show resolved Hide resolved

Bloc a été conçu avec trois principes fondamentales en tête :
felangel marked this conversation as resolved.
Show resolved Hide resolved

- **Simple:** Facile à comprendre et utilisable par des développeurs de niveaux variés.
- **Puissant:** Aide à faire des applications complexes en les assemblant à partir de composants plus simple.
felangel marked this conversation as resolved.
Show resolved Hide resolved
- **Testable:** Permet de tester facilement tous les aspects d'une application afin de pouvoir itérer en toute confiance.

Globalement, Bloc tente de rendre les changements d'état prévisibles en réglementant le moment où un changement d'état peut se produire et en imposant une unique façon de changer d'état dans l'ensemble d'une application.
Loading