Develop module with API

htilburgs

Hi all,
Let me start saying, I’m a new MM enthousiast. I’ve several ideas for a new MM Module, but I’m not a programmer. I can read the javascript en mostly I understand how it works, but writing my own is going to be the first time.

I like to build one from scratch and started with Head first developing mm module for extreme beginners.

Now I’m trying to go further and in particular using an API to:

Get data from a site (in JSON format)
Extract the correct data from the JSON result
Display the extracted data nicely in de module

I’m reading Javascript for Dummies, I’ve been looking on the forum and looking into existing modules, but I’m not getting there. The question is:

Is there a template or are there sites/instructions on how to get started with what I like to do so, I can get started and figure it out (with or without the awesome support of this forum? I hope to hear from somebody!

A Former User

@htilburgs
You need to check this first.

Does API exist? (First, API should exist, of course there could be many tricks without API - screen scrapping, crawling, … but could be hard for novice.)
Is API opened publicly or reachable? (Some APIs are blocked or limited. By example, To use Some Apple related things, you should be registered as a devloper with payment. In that case, that module will have some barrier to other ppl to use)

The design of each API is very different each other. So, there is no royal road to use API basically.
The best practice is analyzing other’s module. Many MM modules are using various APIs.
Describe here what API to use, and jump headfirst. Ppl will help you gladly.

Mykle1

@htilburgs

Have a look at this. It is a very simple module meant to teach someone to do exactly what you described in your post.

https://github.com/mykle1/MMM-UFO

htilburgs

Thanks for the reply.
I’ve an api for getting the Prayer Times.

http://api.aladhan.com/v1/timings/19-03-2019?latitude=51.508515&longitude=-0.1254872&method=2

In this case there a 4 parameters: date, latitude, longitude and method.
The result is a json file

{"code":200,"status":"OK","data":{"timings":{"Fajr":"04:34","Sunrise":"06:06","Dhuhr":"12:08","Asr":"15:23","Sunset":"18:11","Maghrib":"18:11","Isha":"19:44","Imsak":"04:24","Midnight":"00:09"},"date":{"readable":"19 Mar 2019","timestamp":"1552953600","hijri":{"date":"12-07-1440","format":"DD-MM-YYYY","day":"12","weekday":{"en":"Al Thalaata","ar":"\u0627\u0644\u062b\u0644\u0627\u062b\u0627\u0621"},"month":{"number":7,"en":"Rajab","ar":"\u0631\u064e\u062c\u064e\u0628"},"year":"1440","designation":{"abbreviated":"AH","expanded":"Anno Hegirae"},"holidays":[]},"gregorian":{"date":"19-03-2019","format":"DD-MM-YYYY","day":"19","weekday":{"en":"Tuesday"},"month":{"number":3,"en":"March"},"year":"2019","designation":{"abbreviated":"AD","expanded":"Anno Domini"}}},"meta":{"latitude":51.508515,"longitude":-0.1254872,"timezone":"Europe\/London","method":{"id":2,"name":"Islamic Society of North America (ISNA)","params":{"Fajr":15,"Isha":15}},"latitudeAdjustmentMethod":"ANGLE_BASED","midnightMode":"STANDARD","school":"STANDARD","offset":{"Imsak":0,"Fajr":0,"Sunrise":0,"Dhuhr":0,"Asr":0,"Maghrib":0,"Sunset":0,"Isha":0,"Midnight":0}}}}

I like to filter on the first object “timings” (Fajr until Midnight) and present this information in a table on the Mirror (HTML layout comes later)

I’ve been looking in other modules and trying to learn, but some use node_helper, some don’t and I’m a littlebit stuck right now.

A Former User

@htilburgs
If your API can be reached simply (without authentification, or any other dependencies), You can use xmlHttpRequest to get contents of specific URL in your main module js.
When you need that result of API, Use this logic. (It’s better to make function. but here is just example)

var url = "http://api.aladhan.com/......"
var req = new XMLHttpRequest()
req.overrideMimeType("application/json")
req.open('GET', url, true)
req.onload  = () => {
   var jsonResult = JSON.parse(req.responseText)
   // do your job with jsonResult
   console.log(jsonResult)
}
req.send()

See https://www.w3schools.com/xml/xml_http.asp to learn about XMLHttpRequest

A Former User

@htilburgs
Then, you can access the jsonData like this; (This will be your main job)

...
var Fajr = jsonResult.data.timings.Fajr
console.log(Fajr)

last, you can print it MM screen with .getDom()(You should call .updateDom() to update screen) or DOM manipulation.

...
this.dataToShow.Fajr = jsonResult.data.timings.Fajr
...


getDom : function() {
  var dom = document.createElement("div")
  if (this.dataToShow) dom.innerHTML = this.dataToShow.Fajr
  return dom
},

I’m skipping many things. This is just hint or sample. Remains will be your homework. :D

htilburgs

@Mykle1 @Sean
Both thanks for the quick reply.
For now I’ve information that I can use to start.
If there are any questions, I know where to be ;-)

