Crear cuenta en AppCreator24

Empezamos diseñando nuestra App de películas ingresando a la pagina de appcreator24.com y creamos nuestra cuenta de usuario, llenando los casilleros que se le solicite.

Luego ingresamos a nuestro correo electrónico y damos de alta para activar nuestra cuenta, pulsando en el enlace enviado por appcreator24.com para que así podamos acceder a nuestra cuenta de usuario y empezar a diseñar nuestra App

Datos Generales de la Aplicación

Una vez que hemos ingresado como usuarios, comenzamos con la información básica y necesaria, donde llenaremos los casilleros que solicita como:

• Coloque un nombre para su aplicación.
• Suba un logo que identifique su aplicación.
• Redacte una pequeña descripción de su aplicación

Estilo de la Aplicación

El estilo lo deja por defecto ya que posteriormente tendrá que volver a modificar, luego pulse en siguiente >>.

Cuando regrese a modificar el estilo de la aplicación, seleccione el que más se adecue al tipo de aplicativo que va a crear

Cambio de Diseño de la Aplicación

Ahora cambie el diseño de su aplicación elija el tipo de menu que va tener su aplicativo, puede ir probando cual mejor se adecue o simplemente coloque sin menu y pulse en el botón Guardar.

Tipo de la Aplicación

Aqui seleccionamos el tipo de nuestra aplicación que vamos a diseñar, pero en este caso es referencial ya que cuando creamos las secciones vamos a poder decidir que tipo de sección estamos creando

Luego que hayamos seleccionado la opción Acceso a página web, ingresamos el nombre de la pagina y colocamos la URL o Link de nuestra pagina web para finalizar con la creación de nuestra aplicación.

Pero para finalizar pulsamos en el boton siguiente>> y nuevamente pulsamos en el boton Ir a Gestión de la aplicación

Crear Secciones de la Aplicación

En el menu lateral de la izquierda pulsamos sobre el apartado de Secciones, Luego pulsamos en Crear Nueva Sección, pulsamos sobre HTML por lo que vamos a insertar solo códigos, finalmente pulsamos en Siguiente.

• Colocamos un titulo a la sección
• En HTML agregamos todo el codigo correspondiente
• Pulsamos en opciones avanzadas

En opciones avanzadas es importante que realice las siguientes indicaciones

• En referencias agregue un nombre unico, este sirve como enlace para las entradas o otras secciones, por ejemplo si coloco: sechome, el enlace será: go:sechome
• En incluir menu coloque en No
• En permitir sin conexión coloque en No
• Las demas opciones deje por defecto o active los que cree que sean necesarios

Personalización de Estilos

Costa TV permite personalizar la apariencia utilizando variables CSS definidas en :root. Para cambiar los colores y adaptar el diseño a tus necesidades, modifica los siguientes valores en el archivo CSS o en el estilo:

:root {
    --fondo-color: #07080a;  /* Color de fondo */
    --text-color: #b6b6b6; /* Color del texto */
    --seccion-color: #1a212b;  /* Color de secciones */
    --active-color: #f8312f;  /* Color de activo o/y hover */
    --borde-color: #fefefe61;  /* Color de bordes */
    --active-text: #ffffff;  /* Color de texto hover y/o activo */
}

Para cambiar los colores:

• Modifica --fondo-color para cambiar el fondo general de la aplicación.
• Ajusta --text-color para cambiar el color del texto principal.
• Edita --seccion-color para cambiar el color de fondo de las secciones.
• Usa --active-color para definir el color de los elementos activos o en hover.
• Cambia --borde-color para ajustar los bordes de la interfaz.
• Configura --active-text para definir el color del texto en elementos activos o en hover.

Agregar Enlaces de Canales

Los canales se definen dentro del array channels en el script principal. Cada canal debe tener los siguientes atributos:

const channels = [
    { name: "Tv Perú", url: "https://cdnhd.iblups.com/hls/ee2450c81e554f4cae0e6292106993c2.m3u8", type: "m3u8", category: "Deportes" },
    { name: "Willax Tv", url: "https://www.dailymotion.com/embed/video/x7x4dgx?autoplay=1", type: "embed", category: "Noticias" }
];

