GithubHelp home page GithubHelp logo

omorest / weatherweb-front Goto Github PK

View Code? Open in Web Editor NEW
1.0 1.0 0.0 24.19 MB

Home Page: https://theweathernow.vercel.app/

HTML 12.09% JavaScript 53.00% CSS 34.91%
api css3 html-css-javascript html5 javascript nodejs weather-app

weatherweb-front's Introduction

Hi there 👋

  • 💻 Computer Science Engineer
  • 💘 Passionate about learning good practices, architectures, testing, etc.
  • 🌱 Learning something every day.

Contact with me 🙋🏽‍♂️

oscarmoreira1 oscarmoreira


Oscar's GitHub stats

weatherweb-front's People

Contributors

omorest avatar

Stargazers

 avatar

Watchers

 avatar  avatar

weatherweb-front's Issues

Parsers

https://github.com/omorest/WeatherWeb/blob/f00f1221a785ae65a0836fddf0af761c4cd541fc/src/index.js#L13

@omorest Holaa bro! 🙌 he estado mirándote el código por lo que habíamos hablado, y justo en desde esta línea veo que haces lo que se suele llamar parsear los datos de la request. En vez de hacerlo aquí puedes crearte una función toWeatherInformation o similar y meterle ahí toda las transformación que haces.

Esa función la llamas luego antes del return en el request.js tal que así:

export const getDataWeatherByLatLon = async (latitude, longitude) => {
	const url = `https://api.openweathermap.org/data/2.5/weather?lat=${latitude}&lon=${longitude}&units=metric&appid=${process.env.KEY}`;
	const res = await fetch(url);
	const data = await res.json();
	return toWeatherInformation(data);
}
Puedes crear un fichero dentro de un directorio weather y meterle ahí el parsers.js de esta manera puedes tener algo así como: 

src/api/weather/requests.js ó endpoints.js
                         /parsers.js
                         /models.js // esto no pero por ejemplo si usas typescript siempre los tipos van en otro directorio aparte y así lo tienes todo organizado. 

De esta manera en la función de initInformationWeather te quedaría algo así:

const iniInformationWeather = () => {
	async function success(position) {
		const {latitude, longitude} = position.coords;
		const dataWeather = await getDataWeatherByLatLon(latitude, longitude);
		createInformationWeather(weatherInfoRelevant);
	};
	
	navigator.geolocation.getCurrentPosition(success);
}

La idea es que quitas de la función initInformationWeather la complejidad del parseo ya que su responsabilidad no es hacerlo, sino tal y como lo haces, coger la posición, llamar a la request y crear la información. Los parseos y cambios de modelo desde el back al front y viceversa se suelen hacer siempre en el punto más cercano a la salida o entrada de datos del front, en nuestro caso siempre serán las request. Por ello los parsers siempre se suelen poner ahí 😄

Espero haberte ayudado bro! 🙌

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.