Iniciadores Rápidos
¿Cómo construir un backend para Elm?

47min
Introducción
En este tutorial, aprenderás a construir un backend completo para una aplicación Elm utilizando Back4App.
Recorreremos la integración de características esenciales de Back4app, como la gestión de bases de datos, funciones de Cloud Code, APIs REST y GraphQL, autenticación de usuarios y consultas en tiempo real (Live Queries), para crear un backend seguro, escalable y robusto que se comunique sin problemas con tu frontend de Elm.
También verás cómo la configuración rápida y el entorno intuitivo de Back4app pueden reducir drásticamente el tiempo y el esfuerzo en comparación con la configuración manual de servidores y bases de datos.
A lo largo del camino, adquirirás experiencia práctica con funcionalidades clave, incluyendo características de seguridad avanzadas, programación de tareas con Cloud Jobs y configuración de webhooks para integraciones externas.
Al final de este tutorial, estarás bien preparado para mejorar esta configuración básica en una aplicación lista para producción o incorporar fácilmente lógica personalizada y APIs de terceros según sea necesario.
Requisitos previos
Para completar este tutorial, necesitarás:
Una cuenta de Back4App y un nuevo proyecto de Back4app
 Comenzando con Back4app.
Si no tienes una cuenta, puedes crear una gratis. Sigue la guía anterior para preparar tu proyecto.
Entorno de desarrollo básico de Elm
 Puedes configurarlo instalando Elm. Asegúrate de tener Elm (0.19 o superior) instalado en tu máquina.
Familiaridad con Elm
 Documentación oficial de Elm.
Si eres nuevo en Elm, revisa la documentación oficial o un tutorial para principiantes antes de comenzar.
Biblioteca de solicitudes HTTP o enfoque GraphQL para Elm
 Usaremos llamadas REST y GraphQL desde Elm, ya que no hay un SDK oficial de Parse para Elm. Asegúrate de tener la elm/http y, si es necesario, una biblioteca de GraphQL configurada.
