Build your own CUSTOM iOS widgets directly on your iPad or iPhone
Vložit
- čas přidán 13. 06. 2024
- Learn how to build sophisticated custom widgets directly on your iPad or iPhone using the JavaScript programming language inside Scriptable.
In this video, we'll build four complete widgets, a simple Hello World example, an XKCD comics widget, a trash collection reminder widget and a PiHole monitoring widget.
You'll learn a little JavaScript along the way and we'll explore how to:
* layout text, icons and images
* pull data from the Internet
* interact with iOS services like Calendar
* control widget refresh
CHAPTERS
=========
* 00:00 - Custom iOS widgets
* 01:50 - Hello World Widget
* 04:14 - Display Your Widget
* 04:58 - Adding Background Colours
* 05:33 - Adding & Customising Text
* 08:32 - Background Gradients
* 10:32 - XKCD Widget
* 11:25 - Get Data from the Web
* 14:11 - Rendering Images
* 16:32 - Widget Refresh
* 17:49 - Interactivity
* 19:10 - Trash Reminder Widget
* 19:44 - Using Calendar Data
* 23:22 - Stack Layouts
* 24:34 - Formatting Dates
* 25:34 - Using SFSymbols
* 27:39 - Element spacing
* 29:13 - PiHole Monitor Widget
* 31:05 - Formatting Percentages
* 32:36 - Nested Stack Layouts
* 36:36 - Formatting Numbers
LINKS
=====
* Get Scriptable: scriptable.app/
GEAR
====
Camera: geni.us/Rbtab
Microphone: geni.us/O33Li
Audio interface: geni.us/eIov
Laptop: geni.us/BZoek0
Main Monitor: geni.us/k0DpoA
Second Monitor: geni.us/ydjX
iPad: geni.us/H0qJ
iPad Keyboard: geni.us/8uBg
AFFILIATE LINKS
==============
Tech Craft is a participant in the Amazon EU Associates Programme, an affiliate advertising programme designed to provide a means for sites to earn advertising fees by advertising and linking to Amazon.co.uk - Věda a technologie
THAAAAANKS, a whole week looking for a way to make my own widgets.
As a software engineer, this video has me super excited for the widgets I can make. For a while I have been asking for Amazon Photos to make a widget, similar to the stock Photos app. Fine I will just do it myself *insert Thanos voice* hah
This is a great demo. I've had Scriptable for a long time but not managed to take advantage of it as I couldn't marry up my existing understanding of JS with how to implement it with Scriptable. Now I can have a go. I actually created an iOS shortcut which gets the PDF of bin collections from my local council website and converts it to calendar entries like the one you have. Taking this to the next level with your widget example I reckon :)
Welcome back! Happy do see you go back to your tutorials for unusual apps and hacks!
So useful and so well explained. Thank you.
SUPER informative nuggets!
THANK YOU ROB!
Thanks very much for making this. I am looking forward to more of your scriptable videos.
Good stuff! Thank you for dedicating some/much of your time to sharing this with us!
Great explanations. Nice addon for my iPad ;-) Easy to follow for everyone. thanks.
Really great videos !! Thanks
Very good video! Thank you!
Great tutorial. Have been looking for tutorials on Scriptable app.
Wow! Scriptable always seemed a little “too much” for me to use. That is, until I stumbled upon your video! Thank you!
You do a fantastic job of explaining the complex nuances of code in a way that keeps it simple, on task, and easy to understand. In particular I appreciate that you left in all the typos and mistakes (like needing to add “await”). I learn the most my from mistakes; but I prefer to learn from someone else’s! LOL
Kudos from one cloud instructor to another!
After using android for more than 10 years, my main gripe about my iphone was the lack of custom widgets as can be done on android with apps such as KWGT Kustom Widget Maker. This tutorial helps me solve solve this! Thanks!
Thanks so much!
Great video ! It really got me thinking about how I could use this.
So many possibilities. I wish Apple made it easier to build for iOS on iOS, but with apps like this we can at least enjoy some creativity.
Nice video, looking forward for the custom MacOS widgets tutorial.
Thanks!
awesome content.
Great video. If anyone doing programming professionally still feels confused about a synchronous programming, they probably should look for a better use each of their time. By the way JSON stands for, as you said ,JavaScript object notation, which in turn means that you can use regular dot access method of JavaScript objects. “req.response” etc, it’s not like python. Thank you for putting together this detailed explanation
Thanks
Always love your videos I think we have a mutual friend from the HOOBS team 🙂 great news hope I can lean some more technical skills from you
We do indeed! I was chatting to them about the Hubitat after you mentioned it.
This video is super helpful! Would you give thought to doing another one? I’m looking for info that describes how to draw graphs and horizontal and vertical lines, such as if I wanted to do a calendar widget that shows events on a horizontal timeline.
I will add this to my backlog!
Nice one, Scriptable is really aswesome. I got myself 6 custom widgets, which 4 of them really useful to me.
Nice! Which ones are you finding most useful?
@@tech_craft My useful one is Daily data usage widget (which shows my telecom service data details like data left today and when my plan expires,etc)
Great tutorial but how can you work with shapes? I want to create easy status bar just two rectangles (with round edges) one rectangle on full screen of the widget and second rectangle inside the first one with dynamic width
Great video! This finally got me started. One thing I noticed is that your widgets didn’t have any text below them. Is that how it is on iPad? Because I get “Scriptable” below mine on the iPhone.
That's an iPad vs. iPhone thing. As far as I can tell, there's still no way to remove the text underneath home screen icons on the iPhone.
Is it possible to make a stopwatch widget?
Once I make a widget, is there a way to share it with others?
Can you create a widget to pull information from Google keep? Let's say a specific note?
how can you add an image on scriptable to apear on the background
I wish there was a way to get rid of the apps watermark.
Would I be able to create a widget that reads my account balance from Bank of America? What other commands would I use if i followed this guide?
To read account balances you'll most likely need access to whatever Application Programming Interface (API) your bank exposes. I had a quick search and found the BoA CashPro API: developer.bankofamerica.com/CPODevPortal/apidocs/public/#/home - not sure if this applies to all accounts.
That API has a reasonably clean endpoint for accessing balance data: developer.bankofamerica.com/CPODevPortal/apidocs/public/#/api/account-information/cashpro-reporting-v1-balance-inquiries-current-day-post
And you can access that using the same Request object like we did for accessing the Pi-hole stats in the video.
I am trying to setup a shortcut to open a link and fill out a covid questionnaire that I have to fill out everyday before work. Having trouble wondering if theirs a specific video you have on it that would help. Any help is appreciated thanks.
I don't have a specific video on that, but you're likely going to need to use the Safari JavaScript actions to automate filling in the forms.
U know mics go near ur mouth not near ur keyboard!?
13:57 it dont work for me
Why does the App Store have its own English. Why do we say apps on the App Store instead of i the App Store like you would for any other store would you say that jeans are available on Walmart or in Walmart? I bought it on the App Store or from the App Store. I bought that lettuce on the super market, not from the super market.
I wonder if it’s the physical vs. the virtual? I’d buy something on/from Amazon but in/at the supermarket 🤷🏻♂️
@@tech_craft true. I guess it's my age showing through. The internet was not alive during the first 3/4 of my life. Thanks for straightening me out.however I would say I bought something from Amazon, not on. It's confusing but you are right about the virtual thing, although I am not sure why. Language interests me. I used to get irritated by people changing Pronunciations etc, but no longer. Now I just wonder why more than anything.
"From" seems common across virtual and physical. I was thinking before that I'd say "From Walmart" and "From Amazon", but then "At/In Walmart" vs. "On Amazon", because I'm not actually at or in Amazon.
The notion of linguistic drift fascinates me. I've learned to embrace the idea, but early in my life it really irritated me too!
Ну, конечно же я поставил лайк. Очень приятный голос.