6 पॉइंट द्वारा enarche 2025-04-07 | 1 टिप्पणियां | WhatsApp पर शेयर करें

मैंने अपनी ज़रूरत के लिए बनाया एक सरल स्लाइडशो ऐप पेश कर रहा हूँ.
काम के हफ्ते में जब थोड़ी देर कॉफी पीता हूँ, तो मॉनिटर के एक कोने में IU के GIF देखना मुझे पसंद है.
अपना मुख्य कंप्यूटर Mac में बदलने के बाद, कोई ठीक-ठाक ऐप नहीं मिला तो सोचते-सोचते GPT की मदद से इसे सरल रूप में बना लिया.

ऐप की मोटे तौर पर ये खासियतें हैं.

  • स्लाइडशो फ़ीचर
  • इमेज (GIF सहित), वीडियो प्लेबैक
  • स्लाइडशो समय से अलग, वीडियो को अंत तक देखने की सुविधा
  • इमेज के अनुपात के अनुसार विंडो की ऊंचाई समायोजित करना
  • समय प्रदर्शन
  • ऑटो अपडेट

सोचा, शायद मेरी तरह की पसंद रखने वाला कोई और भी हो, इसलिए शेयर कर रहा हूँ.
शुरुआत में Swift में डेवलप कर रहा था, लेकिन सोचा कि जब बना ही रहा हूँ तो cross platform बनाया जाए,
Flutter और Electron के बीच सोच-विचार के बाद, मोबाइल को ध्यान में नहीं रख रहा था इसलिए Electron चुना.

इस बार डेवलप करते हुए कुछ नई बातें भी पता चलीं, इसलिए छोटी-छोटी चीज़ें भी साथ में साझा कर रहा हूँ.
github : https://github.com/enarche-ahn/unifandora-release

ऑटो अपडेट

Electron मैंने पहली बार इस्तेमाल किया.
पहले से यह सुना था कि Visual Code को Electron से बनाया गया है, इसलिए जिज्ञासा तो काफी थी,
लेकिन वास्तव में इस्तेमाल करके मैं पूरी तरह प्रभावित हो गया.
खासकर, ऑटो अपडेट को बहुत आसानी से जोड़ पाना देखकर मैं सचमुच हैरान रह गया.

shell में लॉग आउटपुट

आमतौर पर renderer में debugging के लिए लॉग मैसेज आउटपुट करने पर, उन्हें सिर्फ़ ब्राउज़र के डेवलपर मोड में ही देखा जा सकता था.
जिज्ञासावश GPT से पूछा, तो उसने तुरंत समाधान बता दिया.
वह तरीका उम्मीद से कहीं ज़्यादा सरल और प्रभावी था, इसलिए सचमुच रोंगटे खड़े हो गए.
(काफ़ी समय से सिर्फ़ backend ही डेवलप कर रहा था, इसलिए शायद मुझे ही ठीक से पता नहीं था ^^;)
नीचे की तरह जोड़ देने पर [renderer.js] में आउटपुट किया गया console.log() 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 टिप्पणियां

 
enarche 2025-04-07

फ़िलहाल केवल Windows वर्ज़न की binary अपलोड की है.
macOS वर्ज़न अभी नहीं है, क्योंकि उसके लिए Apple Developer Program में फिर से शामिल होना पड़ेगा ^^;;;
फिलहाल, जिन्हें ज़रूरत हो वे source डाउनलोड करके build कर के इस्तेमाल करें~