Online courses are selling like hotcakes these days. From young entrepreneurs to seasoned professionals, everyone’s been churning out digital lessons and copyrighting what they have to say about success in their industries.
As such, marketplaces are on a record-high as the demand for content creators is soaring too. If you’re one who’s thinking about developing courses and selling them online, we’ve got you covered!
For this blog post, we’re teaching you how to publish your very own Skillshare-like course on the Bubble platform!
Let’s get started!
One of the biggest features of Bubble is the capacity to send data among pages. This enables users to create an open template of a page, then influentially display relevant content from your database, depending on whoever is looking at it.
For this how-to article, we’re cloning a pretend Skillshare site, so you’ll only need one page to host each course. We’ll then change the necessary logic to customize whatever we need to display onscreen, depending on who’s viewing your web app.
Configuring your database
To start, we’re going to need to accurately fill out the important data files to let your app work. To make the workflows function normally and speedily, we’ll have to make sure that we perfect what we fill out.
Bubble has a pre-built database that simplifies developing various types of data with unique fields. When establishing a database, it’s best to divide bigger items into separate data types to better your app’s speed.
For instance, rather than storing all your data for every course module in one property, we’ll divide them into separate data types, but circle them back to the same lesson.
Why?
Because we reduce the data amount Bubble will need to render when we fork these details as operate types of data, which means we only load whatever content is needed and necessary at the time.
Here’s what you need to remember when you’re building something like Skillshare:
(source: https://bubble.io/how-to-build)
Data type: User
Fields:
- Name
- Photo
- Purchased courses – List of courses.
Data type: Course
Fields:
- Title
- Description
- Price
- Featured image
- Published – Yes/no with no default
- Students – List of users
- Course modules – List of course-modules
- Reviews – List of reviews
Data type: Course-module
Fields:
- Module title
- Module description
- Module content
- Course – course
Data type: Review
Fields:
- Content
- Rating
- Course – course
Establishing workflows
Now that you’ve filled out the necessary fields correctly, it’s time to stick everything together to make your app work. The primary way to do this is with Bubble’s workflows.
Remember: every workflow happens when something is triggered, like when a user clicks a button. When this happens, a series of actions pop up in response to whatever the user clicked on.
Developing a course
The first feature you’ll have to think of is a way for you to create and publish your own courses to Bubble. On the upload-course page, begin by supplementing an array of input elements that enable you to establish your database. This is done so the first page can be used to support the course itself.
The objective is to trigger a new workflow when we click the “add modules” button. In this workflow, what we’ll do is “create a new thing” — this thing being a new course.
Now that we’ve made the course framework, we’ll add another event to the workflow to make sure we send a course creator to the following page where we can supplement a module list for the course.
Through a navigation event, we’ll lead the user to the “upload module” page to send it with established data from the course we already developed. Always remember to configure the type of content of a landing page when sending data to a page. This ensures that we match the data embedded in your workflow.
For this example, we’ll have to make sure the “upload module” page is a course type. Once the page type is completed, we’ll have to use a mix of input fields again to establish a new module within your course.
Below our page input, we’ll also have to display a module list added to the course. This is done by adding a repeating group element. When supplementing the repeating group, we’ll have to first establish the content type it’s displaying, which in this context is a course module.
Secondly, we’ll have to establish the data source to make sure it displays relevant course modules. To enable this, we’ll create a search for every course module where the course leads to the current page of the corresponding course.
When this is done, you can proceed to structure the preconfigured content that will be shown in every grid. Like many drag-and-drop editors, you’ll need to map out the top row with the content you want to preview. Once done, the element will populate the succeeding columns based on the data you put.
After all of that has been configured, a module list will be displayed in chronological order. this is the signal that we’re now ready to develop a workflow that supplements a new module to the course’s current page.
Furthermore, when an “add module” button is clicked, we’ll trigger another workflow. For this workflow, we can “create a new thing,” this new thing, once again, being a new module. then, similar to what we did earlier, we’ll begin by matching relevant data to on-page elements.
Once this module is added, it will instantly be shown in preview within the repeating group on our upload page. this may sound tedious, but fundamentally, every module you add follows the same steps.
After you add all of a course’s modules, you can publish your course by clicking the “publish button.”
By this time, our house modules and courses will have already been developed. That said, we’ll use the same workflow to make “changes to a thing.” What we’ll want to change specifically is the page’s current course to update the publish status to “yes.”
(All screenshots are from bubble.io)
For more information about building web apps on Bubble, feel free to give us a call!
