संवाद और सूचनाएँ
सुसंगत और बाधारहित उपयोगकर्ता अनुभव देने के लिए फ़ाइल चयन, संदेश बॉक्स और सिस्टम सूचनाओं हेतु नेटिव संवादों का उपयोग करें।
संवाद और सूचनाएँ, CoddyKit पर Electron डेस्कटॉप ऐप विकास का एक निःशुल्क पाठ है। यह 4 में से 2वाँ पाठ है। आप नीचे पूरा पाठ निःशुल्क पढ़ सकते हैं—फिर अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर के साथ ब्राउज़र में इसका व्यावहारिक अभ्यास कर सकते हैं। यह Electron डेस्कटॉप ऐप विकास सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। Electron डेस्कटॉप ऐप विकास पाठ्यक्रम में कुल 4 पाठ शामिल हैं।
वेब और डेस्कटॉप के बीच सेतु
पाठ 2 में आपका स्वागत है! इस पाठ में हम सीखेंगे कि ऑपरेटिंग सिस्टम के साथ इंटरैक्ट करके अपने Electron ऐप को वास्तव में मूल ऐप जैसा कैसे बनाया जाए।
डेस्कटॉप ऐप्लिकेशन में अक्सर उपयोगकर्ताओं से फ़ाइलें चुनने, कार्रवाइयों की पुष्टि करने या समय पर अपडेट देने के लिए कहना पड़ता है। Electron इन कार्यों के लिए समर्पित मॉड्यूल उपलब्ध कराता है: संवाद बॉक्स और सूचनाएँ।
Electron का `dialog` मॉड्यूल
dialog मॉड्यूल आपके Electron ऐप को फ़ाइलें खोलने और सहेजने या चेतावनी संदेश दिखाने के लिए मूल सिस्टम संवाद बॉक्स प्रदर्शित करने देता है।
- मूल जैसा अनुभव: ये संवाद बॉक्स उपयोगकर्ता के ऑपरेटिंग सिस्टम (Windows, macOS, Linux) के रूप-रंग और अनुभव से मेल खाते हैं।
- रोकने वाला इंटरैक्शन: उपयोगकर्ता के साथ इंटरैक्शन होने तक संवाद बॉक्स आमतौर पर ऐप्लिकेशन के यूआई को रोक देते हैं।
- केवल मुख्य प्रक्रिया: सुरक्षा और एकरूपता के लिए
dialogमॉड्यूल का उपयोग केवल मुख्य प्रक्रिया से किया जा सकता है।
`showOpenDialog` से फ़ाइलें चुनना
dialog.showOpenDialog() विधि उपयोगकर्ताओं को अपने सिस्टम से फ़ाइलें या डायरेक्टरी चुनने देती है। यह एक प्रॉमिस लौटाती है, जो चुने गए पथों के साथ पूरी होती है या यह बताती है कि संवाद बॉक्स रद्द कर दिया गया था।
मुख्य विकल्पों में शामिल हैं:
properties: चयन के प्रकार को नियंत्रित करने वाली['openFile', 'multiSelections']जैसी सारणी।filters: फ़ाइल प्रकारों को सीमित करने के लिए{ name: 'Images', extensions: ['jpg', 'png'] }जैसी ऑब्जेक्ट की सारणी।
कोड प्रदर्शन: फ़ाइल खोलने का संवाद बॉक्स
इस उदाहरण को चलाकर देखें। यह एक सरल Electron विंडो शुरू करेगा और तुरंत मूल 'फ़ाइल खोलें' संवाद बॉक्स प्रदर्शित करेगा। कोई फ़ाइल चुनें और कंसोल आउटपुट देखें!
const { app, BrowserWindow, dialog } = require('electron');
const path = require('path');
function createWindow() {
const mainWindow = new BrowserWindow({
width: 600,
height: 400,
webPreferences: {
preload: path.join(__dirname, 'preload.js'),
contextIsolation: true
}
});
mainWindow.loadURL('about:blank'); // Load a blank page
mainWindow.webContents.on('did-finish-load', async () => {
const result = await dialog.showOpenDialog(mainWindow, {
title: 'Select a File',
properties: ['openFile'],
filters: [
{ name: 'Text Files', extensions: ['txt'] },
{ name: 'All Files', extensions: ['*'] }
]
});
if (!result.canceled) {
console.log('Selected file:', result.filePaths[0]);
} else {
console.log('File selection canceled.');
}
});
}
app.whenReady().then(() => {
createWindow();
app.on('activate', () => {
if (BrowserWindow.getAllWindows().length === 0) {
createWindow();
}
});
});
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit();
}
});`showSaveDialog` से उपयोगकर्ता का डेटा सहेजना
जब आपके ऐप को उपयोगकर्ता द्वारा बनाया गया कंटेंट सहेजना हो, तो dialog.showSaveDialog() आपके लिए सबसे उपयोगी विकल्प है। यह उपयोगकर्ता से फ़ाइल सहेजने के लिए स्थान और फ़ाइल नाम पूछता है।
उपयोगी विकल्पों में शामिल हैं:
defaultPath: सुझाया गया पथ या फ़ाइल नाम, जैसेapp.getPath('documents') + '/untitled.txt'।filters:showOpenDialogके समान, फ़ाइल प्रकार सुझाने के लिए।
संवाद बॉक्स चुना गया फ़ाइल पथ लौटाता है या रद्द किए जाने पर undefined लौटाता है।
const { app, BrowserWindow, dialog } = require('electron');
const path = require('path');
function createWindow() {
const mainWindow = new BrowserWindow({ width: 600, height: 400 });
mainWindow.loadURL('about:blank');
mainWindow.webContents.on('did-finish-load', async () => {
const result = await dialog.showSaveDialog(mainWindow, {
title: 'Save Your File',
defaultPath: app.getPath('documents') + '/my_document.txt',
filters: [
{ name: 'Text Files', extensions: ['txt'] },
{ name: 'All Files', extensions: ['*'] }
]
});
if (!result.canceled) {
console.log('File will be saved to:', result.filePath);
// In a real app, you'd write content to result.filePath here
} else {
console.log('Save operation canceled.');
}
});
}
app.whenReady().then(createWindow);
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') app.quit();
});`showMessageBox` से उपयोगकर्ताओं को सूचित करना
सामान्य चेतावनियों, पुष्टिकरणों या त्रुटि संदेशों के लिए dialog.showMessageBox() का उपयोग करें। यह अनुकूलित बटन और टेक्स्ट वाला मूल संदेश बॉक्स प्रदर्शित करता है।
मुख्य विकल्प:
type: 'none', 'info', 'warning', 'error', 'question'।buttons: बटन लेबल की सारणी, जैसे['Save', 'Discard', 'Cancel']।message: मुख्य संदेश का टेक्स्ट।detail: अतिरिक्त और अधिक विस्तृत जानकारी।
यह उपयोगकर्ता द्वारा क्लिक किए गए बटन की अनुक्रमणिका लौटाता है।
const { app, BrowserWindow, dialog } = require('electron');
const path = require('path');
function createWindow() {
const mainWindow = new BrowserWindow({ width: 600, height: 400 });
mainWindow.loadURL('about:blank');
mainWindow.webContents.on('did-finish-load', async () => {
const result = await dialog.showMessageBox(mainWindow, {
type: 'question',
title: 'Exit Application',
message: 'Do you want to save your changes?',
detail: 'Unsaved changes will be lost if you proceed without saving.',
buttons: ['Save', 'Discard', 'Cancel'],
defaultId: 0,
cancelId: 2
});
if (result.response === 0) {
console.log('User chose to Save.');
} else if (result.response === 1) {
console.log('User chose to Discard.');
} else {
console.log('User chose to Cancel.');
}
});
}
app.whenReady().then(createWindow);
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') app.quit();
});`Notification` से सिस्टम सूचनाएँ
जहाँ संवाद बॉक्स तुरंत ध्यान देने की माँग करते हैं, वहीं Notification मॉड्यूल घटनाओं के बारे में उपयोगकर्ताओं को बिना बाधा डाले सूचित करने का तरीका देता है। ये ऑपरेटिंग सिस्टम के सूचना केंद्र में दिखाई देती हैं।
- रोकती नहीं हैं: सूचनाएँ उपयोगकर्ता के कार्यप्रवाह में बाधा नहीं डालतीं।
- समय पर जानकारी: पृष्ठभूमि के कार्य पूरे होने, नए संदेशों या स्थिति अपडेट के लिए आदर्श।
- मुख्य या रेंडरर: दोनों प्रक्रियाओं से उपयोग की जा सकती हैं।
सरल सूचना भेजना
सूचना भेजना सरल है। आप एक नया Notification इंस्टेंस बनाकर उसकी show() विधि को कॉल करते हैं।
सामान्य विकल्पों में शामिल हैं:
title: सूचना का मुख्य शीर्षक।body: विस्तृत टेक्स्ट सामग्री।icon: छवि आइकन का वैकल्पिक पथ।
सूचना दिखाने का प्रयास करने से पहले Notification.isSupported() की जाँच करना अच्छा अभ्यास है।
const { app, BrowserWindow, Notification } = require('electron');
const path = require('path');
function createWindow() {
const mainWindow = new BrowserWindow({ width: 600, height: 400 });
mainWindow.loadURL('about:blank');
mainWindow.webContents.on('did-finish-load', () => {
if (Notification.isSupported()) {
new Notification({
title: 'Electron App Update',
body: 'A new version is available! Click to install.',
// icon: path.join(__dirname, 'icon.png') // Optional
}).show();
console.log('Notification sent!');
} else {
console.log('Notifications are not supported on this system.');
}
});
}
app.whenReady().then(createWindow);
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') app.quit();
});इंटरैक्टिव सूचनाएँ
सूचनाएँ केवल स्थिर संदेशों तक सीमित नहीं होतीं। click या close जैसी घटनाओं को सुनकर आप उनमें इंटरैक्टिविटी जोड़ सकते हैं। इससे उपयोगकर्ता सीधे सूचना से ही कार्रवाई कर सकते हैं।
उदाहरण के लिए, 'नया संदेश' सूचना पर क्लिक करने से ऐप विंडो सामने आ सकती है या कोई विशिष्ट चैट खुल सकती है।
const { app, BrowserWindow, Notification } = require('electron');
const path = require('path');
function createWindow() {
const mainWindow = new BrowserWindow({ width: 600, height: 400 });
mainWindow.loadURL('about:blank');
mainWindow.webContents.on('did-finish-load', () => {
if (Notification.isSupported()) {
const myNotification = new Notification({
title: 'New Message!',
body: 'You have 3 unread messages.',
silent: false // Play a sound
});
myNotification.on('click', () => {
console.log('Notification clicked! Opening messages...');
mainWindow.show(); // Bring the window to front
});
myNotification.show();
console.log('Interactive notification sent.');
} else {
console.log('Notifications not supported.');
}
});
}
app.whenReady().then(createWindow);
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') app.quit();
});संवाद बॉक्स बनाम सूचनाएँ: किसका उपयोग कब करें?
संवाद बॉक्स और सूचना के बीच चुनाव तात्कालिकता और आवश्यक उपयोगकर्ता इंटरैक्शन पर निर्भर करता है:
- संवाद बॉक्स: महत्वपूर्ण जानकारी, उपयोगकर्ता इनपुट (फ़ाइल चयन, सहेजने का स्थान) या ऐसी कार्रवाइयों के लिए उपयोग करें जो समाधान होने तक ऐप को रोकती हैं। ये तुरंत ध्यान देने की माँग करते हैं।
- सूचनाएँ: ऐसी गैर-महत्वपूर्ण, समय-संवेदनशील जानकारी के लिए उपयोग करें जिसमें तुरंत कार्रवाई आवश्यक न हो। ये उपयोगकर्ता के कार्यप्रवाह में बाधा डाले बिना जानकारी देती हैं।
उचित इंटरैक्शन विधि चुनकर हमेशा सहज और स्वाभाविक उपयोगकर्ता अनुभव देने का लक्ष्य रखें।
त्वरित जाँच: संवाद बॉक्स या सूचनाएँ?
निम्नलिखित में से किन परिस्थितियों के लिए Electron के dialog मॉड्यूल का उपयोग सबसे उपयुक्त है? लागू होने वाले सभी विकल्प चुनें।
पुनरावलोकन और अगले चरण
बहुत अच्छा! आपने Electron के dialog और Notification मॉड्यूल का उपयोग करके मूल ऑपरेटिंग सिस्टम के साथ इंटरैक्ट करना सीख लिया है।
dialog: फ़ाइल चयन, सहेजने और संदेश बॉक्स जैसी महत्वपूर्ण, रोकने वाली इंटरैक्शन के लिए। केवल मुख्य प्रक्रिया में।Notification: सिस्टम सूचना केंद्र में दिखाई देने वाली गैर-रोकने वाली, जानकारीपूर्ण चेतावनियों के लिए। दोनों प्रक्रियाओं में उपयोग किया जा सकता है।
इन सुविधाओं में दक्षता आपके Electron ऐप को उपयोगकर्ता के डेस्कटॉप वातावरण के साथ वास्तव में एकीकृत महसूस कराने में मदद करती है। आगे हम shell मॉड्यूल का उपयोग करके बाहरी लिंक और फ़ाइलें खोलना सीखेंगे!
एआई शिक्षक के साथ JavaScript सीखें — निःशुल्क
अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।
- पाठ्यक्रम
- 12
- पाठ
- 47
अक्सर पूछे जाने वाले प्रश्न
क्या “संवाद और सूचनाएँ” पाठ निःशुल्क है?
हाँ—“संवाद और सूचनाएँ” का पूरा पाठ यहाँ वेब पर निःशुल्क पढ़ा जा सकता है। इंटरैक्टिव अभ्यास (अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर) करने और Electron डेस्कटॉप ऐप विकास पाठ्यक्रम का बाकी हिस्सा अनलॉक करने के लिए CoddyKit PRO लें। Electron डेस्कटॉप ऐप विकास पाठ्यक्रम में कुल 4 पाठ शामिल हैं।
“संवाद और सूचनाएँ” में मैं क्या सीखूँगा?
सुसंगत और बाधारहित उपयोगकर्ता अनुभव देने के लिए फ़ाइल चयन, संदेश बॉक्स और सिस्टम सूचनाओं हेतु नेटिव संवादों का उपयोग करें। आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ Electron डेस्कटॉप ऐप विकास का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।
क्या Electron डेस्कटॉप ऐप विकास शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?
पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर Electron डेस्कटॉप ऐप विकास शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 2वाँ पाठ है।
“संवाद और सूचनाएँ” पाठ पूरा करने में कितना समय लगता है?
CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।
क्या मैं इस Electron डेस्कटॉप ऐप विकास पाठ में कोड लिख और चला सकता हूँ?
हाँ। हर Electron डेस्कटॉप ऐप विकास पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।