diff --git a/Readme.md b/Readme.md index 7711aa02..390b563b 100644 --- a/Readme.md +++ b/Readme.md @@ -1,3 +1,106 @@ +# Healt & Fitness + +Healt & Fitness es una app donde podrás compartir tips, recetas, rutinas de ejercicio, y todo lo relacionado con el cuidado de tu salud y tu cuerpo. + +Las **caraterísticas técnicas** de la aplicación : +- Single-Page Application [SPA] +- Diseñada con un enfoque [mobile first] +- Permitir la persintencia de datos + +#### Arquitectura de la aplicación + +- Codigo modularizado a través de *es modules* ([`import`] y [`export`] + +- Patrón modelo - vista - controlador [MVC] + +#### Tecnologías + + +* HTML5 semántico +* CSS3 +* Bootstrap +* JavaScript (ES6+) +* Firebase +* Firestore + +# Historias de Usuario + +* Como usuario nuevo debo poder crear una cuenta con email y password válidos para poder iniciar sesion e ingresar a la red social. + +* Como usuario nuevo debo poder tener la opción de iniciar sesión con mi cuenta de Google o Facebook para ingresar a la red social sin necesidad de crear una cuenta de email válido. + +* Como usuario loggeado debo poder crear, guardar, modificar en el mismo lugar (in place) y eliminar una publicación (post) privada o pública, que puede ser una frase o una imagen. + + +# Sketch + +![sketch](src/sketch.jpg) + +# Wireframe y Mockup + +https://www.figma.com/file/VH2HfNAXIWznU9FqpoMFQJ/Social-Network?node-id=0%3A1 + +# Prototype + +https://www.figma.com/proto/VH2HfNAXIWznU9FqpoMFQJ/Social-Network?node-id=102%3A2&scaling=scale-down + +## Objetivos de aprendizaje + + +### HTML y CSS + +* [x] [HTML semántico] +* [x] [CSS `flexbox`] +* [ ] Construir tu aplicación respetando el diseño realizado (maquetación). + +### DOM y Web APIs + +* [x] [Manipulación dinámica del DOM] +* [ ] [History API] +* [x] [`localStorage`] + +### Javascript + +* [x] [Uso de callbacks] +* [x] [Consumo de Promesas] +* [x] Uso ES modules + +### Firebase + +* [x] [Firestore] +* [x] [Firebase Auth] +* [x] [Firebase security rules] +* [x] [Uso de onSnapshot] +| [onAuthStateChanged] + +### Testing + +* [x] [Testeo de tus funciones] +* [ ] [Testeo asíncrono] +* [ ] [Mocking] + +### Colaboración en Github + +* [ ] Branches +* [x] Pull Requests +* [ ] Tags + +### Organización en Github + +* [ ] Projects +* [ ] Issues +* [ ] Labels +* [ ] Milestones + +### Buenas prácticas de desarrollo + +* [x] Modularización +* [x] Nomenclatura / Semántica +* [ ] Linting + + + +___________________________________________________________________________________________________________ # Creando una Red Social Bienvenida a tu primer proyecto del track de Frontend en Laboratoria. diff --git a/package.json b/package.json index 9a365577..796f1d15 100644 --- a/package.json +++ b/package.json @@ -33,4 +33,4 @@ "stylelint": "^10.1.0", "stylelint-config-recommended": "^2.2.0" } -} \ No newline at end of file +} diff --git a/src/authentication.js b/src/authentication.js new file mode 100644 index 00000000..25e267ed --- /dev/null +++ b/src/authentication.js @@ -0,0 +1,152 @@ +export {logIn,createAccount, checkIn, logInFacebook, logInGoogle}; +import {home} from './post.js'; +import {init} from './index.js'; + +const provider = new firebase.auth.GoogleAuthProvider();//proveedor del servicio + +function logIn(emailLogIn, passLogIn){ + + console.log(emailLogIn); + + console.log(passLogIn); + //home () + firebase.auth().signInWithEmailAndPassword(emailLogIn, passLogIn).catch(function(error) { + + // Handle Errors here. + var errorCode = error.code; + alert(errorCode); + var errorMessage = error.message; + alert(errorMessage); + // ... + + }); + + } + + //const createAccountButton = document.querySelector('#creatAccount'); + + function createAccount() { + + document.getElementById('logInUser').style.display = 'none'; + document.getElementById('init').style.display = 'none'; + document.getElementById('logInNetwoork').style.display = 'none'; + document.getElementById('LogInNewUser').style.display = 'none'; + const createAccountView = ` +
+ + +
+ + + +
` + // primero se dibuja en el DOM + root.innerHTML = createAccountView + // escuchar primero hay que manipular + let checkInButton = document.querySelector('#checkIn') + let backButton = document.querySelector('#back') + let email = document.querySelector('#email') + let pass = document.querySelector('#pass') + checkInButton.onclick = e=>checkIn(email.value, pass.value) // listener que ejecuta la funcion de Firebase + backButton.onclick = e=> init() + } + +function checkIn(email, pass) { + + console.log(email); + console.log(pass); + firebase.auth().createUserWithEmailAndPassword(email, pass).catch(function (error) { + // Handle Errors here. + const errorCode = error.code; + const errorMessage = error.message; + // ... + alert(errorCode); + alert(errorMessage); + + }); + + +} + + +function logInFacebook () { + + const provider = new firebase.auth.FacebookAuthProvider(); + firebase.auth().signInWithPopup(provider).then(function(result) { + /// This gives you a Facebook Access Token. You can use it to access the Facebook API. + var token = result.credential.accessToken; + // The signed-in user info. + var user = result.user; + // ... + // console.log(user); + + }).catch(function(error) { + // Handle Errors here. + var errorCode = error.code; + var errorMessage = error.message; + // The email of the user's account used. + var email = error.email; + // The firebase.auth.AuthCredential type that was used. + var credential = error.credential; + // ... + }); + +} + + + +function logInGoogle (){ + firebase.auth().signInWithPopup(provider).then(function(result) { + // This gives you a Google Access Token. You can use it to access the Google API. + var token = result.credential.accessToken; + // The signed-in user info. + var user = result.user; + // ... + // console.log(user); + + // Cuando hacemos login con google ocultamos todos los input y los botones + document.getElementById('logInUser').style.display="none"; + document.getElementById('init').style.display="none"; + document.getElementById('logInNetwoork').style.display="none"; + document.getElementById('LogInNewUser').style.display="none"; + console.log(user); + // document.getElementById("root").innerHTML=""; + + }).catch(function(error) { + // Handle Errors here. + var errorCode = error.code; + var errorMessage = error.message; + // The email of the user's account used. + var email = error.email; + // The firebase.auth.AuthCredential type that was used. + var credential = error.credential; + // ... + }); + +} + + + +function observador () { + firebase.auth().onAuthStateChanged(function(user) { + if (user) { + console.log("Existe Usuario activo"); + home (); + var displayName = user.displayName; + var email = user.email; + var emailVerified = user.emailVerified; + var photoURL = user.photoURL; + var isAnonymous = user.isAnonymous; + var uid = user.uid; + var providerData = user.providerData; + // ... + } else { + // User is signed out. + console.log("No existe usuario activo"); + // ... + } + }); + +} + +observador (); diff --git a/src/example.js b/src/example.js deleted file mode 100644 index 52d2c7ea..00000000 --- a/src/example.js +++ /dev/null @@ -1,3 +0,0 @@ -export const example = () => { - // aquí tu código -} \ No newline at end of file diff --git a/src/firebase.js b/src/firebase.js new file mode 100644 index 00000000..c7ff8794 --- /dev/null +++ b/src/firebase.js @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/src/index.html b/src/index.html index bb6937cc..9cec43f7 100644 --- a/src/index.html +++ b/src/index.html @@ -1,12 +1,52 @@ - + + - Document + Social Network + + + + + + + + + + + + + - - - + + + +
+ + + + + + + + \ No newline at end of file diff --git a/src/index.js b/src/index.js index 35868bab..b2373cdc 100644 --- a/src/index.js +++ b/src/index.js @@ -1,3 +1,52 @@ -import { example } from './example.js'; +import {home, close} from './post.js' +import {logIn, createAccount, checkIn, logInFacebook, logInGoogle}from './authentication.js' +export {init}; + +window.onload= init(); + + function init() { + + + let initView =` +
+

