Listado de Bienes Raíces
Construido con Agente de IA
Plantilla Angular

Plantilla de backend de listado de bienes raíces
Angular — Guía de esquema, geo-consultas y AI

Un backend de listado de bienes raíces Angular listo para producción en Back4app: listados, clientes potenciales, favoritos, geo-consultas, diagrama ER, diccionario de datos, esquema JSON, playground de API y un aviso de agente AI de un clic para desplegar en minutos.

Construido con Agente de IA

Conclusiones clave

En esta página obtienes un esquema de bienes raíces listo para producción, un aviso de IA de un clic y código paso a paso Angular — para que puedas lanzar una aplicación de listado de propiedades sin construir el backend.

  1. Despliega en minutos — Pega el aviso del Agente de IA y obtén una aplicación en funcionamiento con lista de propiedades, búsqueda geográfica, captura de leads y favoritos.
  2. Consultas geográficas listas para usar — Property.location (GeoPoint) soporta $nearSphere para "propiedades cerca de mí" y búsqueda basada en mapas.
  3. SDK nativo de Angular — Objetos tipados, async/await, fijación opcional sin conexión, y Live Queries para nuevos listados.
  4. REST + GraphQL — Ambas APIs generadas automáticamente; filtra por estado, camas, precio; ordena por distancia o fecha.
  5. Cuatro clases — _User (incorporado), Property, Lead (consultas), Favorite (listados guardados).

¿Qué es la plantilla de backend de listado de bienes raíces Angular?

Back4app es un backend-como-servicio (BaaS) ideal para aplicaciones de listado de bienes raíces: backend gestionado, autenticación, consultas geográficas y SDKs para más de 13 tecnologías. La plantilla de backend de listado de bienes raíces Angular es un esquema preconstruido en Back4app con autenticación (User), listados (Property), consultas (Lead) y propiedades guardadas (Favorite). Obtienes consultas geográficas, captura de leads y un aviso de Agente de IA de un clic — conecta un frontend Angular y lanza una aplicación de listado de propiedades en funcionamiento en minutos.

Mejor para:

Aplicaciones de listado de propiedadesPortales inmobiliariosCaptura de leadsBúsqueda basada en mapasLanzamientos de MVPEquipos que eligen un BaaS para bienes raíces

Descripción general

Una aplicación de listado de propiedades necesita CRUD de propiedades, consultas geográficas para búsqueda en mapas, captura de leads (consultas por propiedad) y favoritos de usuarios. En el fondo necesita autenticación, Propiedad con ubicación (GeoPoint), Lead vinculado a Propiedad y Favorito que vincula Usuario a Propiedad.

El esquema (ver diagrama ER a continuación) cubre usuarios, propiedades, leads y favoritos. Con el SDK Back4app Angular, puedes consultar propiedades (incluyendo geográficas), crear leads y gestionar favoritos, sin necesidad de escribir una capa de API personalizada.

Características principales de listados de bienes raíces

Esta plantilla de backend incluye las siguientes características listas para usar.

Listados de propiedades

Propiedad con título, precio, dirección, ubicación (GeoPoint), habitaciones, baños, estado. Lista y filtra por estado, precio o geografía.

Captura de leads

Vínculos de lead nombre, correo electrónico, teléfono, mensaje a una Propiedad. Captura consultas desde las páginas de detalles del listado.

Propiedades guardadas

Vínculos favoritos usuario y propiedad. Lista favoritos para el usuario actual; añade o elimina del detalle del listado.

Geo-consultas

Property.location (GeoPoint) soporta $nearSphere. Encuentra propiedades cerca de un punto; ordena por distancia.

Usuario y permisos

_User incorporado; restringe la creación/actualización de Property a agentes; lectura pública para lista y detalle.

¿Por qué construir tu backend de listado de propiedades con Back4app?

