Could Someone Guide me with Custom Module for Weather API Integration?

[Elizashahh]

Hello there,

I have been working on my MagicMirror setup for a few weeks now and I have been thoroughly enjoying it. I have already installed a few modules and customized the interface; but now I am trying to create my own custom module that integrates data from a weather API.

While I have managed to get basic API calls working using JavaScript; I am struggling to understand how to properly fetch the data and display it within the MagicMirror framework.

I can retrieve the JSON data from the API; but I am unsure of the best way to periodically update the display with new data. Should I handle this within getDom or is there a better place to manage the periodic updates?

I have followed the basic template for a MagicMirror module; but I am unclear about best practices for splitting the API call logic and the display logic. Is it better to keep the API logic in the node_helper.js file; or can I handle everything in the main module file?

Also, I have gone through this post; https://forum.magicmirror.builders/topic/17644/a-workday-weather-module which definitely helped me out a lot.

Once the weather data is retrieved, what is the recommended method for applying custom CSS? Should I create a dedicated CSS file for my module, or are there predefined styles I should leverage to maintain consistency with the rest of the MagicMirror interface?

Thanks in advance for your help and assistance.

[sdetweil]

@Elizashahh you could develop a provider extension for the default weather module. then you don’t have to develop the ui.

there is doc in the MagicMirror documentation how to do that

as for periodically , getDom() is the correct way. so when you have new data, you tell MagicMirror , by calling updateDom(), to signal new data is available, and MagicMirror will call at getDom() or getTemplateData() (for modules using the display templating approach) to get it.

node helper is there to provide access to data the browser part cannot access directly, files, hardware, and some libraries. if you don’t have those constraints you don’t need to use it. currently the weather module is all in browser

css , there are very few styles MagicMirror defines.
you can see them in css/main.css

if you need more you should create your own css file with your styles, and provide its name on the return of the getStyles() function. MagicMirror will insert the file as a style sheet after main.css

custom.css is loaded last, and provides the ability to override anything defined before.

using the weather provider would eliminate a lot of this work, but you might not get the full learning for building a module

[sdetweil]

@Elizashahh i also didn’t add, you start a periodic timer (interval) to start fetching new data. then call
updateDom() when the data is ready to be used for the ui.

or start a one time timer, fetch data, call updateDom, then start another timer. this might cause a little drift in when you update.