DEV Community

loading...
Cover image for Unofficial dev.to iOS widget

Unofficial dev.to iOS widget

matthri profile image Matthias ・2 min read

Since version 14 iOS supports different home screen widgets which can display different useful information for your installed apps.
Wouldn't it be cool if you can create your own widgets to display some custom information? Good news, with the great Scriptable iOS app you can create your own scripts and widgets for iOS using pure javascript.

The widget 📱

Reading some dev.to articles are an integral part of my daily routine, so I thought wouldn't it be cool if I get a random article directly on my home screen.

So I made a little script which fetches a random article out of the top ten articles of the day on dev.to based on the tags I have subscribed to.
After that, the article details like title, author, profile image and tags are displayed in a medium-sized widget. You can see the final widget in the following image.
unofficial dev.to widget

Get the widget 🚀

If you want the widget on your home screen you will need to download the Scriptable iOS on your device. After that, you can create a new script inside the app and copy and paste the code from the following gist into your created script.

To fetch the dev.to articles you need to generate an API key in your dev.to settings and paste it at the beginning of the created script.
Now you can preview the widget by starting the script inside the Scriptable app.

Finally, you can add the widget to your home screen by adding a medium-sized Scriptable widget, after that you can configure the widget by long-pressing the empty widget and then choose the newly created script in the widget configuration.

I hope you like my widget, feel free to write to me if you encounter any issues or want to suggest some improvements.

Discussion (8)

pic
Editor guide
Collapse
cdthomp1 profile image
Cameron Thompson

Have you had much experience with the scriptable app?

Collapse
matthri profile image
Matthias Author

No it was the first time I created a widget with Scriptable but the API is very straightforward.
I plan to publish another article in the next few days on how to create iOS widgets with Scriptable if you are interested in that.

Collapse
cdthomp1 profile image
Cameron Thompson

In would be very interested! I found the Scriptable app last week but was intimidated to code on the phone. Are you able to develop on a desktop?

Thread Thread
matthri profile image
Matthias Author

The answer is it depends, when you use macOS you can use the Scriptable Mac Beta to code on desktop. Another solution could be the iCloud sync of Scriptable --> edit the script on your desktop inside the iCloud folder and test the automatic synced script on your iPhone (never tested the second solution myself)

Thread Thread
cdthomp1 profile image
Cameron Thompson

Thankfully I develop on a Mac! I will have to try that beta app out, thanks!

Thread Thread
matthri profile image
Matthias Author

It took a while because I had a few stressful weeks but now the article is finally ready.

FYI

Collapse
nro337 profile image
Nick Alico

Thank you so much for sharing! It works great!

Collapse
matthri profile image
Matthias Author

Hey Nick,
thanks for the kind reply, I'm glad you like it