Introduction
In this article, you'll learn how to use a community template on Momen to create your community website. In this tutorial, we'll explore the basic project operation logic and functionalities that Momen offers to bring your vision to life.
I. Basic Project Operation Logic
1. Website Logic
【Home】: Homepage
【Marketing】: Used for displaying the application list
【Demand】: Users can post their own needs for answers
【College】: Suitable for showcasing course/teaching video content
2. Website Functionality
【Login/Register】Your live users can log in/register via Google, email, and others.
【Homepage】Your live users can post or view posts on their own, and check basic information such as views, likes, and comments.
【Post Details】Your live users can view sender's information, post content, comments, likes, favorites, etc.
【Personal Center】Your live users can modify their username, profile image, posted posts, commented posts, received likes, and check their favorites functionality.
II. How to Create a Community App
Step 1: Understanding How Data Model Works
【Account】Data Table
This data table is used to store basic user information, such as the user's ID, username, update time, creation time, and data storage for the user's profile image.
【Post】Data Table
Used to store the title, images, and text information of a user's posts.
【Thumbs_Up】Data Table
Records the status of a user's likes.
【Comment】Data Table
Used to store the text information of a user's comments.
【Post_Image】Data Table
Used to record the images of posts published by the user.
Step 2: Data Manipulation
1. Modification of the top navigation bar
Double-click the top navigation bar to enter Focus Mode, click on【Content】, and edit the text in this view. Users can double-click the text in TABS or click the【+】to add a tab.
2. Modify Images and Text
Double-click on the desired text or image content to enter focus mode. Click on【Content】to edit text (same for images).
3. Data Binding for Posts
On the right-side bar, under the Content section, we can see that the data source of this list is already bound to the data table【Post】thorugh【remote data】.
This page displays the sender's username/profile image/title/content, whether the post has been favorited, liked, commented on, and the view count.
Userprofile images fall into two categories: logged in or not logged in. When a user is not logged in, a default profile image is used. When a user is logged in, their own profile image is used.
User profile image data is bound in this context, enabling display of the user's profile image upon login.
Next, information such as usernames follows the same way.
Post title /Content information is also retrieved from the【Title】and【Content】fields in the post table via the list, thus the method is analogous.
Next, the retrieval of【count】follows the same way. However, if it's desirable for a user's click on the like icon to increment the count by 1, this needs to be set in【Action on click】-【Request】- 【Modify Table Data】 - increase the like count for the specific post by 1 with each click (the same applies for comments/read count).
The underpinning logic for subsequent post details and user profiles mirrors the aforementioned processes. Please note, if data binding is required for individual cases, there is no need to employ the list component; leveraging remote data remains a viable solution for these scenarios.
III. Website Preview
By reaching this stage, you have completed 99% of the content. Now, let's proceed to preview our website.
Click on the【Preview】button located in the upper right corner to preview the website.
First, let's preview the entire page. Once the preview is complete, you can make further changes by returning to the editor.
If everything looks good and you have checked for any errors, click on【Publish】to publish the website. Congratulations! You have now completed the creation of a fully customized community website！
If you encounter any issues during the process, feel free to join our Discord community for assistance.
About Momen
Momen is a no-code web app builder, allows users to build fully customizable web apps, marketplaces, Social Networks, AI Apps, Enterprise SaaS, and much more. You can iterate and refine your projects in real-time, ensuring a seamless creation process. Meanwhile, Momen offers powerful API integration capabilities, allowing you to connect your projects to any service you need. With Momen, you can bring your ideas to life and build remarkable digital solutions and get your web app products to market faster than ever before.
