Build a Social Media App in 60 Minutes Using Low Code
How much time do you think you would need to build a simple social media app? And what technologies do you think you need expertise in? Do you know you can make an awesome social media app in under two hours? An app that you can use to manage your own photos and like your friends’ photos? An app you can download and install on your mobile phone, just like other social media apps?
You can quickly and easily build an app like this using a low-code application platform. And you can do it without being an expert in a vast array of technologies or writing hundreds of lines of code. You can build compelling apps for various use cases using declarative wizards provided by the low-code application platforms.
The graphic shows an example of a social media app built using a low-code application platform.
What Exactly Does This Social Media App Do?
The goal is to build a simple social media app with the following functionality:
- Users can post photos by selecting and uploading them from their local device and adding a comment with those photos.
- The users can also scroll and see what their friends have posted, like their pictures and keep count of the likes on each image.
You can quickly build a social media app like this using a low-code application platform, in this case, Oracle APEX. Focus on your application requirements and let the platform do the heavy lifting.
Once the app is ready, you can continue to use the low-code capabilities of Oracle APEX to add new app features like push notifications, adding comments on friends’ pictures, etc. It can handle a range of use cases, from spreadsheet replacement to mission-critical, highly scalable enterprise systems.
Build a Social Media App Using Oracle APEX, Step by Step
Build the Data Model
Low-code platforms provide the tools necessary to be productive and deliver on time. Oracle APEX provides the Quick SQL utility to rapidly design and prototype data models using a markdown-like shorthand syntax that expands to standards-based Oracle SQL. Quick SQL is designed to reduce the time and effort required to create SQL tables, triggers and index structures.
Let’s first understand this application’s data model. The data model includes two tables — a table for the posts and a table for the reactions to the posts. These tables each have a primary key and a foreign key relationship linking reactions to posts. A constraint is added to ensure users can only react to a post once. In this example, we prefix our database objects with SM_ (short for social media), as shown in the following model:
The graphic shows the data model for the APEX social media application.
The Quick SQL shorthand syntax you use in this example (it is essential to maintain the tabbing so that all the objects get generated) can be something like this:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
# prefix: "sm_" # apex: true posts /auditcols post_comment vc4000 file_blob blob file_mime vc255 file_name vc255 lat num lon num reactions /auditcols post_id /fk posts reaction vc16 lat num lon num |
Using Quick SQL, generate the SQL, save it in a script and then run it to create the required database objects.
The graphic shows the Quick SQL interface, where you enter the shorthand syntax, generate SQL and save the SQL script.
Since we prefer that users react to a post only once, we need to add a constraint to the SM_REACTIONS table. You can create the same declaratively using a simple wizard by navigating to the Object Browser component in SQL Workshop. The Object Browser component lets you use a tree control to view database object properties and create new objects. Now that the data model is ready, let’s build the application.
Build the Basic Application
To start building the app, you have different options. You can sign up for an Oracle Cloud Free Tier account and then either create an Always Free APEX Service or provision an always-free version of Oracle Autonomous Database. You can also request a free workspace on apex.oracle.com or stand up your APEX instance locally. Once a service is available, you need to create an APEX workspace and can then start building applications using the declarative Create App Wizard. As a low-code application platform, Oracle APEX includes intelligent wizards to guide you through rapidly creating applications and components.
The social media app we are building in this example is a single-page app. Create a blank application using the Create App wizard with just the Home page. Name the app APEX SocialMedia. Change the Home page name to Timeline. Select the Install Progressive Web App checkbox in the Create App Wizard to allow the app to be installed on a device as a progressive web application (PWA). Using modern web APIs, PWAs give users an experience that looks and feels like a native app. This application will look great on either desktop or mobile devices.
The graphic shows the Create App Wizard. You update the homepage name as Timeline and select the Install Progressive Web App feature checkbox.
Next, you take advantage of low-code development by declaratively customizing the APEX social media app. You use Page Designer to maintain and enhance the pages within the application. Page Designer is a full-featured integrated development environment (IDE) with a toolbar and multiple panes. In this example, open the Timeline page in Page Designer and remove the navigation menu from the page first.
The graphic shows the Timeline page opened in Page Designer. You remove the navigation menu from the page by turning on the Override User Interface Level switch.
The graphic shows the Timeline page opened in Page Designer. You remove the default breadcrumb.
Since our app is a single-page app, we do not need a breadcrumb bar at the top. Let’s go ahead and delete the default breadcrumb as well.
With the navigation list and the breadcrumb removed, we have a nice clean slate to proceed with. When you run the application, it should look like this:
The graphic shows the basic application built using Oracle APEX.
Build the Form Inline Dialog to Add and Submit a Post
Each application page consists of regions, page items and buttons. A region is an area on a page serving as a content container. A page can have any number of regions. An item is part of an HTML form, such as a checkbox, date picker, file browse field, popup list of values (LOV), select list, text field, text area, etc. Page items are placed on a page and have associated user interface properties. APEX allows you to add these components by dragging and dropping them from the Gallery within the Page Designer. You can also add components to a page using the Gallery context menus.
Next, let’s build page regions within this application. In this example, we need a Form region and a Cards region. The Form region will present a UI enabling users to choose an image file from their device (or take a picture on mobile) and enter an associated comment for the post.
1. First, navigate to Page Designer, and create a Form region on the Timeline page. The source of this Form Region should be the SM_POSTS table we made from the Quick SQL script earlier. We now have a Form that labels the columns as input fields that support keyboard entry.
The graphic shows the Form region with the SM_POSTS table as the source. APEX populates the available columns from the table as page items in the Form.
The graphic shows how to delete unnecessary page items in the Form region.
2. But it still needs to save something and needs some tweaking. These columns resulted in page items being placed on the page inside that Form region. The Form doesn’t need some page items; a couple need to change their type. To clean up the Form UI, delete the unnecessary page items and hide the Lat and Long page items. Next, change some parameters of the remaining page items on the Form.
3. There is a page item to post user comments. Change the type of this page item to Text Field and label it as Post. There is a page item whose source is a database column of type BLOB. Change the type of this page item to File Browse and then configure other attributes as appropriate.
The graphic shows configuring the P1_FILE_BLOB page item attributes.
4. Initially, the Form should not be visible to the user. We must change the Form settings to hide it from view when the page is loaded. Update the Form region attributes. For example, switch the Template to Inline Dialog and configure other attributes for appearance. The Form region is an inline dialog now and will be hidden on page load. Inline dialogs must be opened by a button click (or with custom JavaScript), so we’ll need to create that button.
The graphic shows configuring the Form region properties.
5. Next, create the Add Post button that will be used to make this Form visible to the user as a modal form. To make this button open the inline dialog, we need to create an on-click dynamic action. Dynamic actions in Oracle APEX enable developers to define complex client-side behavior declaratively without needing JavaScript.
The graphic shows configuring the Add Post button properties and creating a dynamic action.
6. We now need a button, Submit Post, that will allow the user to save their post. We also need another dynamic action and a page process that does the work to enable the Form to save the new post data. A page process in APEX performs an action at a specified point during the rendering or submission of the page. In response to a user clicking the Submit Post button, we need to configure our page with a process for the Form.
The graphic shows creating and configuring the Submit Process to insert a new record into the SM_POSTS table.
7. The Form will now insert records into the SM_POSTS table, but we cannot yet see them on the page. However, you can run the app, select an image file (or take a picture with your mobile phone), add a comment and click the Submit Post button to insert a record.
The graphic shows the Posted message to confirm the post that has been submitted using the Form dialog.
Build the Cards Region to Display the Posts
Next, we need a Cards region to display the posts. A Cards region supports declarative customization of layout and appearance, and the inclusion of icons, badges, media and actions. You can use Cards to embed and share media sourced from a BLOB column, URL or video in iFrame.
Let’s create a Cards region on the Timeline page. The Cards region will show photos or images in a grid format as they’re posted into the SM_POSTS table through the Form region. The cards region will also serve as our scaffolding for other features, such as displaying the post comment, reaction counts, buttons for reacting to/liking a post and enabling users to delete their posts.
The source SQL query for this Cards region fetches data from the SM_POSTS and the SM_REACTIONS tables. In the next step, we must configure which columns from the query results will be used in which parts of the Cards.
The graphic shows configuring the Cards region attributes.
After configuring the attributes of the Cards region, you should be able to run the page. If you made a post earlier, you should see your image and comment text.
The graphic shows the Cards region with a post that has been submitted and includes an image and a comment.
Add the Like and Delete Buttons
Next, we need to customize the Cards region by adding two buttons: Like and Delete. The Like button will display the current likes count next to a heart icon. The user will be able to see the number of likes in total, and they will be able to click the button and add their like to the post. If the user has already liked the post, clicking it again will remove the like. We also need to create a button for deleting posts, and add a condition to this button so that it only displays for posts that belong to the logged-in user.
1. To create a link from a Cards page, you create an Action and then select an Action type. In the Page Designer, for the Cards region, create an Action. For the label, enter &REACTIONS. (including the period). This is called APEX string substitution syntax, and it will render the count of reactions as the label for this button on each post. The REACTIONS column is defined in the SQL query source for this Cards region. Set the Link type to Redirect to URL. We need the LIKE button to have a URL that can be linked to JavaScript later so that the database operation can be performed. The target URL can be, for example, #action$like?id=&ID. (including the period).
2. Update the Appearance attributes as appropriate. For example, select Text with Icon for display type and enter fa-heart &USER_REACTION_CSS. (including the period) for Icon. Note that the USER_REACTION_CSS column is defined in the SQL query source for this Cards region. For the CSS classes property, enter js-heart-button, which will be used by our dynamic action JavaScript later.
The graphic shows creating the Like button and configuring its attributes.
3. Now, create another action with the label Delete. Again, set the Link type to Redirect to URL. The target URL can be, for example, #action$like?id=&ID. (including the period).
4. Update the Appearance attributes as appropriate. For example, select Icon for Display Type and enter fa-trash-o for icon. Next, enter the expression :USER_NAME=:APP_USER for the server-side condition. This server-side condition controls whether this button shows for a card. The expression will compare the query column value returned to the currently signed-in APEX user. The colon-prefixed “variable” syntax is called the “bind variable syntax” in PL/SQL (Procedural Language extensions to SQL). If it evaluates to true (for each row or card), then APEX will render the button. Otherwise, the button is not visible.
The graphic shows creating the Delete button and configuring its attributes.
5. We must provide the APEX page with the custom JavaScript invoked by the URL from the Cards button target link to the dynamic actions we will create in the subsequent steps. For example, update the JavaScript section of the page properties with the code something like:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
apex.actions.add([{ name: "like", action: (event, element, args) => { apex.items.P1_ACTION_ID.value = args.id; apex.event.trigger(document, 'action-like'); } }, { name: "delete", action: (event, element, args) => { apex.items.P1_ACTION_ID.value = args.id; apex.event.trigger(document, 'action-delete'); } }]); |
6. We need the Page Item P1_ACTION_ID on the page so that the above JavaScript can store the particular CARD ID when a user clicks either button, which will execute the like or the delete operations from the URL link targets. This is a design pattern using a single APEX JavaScript API call (on page load) with an array of multiple code blocks as parameters. Each respective JavaScript block will then, in turn, call a custom event, which we will configure our dynamic actions to respond to in the next task. In the Page Designer, create the P1_ACTION_ID page item as hidden, and the Value Protected switch must be turned off. The app is almost ready!
The graphic shows the card’s region with a post that has been submitted along with the Like and Delete buttons.
Add Dynamic Actions
Both the Like and Delete buttons are available on the cards, but clicking these buttons does not currently have any visible effect. Behind the scenes, the URL Link targets call the JavaScript on the page and set the P1_ACTION_ID. But we must create a dynamic action with a custom event for each button. This design pattern dramatically simplifies the amount of JavaScript required to make the magic happen.
First, create a dynamic action with a custom action-like event. We need to configure the True actions for the action-like dynamic action. We need two True actions to:
- Update the UI on the client with either one more or one less Like (using a little JavaScript code).
- Invoke the database work necessary to record the desired state for the user for the corresponding post (using a little PL/SQL code).
The graphic shows a dynamic action with a custom action-like event and the two True actions configured for this Dynamic Action.
We need to create a dynamic action with a custom “action-delete” event to enable users to delete their posts. We need to configure the True actions for the action-delete dynamic action. There are three actions desired here:
- Confirm deletion.
- Invoke the database work necessary to delete the desired post (using a little PL/SQL code).
- Update the UI on the client by removing the deleted post.
The graphic shows a dynamic action with a custom action-delete event and the three True actions configured for this dynamic action.
You can now delete your own posts.
The graphic shows the Cards region with a post. Clicking the Delete button will open the delete confirmation dialog.
Improve the Appearance of Your App
Let’s fine-tune the app to improve its look and feel. This needs a little bit of CSS. When we like a post, we should be able to see the heart icon in red. Also, if we are using this app on a small screen (like a mobile device), it would be better to relocate the Add Post button to the bottom right of the screen. We can do this with two small blocks of inline CSS on the page level.
To do this, update the CSS > Inline section of the page properties with the CSS code below:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
.user-has-liked { color: red; } @media (max-width: 640px) { .new-post-button { position: fixed; bottom: 24px; right: 24px; z-index: 1000; } } |
Next, update the appearance and layout properties of the File Browse page item. For example, select Hidden for Template to ensure the label is not displayed. Choose the Stretch Form Item checkbox in Template Options to improve the alignment. Under Appearance, for Icon, enter fa-camera-retro.
The graphic shows updating the appearance and layout properties of the File Browse page item.
We now have a great low-code APEX application.
The graphic shows the Like button, a heart icon in red.
Although the goal here is not to build a complete production-ready app, this article will help you understand the power of low-code application platforms. Low-code application development is about boosting productivity and reducing costs and maintenance. Instead of spending time on repetitive lower-level coding, developers can focus on tackling the business problem. With intelligent wizards, powerful tools and declarative customization capabilities, low-code application platforms like Oracle APEX minimize the complexity of multifaceted applications and help developers be productive and deliver on time.