Asegúrate de tener todos estos requisitos previos en su lugar antes de comenzar. Tener tu proyecto de Back4app configurado y tu entorno local de Elm listo te ayudará a seguir más fácilmente.
Paso 1 – Configuración del proyecto de Back4app
Crear un nuevo proyecto
El primer paso para construir tu backend de Elm en Back4app es crear un nuevo proyecto. Si aún no has creado uno, sigue estos pasos:
Inicia sesión en tu cuenta de Back4app.
Haz clic en el botón “Nueva App” en tu panel de control de Back4app.
Dale un nombre a tu app (por ejemplo, “Elm-Backend-Tutorial”).
﻿
Una vez que se crea el proyecto, lo verás listado en tu panel de control de Back4app. Este proyecto será la base para todas las configuraciones de backend discutidas en este tutorial.
Conéctate con Back4app desde Elm
Back4app se basa en la Plataforma Parse para gestionar tus datos, proporcionar características en tiempo real, manejar la autenticación de usuarios y más. Dado que no hay un SDK oficial de Elm Parse, utilizaremos REST o GraphQL llamadas desde nuestra aplicación Elm para comunicarnos con el backend de Back4app.
Recupera tus claves de Parse:
En tu panel de control de Back4app, navega a la sección “Configuración de la App” o “Seguridad y Claves” de tu app para encontrar tu ID de Aplicación, Clave API REST, y Punto de enlace GraphQL. También encontrarás la URL del Servidor Parse (a menudo https://parseapi.back4app.com).
﻿
Desde Elm, puedes almacenar estas credenciales en un archivo de configuración o módulo. Por ejemplo:
src/Config.elm
module Config exposing (applicationId, restApiKey, serverUrl, graphQLEndpoint)

applicationId : String
applicationId =
    "YOUR_APPLICATION_ID"

restApiKey : String
restApiKey =
    "YOUR_REST_API_KEY"

serverUrl : String
serverUrl =
    "https://parseapi.back4app.com"

graphQLEndpoint : String
graphQLEndpoint =
    "https://parseapi.back4app.com/graphql"
module Config exposing (applicationId, restApiKey, serverUrl, graphQLEndpoint)

applicationId : String
applicationId =
    "YOUR_APPLICATION_ID"

restApiKey : String
restApiKey =
    "YOUR_REST_API_KEY"

serverUrl : String
serverUrl =
    "https://parseapi.back4app.com"

graphQLEndpoint : String
graphQLEndpoint =
    "https://parseapi.back4app.com/graphql"
﻿
Usarás estos valores cada vez que realices solicitudes HTTP a Back4app desde Elm. Al completar este paso, has establecido cómo conectar de manera segura tu front end de Elm con el backend de Back4app.
Paso 2 – Configuración de la Base de Datos
Guardar y Consultar Datos
Con tu proyecto de Back4app configurado, ahora puedes comenzar a guardar y recuperar datos a través de REST o GraphQL desde Elm. Para un ejemplo simple, demostraremos cómo crear y obtener un Todo.
Usando REST desde Elm
Usaremos elm/http para hacer solicitudes REST. Aquí hay un ejemplo simplificado para crear un elemento Todo:
src/TodoApi.elm
module TodoApi exposing (createTodo, fetchTodos)

import Config exposing (applicationId, restApiKey, serverUrl)
import Http
import Json.Decode as Decode
import Json.Encode as Encode

-- A simplified representation of a Todo
type alias Todo =
    { objectId : String
    , title : String
    , isCompleted : Bool
    }

-- Encoder for creating a Todo
createTodoEncoder : String -> Bool -> Encode.Value
createTodoEncoder title isCompleted =
    Encode.object
        [ ( "title", Encode.string title )
        , ( "isCompleted", Encode.bool isCompleted )
        ]

-- Decoder for Todo
todoDecoder : Decode.Decoder Todo
todoDecoder =
    Decode.map3 Todo
        (Decode.field "objectId" Decode.string)
        (Decode.field "title" Decode.string)
        (Decode.field "isCompleted" Decode.bool)

createTodo : String -> Bool -> Http.Request Todo
createTodo title isCompleted =
    Http.request
        { method = "POST"
        , headers =
            [ Http.header "X-Parse-Application-Id" applicationId
            , Http.header "X-Parse-REST-API-Key" restApiKey
            , Http.header "Content-Type" "application/json"
            ]
        , url = serverUrl ++ "/classes/Todo"
        , body = Http.jsonBody (createTodoEncoder title isCompleted)
        , expect = Http.expectJson todoDecoder
        , timeout = Nothing
        , tracker = Nothing
        }

fetchTodos : Http.Request (List Todo)
fetchTodos =
    Http.request
        { method = "GET"
        , headers =
            [ Http.header "X-Parse-Application-Id" applicationId
            , Http.header "X-Parse-REST-API-Key" restApiKey
            ]
        , url = serverUrl ++ "/classes/Todo"
        , body = Http.emptyBody
        , expect =
            Http.expectJson
                (Decode.field "results" (Decode.list todoDecoder))
        , timeout = Nothing
        , tracker = Nothing
        }
module TodoApi exposing (createTodo, fetchTodos)

import Config exposing (applicationId, restApiKey, serverUrl)
import Http
import Json.Decode as Decode
import Json.Encode as Encode

-- A simplified representation of a Todo
type alias Todo =
    { objectId : String
    , title : String
    , isCompleted : Bool
    }

-- Encoder for creating a Todo
createTodoEncoder : String -> Bool -> Encode.Value
createTodoEncoder title isCompleted =
    Encode.object
        [ ( "title", Encode.string title )
        , ( "isCompleted", Encode.bool isCompleted )
        ]

-- Decoder for Todo
todoDecoder : Decode.Decoder Todo
todoDecoder =
    Decode.map3 Todo
        (Decode.field "objectId" Decode.string)
        (Decode.field "title" Decode.string)
        (Decode.field "isCompleted" Decode.bool)

createTodo : String -> Bool -> Http.Request Todo
createTodo title isCompleted =
    Http.request
        { method = "POST"
        , headers =
            [ Http.header "X-Parse-Application-Id" applicationId
            , Http.header "X-Parse-REST-API-Key" restApiKey
            , Http.header "Content-Type" "application/json"
            ]
        , url = serverUrl ++ "/classes/Todo"
        , body = Http.jsonBody (createTodoEncoder title isCompleted)
        , expect = Http.expectJson todoDecoder
        , timeout = Nothing
        , tracker = Nothing
        }

fetchTodos : Http.Request (List Todo)
fetchTodos =
    Http.request
        { method = "GET"
        , headers =
            [ Http.header "X-Parse-Application-Id" applicationId
            , Http.header "X-Parse-REST-API-Key" restApiKey
            ]
        , url = serverUrl ++ "/classes/Todo"
        , body = Http.emptyBody
        , expect =
            Http.expectJson
                (Decode.field "results" (Decode.list todoDecoder))
        , timeout = Nothing
        , tracker = Nothing
        }
﻿
Luego puedes llamar a createTodo o fetchTodos en tu función de actualización de Elm, manejar las Http respuestas e integrar los datos en el Modelo de tu aplicación.
Uso de REST directamente (Ejemplo en cURL)
Si prefieres probar o quieres hacer llamadas rápidas fuera de Elm, puedes usar cURL:
Curl
curl -X POST \
  -H "X-Parse-Application-Id: YOUR_APPLICATION_ID" \
  -H "X-Parse-REST-API-Key: YOUR_REST_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{"title": "Buy groceries", "isCompleted": false}' \
  https://parseapi.back4app.com/classes/Todo
curl -X POST \
  -H "X-Parse-Application-Id: YOUR_APPLICATION_ID" \
  -H "X-Parse-REST-API-Key: YOUR_REST_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{"title": "Buy groceries", "isCompleted": false}' \
  https://parseapi.back4app.com/classes/Todo
﻿
Uso de GraphQL
Back4app también proporciona una interfaz GraphQL. A continuación se muestra una mutación de GraphQL de ejemplo para crear un Todo:
GraphQL
mutation {
  createTodo(input: {
    fields: {
      title: "Clean the house"
      isCompleted: false
    }
  }) {
    todo {
      objectId
      title
      isCompleted
    }
  }
}
mutation {
  createTodo(input: {
    fields: {
      title: "Clean the house"
      isCompleted: false
    }
  }) {
    todo {
      objectId
      title
      isCompleted
    }
  }
}
﻿
En Elm, puedes usar una biblioteca de GraphQL o crear manualmente tus solicitudes HTTP para enviar estas mutaciones y consultas, muy similar a como usamos elm/http arriba.
Diseño de esquema y tipos de datos
Por defecto, Parse permite creación de esquemas sobre la marcha, pero también puedes definir tus clases y tipos de datos en el panel de control de Back4app para tener más control.
Navega a la sección “Base de datos” en tu panel de control de Back4app.
Crea una nueva clase (por ejemplo, “Todo”) y añade columnas relevantes, como título (String) y estáCompletado (Boolean).
Crear Nueva Clase
﻿
Back4app también soporta varios tipos de datos: String, Número, Booleano, Objeto, Fecha, Archivo, Puntero, Array, Relación, GeoPoint, y Polígono. Puedes elegir el tipo apropiado para cada campo o dejar que Parse cree automáticamente estas columnas cuando guardes un objeto desde tu aplicación Elm utilizando el enfoque REST o GraphQL.
Crear Columna
﻿
Back4app ofrece un Agente de IA que puede ayudarte a diseñar tu modelo de datos:
Abre el Agente de IA desde tu Panel de Aplicaciones o en el menú.
Describe tu modelo de datos en un lenguaje simple (por ejemplo, “Por favor, crea una nueva aplicación ToDo en back4app con un esquema de clase completo.”).
Deja que el Agente de IA cree el Esquema por ti.
﻿
Usar el Agente de IA puede ahorrarte tiempo al configurar tu arquitectura de datos y asegurar consistencia en tu aplicación.
Datos Relacionales
Si tienes datos relacionales – digamos, un Categoría objeto que apunta a múltiples Todo elementos – puedes usar Punteros o Relaciones en Parse. Desde Elm, puedes gestionar estas relaciones incluyendo los campos de puntero o relación en tus llamadas REST o GraphQL.
Por ejemplo, para agregar un puntero a través de REST:
JSON
{
  "title": "Task with Category",
  "category": {
    "__type": "Pointer",
    "className": "Category",
    "objectId": "YOUR_CATEGORY_OBJECT_ID"
  }
}
{
  "title": "Task with Category",
  "category": {
    "__type": "Pointer",
    "className": "Category",
    "objectId": "YOUR_CATEGORY_OBJECT_ID"
  }
}
﻿
Cuando consultas, también puedes incluir datos de puntero utilizando el parámetro ?include=category en REST o usando include en consultas GraphQL.
Consultas en Vivo
Para actualizaciones en tiempo real, Back4app proporciona Consultas en Vivo. Aunque no hay un paquete nativo de Elm para Consultas en Vivo de Parse, aún puedes habilitarlo en tu panel de control de Back4app:
Habilitar Consultas en Vivo en la Configuración del Servidor de tu aplicación.
Usar el punto final de WebSocket para Consultas en Vivo en un cliente especializado.
Si deseas integrar Consultas en Vivo con Elm, podrías aprovechar elm-websocket (o otro enfoque personalizado) para suscribirte a los cambios. Sin embargo, esto requiere una configuración más avanzada ya que no existe un cliente oficial de Consultas en Vivo de Elm en este momento.
Paso 3 – Aplicando Seguridad con ACLs y CLPs
Mecanismo de Seguridad de Back4app
Back4app toma la seguridad en serio al proporcionar Listas de Control de Acceso (ACLs) y Permisos a Nivel de Clase (CLPs). Estas características te permiten restringir quién puede leer o escribir datos a nivel de objeto o de clase, asegurando que solo los usuarios autorizados puedan modificar tus datos.
﻿
Listas de Control de Acceso (ACLs)
Una ACL se aplica a objetos individuales para determinar qué usuarios, roles o el público pueden realizar operaciones de lectura/escritura. Puedes configurar ACLs desde Elm incluyendo la _ACL propiedad en tu JSON al crear o actualizar objetos a través de REST o GraphQL.
Por ejemplo, para crear un Todo privado, podrías establecer:
JSON
{
  "title": "Private Task",
  "ACL": {
    "USER_OBJECT_ID": {
      "read": true,
      "write": true
    }
  }
}
{
  "title": "Private Task",
  "ACL": {
    "USER_OBJECT_ID": {
      "read": true,
      "write": true
    }
  }
}
﻿
Esto impide que cualquier persona que no sea ese usuario lea o modifique el objeto.
Editar ACL
﻿
Permisos a Nivel de Clase (CLPs)
CLPs gobiernan los permisos predeterminados de toda una clase, como si la clase es legible o escribible públicamente, o si solo ciertos roles pueden acceder a ella.
Ve a tu Panel de Control de Back4app, selecciona tu aplicación y abre la Base de datos sección.
Selecciona una clase (por ejemplo, “Todo”).
Abre la pestaña de Permisos a Nivel de Clase.
Configura tus valores predeterminados, como “Requiere Autenticación” para leer o escribir, o “Sin Acceso” para el público.
﻿
Estos permisos establecen la línea base, mientras que los ACLs ajustan los permisos para objetos individuales. Un modelo de seguridad robusto combina típicamente tanto CLPs (restricciones amplias) como ACLs (restricciones detalladas por objeto). Para más información, ve a Directrices de Seguridad de la Aplicación.﻿
Paso 4 – Escribir y Desplegar Funciones en la Nube
El Código en la Nube es una característica del entorno de Parse Server que te permite ejecutar código JavaScript personalizado en el lado del servidor, sin necesidad de gestionar servidores o infraestructura. Al escribir Código en la Nube, puedes extender tu backend de Back4app con lógica de negocio adicional, validaciones, disparadores e integraciones que se ejecutan de manera segura y eficiente en el Parse Server.
Cómo Funciona
Cuando escribes Código en la Nube, normalmente colocas tus funciones de JavaScript, disparadores y cualquier módulo NPM requerido en un main.js (o app.js) archivo. Este archivo se despliega luego en tu proyecto de Back4app, que se ejecuta dentro del entorno de Parse Server.
Todo el Código en la Nube para tu aplicación de Back4app se ejecuta dentro del Parse Server que es gestionado por Back4app, por lo que no tienes que preocuparte por el mantenimiento del servidor, la escalabilidad o la provisión. Cada vez que actualizas y despliegas tu main.js archivo, el servidor Parse en ejecución se actualiza con tu último código.
JS
// main.js

// Import an npm module (e.g., axios)
const axios = require('axios');

Parse.Cloud.define('fetchExternalData', async (request) => {
  const url = request.params.url;
  if (!url) {
    throw new Error('URL parameter is required');
  }
  const response = await axios.get(url);
  return response.data;
});
// main.js

// Import an npm module (e.g., axios)
const axios = require('axios');

Parse.Cloud.define('fetchExternalData', async (request) => {
  const url = request.params.url;
  if (!url) {
    throw new Error('URL parameter is required');
  }
  const response = await axios.get(url);
  return response.data;
});
﻿
Puedes llamar a estas funciones de Cloud Code desde Elm haciendo una solicitud REST a:
https://parseapi.back4app.com/functions/fetchExternalData
Casos de Uso Típicos
Lógica de Negocios: Agregar datos, procesar pagos, etc.
Validaciones de Datos: Asegurarse de que ciertos campos cumplan con los criterios antes de guardar.
Disparadores: Ejecutar código antes o después de acciones de guardar/actualizar/eliminar.
Integraciones: Conectar con APIs o servicios externos.
Aplicación de Seguridad: Verificar roles o permisos de usuario antes de realizar operaciones críticas.
Despliega Tu Función
Desplegando a través del Back4app CLI:
Instala el CLI (ejemplo de Linux/MacOS):
Bash
curl https://raw.githubusercontent.com/back4app/parse-cli/back4app/installer.sh | sudo /bin/bash
curl https://raw.githubusercontent.com/back4app/parse-cli/back4app/installer.sh | sudo /bin/bash
﻿
Configura tu clave de cuenta:
Bash
b4a configure accountkey
b4a configure accountkey
﻿
Despliega tu código en la nube:
Bash
b4a deploy
b4a deploy
﻿
Desplegando a través del Panel de Control:
En el panel de control de tu aplicación, ve a Cloud Code > Functions.
Copia/pega la función en el main.js editor.
Haz clic en Desplegar.
﻿
Llamando a Tu Función
Desde Elm, puedes llamar a una Función en la Nube haciendo una solicitud POST:
Text
import Config exposing (applicationId, restApiKey, serverUrl)
import Http
import Json.Decode as Decode
import Json.Encode as Encode

cloudFunction : String -> Encode.Value -> Http.Request Decode.Value
cloudFunction functionName body =
    Http.request
        { method = "POST"
        , headers =
            [ Http.header "X-Parse-Application-Id" applicationId
            , Http.header "X-Parse-REST-API-Key" restApiKey
            , Http.header "Content-Type" "application/json"
            ]
        , url = serverUrl ++ "/functions/" ++ functionName
        , body = Http.jsonBody body
        , expect = Http.expectJson Decode.value
        , timeout = Nothing
        , tracker = Nothing
        }

calculateTextLength : String -> Http.Request Decode.Value
calculateTextLength text =
    let
        requestBody =
            Encode.object
                [ ( "text", Encode.string text ) ]
    in
    cloudFunction "calculateTextLength" requestBody
import Config exposing (applicationId, restApiKey, serverUrl)
import Http
import Json.Decode as Decode
import Json.Encode as Encode

cloudFunction : String -> Encode.Value -> Http.Request Decode.Value
cloudFunction functionName body =
    Http.request
        { method = "POST"
        , headers =
            [ Http.header "X-Parse-Application-Id" applicationId
            , Http.header "X-Parse-REST-API-Key" restApiKey
            , Http.header "Content-Type" "application/json"
            ]
        , url = serverUrl ++ "/functions/" ++ functionName
        , body = Http.jsonBody body
        , expect = Http.expectJson Decode.value
        , timeout = Nothing
        , tracker = Nothing
        }

calculateTextLength : String -> Http.Request Decode.Value
calculateTextLength text =
    let
        requestBody =
            Encode.object
                [ ( "text", Encode.string text ) ]
    in
    cloudFunction "calculateTextLength" requestBody
﻿
También puedes llamar a Cloud Functions a través de GraphQL:
GraphQL
mutation {
  calculateTextLength(input: {
    text: "Hello GraphQL"
  }) {
    result
  }
}
mutation {
  calculateTextLength(input: {
    text: "Hello GraphQL"
  }) {
    result
  }
}
﻿
Paso 5 – Configuración de la Autenticación de Usuarios
Autenticación de Usuarios en Back4app
Back4app aprovecha la Parse User clase como base para la autenticación. Por defecto, Parse maneja el hash de contraseñas, tokens de sesión y almacenamiento seguro. Puedes crear e iniciar sesión usuarios a través de REST o GraphQL desde tu aplicación Elm.
Configurando la Autenticación de Usuarios
Registrando un Nuevo Usuario (REST)
Text
signUpUser : String -> String -> String -> Http.Request Decode.Value
signUpUser username password email =
    Http.request
        { method = "POST"
        , headers =
            [ Http.header "X-Parse-Application-Id" applicationId
            , Http.header "X-Parse-REST-API-Key" restApiKey
            , Http.header "Content-Type" "application/json"
            ]
        , url = serverUrl ++ "/users"
        , body =
            Http.jsonBody
                (Encode.object
                    [ ( "username", Encode.string username )
                    , ( "password", Encode.string password )
                    , ( "email", Encode.string email )
                    ]
                )
        , expect = Http.expectJson Decode.value
        , timeout = Nothing
        , tracker = Nothing
        }
signUpUser : String -> String -> String -> Http.Request Decode.Value
signUpUser username password email =
    Http.request
        { method = "POST"
        , headers =
            [ Http.header "X-Parse-Application-Id" applicationId
            , Http.header "X-Parse-REST-API-Key" restApiKey
            , Http.header "Content-Type" "application/json"
            ]
        , url = serverUrl ++ "/users"
        , body =
            Http.jsonBody
                (Encode.object
                    [ ( "username", Encode.string username )
                    , ( "password", Encode.string password )
                    , ( "email", Encode.string email )
                    ]
                )
        , expect = Http.expectJson Decode.value
        , timeout = Nothing
        , tracker = Nothing
        }
﻿
Iniciando Sesión (REST)
Text
logInUser : String -> String -> Http.Request Decode.Value
logInUser username password =
    Http.request
        { method = "GET"
        , headers =
            [ Http.header "X-Parse-Application-Id" applicationId
            , Http.header "X-Parse-REST-API-Key" restApiKey
            ]
        , url =
            serverUrl
                ++ "/login?username="
                ++ username
                ++ "&password="
                ++ password
        , body = Http.emptyBody
        , expect = Http.expectJson Decode.value
        , timeout = Nothing
        , tracker = Nothing
        }
logInUser : String -> String -> Http.Request Decode.Value
logInUser username password =
    Http.request
        { method = "GET"
        , headers =
            [ Http.header "X-Parse-Application-Id" applicationId
            , Http.header "X-Parse-REST-API-Key" restApiKey
            ]
        , url =
            serverUrl
                ++ "/login?username="
                ++ username
                ++ "&password="
                ++ password
        , body = Http.emptyBody
        , expect = Http.expectJson Decode.value
        , timeout = Nothing
        , tracker = Nothing
        }
﻿
Integración de Inicio de Sesión Social
Back4app y Parse pueden integrarse con proveedores de OAuth populares como Google, Facebook, o Apple. Normalmente, configurarás estos proveedores en el panel de control de Back4app y luego harás las solicitudes necesarias desde Elm. Consulta la Documentación de Inicio de Sesión Social para pasos de configuración detallados.
Verificación de Correo Electrónico y Restablecimiento de Contraseña
Navega a la Configuración de Correo Electrónico en tu panel de control de Back4app.
Habilita la verificación de correo electrónico para asegurar que los nuevos usuarios verifiquen la propiedad de sus direcciones de correo electrónico.
Configura la dirección del remitente, las plantillas de correo electrónico y tu dominio personalizado si lo deseas.
Paso 6 – Manejo del Almacenamiento de Archivos
Subida y Recuperación de Archivos
Parse incluye la Clase Parse.File para manejar las subidas de archivos, que Back4app almacena de forma segura. Dado que estamos utilizando REST desde Elm, podemos hacer una subida de archivos multipart o adjuntar un archivo codificado en base64.
Subida de Archivos a través de REST
Text
uploadFile : String -> String -> Http.Request Decode.Value
uploadFile fileName base64Content =
    Http.request
        { method = "POST"
        , headers =
            [ Http.header "X-Parse-Application-Id" applicationId
            , Http.header "X-Parse-REST-API-Key" restApiKey
            , Http.header "Content-Type" "text/plain"
            ]
        , url = serverUrl ++ "/files/" ++ fileName
        , body = Http.stringBody "text/plain" base64Content
        , expect = Http.expectJson Decode.value
        , timeout = Nothing
        , tracker = Nothing
        }
uploadFile : String -> String -> Http.Request Decode.Value
uploadFile fileName base64Content =
    Http.request
        { method = "POST"
        , headers =
            [ Http.header "X-Parse-Application-Id" applicationId
            , Http.header "X-Parse-REST-API-Key" restApiKey
            , Http.header "Content-Type" "text/plain"
            ]
        , url = serverUrl ++ "/files/" ++ fileName
        , body = Http.stringBody "text/plain" base64Content
        , expect = Http.expectJson Decode.value
        , timeout = Nothing
        , tracker = Nothing
        }
﻿
Una vez cargado, recibirás una URL de archivo en la respuesta. Puedes almacenar esa URL en un campo de clase de Parse o mostrarla en tu aplicación Elm según sea necesario.
Seguridad de Archivos
Parse Server proporciona configuraciones para gestionar la seguridad de la carga de archivos. Por ejemplo:
JSON
{
  "fileUpload": {
    "enableForPublic": true,
    "enableForAnonymousUser": true,
    "enableForAuthenticatedUser": true
  }
}
{
  "fileUpload": {
    "enableForPublic": true,
    "enableForAnonymousUser": true,
    "enableForAuthenticatedUser": true
  }
}
﻿
Paso 7 – Programación de Tareas con Cloud Jobs
Cloud Jobs
Cloud Jobs en Back4app te permite programar y ejecutar tareas rutinarias en tu backend, como limpiar datos antiguos o enviar correos electrónicos periódicos. Por ejemplo, un trabajo para eliminar tareas pendientes más antiguas de 30 días podría verse así:
JS
// main.js

Parse.Cloud.job('cleanupOldTodos', async (request) => {
  const Todo = Parse.Object.extend('Todo');
  const query = new Parse.Query(Todo);

  const now = new Date();
  const THIRTY_DAYS = 30 * 24 * 60 * 60 * 1000;
  const cutoff = new Date(now - THIRTY_DAYS);
  query.lessThan('createdAt', cutoff);

  try {
    const oldTodos = await query.find({ useMasterKey: true });
    await Parse.Object.destroyAll(oldTodos, { useMasterKey: true });
    return `Deleted ${oldTodos.length} old Todos.`;
  } catch (err) {
    throw new Error('Error during cleanup:' + err.message);
  }
});
// main.js

Parse.Cloud.job('cleanupOldTodos', async (request) => {
  const Todo = Parse.Object.extend('Todo');
  const query = new Parse.Query(Todo);

  const now = new Date();
  const THIRTY_DAYS = 30 * 24 * 60 * 60 * 1000;
  const cutoff = new Date(now - THIRTY_DAYS);
  query.lessThan('createdAt', cutoff);

  try {
    const oldTodos = await query.find({ useMasterKey: true });
    await Parse.Object.destroyAll(oldTodos, { useMasterKey: true });
    return `Deleted ${oldTodos.length} old Todos.`;
  } catch (err) {
    throw new Error('Error during cleanup:' + err.message);
  }
});
﻿
Despliega tu Cloud Code con el nuevo trabajo (a través de CLI o dashboard).
Ve al Dashboard de Back4app > Configuraciones de la Aplicación > Configuraciones del Servidor > Tareas en Segundo Plano.
Programa el trabajo para que se ejecute diariamente o según lo desees.
Programando un trabajo en la nube
﻿
Paso 8 – Integrando Webhooks
Webhooks permiten que tu aplicación Back4app envíe solicitudes HTTP a un servicio externo cada vez que ocurren ciertos eventos. Esto es poderoso para integrarse con sistemas de terceros como pasarelas de pago (por ejemplo, Stripe), herramientas de marketing por correo electrónico o plataformas de análisis.
Navega a la configuración de Webhooks en tu panel de control de Back4app > Más > WebHooks y luego haz clic en Agregar Webhook.
Configura un endpoint (por ejemplo, https://your-external-service.com/webhook-endpoint).
Configura los disparadores para especificar qué eventos en tus clases de Back4app o funciones de Cloud Code activarán el webhook.
Agregando un Webhook
﻿
Por ejemplo, si deseas notificar a un canal de Slack cada vez que se crea un nuevo Todo:
Crea una aplicación de Slack que acepte webhooks entrantes.
Copia la URL del webhook de Slack.
En tu panel de control de Back4app, establece el endpoint a esa URL de Slack para el evento “Nuevo registro en la clase Todo.”
Agrega encabezados HTTP personalizados o cargas útiles si es necesario.
WebHook Antes de Guardar
﻿
Paso 9 – Explorando el Panel de Administración de Back4app
El Back4app Admin App es una interfaz de gestión basada en la web diseñada para usuarios no técnicos para realizar operaciones CRUD y manejar tareas de datos rutinarias sin escribir ningún código. Proporciona una centrada en el modelo, amigable para el usuario interfaz que simplifica la administración de bases de datos, la gestión de datos personalizados y las operaciones a nivel empresarial.
Habilitando la Admin App
Habilitar yendo a App Dashboard > Más > Admin App y haciendo clic en el botón “Habilitar Admin App”.
Habilitar Admin App
﻿
Crear un Primer Usuario Admin (nombre de usuario/contraseña), que genera automáticamente un nuevo rol (B4aAdminUser) y clases (B4aSetting, B4aMenuItem y B4aCustomField) en el esquema de tu aplicación.
﻿
Elegir un Subdominio para acceder a la interfaz de administración y completar la configuración.
﻿
Iniciar Sesión utilizando las credenciales de administrador que creaste para acceder a tu nuevo panel de control de Admin App.
﻿
Una vez habilitada, la aplicación de administración de Back4app facilita la visualización, edición o eliminación de registros de su base de datos, sin requerir el uso directo del Panel de Control de Parse o código de backend. Con controles de acceso configurables, puede compartir de manera segura esta interfaz con miembros del equipo o clientes que necesiten una forma clara y fácil de gestionar datos.
Conclusión
Al seguir este tutorial completo, usted ha:
Creado un backend seguro para una aplicación Elm en Back4app.
Configurado una base de datos con esquemas de clase, tipos de datos y relaciones.
Integrado consultas en tiempo real (Consultas en Vivo) para actualizaciones inmediatas de datos.
Aplicado medidas de seguridad utilizando ACLs y CLPs para proteger y gestionar el acceso a los datos.
Implementado funciones de Cloud Code para ejecutar lógica de negocio personalizada en el lado del servidor.
Configurado la autenticación de usuarios con soporte para verificación de correo electrónico y restablecimiento de contraseñas.
Gestionado cargas de archivos y recuperación, con controles de seguridad de archivos opcionales.
Programado trabajos en la nube para tareas automatizadas en segundo plano.
Usado Webhooks para integrarse con servicios externos.
Explorado el Panel de Administración de Back4app para la gestión de datos.
Con un sólido frontend de Elm y un robusto backend de Back4app, ahora estás bien equipado para desarrollar aplicaciones ricas en funciones, escalables y seguras. Continúa explorando funcionalidades más avanzadas, integra tu lógica de negocio y aprovecha el poder de Back4app para ahorrarte innumerables horas en la administración de servidores y bases de datos. ¡Feliz codificación!
Próximos Pasos
Construir una aplicación Elm lista para producción ampliando este backend para manejar modelos de datos más complejos, estrategias de caché y optimizaciones de rendimiento.
Integrar características avanzadas como flujos de autenticación especializados, control de acceso basado en roles o APIs externas (como pasarelas de pago).
Consulta la documentación oficial de Back4app para profundizar en seguridad avanzada, ajuste de rendimiento y análisis de registros.
Explora otros tutoriales sobre aplicaciones de chat en tiempo real, paneles de IoT o servicios basados en ubicación. Puedes combinar las técnicas aprendidas aquí con APIs de terceros para crear aplicaciones complejas del mundo real.
﻿
Actualizado 23 Jan 2025
¿Esta página le fue útil?
¿Cómo construir un backend para VueJS?
¿Cómo construir un backend para NodeJS?