Différences
Ci-dessous, les différences entre deux révisions de la page.
Les deux révisions précédentes Révision précédente Prochaine révision | Révision précédente | ||
formations:devmobile_3 [18/11/2021 19:59] – [Les formulaires] foder | formations:devmobile_3 [19/11/2021 12:46] (Version actuelle) – foder | ||
---|---|---|---|
Ligne 1: | Ligne 1: | ||
+ | ====== Dev mobile 103 : Les formulaires et Redux ====== | ||
+ | |||
+ | == Prérequis == | ||
+ | |||
+ | Après avoir suivi la [[formations: | ||
+ | |||
+ | ===== Objectifs ===== | ||
+ | |||
+ | Dans cette formation, nous allons ajouter un formulaire, pour pouvoir laisser un commentaire sur une session de formation via l' | ||
+ | |||
+ | J'ai bien dit objectif, parce que je commence à préparer la formation 24h avant la première session. Donc on va essayer quoi. | ||
+ | |||
+ | |||
+ | ===== Les formulaires ===== | ||
+ | |||
+ | Pour ajouter notre formulaire, on va commencer par créer un component. On crée un fichier '' | ||
+ | |||
+ | < | ||
+ | import React from ' | ||
+ | import {View} from " | ||
+ | |||
+ | export default function commentForm (props) { | ||
+ | |||
+ | return ( | ||
+ | <View style={{backgroundColor:' | ||
+ | ) | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | **//Quoi ? Comment ? On crée un component mais c'est pas une classe ? On fait une fonction ?//** | ||
+ | Oui, on peut créer des components fonction. Ici, on doit, parce qu'on va utiliser un concept assez compliqué, les '' | ||
+ | |||
+ | On intègre ce component dans notre '' | ||
+ | |||
+ | ----- | ||
+ | |||
+ | On va installer la librairie nécessaire pour les formulaires : | ||
+ | npm install react-hook-form | ||
+ | Et quelques librairies afin d' | ||
+ | npm install react-native-svg fortawesome | ||
+ | |||
+ | On ajoute les imports : | ||
+ | < | ||
+ | import {Controller, | ||
+ | import {FontAwesomeIcon} from " | ||
+ | import {faCheck} from " | ||
+ | </ | ||
+ | |||
+ | Dans la fonction, on appelle le '' | ||
+ | On défini aussi une fonction '' | ||
+ | |||
+ | < | ||
+ | const {control, handleSubmit, | ||
+ | |||
+ | const onSubmit = data => {} | ||
+ | </ | ||
+ | |||
+ | Ensuite on intègre dans notre component une '' | ||
+ | |||
+ | < | ||
+ | <View style={styles.container}> | ||
+ | < | ||
+ | control={control} | ||
+ | render={({ field: { onChange, onBlur, value } }) => ( | ||
+ | < | ||
+ | style={styles.input} | ||
+ | onBlur={onBlur} | ||
+ | onChangeText={onChange} | ||
+ | | ||
+ | placeholder={" | ||
+ | placeholderTextColor={' | ||
+ | /> | ||
+ | )} | ||
+ | name=" | ||
+ | rules={{ required: true }} | ||
+ | defaultValue="" | ||
+ | /> | ||
+ | < | ||
+ | style={styles.button} | ||
+ | onPress={handleSubmit(onSubmit)} | ||
+ | > | ||
+ | < | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | En mettant les bon styles, on obtient ça : | ||
+ | |||
+ | // | ||
+ | |||
+ | Le code en entier : | ||
+ | < | ||
+ | < | ||
+ | import React from ' | ||
+ | import {View, TouchableOpacity, | ||
+ | import {Controller, | ||
+ | import {FontAwesomeIcon} from " | ||
+ | import {faCheck} from " | ||
+ | |||
+ | export default function commentForm (props) { | ||
+ | |||
+ | const {control, handleSubmit, | ||
+ | |||
+ | const onSubmit = data => {} | ||
+ | |||
+ | return ( | ||
+ | <View style={styles.container}> | ||
+ | < | ||
+ | control={control} | ||
+ | render={({ field: { onChange, onBlur, value } }) => ( | ||
+ | < | ||
+ | style={styles.input} | ||
+ | onBlur={onBlur} | ||
+ | onChangeText={onChange} | ||
+ | value={value} | ||
+ | placeholder={" | ||
+ | placeholderTextColor={' | ||
+ | /> | ||
+ | )} | ||
+ | name=" | ||
+ | rules={{ required: true }} | ||
+ | defaultValue="" | ||
+ | /> | ||
+ | < | ||
+ | style={styles.button} | ||
+ | onPress={handleSubmit(onSubmit)} | ||
+ | > | ||
+ | < | ||
+ | </ | ||
+ | </ | ||
+ | ) | ||
+ | } | ||
+ | |||
+ | const styles = StyleSheet.create({ | ||
+ | container: { | ||
+ | flex: 1, | ||
+ | flexDirection: | ||
+ | marginBottom: | ||
+ | }, | ||
+ | input: { | ||
+ | flex: 4, | ||
+ | justifyContent: | ||
+ | backgroundColor: | ||
+ | borderRadius: | ||
+ | marginLeft: 10, | ||
+ | paddingLeft: | ||
+ | marginRight: | ||
+ | }, | ||
+ | button: { | ||
+ | flex: 1, | ||
+ | alignItems: ' | ||
+ | justifyContent: | ||
+ | backgroundColor: | ||
+ | borderRadius: | ||
+ | marginRight: | ||
+ | } | ||
+ | }); | ||
+ | </ | ||
+ | </ | ||
+ | ----- | ||
+ | Tout va maintenant se passer au niveau de la fonction '' | ||
+ | |||
+ | //Remarque : si on n' | ||
+ | |||
+ | Maintenant, on vet envoyer ce commentaire à l'API [[https:// | ||
+ | |||
+ | Pour la requête, attention ! C'est plus compliqué que ce qu'on a fait jusqu' | ||
+ | Ici, on utilise '' | ||
+ | |||
+ | < | ||
+ | const onSubmit = data => { | ||
+ | let jsonD = new FormData() | ||
+ | jsonD.append(" | ||
+ | let request = new Request( | ||
+ | ' | ||
+ | {method:' | ||
+ | ) | ||
+ | fetch(request).then((response) => { | ||
+ | console.log(response.status) | ||
+ | }) | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | On a réussi à envoyer un commentaire ! | ||
+ | |||
+ | Mais pour le voir apparaître dans l' | ||
+ | |||
+ | Donc crée une méthode de '' | ||
+ | |||
+ | ===== Redux ===== | ||
+ | |||
+ | Rom a dit : "Redux c'est super compliqué, c'est pas possible que tu comprennes comment ça marche, même moi je comprends pas. Tu fait que copier les codes d' | ||
+ | |||
+ | Il a peut-être pas si tort, mais bon. | ||
+ | |||
+ | Du coup, on veut stocker des informations dans notre application, | ||
+ | |||
+ | Là c'est un peu technique : on va configurer un store, en utilisant des reducers. Les reducers, on les écrit, c'est là qu'on va gérer les données enregistrées, | ||
+ | |||
+ | On crée un dossier '' | ||
+ | < | ||
+ | const initialState = { | ||
+ | comments:[] | ||
+ | } | ||
+ | |||
+ | function handleComments(state=initialState, | ||
+ | switch (action.type) { | ||
+ | case ' | ||
+ | let comments = state.comments | ||
+ | comments.push(action.commentId) | ||
+ | return { | ||
+ | ...state, | ||
+ | comments: comments, | ||
+ | } | ||
+ | default: | ||
+ | return state | ||
+ | } | ||
+ | } | ||
+ | |||
+ | export default handleComments; | ||
+ | </ | ||
+ | |||
+ | Ça, c'est le '' | ||
+ | < | ||
+ | import { createStore } from ' | ||
+ | import handleComments from " | ||
+ | |||
+ | export default createStore(handleComments); | ||
+ | </ | ||
+ | |||
+ | Assez simple non ? | ||
+ | On installe '' | ||
+ | npm install react-redux | ||
+ | |||
+ | Dans le '' | ||
+ | < | ||
+ | import {Provider} from " | ||
+ | import Store from ' | ||
+ | |||
+ | |||
+ | < | ||
+ | </ | ||
+ | ----- | ||
+ | |||
+ | Dans le '' | ||
+ | < | ||
+ | import {useSelector, | ||
+ | |||
+ | const dispatch = useDispatch(); | ||
+ | const state = useSelector(state => state); | ||
+ | </ | ||
+ | |||
+ | Ensuite, dans les '' | ||
+ | < | ||
+ | let action = { | ||
+ | type: ' | ||
+ | commentId: data.comentId | ||
+ | } | ||
+ | dispatch(action) | ||
+ | </ | ||
+ | |||
+ | Si on log le state, on voit qu'un identifiant s' | ||
+ | ----- | ||
+ | |||
+ | On va maintenant connecter notre '' | ||
+ | |||
+ | On importe '' | ||
+ | |||
+ | < | ||
+ | import {connect} from " | ||
+ | |||
+ | const mapStateToProps = (state) => { | ||
+ | return state | ||
+ | } | ||
+ | |||
+ | export default connect(mapStateToProps)(CommentList); | ||
+ | </ | ||
+ | |||
+ | Maintenant, on va passer à notre '' | ||
+ | |||
+ | < | ||
+ | < | ||
+ | </ | ||
+ | |||
+ | Voilà on a une belle appli mobile qui marche ! | ||
+ | |||