Prayer Times App in MIT App Inventor

Hello friends! Welcome to Obsidian Soft!

🌙 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! 📱✨

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!


In my previous weather app tutorial, users had to enter their city manually. But this time, we are making it even smarter! 🚀

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

Now, let’s begin. Open up MIT App Inventor. Go to projects. Start a new project. Let’s name it PrayerTimingsApp. Keep the toolkit default (super important).

For Screen1, make align horizontal center. Make the background color a custom dark green. Change title text to “Prayer Timings”. From user interface, drag and drop a spinner onto the viewer. Rename it to schoolPicker. Drag and drop a listview below this spinner.

 We also need some non-visible components:

  1.  A location sensor from sensors palette. 
  2. A web component from connectivity and 
  3. A tinyDB from storage for saving our preferred school.

Our simple screen design is done so let’s go to the blocks section.

We need 4 global variables:

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’s selection so that it is preselected.

Next, make an empty procedure for getting prayer timings.

Go to location sensor and get its location changed event. Call the getPrayerTimes procedure whenever location changed event is triggered.

Now, let’s work on the getPrayerTimes procedure. We set web1.url to a join of 4 things.

  1. https://api.aladhan.com/v1/timings?latitude=
  2. Location sensor’s latitude
  3. &longitude=
  4. Location sensor’s longitude

Be careful with the spellings.

Add an if/else if/else block from control. 

Check selection of school picker and choose method/school accordingly.

After this call, web1.Get.

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.

For Jafari i.e. Shia school , the method will be 0 and we will not provide a school.

Now, let’s work on the final part i.e. the Web1.gotText event where will decode the responseContent returned by API. let’s build it up slowly.

First, get the event and check that the responseCode =200. This means that there was no error from the API. 

Next, call Web1. JsonTextDecodeWithDictionaries procedure to decode the responseContent into a local variable called json.

Inside the local variable block, set the prayersDict by first getting the dictionary against key data from json dictinary and then using this dictionary to get dictionary against key timings.

Now, start getting prayer times for each prayer and adding each item to the prayerTimings list. At the end, provide this list to listview’s 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.

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.

You can also check out the video tutorial here:

Do like the video and share with friends and family and if you haven’t subscribed to my channel, kindly do so so that you don’t miss the great projects that I have planned for you. Thank you for watching. Ramadan Mubarak. Have a good day and good bye.

Please like my videos and share them with your friends and family. Also, subscribe to my channel and press the bell icon so you don’t miss any of the great projects I have planned for you.

https://www.youtube.com/c/obsidiansofteducation

Please like my social media pages for more educational resources and tips.

Facebook: https://www.facebook.com/ObsidianSoft/

Instagram: https://www.instagram.com/obsidiansoftapps/

For links to free educational apps, have a look at the educational apps page

Pinterest: https://www.pinterest.com/obsidiansoft/