UniFandora - slideshow mini (hình ảnh, ảnh động, video)

Xin giới thiệu một ứng dụng slideshow đơn giản mà tôi tự làm vì có nhu cầu dùng.
Trong những lúc tranh thủ uống một ly cà phê giữa tuần làm việc, tôi thích mở ảnh động của IU ở một góc màn hình.
Sau khi đổi máy tính chính sang Mac, tôi không tìm được ứng dụng nào thật sự phù hợp nên đã thử làm một bản đơn giản với sự hỗ trợ của GPT.

Đây là các tính năng chính của ứng dụng.

• Tính năng slideshow
• Phát hình ảnh (bao gồm ảnh động) và video
• Có thể xem video đến hết dù thời gian slideshow được đặt riêng
• Tự điều chỉnh chiều cao cửa sổ theo tỷ lệ ảnh
• Hiển thị thời gian
• Tự động cập nhật

Tôi đăng lên vì nghĩ biết đâu cũng có ai đó có gu giống mình.
Ban đầu tôi phát triển bằng Swift, nhưng rồi nghĩ nếu đã làm thì nên làm đa nền tảng,
nên đã cân nhắc giữa Flutter và Electron, và vì không tính đến di động nên cuối cùng chọn Electron.

Trong quá trình phát triển lần này, tôi cũng học được thêm vài điều mới nên tiện thể chia sẻ luôn.
github : https://github.com/enarche-ahn/unifandora-release

Tự động cập nhật

Đây là lần đầu tôi dùng Electron,
trước đây tôi từng nghe đồn rằng Visual Code được phát triển bằng Electron nên đã khá tò mò,
nhưng khi thực sự dùng thử thì tôi hoàn toàn bị chinh phục.
Đặc biệt, tôi rất ngạc nhiên khi việc kết nối tính năng tự động cập nhật lại có thể làm đơn giản đến vậy.

Xuất log ra shell

Thông thường, khi in log message để debug trong renderer thì chỉ có thể xem trong chế độ phát triển của trình duyệt.
Tôi thử hỏi GPT thì nó đưa ra ngay một cách giải quyết rất gọn.
Cách đó đơn giản và hiệu quả hơn tôi tưởng rất nhiều, đến mức nổi da gà.
(Có lẽ cũng vì lâu nay tôi chỉ làm backend nên không rành lắm ^^;)
Chỉ cần thêm như bên dưới thì console.log() được gọi trong [renderer.js] sẽ được in ra shell rất ổn.

[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...');  
 });  

[enarche]

Hiện tại mình chỉ đăng bản nhị phân cho Windows.
Phiên bản macOS vẫn chưa có vì mình phải đăng ký lại Apple Developer Program ^^;;;
Trước mắt, ai cần thì tải source về, build rồi dùng nhé~