Apple iOS upgrade to iOS 14 recently, this update I more attention is the widget function upgrade, this update our team can be placed in any position of the main screen, can make us more convenient to check some information, thereby eliminating the need to open the APP to view the message step, the feeling is very convenient.

Some of you might look at this and say, well, that’s a nice feature, but it would be nice if I could make a widget myself that shows what I want to see. Yeah, what little boy wouldn’t want to have his own iOS widget.

Don’t panic, an APP was recently discovered that allows us to create our own widgets using JavaScript. The name of this APP is Scriptable, which proves Jeff Atwood’s statement that any APP that can be written in JavaScript will eventually be written in JavaScript. If you’re happy to be a front end and have a place to shine, get to know it while it’s still hot.

A brief introduction to Scriptable

To do a good job, we must first improve its tools. Let’s first understand the functions of Scriptable. From the introduction on the above official website, we can know that this APP can let us use JavaScript to automate iOS. What does that mean? That is, we can write some code in advance to perform certain tasks, such as getting the name and introduction of Trending items on GitHub, seeing the latest News on Hacker News, getting our own calendar, and our own TODO list. Of course, these are just some of the most basic usage scenarios, you must have your own ideas, after reading this article to implement a unique small application.

Listed above are some of Scriptable’s features, which include:

  • ES6 syntax is supported
  • Some native apis can be invoked using JavaScript
  • Siri Shortcuts
  • Perfect documentation support
  • Shared Table extension
  • File system inheritance
  • Editor customization
  • Code sample
  • And interact with other apps via x-callback-URL

Doesn’t it feel good? These features already allow us to do a lot of things that can be automated.

The preparatory work before starting

  • An iPhone upgraded to iOS 14
  • Install the Scriptable application

After downloading the app, we can see some examples already written:

Click the small card to directly run the corresponding program, click more buttons in the upper right corner of the small card to enter the code editing mode of the corresponding program.

There is a floating action bar at the bottom, the first button on the left is a Settings button, you can set the icon, color, etc for the current applet:

The second button on the left is a document prompt button that can be clicked to search for the relevant API you want to use:

On the far right is a run button that will launch your application directly on the phone. You should know this at a glance:

I thought it would be hard and demanding to write code through the editor on the phone, but I gave it a try and it worked fine. Because the editor on the phone also has better syntax hints, the experience of writing code is not as comfortable as it is on the computer, but it is still acceptable.

Here are some brief introductions about Scriptable APP, you can try it yourself on your phone. I think the whole APP is very simple, but the function is very powerful.

The first Hello World widget

Our first step in learning a programming language is to print Hello World, so our first small application using Scriptable is to display Hello Wolrd on the home screen.

I personally think it’s worth developing a Hello World widget before you can actually develop the widget you want, because it’s a relatively easy process and increases confidence. We can use this small program to establish the feel of our development team, and we can directly see the result on the screen of the phone, isn’t it quite a sense of achievement.

There are several options for coding. You can choose to code directly in your phone’s editor, or you can use your familiar editor on your Mac using the Mac’s iCloud sync feature. If you have a Bluetooth keyboard, you can use the Bluetooth keyboard to connect to your phone and use your own keyboard to encode. Choose a comfortable way to code based on your conditions.

Here is the code for the Hello World widget:

// Variables used by Scriptable.
// These must be at the very top of the file. Do not edit.
// icon-color: cyan; icon-glyph: greater-than-equal;

// The following code is for learning communication only

// Check if it is running in a desktop component
if (config.runsInWidget) {
  // Create the widget
  const widget = new ListWidget();
  // Add text
  const text = widget.addText("Hello, World!");
  text.textColor = new Color("# 000000");
  text.font = Font.boldSystemFont(36);
  text.centerAlignText();
  // Add gradient background
  const gradient = new LinearGradient();
  gradient.locations = [0.1];
  gradient.colors = [new Color("#F5DB1A"), new Color("#F3B626")];
  widget.backgroundGradient = gradient;
  // Set the component
  Script.setWidget(widget);
}
Copy the code

The above code is relatively simple, I believe you will understand. Let me make a brief introduction. The comments at the beginning are generated by Scriptable itself, which are used to set the ICONS and colors of the small cards. The next if judgment indicates that we want the following code to run under widget conditions to generate our widget.

Then the next step is to create the widget, add the text, and set the color, font, and alignment of the text. I then added a gradient background and finally set the widget generated above with script.setwidget (). That completes our Hello World widget.

The “What’s for today” widget

Maybe after five minutes you’re not satisfied with a simple Hello World widget, and you know you’re on your way to stardom, so you need to make something that has real application value. But you’re working late at night and want to treat yourself to a midnight snack. But are you obsessed with what to eat?

Look at the fried noodles and shandong mixed grain pancake and baked cold noodles downstairs, you are torn about what to eat. So to save time I decided to create a widget to help you choose what to eat. Call it “What to eat today”.

Isn’t it tempting to look at the component icon? When you are not sure what you want to eat, click on this widget, and then the program we wrote will run, it will list the options you want to eat in the panel, you click to choose, immediately know what you want to eat, whether to solve your hesitating state of eating.

In order to tell you clearly what the choice is this time, I specially send you a notice of the choice result after the choice, is it very humanized 😂, you must also find out why the name of the food does not match the picture. Yes, I did this on purpose to create the illusion that you are about to eat a big meal 😁.

Here’s a GIF to get a feel for the process ahead of time:

Since I had some experience in helping colleagues develop native iOS using Swift, some of the apis related to native iOS seemed familiar to me and easy to use. Even if there is no relevant development experience, it does not matter, after all, the documentation for the relevant API explanation is still clear, I believe you can quickly use a look.

Because this widget is a little bit more code, I won’t show it here; If you are interested, you can see the source code part of this widget in Scriptable-scripts. It was written in a hurry, and there are a lot of areas that can be improved. If you have any good ideas can also put forward, we study together progress.

Some thoughts on small parts

After updating iOS 14, I found that many apps on the phone have added related widgets, which enables users to quickly browse some key information and direct to specific services. It’s very helpful for users.

There are also new opportunities for developers. Even without native iOS development, widget platforms like Scriptable can be used to create interesting, valuable, and meaningful widgets.

Have you noticed that widgets are similar to applets in any way? It feels like there will be a system-level “mini app” platform in the future. If Android and iOS get a unified development platform, front-end developers will be able to sail further.

Learning and Communication

If you are interested in using Scriptable to develop widgets, you are welcome to join the Scriptable widget exchange group for discussion.

This is the end of the article, if you have any comments and suggestions welcome to leave a message to me. You can also follow my public account guanshan is not difficult to yue, you can timely get the latest fun and interesting article updates.

Note: The icon for the ‘What’s for today’ widget is from undraw.co/, and the image of the food is from unsplash.com/. The author of each image is noted in the code’s comments.