update tp

README.md

@@ -1,3 +1,95 @@
-# TpReactNative
+<div align = center>
 
-This repository is about my ReactNative's tp.
+  <h1>Projet de TP sur ReactNative</h1>
+    
+</div>
+
+
+
+<div align = center>
+
+
+
+---
+
+![React Native](https://img.shields.io/badge/react_native-%2320232a.svg?style=for-the-badge&logo=react&logoColor=%2361DAFB)
+![Expo](https://img.shields.io/badge/expo-1C1E24?style=for-the-badge&logo=expo&logoColor=#D04A37)
+![TypeScript](https://img.shields.io/badge/typescript-%23007ACC.svg?style=for-the-badge&logo=typescript&logoColor=white)
+
+</div>  
+  
+# Table des matières
+[Présentation](#présentation) | [Répartition du Git](#répartition-du-git) | [Prérequis](#prérequis-pour-le-projet-entity-framework) | [Getting Started](#premiers-pas) | [Avancés du projet](#avancés-du-projet) | [Fabriqué avec](#fabriqué-avec) | [Contributeurs](#contributeurs) | [Comment contribuer](#comment-contribuer) | [Remerciements](#remerciements)
+
+
+
+## Présentation
+
+### Récapitulatif du Projet
+
+Ce repos est une mise en application des tp de React Native. Il a pour but de mettre en pratique les connaissances acquises lors des cours et des tp.
+
+## Répartition du Git
+
+[**Sources**](src/tp-react-native) : **Code de l'application**
+
+---
+
+Le projet de tp utilise un modèle de flux de travail Git pour organiser le développement. Voici une brève explication des principales branches :
+
+- **branche master** : Cette branche contient la dernière version stable du projet. 
+
+- **branche partNUMERO** : La branche partNUMERO contient le code de la partie NUMERO du projet. Cette branche est utilisée pour le développement de la partie NUMERO. Une fois la partie NUMERO terminée, la branche est fusionnée avec la branche master.
+
+## Prérequis pour le projet Entity Framework
+
+* [Visual Studio Code](https://code.visualstudio.com/) - Environnement de développement intégré (IDE) recommandé pour le projet multiplateforme
+* [Git](https://git-scm.com/) - Outil de versioning
+
+## Premiers Pas
+1. Cloner le dépôt Git : `git clone https://codefirst.iut.uca.fr/git/antoine.perederii/TpReactNative.git`
+2. Placez-vous dans le dossier du projet : `cd src/TpReactNative`
+3. Lancez la commande `npm install` pour installer les dépendances.
+4. Lancez la commande `npm start` pour lancer le projet.
+5. Ouvrez votre telephone et téléchargez l'application Expo.
+6. Scannez le QR code qui s'affiche dans votre terminal.
+7. L'application se lance sur votre téléphone.
+8. Enjoy !
+
+## Avancés du projet
+* [x] Partie 0 - Project creation
+* [x] Partie 1 - Project organisation
+* [ ] Partie 2 - Typescript types
+* [ ] Partie 3 - Screens
+* [ ] Partie 4 - Components
+* [ ] Partie 5 - FlatList
+* [ ] Partie 6 - Safe Area
+* [ ] Partie 7 - Navigation
+* [ ] Partie 8 - Hooks
+* [ ] Partie 9 - Redux Store
+* [ ] Partie 10 - Async Storage
+* [ ] Partie 11 - Theming
+* [ ] Partie 12 - Unit testing
+* [ ] Partie 13 - Resources
+
+
+## Fabriqué avec
+* [Visual Studio Code](https://code.visualstudio.com/) - Environnement de développement intégré (IDE) recommandé pour le projet multiplateforme
+* [CodeFirst](https://codefirst.iut.uca.fr/) - Gitea
+
+
+## Contributeurs
+* [Antoine PEREDERII](https://codefirst.iut.uca.fr/git/antoine.perederii)
+
+## Comment contribuer
+1. Forkez le projet (<https://codefirst.iut.uca.fr/git/antoine.perederii/EntityFramework>)
+2. Créez votre branche (`git checkout -b feature/featureName`)
+3. commit vos changements (`git commit -am 'Add some feature'`)
+4. Push sur la branche (`git push origin feature/featureName`)
+5. Créez une nouvelle Pull Request
+
+## License
+Ce projet utilise la licence MIT - voir le fichier [LICENSE](LICENSE.md) pour plus d'informations.
+
+## Remerciements
+Ce projet a été réalisé dans le cadre des tp de la matière EntityFramework. Je remercie mon professeur pour son aide.

src/tp-react-native/.gitignore

@@ -0,0 +1,35 @@
+# Learn more https://docs.github.com/en/get-started/getting-started-with-git/ignoring-files
+
+# dependencies
+node_modules/
+
+# Expo
+.expo/
+dist/
+web-build/
+
+# Native
+*.orig.*
+*.jks
+*.p8
+*.p12
+*.key
+*.mobileprovision
+
+# Metro
+.metro-health-check*
+
+# debug
+npm-debug.*
+yarn-debug.*
+yarn-error.*
+
+# macOS
+.DS_Store
+*.pem
+
+# local env files
+.env*.local
+
+# typescript
+*.tsbuildinfo

src/tp-react-native/App.tsx

@@ -0,0 +1,28 @@
+import { StatusBar } from 'expo-status-bar';
+import { StyleSheet, Text, View } from 'react-native';
+import { customJokeStub } from './data/stub/CustomJokeStub';
+import { sampleJokeStub } from './data/stub/SampleJokeStub';
+
+import './types/extension'
+export default function App() {
+  return (
+    <View style={styles.container}>   
+    
+      <Text>CustomJoke</Text>
+       {customJokeStub.displayDescription().map((t) =><Text key={t} >{t}</Text>)}
+       
+       <Text>SampleJoke</Text>
+        {sampleJokeStub.displayDescription().map((t) =><Text key={t} >{t}</Text>)}
+      <StatusBar style="auto" />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#fff',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});

src/tp-react-native/app.json

@@ -0,0 +1,30 @@
+{
+  "expo": {
+    "name": "tp-react-native",
+    "slug": "tp-react-native",
+    "version": "1.0.0",
+    "orientation": "portrait",
+    "icon": "./assets/icon.png",
+    "userInterfaceStyle": "light",
+    "splash": {
+      "image": "./assets/splash.png",
+      "resizeMode": "contain",
+      "backgroundColor": "#ffffff"
+    },
+    "assetBundlePatterns": [
+      "**/*"
+    ],
+    "ios": {
+      "supportsTablet": true
+    },
+    "android": {
+      "adaptiveIcon": {
+        "foregroundImage": "./assets/adaptive-icon.png",
+        "backgroundColor": "#ffffff"
+      }
+    },
+    "web": {
+      "favicon": "./assets/favicon.png"
+    }
+  }
+}

src/tp-react-native/babel.config.js

@@ -0,0 +1,6 @@
+module.exports = function(api) {
+  api.cache(true);
+  return {
+    presets: ['babel-preset-expo'],
+  };
+};

src/tp-react-native/data/stub/CustomJokeStub.ts

@@ -0,0 +1,3 @@
+import { JokeFactory } from '../../model/JokeFactory';
+
+export const customJokeStub = JokeFactory.createCustomJokes('[{"id":"1", "type":"custom", "setup":"one", "punchline":"y\'en a pas", "image":"Jackson"},{"id":"2", "type":"custom", "setup":"two","punchline":"y\'en a pas", "image":"Jackson"}]'); 

src/tp-react-native/data/stub/SampleJokeStub.ts

@@ -0,0 +1,2 @@
+import { JokeFactory } from '../../model/JokeFactory';
+export const sampleJokeStub = JokeFactory.createCustomJokes('[{"id":"1", "type":"custom", "setup":"one", "punchline":"y\'en a pas", "image":"Jackson"},{"id":"2", "type":"custom", "setup":"two","punchline":"y\'en a pas", "image":"Jackson"}]');

src/tp-react-native/model/CustomJoke.ts

@@ -0,0 +1,18 @@
+import { Joke } from './Joke';
+
+export class CustomJoke extends Joke {
+    private _id:string;
+    constructor(id: string, type: string, setup: string, punchline: string, image: string) {
+        super(type, setup, punchline, image); // Assuming Joke class has these properties
+        this._id = id;
+    }
+    public get id():string {
+        return this._id;
+    }
+    public set id(id:string) {
+        this._id = id;
+    }
+    description(): string {
+        return `ID: ${this.id}, Setup: ${this.setup}, Punchline: ${this.punchline}`;
+    }
+}

src/tp-react-native/model/Joke.ts

@@ -0,0 +1,44 @@
+export abstract class Joke {
+    private _type: string;
+    private _setup: string;
+    private _punchline: string;
+    private _image: string;
+
+    constructor(type: string, setup: string, punchline: string, image: string) {
+        this._type = type;
+        this._setup = setup;
+        this._punchline = punchline;
+        this._image = image;
+    }
+
+    public get type() {
+        return this._type;
+    }
+    public get setup():string {
+        return this._setup;
+    }
+    public get punchline():string {
+        return this._punchline;
+    }
+    public get image():string {
+        return this._image;
+    }
+    public set type(theType:string) {
+        this._type = theType;
+    }
+    public set setup(theSetup: string) {
+        this._setup = theSetup;
+    }
+    public set punchline(thePunchline:string) {
+        this._punchline = thePunchline;
+    }
+    public set image(theImage:string) {
+        this._image = theImage;
+    }
+    public summary(): string {
+        return this.punchline.substring(0,24) + "...";
+    }
+    public description(): string {
+        return this.type + this.summary;
+    }
+}

src/tp-react-native/model/JokeFactory.ts

@@ -0,0 +1,40 @@
+import { CustomJoke } from "./CustomJoke";
+import { SampleJoke } from "./SampleJoke";
+
+export class JokeFactory {
+    public static createCustomJokes(jsonArray: string): CustomJoke[] {
+        const jsonObjects: any[] = JSON.parse(jsonArray);
+        const customJokes: CustomJoke[] = [];
+
+        for (const jsonObject of jsonObjects) {
+            const customJoke: CustomJoke = new CustomJoke(
+                jsonObject.id,
+                jsonObject.type,
+                jsonObject.setup,
+                jsonObject.punchline,
+                jsonObject.image
+            );
+            customJokes.push(customJoke);
+        }
+
+        return customJokes;
+    }
+
+    public static createSampleJokes(jsonArray: string): SampleJoke[] {
+        const jsonObjects: any[] = JSON.parse(jsonArray);
+        const sampleJokes: SampleJoke[] = [];
+
+        for (const jsonObject of jsonObjects) {
+            const sampleJoke: SampleJoke = new SampleJoke(
+                jsonObject.id,
+                jsonObject.type,
+                jsonObject.setup,
+                jsonObject.punchline,
+                jsonObject.image
+            );
+            sampleJokes.push(sampleJoke);
+        }
+
+        return sampleJokes;
+    }
+}

src/tp-react-native/model/SampleJoke.ts

@@ -0,0 +1,18 @@
+import { Joke } from "./Joke";
+
+export class SampleJoke extends Joke {
+    private _id:number;
+    constructor(id: number, type: string, setup: string, punchline: string, image: string) {
+        super(type, setup, punchline, image); // Assuming Joke class has these properties
+        this._id = id;
+    }
+    public get id():number {
+        return this._id;
+    }
+    public set id(id:number) {
+        this._id = id;
+    }
+    description(): string {
+        return `ID: ${this.id}, Setup: ${this.setup}, Punchline: ${this.punchline}`;
+    }
+}

src/tp-react-native/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "tp-react-native",
+  "version": "1.0.0",
+  "main": "node_modules/expo/AppEntry.js",
+  "scripts": {
+    "ts:check": "tsc",
+    "start": "expo start",
+    "android": "expo start --android",
+    "ios": "expo start --ios",
+    "web": "expo start --web"
+  },
+  "dependencies": {
+    "expo": "~50.0.3",
+    "expo-status-bar": "~1.11.1",
+    "react": "18.2.0",
+    "react-native": "0.73.2",
+    "typescript": "^5.3.0",
+    "@types/react": "~18.2.45"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.20.0"
+  },
+  "private": true
+}

src/tp-react-native/tsconfig.json

@@ -0,0 +1,9 @@
+{
+    "compilerOptions": {
+      "typeRoots": [
+        "./node_modules/@types",
+        "./types"
+      ]
+    },
+    "extends": "expo/tsconfig.base"
+}

src/tp-react-native/types/extension.ts

@@ -0,0 +1,11 @@
+export {};
+
+declare global {
+    interface Array<T> {
+        displayDescription(): string[];
+    }
+}
+
+Array.prototype.displayDescription = function () {
+    return this.map((item) => item.description() )
+};