Healt & Fitness

+ +
+

Inicia Sesión

+
+ +
+ + + +
+ +
+

Iniciar con:

+ + +
+ +
+

No tienes Cuenta?

+ +
+
+ ` + root.innerHTML = initView + let logInButton = document.querySelector('#logIn') + let emailLogIn = document.querySelector('#emailLogIn') + let passLogIn = document.querySelector('#passLogIn') + logInButton.onclick = e => logIn(emailLogIn.value, passLogIn.value) // listener que ejecuta la funcion de Firebase + let logInFacebookButoon = document.querySelector('#logInFacebook') + logInFacebookButoon.onclick = e => logInFacebook () + let logInGoogleButton = document.querySelector('#logInGoogle') + logInGoogleButton.onclick = e => logInGoogle () + let creatAccountButton = document.querySelector('#creatAccount') + creatAccountButton.onclick= e => createAccount() + } + + + + -example(); diff --git a/src/post.js b/src/post.js new file mode 100644 index 00000000..c7037067 --- /dev/null +++ b/src/post.js @@ -0,0 +1,130 @@ +import {init}from './index.js' +export {home,close}; + + //esta es la funcion donde se realizan las publicaciones + function home (){ + + let homeView = ` + + +

Healt & Fitness

+
+ +
+ +
+ +
+ + ` + root.innerHTML = homeView + let toggleButton=document.querySelector('#toggle'); + + toggleButton.onclick= e=> menu() + + let homeButton = document.querySelector('#home'); + homeButton.onclick = e=> home() + + let closeButton = document.querySelector('#close'); + + closeButton.onclick = e=> close() + + let selectImagenButton = document.querySelector('#fichero') + + selectImagenButton.onclick = e=>selectImagen() + + } + + +let fichero; +let imagenStorageRef; +let imagenesRef; + + + +function selectImagen () { + fichero = document.getElementById("fichero"); + imagenStorageRef=firebase.storage().ref(); + imagenesRef=firebase.database().ref().child("publicaiones"); + + fichero.addEventListener("change",loadImagen,false); + + showImagenStorage (); + +} + function showImagenStorage () { + + imagenesRef.on("value",function (snapshot){ + let datos=snapshot.val(); + let result=""; + for (var key in datos){ + result += ''; + } + document.getElementById("root").innerHTML=result; + }) + + } + + + +function loadImagen(){ + + let imagen = fichero.files[0]; + + var uploadTask = imagenStorageRef.child('publicaciones/' + imagen.name).put(imagen); + + uploadTask.on('state_changed', function(snapshot){ + var progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100; + console.log('Upload is ' + progress + '% done'); + switch (snapshot.state) { + case firebase.storage.TaskState.PAUSED: // or 'paused' + console.log('Upload is paused'); + break; + case firebase.storage.TaskState.RUNNING: // or 'running' + console.log('Upload is running'); + break; + } +}, function(error) { + alert("hubo un error"); +}, function() { + uploadTask.snapshot.ref.getDownloadURL().then(function(downloadURL) { + console.log('File available at', downloadURL); + crearNodoBDFB(imagen.name,downloadURL); + }); +}); + + } + + + function crearNodoBDFB( nombreImagen, downloadURL){ + imagenesRef.push({nombre:nombreImagen, url:downloadURL}); + } + + +function menu (){ + +document.getElementById('sidebar').classList.toggle('active'); + +} + + //Cerrando sesión +function close(){ + firebase.auth().signOut() + alert("Cerrando Sesion") + init() + +}; \ No newline at end of file diff --git a/src/sketch.jpg b/src/sketch.jpg new file mode 100644 index 00000000..bbd8c984 Binary files /dev/null and b/src/sketch.jpg differ diff --git a/src/styles.css b/src/styles.css new file mode 100644 index 00000000..353f11b5 --- /dev/null +++ b/src/styles.css @@ -0,0 +1,70 @@ +body{ +background: linear-gradient(180deg, rgb(39, 250, 127), rgb(208, 253, 228), rgb(9, 209, 162)); +/*mix-blend-mode: soft-light;*/ +box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25), 0px 4px 4px rgba(0, 0, 0, 0.25); +} + + +* { + margin: 0px; + padding: 0px; + } + + #sidebar { + position: fixed; + width: 150px; + height: 32%; + background: #FFC719; + left: -200px; + transition: all 500ms linear; + } + + #sidebar.active { + left: 0px; + } + + #sidebar ul li { + color: black; + list-style: none; + padding: 15px 10px; + border-bottom: 1px solid rgba(100, 100, 100, .3); + text-align: center; + } + + #sidebar .toggle-btn { + position: absolute; + left: 230px; + top: 20px; + cursor: pointer; + } + + #sidebar .toggle-btn span { + background-color: #FFC719; + display: block; + width: 40px; + text-align: center; + font-size: 30px; + border: 3px solid #000; + } + + #PostButton{ + padding: 2px; + background-color: #FFC719; + width: 180px; + position: relative; + + } + p { + text-align: center; + } + + #fichero{ + position: absolute; + top: 0px; + left: 0px; + right: 0px; + bottom: 0px; + width: 100%; + height:100% ; + opacity:0 ; + } \ No newline at end of file diff --git a/src/test.spec.js b/src/test.spec.js new file mode 100644 index 00000000..d92889fc --- /dev/null +++ b/src/test.spec.js @@ -0,0 +1,48 @@ + + + + + + + + + + + + + + + + + + + + + + + +/* import { example } from '../src/index.js'; + +describe('logInFacebook', () => { + it('debería ser una función', () => { + expect(typeof logInFacebook).toBe('function'); + }); + it('Debería poder iniciar sesion con Facebook', () => { + return logInFacebook() + .then(() => { + expect('').toBe(''); + }); + }); +}); + +describe('logInFacebook', () => { + it('debería ser una función', () => { + expect(typeof logInFacebook).toBe('function'); + }); + it('Debería poder registrarse con Facebook', () => { + return logInFacebook() + .then((user) => { + expect('').toBe(''); + }); + }); +}); */ \ No newline at end of file diff --git a/test/example.spec.js b/test/example.spec.js deleted file mode 100644 index 1aca05e9..00000000 --- a/test/example.spec.js +++ /dev/null @@ -1,7 +0,0 @@ -import { example } from '../src/example.js'; - -describe('example', () => { - it('debería ser una función', () => { - expect(typeof example).toBe('function'); - }); -}); \ No newline at end of file diff --git a/test/test.spec.js b/test/test.spec.js new file mode 100644 index 00000000..8e2a5f5b --- /dev/null +++ b/test/test.spec.js @@ -0,0 +1,7 @@ +import { checkIn } from '../src/firebase.js'; + +describe('checkIn', () => { + it('debería ser una función', () => { + expect(typeof checkIn).toBe('function'); + }); +});