Back4app te proporciona un backend listo con consultas geográficas y captura de leads para que puedas construir tu aplicación de listado de propiedades sin escribir código de REST o gestionar la autenticación tú mismo.

  • •Consultas geográficas y SDK: Property.location (GeoPoint) admite $nearSphere; el SDK mantiene Property y Lead seguros en cuanto a tipos.
  • •Captura de leads y favoritos: La clase Lead almacena consultas por propiedad; los enlaces Favorito conectan al usuario y la propiedad para listados guardados.
  • •Live Queries: Suscríbete a los cambios de Property o Favorito para que la interfaz de usuario se actualice en tiempo real.

El mismo esquema y APIs para cada stack — cambia de clientes más tarde sin cambiar el backend.

Beneficios Clave

Un backend de bienes raíces listo para producción para que puedas enviar más rápido y concentrarte en tu aplicación.

Envía Más Rápido, Sin Código de Backend

APIs REST y GraphQL y un esquema listo: conecta tu aplicación y listo.

Consultas Geográficas Listas para Usar

Encuentra propiedades cerca de un punto con $nearSphere; ordena por distancia.

Captura de Leads

La clase Lead almacena nombre, correo electrónico, teléfono, mensaje y puntero de propiedad.

Autenticación Incorporada

Registro de usuario, inicio de sesión y manejo de sesiones; restringe favoritos y gestión de listados.

Funciona Sin Conexión

El anclaje local mantiene propiedades y favoritos disponibles sin conexión y se sincroniza cuando te reconectas.

Despliega en Minutos

Usa el Agente de IA para crear y desplegar tu aplicación de bienes raíces a partir de esta plantilla.

¿Listo para probarlo?

Deja que el agente de IA de Back4app cree el backend de tu listado inmobiliario, conecte el frontend Angular y despliegue, todo desde un solo aviso.

Construir con el agente de IAPrueba el API Playground

Gratis para comenzar — 50 avisos de agente de IA/mes, no se requiere tarjeta de crédito

Pila técnica

Todo lo que impulsa esta plantilla de listado inmobiliario de un vistazo.

Frontend
Angular
Backend
Back4app
Base de datos
MongoDB
Autenticación
Control de acceso y autenticación
APIs
REST y GraphQL
Despliegue
Agente AI / Panel de control

Diagrama ER

Diagrama de entidad-relación para el modelo de datos de listados de bienes raíces de Angular.