htilburgs

I used the example from MMM-UFO, and started the module.
How can I check if there is data from the API URL?

htilburgs

Oke, got it. I had to add some console.log settings…:flushed_face:

htilburgs

@Mykle1 I’m using MMM-UFO as example and trying to figure out. I’m getting somewhere but… The data is retrieved through the api and this is the result:

Asr: "16:01"
Dhuhr: "12:46"
Fajr: "05:12"
Imsak: "05:02"
Isha: "20:21"
Maghrib: "18:49"
Midnight: "00:46"
Sunrise: "06:44"
Sunset: "18:49"

The module is generated on the MM

alt text

But as you can see, it cannot read or display the data in the correct way.
This is the code that I use to get the data from the resultset.

// Fajr from data
var mptFajr = document.createElement("div");
mptFajr.classList.add("small", "bright", "fajr");
mptFajr.innerHTML = "Fajr : " + MPT.Fajr;
wrapper.appendChild(mptFajr);

I can’t figure out what the problem is. It seems have something to do with the time-string that is returned. But whatever I try, no luck. Any idea?

Mykle1

@htilburgs said in Develop module with API:

mptFajr.innerHTML = "Fajr : " + MPT.Fajr;

Is this correct? MPT.Fajr above? Not mpt.Fajr?

sdetweil

@Mykle1 it’s not json format. Same problem as your PC stats

htilburgs

@Mykle1, @sdetweil ,
Looking at the website from the API Prayer Times API, the result are all displayed in JSON

The API has several endpoints to assist developers. Note that all the endpoints return JSON and are available over http and https.

I’ve looked at the code again and it should be MPT.Fajr.
I’ve made the module public on github, so you can take a look if you like.
MMM-MyPrayerTime

Meanwhile I’m trying to solve it…

A Former User

@htilburgs

I don’t know what you exactly want,
but ,
Instead

var MPT = this.MPT[Keys[this.activeItem]];

Use this;

var MPT = this.MPT

You can get above picture.

htilburgs

@Sean,
This is what I want. Thanx for the quick reply!

Can you tell me what is the difference in the code?

This was an example from the MMM-UFO where information is rotated.
Because I don’t need it, I’m going to cleanup.

A Former User

@htilburgs
Well, I don’t know what exactly you’ve tried, so difficult to tell what was wrong.
But,
You’ve already gotten timings from response of API in node_helper.js, and transfered it to your main module.

var result = JSON.parse(body).data.timings;

So your this.MPT might have this object structure;

{
      "Fajr":"04:06",
      "Sunrise":"05:35",
      "Dhuhr":"11:39",
      ...
}

So, All you need is just refer it like this.MPT.Fajr.

htilburgs

@Sean,
Thank you for explaining and pointing me out.
I understand what was the issue. I’ve cleaned up the code and removed the caroussel part (and unneeded variables), because I don’t use that.

Added the possibility for showing or not showing some items.
Up to the next part… HTML Markup

htilburgs