Parámetros:

• name: Nombre único del canal.
• url: Enlace del canal en formato .m3u8 o embed.
• type: Define el tipo de contenido (m3u8 para streaming HLS o embed para vídeos embebidos de plataformas como YouTube, Dailymotion, etc.).
• category: Define la categoría a la que pertenece el canal.

Importante: No se debe colocar el mismo nombre en cada ítem, ya que esto puede generar problemas en la interfaz y en la funcionalidad de búsqueda y organización de canales en la lista de favoritos.

Agregar Canales a Favoritos

Los usuarios pueden agregar canales a su lista de favoritos presionando el botón ❤️ junto a cada canal. Estos se almacenan en el almacenamiento local del navegador para que persistan en futuras visitas.

function addToFavorites(channel) {
    let favs = JSON.parse(localStorage.getItem("favorites")) || [];
    if (!favs.some(fav => fav.name === channel.name)) {
        favs.push(channel);
        localStorage.setItem("favorites", JSON.stringify(favs));
        updateFavCounter();
    }
}

Para ver los favoritos, los usuarios deben hacer clic en el botón “Mis favoritos” donde mostrará un popup con la lista de los canales favoritos, luego al pulsar en un canal, cerrará el popup y al mismo tiempo, reproducirá tal canal.

Creación Automática de Categorías

El sistema genera automáticamente las categorías en base a los canales disponibles. No es necesario crear categorías manualmente.

Estas categorías aparecerán sobre la lista de canales, ten en cuenta que cada categoría se crea desde el código donde se agregan los detalles del canal (category: “Noticias”)

function generateCategories() {
    let categories = [...new Set(channels.map(channel => channel.category))];
    categories.forEach(category => {
        let button = document.createElement("button");
        button.innerText = category;
        button.onclick = () => filterByCategory(category);
        document.getElementById("categories").appendChild(button);
    });
}

Compatibilidad y Responsividad

El diseño de Costa TV es totalmente responsive, lo que permite su uso en distintos dispositivos:

• Televisores: Compatible con Smart TVs mediante navegadores web.
• Tablets: Diseño adaptable a pantallas de mayor tamaño.
• Celulares: Interfaz optimizada para dispositivos móviles.

Reproducción de Canales

Al presionar el botón “Play” dentro del reproductor sin seleccionar un canal, se reproducirá automáticamente el primer canal de la lista.

document.getElementById("playFirst").addEventListener("click", function() {
    if (channels.length > 0) {
        playChannel(channels[0]);
    }
});

Buscador de Canales

El buscador permite filtrar canales en tiempo real a medida que el usuario escribe en la barra de búsqueda.

document.getElementById("search").addEventListener("input", function(e) {
    let query = e.target.value.toLowerCase();
    let filtered = channels.filter(channel => channel.name.toLowerCase().includes(query));
    renderChannels(filtered);
});

Si no se encuentran resultados, se muestra un mensaje indicando que no hay coincidencias.

Soporte para Enlaces M3U8 y Embed

El sistema admite dos tipos de enlaces para la reproducción de contenido:

• M3U8: Para transmisiones en vivo en formato HLS.
• Embed: Para contenido embebido de plataformas como YouTube y Dailymotion.

Para agregar un nuevo canal con un enlace embebido, debe estructurarse de la siguiente manera:

{ name: "YouTube Live", url: "https://www.youtube.com/embed/xkRhg12UP5M", type: "embed", category: "Eventos" }

Para agregar un enlace M3U8:

{ name: "Canal HD", url: "https://servidor.com/stream.m3u8", type: "m3u8", category: "Películas" }

Importancia de los Nombres Únicos

Cada canal debe tener un nombre único para evitar conflictos en la búsqueda y en la selección de canales. Si se repiten nombres, la funcionalidad del reproductor podría no identificar correctamente los canales.