MagicMirror Forum
    • Recent
    • Tags
    • Unsolved
    • Solved
    • MagicMirror² Repository
    • Documentation
    • 3rd-Party-Modules
    • Donate
    • Discord
    • Register
    • Login
    A New Chapter for MagicMirror: The Community Takes the Lead
    Read the statement by Michael Teeuw here.

    Develop module with API

    Scheduled Pinned Locked Moved Development
    42 Posts 6 Posters 13.1k Views 6 Watching
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • htilburgsH Offline
      htilburgs
      last edited by

      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!

      (still trying to learn JS, but not afraid to ask) ☺

      ? Mykle1M 2 Replies Last reply Reply Quote 0
      • ? Offline
        A Former User @htilburgs
        last edited by

        @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.

        1 Reply Last reply Reply Quote 0
        • Mykle1M Offline
          Mykle1 Project Sponsor Module Developer @htilburgs
          last edited by

          @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

          Create a working config
          How to add modules

          htilburgsH 1 Reply Last reply Reply Quote 0
          • htilburgsH Offline
            htilburgs
            last edited by

            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.

            (still trying to learn JS, but not afraid to ask) ☺

            ? 2 Replies Last reply Reply Quote 0
            • ? Offline
              A Former User @htilburgs
              last edited by 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

              1 Reply Last reply Reply Quote 0
              • ? Offline
                A Former User @htilburgs
                last edited by 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

                1 Reply Last reply Reply Quote 0
                • htilburgsH Offline
                  htilburgs @Mykle1
                  last edited by

                  @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 ;-)

                  (still trying to learn JS, but not afraid to ask) ☺

                  1 Reply Last reply Reply Quote 0
                  • htilburgsH Offline
                    htilburgs
                    last edited by

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

                    (still trying to learn JS, but not afraid to ask) ☺

                    htilburgsH 1 Reply Last reply Reply Quote 0
                    • htilburgsH Offline
                      htilburgs @htilburgs
                      last edited by

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

                      (still trying to learn JS, but not afraid to ask) ☺

                      1 Reply Last reply Reply Quote 0
                      • htilburgsH Offline
                        htilburgs
                        last edited by

                        @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?

                        (still trying to learn JS, but not afraid to ask) ☺

                        Mykle1M 1 Reply Last reply Reply Quote 0
                        • 1
                        • 2
                        • 3
                        • 4
                        • 5
                        • 1 / 5
                        • First post
                          Last post
                        Enjoying MagicMirror? Please consider a donation!
                        MagicMirror created by Michael Teeuw.
                        Forum managed by Sam, technical setup by Karsten.
                        This forum is using NodeBB as its core | Contributors
                        Contact | Privacy Policy