{"id":6286,"date":"2025-03-13T12:39:58","date_gmt":"2025-03-13T12:39:58","guid":{"rendered":"https:\/\/obsidiansofteducation.com\/?page_id=6286"},"modified":"2025-03-13T12:40:10","modified_gmt":"2025-03-13T12:40:10","slug":"prayer-times-app-in-mit-app-inventor","status":"publish","type":"page","link":"https:\/\/obsidiansofteducation.com\/index.php\/prayer-times-app-in-mit-app-inventor\/","title":{"rendered":"Prayer Times App in MIT App Inventor"},"content":{"rendered":"\n

Hello friends! Welcome to Obsidian Soft!<\/p>\n\n\n\n

\ud83c\udf19 Ramadan has begun in the Islamic world, and this year, I have an exciting new project for you! Last year, I showed you how to build a Qibla Compass app, and this time, we are creating a Prayer Timings app in MIT App Inventor! \ud83d\udcf1\u2728<\/p>\n\n\n\n

This idea was highly requested by many of my viewers, and it is a great way to impress your friends, teachers, or even add to your portfolio!<\/p>\n\n\n\n


<\/strong>In my previous weather app tutorial<\/a>, users had to enter their city manually. But this time, we are making it even smarter! \ud83d\ude80<\/p>\n\n\n\n

\u2705 Using the Location Sensor, the app will automatically detect the user’s longitude and latitude.
\u2705 We will send this data to an API (Adhan.com) to get accurate prayer timings.
\u2705 Since prayer times vary based on schools of thought (Shafi, Hanafi, Jafari), we will allow users to select their preferred school.
\u2705 For Shafi and Hanafi, we will use the Muslim World League (MWL) method.
<\/strong>We will be working with this API:https:\/\/aladhan.com\/prayer-times-api#get-\/timings\/-date-<\/a><\/p>\n\n\n\n

Now, let\u2019s begin. Open up MIT App Inventor. Go to projects. Start a new project. Let\u2019s name it PrayerTimingsApp. Keep the toolkit default (super important).<\/p>\n\n\n\n

For Screen1, make align horizontal center. Make the background color a custom dark green. Change title text to \u201cPrayer Timings\u201d. From user interface, drag and drop a spinner onto the viewer. Rename it to schoolPicker. Drag and drop a listview below this spinner.<\/p>\n\n\n\n

 We also need some non-visible components:<\/p>\n\n\n\n

    \n
  1. \u00a0A location sensor from sensors palette.\u00a0<\/li>\n\n\n\n
  2. A web component from connectivity and\u00a0<\/li>\n\n\n\n
  3. A tinyDB from storage for saving our preferred school.<\/li>\n<\/ol>\n\n\n\n

    Our simple screen design is done so let\u2019s go to the blocks section.<\/p>\n\n\n\n

    We need 4 global variables:<\/p>\n\n\n\n

    \"\"\/<\/figure>\n\n\n\n

    When the screen is initialized, fill up the schools list with 3 prominent Muslim schools of thought: Shafi, Hanafi and Jafari. Provide this list of schools to the school picker spinner. Also, load the chosen school from TinyDB. By default, it will be Shafi. This will be the case if the app is being used for the first time. Also, provide the chosen school to the spinner\u2019s selection so that it is preselected.<\/p>\n\n\n\n

    \"\"\/<\/figure>\n\n\n\n

    Next, make an empty procedure for getting prayer timings.<\/p>\n\n\n\n

    \"\"\/<\/figure>\n\n\n\n

    Go to location sensor and get its location changed event. Call the getPrayerTimes procedure whenever location changed event is triggered.<\/p>\n\n\n\n

    <\/p>\n\n\n\n

    Now, let\u2019s work on the getPrayerTimes procedure. We set web1.url to a join of 4 things.<\/p>\n\n\n\n

      \n
    1. https:\/\/api.aladhan.com\/v1\/timings?latitude=<\/a><\/li>\n\n\n\n
    2. Location sensor\u2019s latitude<\/li>\n\n\n\n
    3. &longitude=<\/li>\n\n\n\n
    4. Location sensor\u2019s longitude<\/li>\n<\/ol>\n\n\n\n

      Be careful with the spellings.<\/p>\n\n\n\n

      \"\"\/<\/figure>\n\n\n\n

      Add an if\/else if\/else block from control. <\/p>\n\n\n\n

      Check selection of school picker and choose method\/school accordingly.<\/p>\n\n\n\n

      After this call, web1.Get.<\/p>\n\n\n\n

      You can change method =3 for shafi and hanafi. Method 3 here means Muslim World League which I thought is a more universal method but you can go for ISNA too by making method =2.<\/p>\n\n\n\n

      For Jafari i.e. Shia school , the method will be 0 and we will not provide a school.<\/p>\n\n\n\n

      \"\"\/<\/figure>\n\n\n\n

      Now, let\u2019s work on the final part i.e. the Web1.gotText event where will decode the responseContent returned by API. let\u2019s build it up slowly.<\/p>\n\n\n\n

      First, get the event and check that the responseCode =200. This means that there was no error from the API. <\/p>\n\n\n\n

      \"\"\/<\/figure>\n\n\n\n

      Next, call Web1. JsonTextDecodeWithDictionaries procedure to decode the responseContent into a local variable called json.<\/p>\n\n\n\n

      \"\"\/<\/figure>\n\n\n\n

      Inside the local variable block, set the prayersDict by first getting the dictionary against key data <\/a><\/strong>from json <\/strong>dictinary and then using this dictionary to get dictionary against key timings<\/strong>. <\/p>\n\n\n\n

      \"\"\/<\/figure>\n\n\n\n

      Now, start getting prayer times for each prayer and adding each item to the prayerTimings list. At the end, provide this list to listview\u2019s elements. I copy pasted the prayer names from the API to avoid spelling mistakes. The key has to be exactly the same as given below to get the timings.<\/p>\n\n\n\n

      \"\"\/<\/figure>\n\n\n\n

      And we are done. This simple but elegant Prayer Timings app is done. I hope you enjoy making this app and customizing it with labels etc. as I know I have kept the screen design quite simple.<\/p>\n\n\n\n

      You can also check out the video tutorial here:<\/p>\n\n\n\n

      \n