diff --git a/README.md b/README.md index 2399b78..98fa2f3 100644 --- a/README.md +++ b/README.md @@ -7,7 +7,7 @@ **Nom de l’application** : FLAD :musical_note:
-**Thème de l’application** : Réseau social cross-plateforme dans le thème de la musique destiné aux utilisateurs d'appareils mobiles. +**Thème de l’application** : Il s'agit d'un réseau social cross-plateforme axé sur la musique et destiné aux utilisateurs de terminaux mobiles. Son objectif est de permettre aux utilisateurs situés à moins de 100 mètres les uns des autres de visualiser les musiques écoutées par chacun. Ils pourront faire connaissance grâce à un chat et, qui sait, devenir amis. :grin:
**Contexte** : 👇 @@ -19,9 +19,9 @@ La racine de notre gitlab est composée de deux dossiers essentiels au projet: -[**src**](src) : **Toute la partie codage de l'application web** +[**src**](src) : **Toute la partie codage de l'application mobile** (contient un dossier API pour l'API FLAD qui effectue les requêtes vers l'API SPOTIFY et la base de données, ainsi qu'un dossier FLAD qui contient toute la partie côté client de l'application) -[**doc**](doc) : **Documentation de l'application** +[**doc**](doc) : **Documentation de l'application** ## Fonctionnement @@ -76,6 +76,18 @@ Maintenant vous pouvez à tout moment lancer l'application grâce à la commande
:information_source: *Cliquer sur la touche 'w' si vous voulez le visualiser sur un navigateur (ce que je ne conseille pas) ou installer l'application 'Expo go' de votre téléphone et scanner le QR code proposer pour le visualiser (à noter que l'ordinateur dans lequel il se voit lancer doit être dans le même réseau local que votre téléphone)* +- ### Comment s'inscrire sur l'application ? + +Tout d'abord, il faut fournir votre *adresse e-mail* et votre *nom Spotify* aux **techniciens de l'application** (voir plus bas). Ils s'occuperont de vous ajouter définitivement à l'application. Une fois que cela est fait, inscrivez-vous via la **page d'inscription** de l'application en cliquant d'abord sur le bouton 'lier mon compte': + +
+ + + +
+ + +Vous serez normalement redirigé sur la page Spotify où vous devrez vous connecter. Une fois connecté, entrez votre nom, votre adresse e-mail et votre mot de passe en tant qu'utilisateur FLAD (n'oubliez pas ces informations car vous en aurez besoin pour vous connecter). Ensuite, cliquez sur le bouton 'suivant' et bienvenue sur l'application ! ## Environnement de Travail @@ -102,9 +114,9 @@ Notre environnement de travail se base sur plusieurs outils et langages :👇 La composition pour le projet se voit réaliser par deux élèves de l'IUT d'Aubière:
-⚙️ Emre KARTAL +⚙️ Emre KARTAL : emre.kartal@etu.uca.fr
-⚙️ David D'ALMEIDA +⚙️ David D'ALMEIDA : david.d_almeida@etu.uca.fr
© PM2 (Projet inspiré par nos très chers développeurs de la Dafl Team (S.O les Dafl dev)) diff --git a/doc/Images/Icon.png b/doc/Images/Icon.png new file mode 100644 index 0000000..cc0dad0 Binary files /dev/null and b/doc/Images/Icon.png differ diff --git a/doc/Images/Logo.png b/doc/Images/Logo.png new file mode 100644 index 0000000..2800b45 Binary files /dev/null and b/doc/Images/Logo.png differ diff --git a/doc/Images/Real_LoginPage.JPG b/doc/Images/Real_LoginPage.JPG new file mode 100644 index 0000000..bd37f63 Binary files /dev/null and b/doc/Images/Real_LoginPage.JPG differ diff --git a/doc/Images/Real_RegisterPage.JPG b/doc/Images/Real_RegisterPage.JPG new file mode 100644 index 0000000..9c1611e Binary files /dev/null and b/doc/Images/Real_RegisterPage.JPG differ diff --git a/doc/Maquettes/ChatPage.png b/doc/Maquettes/ChatPage.png new file mode 100644 index 0000000..a5d9cf2 Binary files /dev/null and b/doc/Maquettes/ChatPage.png differ diff --git a/doc/Maquettes/LikeSpotPage.png b/doc/Maquettes/LikeSpotPage.png new file mode 100644 index 0000000..c6cd1df Binary files /dev/null and b/doc/Maquettes/LikeSpotPage.png differ diff --git a/doc/Maquettes/LoginPage.png b/doc/Maquettes/LoginPage.png new file mode 100644 index 0000000..c7c7d74 Binary files /dev/null and b/doc/Maquettes/LoginPage.png differ diff --git a/doc/Maquettes/NotInterestedSpotPage.png b/doc/Maquettes/NotInterestedSpotPage.png new file mode 100644 index 0000000..887792e Binary files /dev/null and b/doc/Maquettes/NotInterestedSpotPage.png differ diff --git a/doc/Maquettes/RegisterPage.png b/doc/Maquettes/RegisterPage.png new file mode 100644 index 0000000..a00123c Binary files /dev/null and b/doc/Maquettes/RegisterPage.png differ diff --git a/doc/Maquettes/SettingPage.png b/doc/Maquettes/SettingPage.png new file mode 100644 index 0000000..5657d12 Binary files /dev/null and b/doc/Maquettes/SettingPage.png differ diff --git a/doc/Maquettes/SpotPage.png b/doc/Maquettes/SpotPage.png new file mode 100644 index 0000000..5718504 Binary files /dev/null and b/doc/Maquettes/SpotPage.png differ diff --git a/doc/Maquettes/StartPage.png b/doc/Maquettes/StartPage.png new file mode 100644 index 0000000..63e51d7 Binary files /dev/null and b/doc/Maquettes/StartPage.png differ diff --git a/doc/Mascot/FLADYPerfect.png b/doc/Mascot/FLADYPerfect.png new file mode 100644 index 0000000..4eaaec4 Binary files /dev/null and b/doc/Mascot/FLADYPerfect.png differ diff --git a/doc/Mascot/FLADYPerfectRed.png b/doc/Mascot/FLADYPerfectRed.png new file mode 100644 index 0000000..33b82eb Binary files /dev/null and b/doc/Mascot/FLADYPerfectRed.png differ diff --git a/doc/Mascot/FLADYPerfectShadow.png b/doc/Mascot/FLADYPerfectShadow.png new file mode 100644 index 0000000..d834196 Binary files /dev/null and b/doc/Mascot/FLADYPerfectShadow.png differ diff --git a/src/FLAD/components/AnimatedParalax.tsx b/src/FLAD/components/AnimatedParalax.tsx index 4bb9c95..6f761a4 100644 --- a/src/FLAD/components/AnimatedParalax.tsx +++ b/src/FLAD/components/AnimatedParalax.tsx @@ -1,6 +1,4 @@ -import { SharedElement } from "react-navigation-shared-element"; -import { NavigationProp, RouteProp } from "@react-navigation/native"; -import { View,Image,StyleSheet, Dimensions, useWindowDimensions } from "react-native"; +import { View, useWindowDimensions } from "react-native"; import Animated, { interpolate, SensorType, useAnimatedSensor, useAnimatedStyle, withTiming } from "react-native-reanimated"; interface SpotProps { diff --git a/src/FLAD/components/Artist.tsx b/src/FLAD/components/Artist.tsx index 89ba68c..4c1d4b3 100644 --- a/src/FLAD/components/Artist.tsx +++ b/src/FLAD/components/Artist.tsx @@ -1,7 +1,6 @@ -import { View, StyleSheet, Dimensions, Image, Pressable, TouchableWithoutFeedback, TouchableOpacity, TouchableHighlight } from "react-native"; +import { View, StyleSheet, Dimensions, Image, TouchableOpacity } from "react-native"; import Animated, { Layout, - Transition, ZoomIn, ZoomOut, } from "react-native-reanimated"; diff --git a/src/FLAD/components/Card.tsx b/src/FLAD/components/Card.tsx index 347da23..40c8002 100644 --- a/src/FLAD/components/Card.tsx +++ b/src/FLAD/components/Card.tsx @@ -1,12 +1,9 @@ -import { View, Text, Image , Dimensions, StyleSheet } from 'react-native' -import React, { useRef, useState } from 'react' +import { View, Image , Dimensions, StyleSheet } from 'react-native' +import React from 'react' import Animated,{ Extrapolate, interpolate, runOnJS, useAnimatedGestureHandler, useAnimatedStyle, useSharedValue, withSpring } from 'react-native-reanimated'; import { PanGestureHandler, PanGestureHandlerGestureEvent } from 'react-native-gesture-handler'; -import * as Haptics from 'expo-haptics'; -const {width : wWidht} = Dimensions.get("window"); -const SCREEN_HEIGHT = Dimensions.get('window').height const SCREEN_WIDTH = Dimensions.get('window').width // const width = wWidht *0.75; // const height = wWidht * (465/264); diff --git a/src/FLAD/components/FladLoadingScreen.tsx b/src/FLAD/components/FladLoadingScreen.tsx index 6ff701e..482d73c 100644 --- a/src/FLAD/components/FladLoadingScreen.tsx +++ b/src/FLAD/components/FladLoadingScreen.tsx @@ -76,7 +76,7 @@ const FladLoading = () => { return ( - + diff --git a/src/FLAD/components/HalfCircle.tsx b/src/FLAD/components/HalfCircle.tsx index bde8742..4058747 100644 --- a/src/FLAD/components/HalfCircle.tsx +++ b/src/FLAD/components/HalfCircle.tsx @@ -1,5 +1,5 @@ import { useState } from 'react'; -import { View, Text, Image, Animated ,PanResponder, Dimensions, StyleSheet, ImageBackground, Button, Pressable, TextInput } from 'react-native' +import { View, StyleSheet } from 'react-native' interface HalfCirlceProps { backgroundColor : string; diff --git a/src/FLAD/components/Onboarding.tsx b/src/FLAD/components/Onboarding.tsx index 5b5044b..0e14e61 100644 --- a/src/FLAD/components/Onboarding.tsx +++ b/src/FLAD/components/Onboarding.tsx @@ -180,20 +180,20 @@ const styles = StyleSheet.create({ }, button2Connection: { width: '100%', - height: 80, + height: normalize(92), backgroundColor: '#232123', borderTopColor: '#3C3C3C', borderTopWidth: 1, justifyContent: 'center', alignItems: 'center', position: 'absolute', - bottom: normalize(46) + bottom: normalize(0) }, mascot: { width: normalize(130), height: normalize(130), position: 'absolute', - bottom: normalize(140), + bottom: normalize(90), right: normalize(0) } }) diff --git a/src/FLAD/data/data.ts b/src/FLAD/data/data.ts index 85abaf4..4b92177 100644 --- a/src/FLAD/data/data.ts +++ b/src/FLAD/data/data.ts @@ -1,34 +1,41 @@ export const cards = [{ - name : "blue", + musicName : "Je bibi", + name : "Kaaris", sourceUrl : "https://th.bing.com/th/id/R.dbf87f0d8cbfd078ab6a589a5d921994?rik=1%2f6KliMpOAeh8A&pid=ImgRaw&r=0", index : 4 }, { - name : "her", + musicName : "Breathin", + name : "Ariana Grande", sourceUrl : "https://i.ebayimg.com/images/g/rY0AAOSw97djEo2C/s-l500.jpg", index : 9 }, { + musicName : "Zombies", name : "gambino", sourceUrl : "https://th.bing.com/th/id/R.0b2d1a59bfda9b1a49ecb561e08535a8?rik=Xyc35OZU%2f6VOVw&pid=ImgRaw&r=0", index : 3 }, { + musicName : "Bambina", name : "PNL", sourceUrl : "https://upload.wikimedia.org/wikipedia/en/a/a0/PNL_-_Dans_la_l%C3%A9gende.png", index : 10 }, { - name : "Freeze Raël", + musicName : "Freeze Raël", + name : "Freeze Corleone", sourceUrl : "https://intrld.com/wp-content/uploads/2020/08/freeze-corleone-la-menace-fanto%CC%82me.png", index : 23 }, { + musicName : "Autobahn", name : "Sch", sourceUrl : "https://images.genius.com/83b6c98680d38bde1571f6b4093244b5.1000x1000x1.jpg", index : 44 }, { + musicName : "Lakehouse", name : "Stratos", sourceUrl : "https://images.genius.com/ddc9cadedd1d4cef0860aaa85af9cd46.705x705x1.png", index : 89 diff --git a/src/FLAD/navigation/AuthNavigation.tsx b/src/FLAD/navigation/AuthNavigation.tsx index a0b4377..daf8c95 100644 --- a/src/FLAD/navigation/AuthNavigation.tsx +++ b/src/FLAD/navigation/AuthNavigation.tsx @@ -47,9 +47,9 @@ export default function AuthNavigation() { <> {isLogin ? ( /* {userToken != null ? ( */ - + - + ) : @@ -59,9 +59,3 @@ export default function AuthNavigation() { ) } - const styles = StyleSheet.create({ - mainSafeArea: { - flex: 1, - backgroundColor: "#141414", - } - }); \ No newline at end of file diff --git a/src/FLAD/navigation/Navigation.tsx b/src/FLAD/navigation/Navigation.tsx index db31583..90987fa 100644 --- a/src/FLAD/navigation/Navigation.tsx +++ b/src/FLAD/navigation/Navigation.tsx @@ -1,10 +1,11 @@ import React from 'react'; +import { View, StyleSheet, Platform } from 'react-native'; import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'; import { NavigationContainer } from '@react-navigation/native'; import FavoriteNavigation from './FavoriteNavigation'; import SettingNavigation from './SettingNavigation'; -import Spot from '../screens/spot'; +import normalize from '../components/Normalize'; // @ts-ignore import FontAwesome from 'react-native-vector-icons/FontAwesome'; import SpotNavigation from './SpotNavigation'; @@ -29,14 +30,17 @@ export default function Navigation() { initialRouteName="Spots" screenOptions={{ //tabBarShowLabel: false, //to remove the titles under the icons - tabBarStyle: {height: 60, position: 'absolute', bottom: 20, borderRadius: 30, marginHorizontal: 25}, - tabBarLabelStyle: { bottom: 5 } + tabBarStyle: styles.tabBar, + ...(Platform.OS === 'android' + ? { tabBarLabelStyle: { bottom: normalize(10) } } + : { tabBarLabelStyle: { bottom: normalize(-22) } } + ), }}> , + tabBarIcon: ({color}) => , }}/> , + tabBarIcon: ({color}) => , }}/> , + tabBarIcon: ({color}) => , }}/> , + tabBarIcon: ({color}) => , }}/> @@ -67,4 +71,18 @@ function TabBarIcon(props: { color: string; }) { return ; -} \ No newline at end of file +} + +const styles = StyleSheet.create({ + tabBar: { + height: 60, + position: 'absolute', + bottom: normalize(50), + borderRadius: 30, + marginHorizontal: 25 + }, + IconContainer: { + position: 'absolute', + top: 5, + } +}) \ No newline at end of file diff --git a/src/FLAD/screens/Favorite.tsx b/src/FLAD/screens/Favorite.tsx index ae5965f..bd6f8f8 100644 --- a/src/FLAD/screens/Favorite.tsx +++ b/src/FLAD/screens/Favorite.tsx @@ -1,5 +1,5 @@ import React, { useState} from 'react'; -import { Image,StyleSheet, Text, View, FlatList, ScrollView, TouchableOpacity } from 'react-native'; +import { Image,StyleSheet, Text, View, FlatList, ScrollView, TouchableOpacity, SafeAreaView } from 'react-native'; import CardMusic from '../components/CardMusic'; import normalize from '../components/Normalize'; import Music from '../Model/Music' @@ -39,33 +39,39 @@ export default function favoritePage() { return ( - - Favoris - Retrouvez ici vos musiques favorites - - - - ( - // navigation.navigate("")}> - - // - )} - keyExtractor={(item: Music) => item.title } - /> + + + Favoris + Retrouvez ici vos musiques favorites - navigation.navigate('Genre')}> - - - + + + ( + // navigation.navigate("")}> + + // + )} + keyExtractor={(item: Music) => item.title } + /> + + navigation.navigate('Genre')}> + + + + ); }; const styles = StyleSheet.create({ + mainSafeArea: { + flex: 1, + backgroundColor: "#141414", + }, body: { flex: 1, justifyContent: 'center', diff --git a/src/FLAD/screens/Register.tsx b/src/FLAD/screens/Register.tsx index de3e625..fa1cfae 100644 --- a/src/FLAD/screens/Register.tsx +++ b/src/FLAD/screens/Register.tsx @@ -1,10 +1,9 @@ import React, { useEffect, useState } from 'react'; -import { View, Image, StyleSheet, Text, ImageBackground, Button, TextInput, TouchableWithoutFeedback, Keyboard, TouchableOpacity, Platform } from 'react-native'; +import { View, Image, StyleSheet, Text, ImageBackground, TextInput, TouchableWithoutFeedback, Keyboard, TouchableOpacity, Platform } from 'react-native'; import {useNavigation} from "@react-navigation/native"; import normalize from '../components/Normalize'; import * as SecureStore from 'expo-secure-store'; import * as AuthSession from 'expo-auth-session'; -import axios from 'axios'; import * as WebBrowser from 'expo-web-browser'; import { makeRedirectUri, useAuthRequest } from 'expo-auth-session'; import { registerUser } from '../redux/thunk/authThunk'; diff --git a/src/FLAD/screens/Setting.tsx b/src/FLAD/screens/Setting.tsx index 5413573..559b9ba 100644 --- a/src/FLAD/screens/Setting.tsx +++ b/src/FLAD/screens/Setting.tsx @@ -1,5 +1,5 @@ import React, { useRef, useState } from 'react'; -import { View, StyleSheet, Text, Image, TouchableWithoutFeedback, Keyboard, TouchableOpacity, TouchableHighlight } from 'react-native'; +import { View, StyleSheet, Text, Image, TouchableWithoutFeedback, Keyboard, TouchableOpacity, SafeAreaView } from 'react-native'; import { Svg, Path } from 'react-native-svg'; import {useNavigation} from "@react-navigation/native"; @@ -43,106 +43,112 @@ export default function Setting() { () => setIsCheckedLocalisation(value => !value); return ( - - - Réglages - - - - + + + + Réglages + + + + + + + + + + - - - - - - - - navigation.navigate('SettingProfil')}> - - - - Emre KARTAL - id. Spotify, mail et mot de passe - - - - - - - - - - - - - - - Dark Mode - + navigation.navigate('SettingProfil')}> + + + + Emre KARTAL + id. Spotify, mail et mot de passe + + - - - - - - - - + + + + + + + + + + + + + Dark Mode + + - - Notification - + + + + + + + + + + Notification + + - - - - - - + + + + + - - - Localisation - + + + Localisation + + - - - - - - - - - - En cours d’écoute... - + + + + + + + + + En cours d’écoute... + - - - - + + + + - - - - - - + + + + + + + + console.log("Tkt t deconnecter")}> + Se deconnecter + - console.log("Tkt t deconnecter")}> - Se deconnecter - - - + + ); }; const styles = StyleSheet.create({ + mainSafeArea: { + flex: 1, + backgroundColor: "#141414", + }, container: { marginTop: 30, marginHorizontal: normalize(25), diff --git a/src/FLAD/screens/SettingProfil.tsx b/src/FLAD/screens/SettingProfil.tsx index 8a61089..bf239b1 100644 --- a/src/FLAD/screens/SettingProfil.tsx +++ b/src/FLAD/screens/SettingProfil.tsx @@ -7,6 +7,7 @@ import {useNavigation} from "@react-navigation/native"; import normalize from '../components/Normalize'; import * as ImagePicker from 'expo-image-picker'; +import { SafeAreaView } from 'react-native-safe-area-context'; // @ts-ignore const DismissKeyboard = ({ children }) => ( @@ -46,107 +47,113 @@ export default function SettingProfil() { return ( - - - navigation.navigate('Setting')}> - - - Exit - - - - Profil - - {image && } - - - - - + + + + navigation.navigate('Setting')}> + + + Exit + + + + Profil + + {image && } + + + + + + - - - - Identifiant - + + + Identifiant + + + + Mail + + - - Mail - + + + + + + + + + + Modifier le mot de passe + + - - - - - - + + + + + + + + + - - Modifier le mot de passe - - - - - - - - - - - - - - + console.log("Tkt t deconnecter")}> + Supprimer le compte + - console.log("Tkt t deconnecter")}> - Supprimer le compte - - - - - - - - Annuler + + + + + + Annuler + + + Mot de passe + + + Modifier + + + + + + Ancien + - - Mot de passe - - - Modifier + + Nouveau + + + + Confirmer + - - - - - Ancien - - - - Nouveau - - - Confirmer - + + Votre mot de passe doit comporter au moins 8 caractères, dont au moins un chiffre, une majuscule et une minuscule. - - Votre mot de passe doit comporter au moins 8 caractères, dont au moins un chiffre, une majuscule et une minuscule. - - - - - + + + + ); }; const styles = StyleSheet.create({ + mainSafeArea: { + flex: 1, + backgroundColor: "#141414", + }, container: { marginTop: 20, marginHorizontal: normalize(25), diff --git a/src/FLAD/screens/SpotDetailsPage.tsx b/src/FLAD/screens/SpotDetailsPage.tsx index 841ef4e..2dd10b8 100644 --- a/src/FLAD/screens/SpotDetailsPage.tsx +++ b/src/FLAD/screens/SpotDetailsPage.tsx @@ -1,6 +1,6 @@ import { SharedElement } from "react-navigation-shared-element"; import { NavigationProp, RouteProp } from "@react-navigation/native"; -import { View,Text,Image,StyleSheet, Dimensions, useWindowDimensions, Button, TouchableOpacity } from "react-native"; +import { View,Text,Image,StyleSheet, Dimensions, useWindowDimensions, Button, TouchableOpacity, SafeAreaView } from "react-native"; import Animated, { interpolate, SensorType, useAnimatedSensor, useAnimatedStyle, useDerivedValue, useSharedValue, Value, withSpring, withTiming } from "react-native-reanimated"; import { BlurView } from 'expo-blur'; import qs from "qs"; @@ -217,6 +217,7 @@ const SpotDetailsPage = ({ route }) => { return ( + {/* */} @@ -287,8 +288,16 @@ const SpotDetailsPage = ({ route }) => { */} {/* */} + ); }; -export default SpotDetailsPage; \ No newline at end of file +export default SpotDetailsPage; + +const styles = StyleSheet.create ({ + mainSafeArea: { + flex: 1, + backgroundColor: "#141414", + } +}) \ No newline at end of file diff --git a/src/FLAD/screens/spot.tsx b/src/FLAD/screens/spot.tsx index 61d6f66..5d8b124 100644 --- a/src/FLAD/screens/spot.tsx +++ b/src/FLAD/screens/spot.tsx @@ -204,35 +204,32 @@ export default function Spot() { height: "100%", justifyContent: "center", alignItems: "center", - opacity: 0.48 }} source={{ uri:currentCard.sourceUrl , }} > - - - - LOST FOREST - Laylow - - + + + {currentCard.musicName} + {currentCard.name} + + @@ -272,23 +269,22 @@ export default function Spot() { ) - : ( - - - - - - Vous avez explorer toutes les spot autour de vous. - {"\n"}Continuer dans discoverie pour découvrir de nouvelles music basées dur vos gouts musicaux. - - - ) + : ( + + + + Vous avez explorer toutes les spot autour de vous. + {"\n"}Continuer dans discoverie pour découvrir de nouvelles music basées dur vos gouts musicaux. + ) } ); }; const styles = StyleSheet.create({ + mainSafeArea: { + flex: 1, + }, spot : { flex: 1, alignItems: 'center', @@ -320,9 +316,5 @@ export default function Spot() { right : 0, height : 209, }, - - mainSafeArea: { - flex: 1, - } })