Strugling with formatting. When I use the basic code, I got the result I like but it’s not displayed nice. I like to have 3 columns.

		var MPT = this.MPT;
		
		// Creating the div's for your data items
		var top = document.createElement("div");
		top.classList.add("list-row");

		// Fajr from data
		var mptFajr = document.createElement("div");
		mptFajr.classList.add("small", "bright", "Fajr");
		mptFajr.innerHTML = "Fajr : " + MPT.Fajr + " الفجر";
		wrapper.appendChild(mptFajr);			
			
		// Sunrise from data
		if (this.config.showSunrise != false) {
		    var mptSunrise = document.createElement("div");
		    mptSunrise.classList.add("small", "bright", "Sunrise");
		    mptSunrise.innerHTML = "Sunrise : " + MPT.Sunrise + " شروق الشمس";
		    wrapper.appendChild(mptSunrise);
		}
		// Dhuhr from data
		var mptDhuhr = document.createElement("div");
		mptDhuhr.classList.add("small", "bright", "Dhuhr");
		mptDhuhr.innerHTML = "Duhr : " + MPT.Dhuhr + " الظهر";
		wrapper.appendChild(mptDhuhr);

		// Asr from data
		var mptAsr = document.createElement("div");
		mptAsr.classList.add("small", "bright", "Asr");
		mptAsr.innerHTML = "Asr : " + MPT.Asr + " العصر";
		wrapper.appendChild(mptAsr);
			
		// Sunset from data
		if (this.config.showSunset != false) {
		    var mptSunset = document.createElement("div");
		    mptSunset.classList.add("small", "bright", "Sunset");
		    mptSunset.innerHTML = "Sunset : " + MPT.Sunset + " غروب الشمس";
		    wrapper.appendChild(mptSunset);
		}
			
		// Maghrib from data
		var mptMaghrib = document.createElement("div");
		mptMaghrib.classList.add("small", "bright", "Maghrib");
		mptMaghrib.innerHTML = "Maghrib : " + MPT.Maghrib + " المغرب";
		wrapper.appendChild(mptMaghrib);
		
		// Isha from data
		var mptIsha = document.createElement("div");
		mptIsha.classList.add("small", "bright", "Isha");
		mptIsha.innerHTML = "Isha : " + MPT.Isha + " العشاء";
		wrapper.appendChild(mptIsha);
			
		// Midnight from data
		if (this.config.showMidnight != false) {
		    var mptMidnight = document.createElement("div");
		    mptMidnight.classList.add("small", "bright", "Midnight");
		    mptMidnigh

alt text

Now I trying for several hours to figure out how to create table, columns, rows…
I’ve changed the code part to

		var MPT = this.MPT;

		var logs = document.createElement("table");
		var callWrapper = document.createElement("tr");
		callWrapper.classList.add("small");
		
		// Fajr
		var FajrTextCell = document.createElement("td");
		FajrTextCell.className.add = "xsmall bright fajrtext";
		FajrTextCell.innerHTML = "Fajr";
		callWrapper.appendChild(FajrTextCell);
		
		var FajrTimeCell = document.createElement("td");
		FajrTimeCell.className = "xsmall bright fajrtime";
		FajrTimeCell.innerHTML = MPT.Fajr;
		callWrapper.appendChild(FajrTimeCell);
		
		var FajrArabCell = document.createElement("td");
		FajrArabCell.className = "xsmall bright fajrarab";
		FajrArabCell.innerHTML = "الفجر";
		callWrapper.appendChild(FajrArabCell);

		logs.appendChild(callWrapper);
		wrapper.appendChild(logs);
		return wrapper;

The result for 1 item is nice

alt text

But when I repeat this for the other items, no rows are created and everything is on the same row.

		var MPT = this.MPT;

//Table Test

		var logs = document.createElement("table");
		var callWrapper = document.createElement("tr");
		callWrapper.classList.add("small");
		
		// Fajr
		var FajrTextCell = document.createElement("td");
		FajrTextCell.className.add = "xsmall bright fajrtext";
		FajrTextCell.innerHTML = "Fajr";
		callWrapper.appendChild(FajrTextCell);
		
		var FajrTimeCell = document.createElement("td");
		FajrTimeCell.className = "xsmall bright fajrtime";
		FajrTimeCell.innerHTML = MPT.Fajr;
		callWrapper.appendChild(FajrTimeCell);
		
		var FajrArabCell = document.createElement("td");
		FajrArabCell.className = "xsmall bright fajrarab";
		FajrArabCell.innerHTML = "الفجر";
		callWrapper.appendChild(FajrArabCell);
		
		// Sunrise
		var SunriseTextCell = document.createElement("td");
		SunriseTextCell.className.add = "xsmall bright sunrisetext";
		SunriseTextCell.innerHTML = "Sunrise";
		callWrapper.appendChild(FajrTextCell);
		
		var SunriseTimeCell = document.createElement("td");
		SunriseTimeCell.className = "xsmall bright fajrtime";
		SunriseTimeCell.innerHTML = MPT.Sunrise;
		callWrapper.appendChild(SunriseTimeCell);
		
		var SunriseArabCell = document.createElement("td");
		SunriseArabCell.className = "xsmall bright sunrisearab";
		SunriseArabCell.innerHTML = "شروق الشمس";
		callWrapper.appendChild(SunriseArabCell);		

		logs.appendChild(callWrapper);
		wrapper.appendChild(logs);
		return wrapper;

alt text

Any help to get me on the right track again?

A Former User

@htilburgs
Insert “tr” element after each row.

htilburgs

Don’t I do this with this?

var callWrapper = document.createElement("tr");
callWrapper.appendChild(FajrTextCell);