No-code Social Media Post Scheduler

Introduction to Post Scheduling

In this Bubble tutorial video, I'm going to show you how you can make a post scheduler. I'm going to be demonstrating how you can have the user have an interaction with your app, but then a second step takes place later on at a date and time that either you specify or your user. This will be very useful if you're building an app which has got a feature like Buffer, where you want to schedule social media posts to go live on social networks. If you're looking to have a way for users to log into different social networks or other services through your app, then I'd really recommend you go and check out Pathfix. But in this video, we're going to be focusing on the scheduling elements.

Learning Resources

Before I launch into that, if you're learning Bubble, there's no better place to go than planetloko.com, where you can find videos just like this one to help accelerate your Bubble app development learning journey. Let's dive into this Bubble tutorial.

Setting Up the Page

We're going to put the essentials on the page, which is basically going to be a... Well, let's first of all set our page to align to parent, align this in the center. I'm basically just going to have a box where I can write a post and set a date and time. So make that a column. Let's just add a little bit of styling here using rows and columns. So 20, a bit of padding.

Creating Input Fields

Right, so we'll start with a multiline input. Set the width to 100% to make it responsive within its parent. I'll say here, write your post here. Then we need a date time picker. Now, you can use Bubble's built-in date time picker. That looks like this one, I think. But yeah, so you can use the Bubble's built-in date time picker, but there are other date time pickers available in the plugin store. And if you find Bubble's one a bit limiting, do go and check out those other date time pickers. Because here, I'm wanting to say date and time. Make it a little bit wider. Perfect, and then we'll have a button. So we'll say schedule post. Put in a little bit of a gap between all our elements.

Setting Up the Data Structure

Okay, so what I'm going to do is create the post at this point, and then change a status field on the datatype of my post so that it goes live at a later date. But that could be where you send it off to a social network using an API. This is going to translate well into a number of different scenarios. So this is an app that I've done quite a bit of testing with. So do I have a datatype called post? No. Let's create a datatype called post. And so post needs to have content. And then I'm going to have a yes/no field saying is live. That could mean published. So when they're created, I want to say no. And we'll also save the date. We'll save published date. Which is not text, of course, it's going to be a date.

Creating the Workflow

Okay, so when we create the post, let's create our datatype. Or rather an entry for that datatype. So create a new thing. Post. And we'll set our content. We don't need to set is live, but we will set our published date. So no, we won't. We'll set the published date when we actually publish it. Basically, the transferable skills here is what you do in a workflow on the page that your user triggers with a button press. And what you do when you actually run the scheduled action.

Setting Up Backend Workflows

So this is going to be our multi-line input. Right, now to the kind of the meat of it, which is how do you schedule something to happen? Well, you have limited scheduling tools on the page. You can schedule custom events, but that's relying on the user staying on the page because it's effectively run in the front end. If they leave the page and the steps haven't been completed, then the workflow gets broken. So we need to go in and add in a backend workflow. So backend workflows serve a number of purposes. In this one, we're basically wanting to say we want this to run on the server side regardless of what the user is doing.

Configuring the Backend Workflow

So I'll say schedule. No, it's going to be publish post. It doesn't need to be public. We don't need to check our privacy rules. And in order to know what we're working with, we need to pass our post into this workflow. So get a post. And this just means that this API workflow is set up to receive a post and then run actions based on any data that I can retrieve around that post. So the main thing I'm going to do is say this post is live and I change it to yes. And I shall save the publish date and say current date time. So we get a date stamp of when it actually publishes it.

Linking Frontend to Backend

So how do I link the front end form to this backend workflow? Let me go back to my page. I say schedule an API workflow. Here's the link between the front end and the backend. So I'll then say publish post. That's my workflow. Schedule date. Now I refer to my date time picker's value. And the post is the result of step one.

Testing the Scheduler

Let's preview that. So I'm going to write some content. This is a test. And I'm going to select, let's say two days time at 4.30. I'm going to click schedule post. Now there's loads of other UX UI things you can do here. You could show a toast notification. You could show how it elements. You could reset the input so that another user could add in another social post. But let's click schedule. And I'm going to show you how you can check that this works and you can debug it. So we'll go back into our app and we'll go into logs and we'll go into the scheduler. And now by clicking show, it's going to show me that, so there's 26th of February. Yes, on the 28th of February at 4.30 pm, that's going to publish.

Handling Time Zones

One final tip for the end of the video is that when you are dealing with date time pickers, it's going to be from the perspective of your user's time zone unless you override it. Bubble has got options where you can override time zones. But when I see as the editor 4 pm, that's because I'm also the user and I see 4 pm. Now if I was a user in a different time zone and you can use Chrome's developer tools to fake the time zone that you send to Bubble because that's all part of the data that Bubble and the browser exchange. So you can fake that. If I faked the hours in a different time zone, then I would see a different time printed in the editor as I set as the user because the editor is going to show the time for me, which I haven't faked. But if the user is faking their time zone or legitimately in a different time zone, then they're going to see a different time. But it would be the same time because it is all adapted based on time zone.

Conclusion

So there you go. That's how you can add in scheduling into your app and use it to create some sort of buffer clone or social media scheduling app.