UniFandora - minidiapositivas (imágenes, GIFs y videos)
(github.com/enarche-ahn)Les presento una app sencilla de presentaciones que hice porque la necesitaba.
Durante la semana de trabajo, cuando me tomo un café un momento, me gusta ver GIFs de IU en una esquina del monitor.
Cambié mi computadora principal a Mac y, como no encontraba una app adecuada, probé hacer una sencilla con ayuda de GPT.
Estas son, a grandes rasgos, sus características.
- Función de presentación
- Reproducción de imágenes (incluidos GIFs) y videos
- Posibilidad de ver los videos hasta el final, independientemente del tiempo configurado para la presentación
- Ajuste de la altura de la ventana según la proporción de la imagen
- Mostrar la hora
- Actualización automática
Lo publico por si hay alguien con gustos parecidos a los míos.
Al principio empecé a desarrollarlo en Swift, pero ya que estaba, pensé en hacerlo multiplataforma, así que
estuve considerando Flutter y Electron; como no tenía en cuenta móvil, decidí hacerlo con Electron.
Mientras lo desarrollaba, también aprendí algunas cosas nuevas, así que las comparto de paso.
github : https://github.com/enarche-ahn/unifandora-release
Actualización automática
Es la primera vez que uso Electron.
Ya había escuchado el rumor de que Visual Studio Code estaba hecho con Electron, así que siempre me dio curiosidad,
pero cuando por fin lo usé, me encantó por completo.
Sobre todo, me sorprendió muchísimo lo fácil que es integrar la actualización automática.
Mostrar logs en la shell
Normalmente, cuando imprimía mensajes de log para depurar en el renderer, solo podía verlos en el modo de desarrollo del navegador.
Por si acaso, se lo pregunté a GPT y me mostró la solución de inmediato.
El método era mucho más simple y eficiente de lo que esperaba, tanto que me impresionó.
(Supongo que también es porque llevo mucho tiempo desarrollando solo backend y no lo conocía bien ^^;)
Si agregan esto como se muestra abajo, los console.log() que se imprimen en [renderer.js] también aparecen correctamente en la shell.
[main.js]
// Log messages received from renderer
ipcMain.on('renderer-log', (event, message) => {
console.log('Renderer Log:', message);
});
[preload.js]
contextBridge.exposeInMainWorld('electronAPI', {
sendLog: (message) => ipcRenderer.send('renderer-log', message)
});
[renderer.js]
// Override console.log to forward log messages to the main process.
(function() {
const originalConsoleLog = console.log;
console.log = function(...args) {
if (window.electronAPI && typeof window.electronAPI.sendLog === 'function') {
window.electronAPI.sendLog(args.join(' '));
}
originalConsoleLog.apply(console, args);
};
})();
window.addEventListener('DOMContentLoaded', () => {
...
console.log('Slideshow started...');
});
1 comentarios
Por ahora solo he subido el binario para Windows.
La versión para macOS todavía no está disponible porque tengo que volver a inscribirme en el Apple Developer Program ^^;;;
Mientras tanto, quienes la necesiten pueden descargar el código fuente, compilarlo y usarlo~