A Complete Guide to Developing Real Estate and Renovation Apps Based on HarmonyOS Next
Making Property Search and Renovation Easier
Imagine helping a friend develop a real estate agency app where users can browse properties, schedule viewings, and even preview renovation effects through AR technology. This is exactly what HarmonyOS Next combined with AppGallery Connect can achieve. Today, let's explore how to create such an intelligent property application.
Setting Up the Project from Scratch
First, open DevEco Studio and select "New Project." This time, we'll create an application called "HouseHunter." Remember to choose the latest version of HarmonyOS Next and the ArkTS language as our development foundation.
// Project entry file EntryAbility.ts
import Ability from '@ohos.app.ability.UIAbility';
import agconnect from '@hw-agconnect/core-harmony';
export default class EntryAbility extends Ability {
onCreate() {
// Initialize AppGallery Connect services
agconnect.instance().init(this.context);
console.log("App initialization complete, AGC services ready");
}
}
Developing the Property Listing Module
The core feature of a real estate app is, of course, displaying property listings. We can use AppGallery Connect's Cloud Database to store property information.
// Define property data model
@Class
class HouseInfo {
@Field() id: string = ''; // Property unique identifier
@Field() title: string = ''; // Property title
@Field() price: number = 0; // Price
@Field() area: number = 0; // Area
@Field() roomType: string = ''; // Layout
@Field() location: string = ''; // Location
@Field() images: string[] = []; // Image URL array
}
// Property listing page
@Entry
@Component
struct HouseListPage {
@State houseList: HouseInfo[] = []; // Property data
aboutToAppear() {
this.loadHouseData();
}
// Load property data from cloud
loadHouseData() {
const cloudDB = agconnect.cloudDB();
const query = cloudDB.createQuery(HouseInfo)
.orderByDesc('price'); // Sort by price descending
cloudDB.executeQuery(query)
.then(result => {
this.houseList = result;
console.log(`Successfully loaded ${result.length} property listings`);
})
.catch(error => {
console.error("Failed to load property data:", error);
});
}
build() {
List() {
ForEach(this.houseList, (house: HouseInfo) => {
ListItem() {
Column() {
// Display property image
Image(house.images[0])
.width('100%')
.height(200)
// Display basic property information
Text(house.title)
.fontSize(18)
.fontWeight(FontWeight.Bold)
Row() {
Text(`¥${house.price}万`)
.fontColor(Color.Red)
Text(`${house.area}㎡`)
.margin({left: 10})
Text(house.roomType)
.margin({left: 10})
}
}
.padding(10)
}
.onClick(() => {
// Click to navigate to detail page
router.pushUrl({url: 'pages/HouseDetailPage'});
})
})
}
}
}
Implementing Viewing Appointment Functionality
When users find a property they like, they naturally want to schedule a viewing. This feature requires AppGallery Connect's authentication service and cloud functions.
// Viewing appointment page
@Entry
@Component
struct AppointmentPage {
@State houseId: string = ''; // Current property ID
@State date: string = ''; // Appointment date
@State time: string = ''; // Appointment time
@State name: string = ''; // User name
@State phone: string = ''; // Contact number
// Submit appointment request
submitAppointment() {
const appointment = {
houseId: this.houseId,
date: this.date,
time: this.time,
userName: this.name,
userPhone: this.phone,
status: 'pending' // Appointment status
};
// Call cloud function to submit appointment
agconnect.function().call('submitAppointment', appointment)
.then(() => {
alert('Appointment successful! Our staff will contact you soon');
})
.catch(error => {
console.error('Appointment failed:', error);
alert('Failed to submit appointment, please try again later');
});
}
build() {
Column() {
Text('Schedule Viewing')
.fontSize(20)
.margin({bottom: 20})
// Date picker
DatePicker({
start: new Date().toISOString().split('T')[0],
end: '2024-12-31'
})
.onChange(value => this.date = value)
// Time picker
TimePicker()
.onChange(value => this.time = value)
// User information input
TextInput({ placeholder: 'Enter your name' })
.onChange(value => this.name = value)
TextInput({ placeholder: 'Enter phone number' })
.inputType(InputType.Number)
.onChange(value => this.phone = value)
Button('Submit Appointment')
.width('80%')
.height(50)
.margin({top: 20})
.onClick(() => this.submitAppointment())
}
.padding(20)
}
}
AR Renovation Preview Feature
The power of HarmonyOS Next lies in its ability to easily integrate AR capabilities, allowing users to preview renovation effects.
// AR renovation preview component
@Component
struct ARDecorationView {
@State modelUrl: string = ''; // 3D model URL
@State materials: string[] = []; // Renovation material options
// Change renovation material
changeMaterial(index: number) {
// Call AR engine to change material
arEngine.changeMaterial(this.modelUrl, this.materials[index]);
}
build() {
Column() {
// AR view container
Stack() {
// AR scene view goes here
ARSceneView()
.width('100%')
.height(400)
// Material selection panel
Row() {
ForEach(this.materials, (material, index) => {
Image(material.thumbnail)
.width(50)
.height(50)
.margin(5)
.onClick(() => this.changeMaterial(index))
})
}
.alignItems(VerticalAlign.Bottom)
}
// Operation guide
Text('Click materials below to change renovation effects in real-time')
.fontSize(14)
.fontColor('#666')
}
}
}
Data Statistics and Analysis
As a developer, you might want to know which properties are more popular. AppGallery Connect's analytics service can help.
// Data analytics page
@Entry
@Component
struct AnalyticsPage {
@State popularHouses: HouseInfo[] = [];
@State userCount: number = 0;
aboutToAppear() {
// Get popular property data
agconnect.analytics().getPopularHouses(7) // Last 7 days
.then(data => {
this.popularHouses = data;
});
// Get user growth data
agconnect.analytics().getUserGrowth('month')
.then(count => {
this.userCount = count;
});
}
build() {
Column() {
Text('Data Overview')
.fontSize(20)
.margin({bottom: 20})
// User growth card
Card() {
Column() {
Text('New Users This Month')
Text(this.userCount.toString())
.fontSize(24)
.fontColor(Color.Blue)
}
.padding(15)
}
// Popular properties list
Text('Top 5 Popular Properties')
.margin({top: 20})
List() {
ForEach(this.popularHouses, (house, index) => {
ListItem() {
Row() {
Text(`${index + 1}. ${house.title}`)
Text(`Viewed ${house.viewCount} times`)
.fontColor('#666')
}
}
})
}
}
.padding(20)
}
}
App Release and Operations
After development is complete, package the app through DevEco Studio, then submit it for review in the AppGallery Connect console. Once approved, your real estate app can be published on AppGallery.
Remember to utilize AppGallery Connect's operational tools:
- Use A/B testing to optimize property display methods
- Send push notifications to alert users about new listings
- Analyze user behavior to improve app experience
Transforming Living Experiences with Technology
Through this project, we've implemented a fully functional real estate application. From property listings to viewing appointments, to AR renovation previews, the powerful capabilities of HarmonyOS Next make everything simple and efficient.
In the future, you could consider adding more innovative features:
- Use distributed technology for multi-device collaborative viewing
- Integrate smart home demonstrations for realistic living experiences
- Develop VR panoramic viewing functionality
HarmonyOS is redefining how mobile applications are developed, and the real estate sector is one of the best scenarios to showcase its advantages. I hope this tutorial opens new doors for you, and I look forward to seeing the innovative applications you develop!
Top comments (0)