Ver fuente del diagrama
Mermaid
erDiagram
    _User {
        String objectId PK
        String username
        String email
        String password
        Date createdAt
        Date updatedAt
    }

    Property {
        String objectId PK
        String title
        String description
        Number price
        String address
        GeoPoint location
        Number beds
        Number baths
        Number area
        String propertyType
        String status
        Pointer listedBy FK
        Date createdAt
        Date updatedAt
    }

    Lead {
        String objectId PK
        String name
        String email
        String phone
        String message
        Pointer property FK
        Date createdAt
        Date updatedAt
    }

    Favorite {
        String objectId PK
        Pointer user FK
        Pointer property FK
        Date createdAt
        Date updatedAt
    }

    _User ||--o{ Property : "listedBy"
    _User ||--o{ Favorite : "user"
    Property ||--o{ Lead : "property"
    Property ||--o{ Favorite : "property"

Flujo de integración

Secuencia Auth-to-CRUD: cómo tu app Angular se comunica con Back4app — inicio de sesión, consulta de propiedades (con geo), crear lead, gestionar favoritos.

Ver fuente del diagrama
Mermaid
sequenceDiagram
  participant User
  participant App as Angular App
  participant Back4app as Back4app Cloud

  User->>App: Login
  App->>Back4app: Authenticate (username, password)
  Back4app-->>App: Session token
  App-->>User: Logged in

  User->>App: Load data
  App->>Back4app: Query Property and Lead
  Back4app-->>App: List of Property / Lead
  App-->>User: Show list

  User->>App: Create or update
  App->>Back4app: Save Property
  Back4app-->>App: Property (objectId)
  App-->>User: Updated list

Diccionario de Datos

Referencia completa de campos para cada clase en el esquema.

CampoTipoDescripciónRequerido
objectIdStringAuto-generated unique identifierauto
titleStringListing title
descriptionStringFull listing description—
priceNumberAsking or rental price—
addressStringStreet address—
locationGeoPointLat/lng for geo-queries and map display—
bedsNumberNumber of bedrooms—
bathsNumberNumber of bathrooms—
areaNumberArea in sq ft or sq m—
propertyTypeStringe.g. house, apartment, land—
statusStringe.g. for_sale, for_rent, sold—
listedByPointer<_User>User who created the listing—
createdAtDateAuto-generated creation timestampauto
updatedAtDateAuto-generated last-update timestampauto

14 campos en Property

Seguridad y Permisos

Cómo las ACL y los permisos a nivel de clase protegen los datos en este esquema inmobiliario.

Lectura pública y de propiedad

Permitir lectura pública para la lista y detalles de Propiedades; restringir crear/actualizar/eliminar a usuarios autenticados (por ejemplo, agentes de listado).

Permisos a Nivel de Clase

Los CLP restringen crear/leer/actualizar/eliminar por clase. La creación de leads puede ser pública; las escrituras de Favoritos y Propiedades generalmente requieren autenticación.

Relaciones basadas en punteros

listedBy vincula la propiedad a _User; Favorite vincula al usuario y la propiedad. Usa Cloud Code para hacer cumplir la propiedad donde sea necesario.

Esquema (JSON)

Definición de esquema JSON en bruto — copia y usa en tu Back4app app o importa a través de la API.

JSON
{
  "classes": [
    {
      "className": "Property",
      "fields": {
        "objectId": {
          "type": "String",
          "required": false
        },
        "title": {
          "type": "String",
          "required": true
        },
        "description": {
          "type": "String",
          "required": false
        },
        "price": {
          "type": "Number",
          "required": false
        },
        "address": {
          "type": "String",
          "required": false
        },
        "location": {
          "type": "GeoPoint",
          "required": false
        },
        "beds": {
          "type": "Number",
          "required": false
        },
        "baths": {
          "type": "Number",
          "required": false
        },
        "area": {
          "type": "Number",
          "required": false
        },
        "propertyType": {
          "type": "String",
          "required": false
        },
        "status": {
          "type": "String",
          "required": false
        },
        "listedBy": {
          "type": "Pointer",
          "targetClass": "_User",
          "required": false
        },
        "createdAt": {
          "type": "Date",
          "required": false
        },
        "updatedAt": {
          "type": "Date",
          "required": false
        }
      }
    },
    {
      "className": "Lead",
      "fields": {
        "objectId": {
          "type": "String",
          "required": false
        },
        "name": {
          "type": "String",
          "required": true
        },
        "email": {
          "type": "String",
          "required": true
        },
        "phone": {
          "type": "String",
          "required": false
        },
        "message": {
          "type": "String",
          "required": false
        },
        "property": {
          "type": "Pointer",
          "targetClass": "Property",
          "required": false
        },
        "createdAt": {
          "type": "Date",
          "required": false
        },
        "updatedAt": {
          "type": "Date",
          "required": false
        }
      }
    },
    {
      "className": "Favorite",
      "fields": {
        "objectId": {
          "type": "String",
          "required": false
        },
        "user": {
          "type": "Pointer",
          "targetClass": "_User",
          "required": false
        },
        "property": {
          "type": "Pointer",
          "targetClass": "Property",
          "required": false
        },
        "createdAt": {
          "type": "Date",
          "required": false
        },
        "updatedAt": {
          "type": "Date",
          "required": false
        }
      }
    },
    {
      "className": "_User",
      "fields": {
        "objectId": {
          "type": "String",
          "required": false
        },
        "username": {
          "type": "String",
          "required": true
        },
        "email": {
          "type": "String",
          "required": true
        },
        "password": {
          "type": "String",
          "required": true
        },
        "createdAt": {
          "type": "Date",
          "required": false
        },
        "updatedAt": {
          "type": "Date",
          "required": false
        }
      }
    }
  ]
}

Construir con AI Agent

Usa el Back4app AI Agent para construir una aplicación de listado de bienes raíces real a partir de esta plantilla: creará el frontend, el backend (este esquema, autenticación, geo-consultas y APIs), y lo desplegará — sin configuración manual.

Back4app AI Agent
Listo para construir
Crea una aplicación de listado de bienes raíces en Back4app con este esquema y comportamiento exactos.

Esquema:
1. _User (uso integrado de Back4app): username (String, obligatorio), email (String, obligatorio), password (String, obligatorio); objectId, createdAt, updatedAt (sistema).
2. Property: title (String, obligatorio), description (String), price (Number), address (String), location (GeoPoint), beds (Number), baths (Number), area (Number), propertyType (String), status (String; ej. for_sale, for_rent, sold), listedBy (Pointer a _User); objectId, createdAt, updatedAt (sistema).
3. Lead: name (String, obligatorio), email (String, obligatorio), phone (String), message (String), property (Pointer a Property); objectId, createdAt, updatedAt (sistema).
4. Favorite: user (Pointer a _User), property (Pointer a Property); objectId, createdAt, updatedAt (sistema).

Seguridad:
- Configure ACLs para que solo usuarios autenticados puedan crear/actualizar/eliminar Property y Favorite; permita lectura pública para lista y detalle de Property. La creación de Lead puede ser pública o requerir auth.
- Use Class-Level Permissions para que solo usuarios autenticados gestionen Favorite; Property y Lead según su caso de uso.

Auth:
- Registro (username, email, password) e inicio de sesión; soporte de logout/sesión.

Comportamiento:
- CRUD completo para Property (para agentes de listado) y Favorite.
- Crear Lead (consulta) vinculado a un Property; listar leads por propiedad o por listados del usuario actual.
- Consulta geo: encontrar propiedades cerca de un punto usando location (GeoPoint) con $nearSphere y limit.
- Filtrar propiedades por status, beds, baths, rango de precio, propertyType.
- Opcional: Live Queries en tiempo real para nuevos listados o cambios de favoritos.

Entregar:
- Cree la app Back4app con el esquema anterior, ACLs y cualquier Cloud Code necesario.
- Genere el frontend y conéctelo a este backend; despliegue para que la app sea ejecutable de extremo a extremo.

Use Angular en el frontend con el Back4app JavaScript SDK. Servicio inyectable y signals u observables para lista de propiedades y favoritos. Incluya búsqueda de propiedades, detalle y formulario de lead.

Presiona el botón de abajo para abrir el Agente con el aviso de esta plantilla pre-rellenado.

Desplegar en minutos50 avisos gratuitos / mesNo se requiere tarjeta de crédito

API Playground

Prueba los endpoints REST y GraphQL para el esquema de bienes raíces. Respuestas de los datos de ejemplo anteriores — no se necesita cuenta de Back4app.

Cargando playground…

Utiliza el mismo esquema que esta plantilla.

Integración Angular paso a paso

Conéctate a tu backend de Back4app desde una app Angular utilizando el SDK Back4app Angular.

  1. Paso 1: Instala el SDK Back4app Angular

    Agrega el SDK de Back4app para tu stack (por ejemplo, npm, pubspec o gestor de paquetes).

    Bash
    npm install parse

  2. Paso 2: Inicializa Back4app en tu aplicación

    Inicializa el SDK de Back4app al inicio de la aplicación con tu ID de aplicación y URL del servidor.

    JavaScript
    import Parse from 'parse';

Parse.initialize(
  'YOUR_APP_ID',
  'YOUR_JAVASCRIPT_KEY',
  { serverURL: 'https://parseapi.back4app.com' }
);
Parse.serverURL = 'https://parseapi.back4app.com';

  3. Paso 3: Consulta propiedades (con geo opcional)

    Utiliza el SDK para obtener objetos Property; usa la consulta geo para "cerca de mí" o resultados de mapa.

    JavaScript
    async function getProperties(status = 'for_sale') {
  const query = new Parse.Query('Property');
  query.equalTo('status', status);
  query.descending('createdAt');
  return await query.find();
}

async function getPropertiesNear(lat, lng, limit = 20) {
  const point = new Parse.GeoPoint(lat, lng);
  const query = new Parse.Query('Property');
  query.withinKilometers('location', point, 50);
  query.limit(limit);
  return await query.find();
}

  4. Paso 4: Crea un lead (consulta)

    Crea un Lead con nombre, correo electrónico, teléfono, mensaje y puntero a la propiedad.

    JavaScript
    async function createLead(name, email, propertyId, { phone, message } = {}) {
  const Lead = Parse.Object.extend('Lead');
  const lead = new Lead();
  lead.set('name', name);
  lead.set('email', email);
  lead.set('property', { __type: 'Pointer', className: 'Property', objectId: propertyId });
  if (phone) lead.set('phone', phone);
  if (message) lead.set('message', message);
  await lead.save();
  console.log('Lead created:', lead.id);
  return lead;
}

  5. Paso 5: Gestiona favoritos

    Agrega o quita Favoritos (usuario + propiedad); lista favoritos para el usuario actual.

    JavaScript
    async function addFavorite(user, propertyId) {
  const Favorite = Parse.Object.extend('Favorite');
  const fav = new Favorite();
  fav.set('user', user);
  fav.set('property', { __type: 'Pointer', className: 'Property', objectId: propertyId });
  await fav.save();
  return fav;
}

async function removeFavorite(favoriteId) {
  const query = new Parse.Query('Favorite');
  const fav = await query.get(favoriteId);
  await fav.destroy();
}

async function getMyFavorites(user) {
  const query = new Parse.Query('Favorite');
  query.equalTo('user', user);
  return await query.find();
}

Integración de Gestión de Estado

Integra el SDK de Back4app con la capa de estado de tu aplicación (por ejemplo, contexto, tienda o servicios).

Modelo de Datos Completo

Copia un modelo completo de Propiedad/Lead/Favorito para una serialización segura por tipo (por ejemplo, clase, interfaz o definición de tipo).

text
interface Property {
  objectId?: string;
  title: string;
  description?: string;
  price?: number;
  address?: string;
  location?: { __type: string; latitude: number; longitude: number };
  beds?: number;
  baths?: number;
  area?: number;
  propertyType?: string;
  status?: string;
  listedBy?: { __type: string; className: string; objectId: string };
  createdAt?: string;
  updatedAt?: string;
}

interface Lead {
  objectId?: string;
  name: string;
  email: string;
  phone?: string;
  message?: string;
  property?: { __type: string; className: string; objectId: string };
  createdAt?: string;
  updatedAt?: string;
}

interface Favorite {
  objectId?: string;
  user?: { __type: string; className: string; objectId: string };
  property?: { __type: string; className: string; objectId: string };
  createdAt?: string;
  updatedAt?: string;
}

Preguntas Frecuentes

Preguntas comunes sobre la plantilla de backend de listados de bienes raíces.

¿Qué es Back4app?
¿Por qué usar Back4app para una aplicación de listado de bienes raíces Angular?
¿Qué es la clase Property en una aplicación de bienes raíces Angular?
¿Cómo ejecuto una consulta geográfica en Angular?
¿Puedo extender el esquema para mi aplicación Angular?
¿Está disponible la sincronización en tiempo real para Angular?

Confiado por desarrolladores en todo el mundo

Únete a la comunidad que construye el futuro de las aplicaciones

G2 Users Love Us Badge

¿Listo para construir tu aplicación de listado de bienes raíces?

Comienza tu proyecto Angular en minutos. No se requiere tarjeta de crédito.

Construye con AI Agent