{"id":24317,"date":"2024-01-13T15:06:49","date_gmt":"2024-01-13T14:06:49","guid":{"rendered":"https:\/\/nelkodev.com\/blog\/utilizando-javascript-para-desarrollo-de-aplicaciones-de-escritorio\/"},"modified":"2024-06-03T18:44:25","modified_gmt":"2024-06-03T17:44:25","slug":"utilizando-javascript-para-desarrollo-de-aplicaciones-de-escritorio","status":"publish","type":"post","link":"https:\/\/nelkodev.com\/en\/blog\/using-javascript-for-desktop-application-development\/","title":{"rendered":"Using JavaScript for Desktop Application Development"},"content":{"rendered":"<p>Desktop application development is a constantly evolving area, and JavaScript has become a widely used language in this field. Thanks to the Electron JS framework, we can create desktop applications quickly and easily using JavaScript. In this article, we will explore how we can use JavaScript and Electron JS to develop powerful and versatile desktop applications.<\/p>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_80 counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #ffffff;color:#ffffff\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #ffffff;color:#ffffff\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewbox=\"0 0 24 24\" version=\"1.2\" baseprofile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/nelkodev.com\/en\/blog\/using-javascript-for-desktop-application-development\/#%C2%BFQue_es_Electron_JS\" >What is Electron JS?<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/nelkodev.com\/en\/blog\/using-javascript-for-desktop-application-development\/#Ventajas_de_utilizar_Electron_JS\" >Advantages of using Electron JS<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/nelkodev.com\/en\/blog\/using-javascript-for-desktop-application-development\/#Configuracion_del_entorno_de_desarrollo\" >Development environment configuration<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/nelkodev.com\/en\/blog\/using-javascript-for-desktop-application-development\/#Desarrollando_una_aplicacion_de_escritorio_basica_con_JavaScript_y_Electron_JS\" >Developing a basic desktop application with JavaScript and Electron JS<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/nelkodev.com\/en\/blog\/using-javascript-for-desktop-application-development\/#Conclusion\" >Conclusion<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/nelkodev.com\/en\/blog\/using-javascript-for-desktop-application-development\/#Preguntas_frecuentes\" >Frequently asked questions<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/nelkodev.com\/en\/blog\/using-javascript-for-desktop-application-development\/#%C2%BFPuedo_utilizar_otros_lenguajes_junto_con_JavaScript_para_desarrollar_aplicaciones_de_escritorio_con_Electron_JS\" >Can I use other languages along with JavaScript to develop desktop applications with Electron JS?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/nelkodev.com\/en\/blog\/using-javascript-for-desktop-application-development\/#%C2%BFEs_posible_acceder_a_recursos_del_sistema_como_el_sistema_de_archivos_o_la_camara_desde_una_aplicacion_de_escritorio_desarrollada_con_JavaScript_y_Electron_JS\" >Is it possible to access system resources, such as the file system or camera, from a desktop application developed with JavaScript and Electron JS?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/nelkodev.com\/en\/blog\/using-javascript-for-desktop-application-development\/#%C2%BFPuedo_empaquetar_mi_aplicacion_de_escritorio_desarrollada_con_JavaScript_y_Electron_JS_para_distribuirla_a_otros_usuarios\" >Can I package my desktop application developed with JavaScript and Electron JS to distribute it to other users?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/nelkodev.com\/en\/blog\/using-javascript-for-desktop-application-development\/#%C2%BFEs_necesario_tener_conocimientos_de_programacion_nativa_para_utilizar_Electron_JS_y_desarrollar_aplicaciones_de_escritorio_con_JavaScript\" >Do I need to have native programming knowledge to use Electron JS and develop desktop applications with JavaScript?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/nelkodev.com\/en\/blog\/using-javascript-for-desktop-application-development\/#%C2%BFDonde_puedo_encontrar_recursos_adicionales_para_aprender_mas_sobre_el_desarrollo_de_aplicaciones_de_escritorio_utilizando_JavaScript_y_Electron_JS\" >Where can I find additional resources to learn more about developing desktop applications using JavaScript and Electron JS?<\/a><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"%C2%BFQue_es_Electron_JS\"><\/span>What is Electron JS?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Electron JS is an open source framework developed by GitHub that allows us to create cross-platform desktop applications using web technologies such as HTML, CSS and JavaScript. With Electron JS, we can create desktop applications compatible with Windows, macOS, and Linux without having to learn native programming languages for each platform.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Ventajas_de_utilizar_Electron_JS\"><\/span>Advantages of using Electron JS<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<ol>\n<li>\n<p><strong>Versatility<\/strong>: With Electron JS, we can create applications that run on different operating systems with a single code base.<\/p>\n<\/li>\n<li>\n<p><strong>Web knowledge<\/strong>: By using web technologies such as HTML, CSS and JavaScript, we can leverage our prior knowledge to develop desktop applications.<\/p>\n<\/li>\n<li>\n<p><strong>Active community<\/strong>: Electron JS has a large community of developers who share code, troubleshoot and provide support, making it easy to learn and troubleshoot.<\/p>\n<\/li>\n<\/ol>\n<h2><span class=\"ez-toc-section\" id=\"Configuracion_del_entorno_de_desarrollo\"><\/span>Development environment configuration<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Before we start developing desktop applications with JavaScript and Electron JS, we need to set up our development environment. Follow these steps:<\/p>\n<ol>\n<li>\n<p><strong>Install Node.js<\/strong>: Electron JS is based on Node.js, so we need to install Node.js on our system. We can download it from <a href=\"https:\/\/nodejs.org\" rel=\"nofollow noopener\" target=\"_blank\">https:\/\/nodejs.org<\/a> and follow the installation instructions for our operating system.<\/p>\n<\/li>\n<li>\n<p><strong>Install Electron JS<\/strong>: Once we have Node.js installed, we can install Electron JS globally on our system by running the following command in the terminal:<\/p>\n<\/li>\n<\/ol>\n<pre><code class=\"&quot;language-shell&quot;\">npm install -g electron<\/code><\/pre>\n<ol start=\"&quot;3&quot;\">\n<li><strong>Create a basic directory structure<\/strong>: Before starting to develop our desktop application, it is advisable to create a basic directory structure to organize our code. For example, we could have a folder called &quot;my-app&quot; with the following subfolders:<\/li>\n<\/ol>\n<ul>\n<li><strong>app<\/strong>: Here we will place all the source code of our application.<\/li>\n<li><strong>assets<\/strong>: In this folder we will save the static resources of the application, such as images, CSS style files, etc.<\/li>\n<li><strong>dist<\/strong>: Here the executable package of our application will be generated once we finish it.<\/li>\n<\/ul>\n<h2><span class=\"ez-toc-section\" id=\"Desarrollando_una_aplicacion_de_escritorio_basica_con_JavaScript_y_Electron_JS\"><\/span>Developing a basic desktop application with JavaScript and Electron JS<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Now that we have our development environment set up, we can start developing a basic desktop application using JavaScript and Electron JS. Following these steps:<\/p>\n<ol>\n<li><strong>Initialize an Electron JS project<\/strong>: Inside the &quot;my-application&quot; folder, we execute the following command in the terminal to initialize a new Electron JS project:<\/li>\n<\/ol>\n<pre><code class=\"&quot;language-shell&quot;\">electron.<\/code><\/pre>\n<p>This will create a &quot;main.js&quot; file in the &quot;app&quot; folder that will be the entry point for our application.<\/p>\n<ol start=\"&quot;2&quot;\">\n<li><strong>Create a main window<\/strong>: In the &quot;main.js&quot; file, we can use the following code to create a main window:<\/li>\n<\/ol>\n<pre><code class=\"&quot;language-javascript&quot;\">const { app, BrowserWindow } = require(&#039;electron&#039;); function createMainWindow() { const window = new BrowserWindow({ width: 800, height: 600, webPreferences: { nodeIntegration: true } }); window.loadFile(&#039;app\/index.html&#039;); } app.whenReady().then(createMainWindow);<\/code><\/pre>\n<p>This code will create a window with dimensions 800x600 pixels and load the &quot;index.html&quot; file located in the &quot;app&quot; folder. Make sure you have an &quot;index.html&quot; file inside the &quot;app&quot; folder so the app can load correctly.<\/p>\n<ol start=\"&quot;3&quot;\">\n<li><strong>Customize window appearance<\/strong>: We can customize the appearance of our window using CSS. Inside the &quot;index.html&quot; file, we can add the following code in the tag <code>&lt;head&gt;<\/code>:<\/li>\n<\/ol>\n<pre><code class=\"&quot;language-html&quot;\">&lt;link rel=&quot;stylesheet&quot; href=&quot;estilos.css&quot;&gt;<\/code><\/pre>\n<p>Next, we create a \u201cstyles.css\u201d file inside the \u201capp\u201d folder and customize the appearance of our window using CSS.<\/p>\n<ol start=\"&quot;4&quot;\">\n<li><strong>Interact with JavaScript<\/strong>: We can use JavaScript to add interactivity to our application. For example, we can add a button in the &quot;index.html&quot; file and use JavaScript to display a message when it is clicked:<\/li>\n<\/ol>\n<pre><code class=\"&quot;language-html&quot;\"><button id=\"mi-boton\">Click here<\/button><\/code><\/pre>\n<p>This will add a button to our window and show a popup message when it is clicked.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Conclusion\"><\/span>Conclusion<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>JavaScript and Electron JS offer us a powerful combination to develop desktop applications using web technologies. With a basic knowledge of JavaScript and the capabilities of Electron JS, we can create cross-platform desktop applications with ease and versatility.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Preguntas_frecuentes\"><\/span>Frequently asked questions<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<h3><span class=\"ez-toc-section\" id=\"%C2%BFPuedo_utilizar_otros_lenguajes_junto_con_JavaScript_para_desarrollar_aplicaciones_de_escritorio_con_Electron_JS\"><\/span>Can I use other languages along with JavaScript to develop desktop applications with Electron JS?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Yes, Electron JS allows you to use other languages along with JavaScript to develop desktop applications. For example, we can use technologies such as TypeScript, CSS preprocessors such as Sass or Less, and even JavaScript frameworks such as React or Angular.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"%C2%BFEs_posible_acceder_a_recursos_del_sistema_como_el_sistema_de_archivos_o_la_camara_desde_una_aplicacion_de_escritorio_desarrollada_con_JavaScript_y_Electron_JS\"><\/span>Is it possible to access system resources, such as the file system or camera, from a desktop application developed with JavaScript and Electron JS?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Yes, Electron JS provides APIs that allow you to access system resources, such as the file system or camera. These APIs allow us to interact with the underlying operating system and access native functionalities.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"%C2%BFPuedo_empaquetar_mi_aplicacion_de_escritorio_desarrollada_con_JavaScript_y_Electron_JS_para_distribuirla_a_otros_usuarios\"><\/span>Can I package my desktop application developed with JavaScript and Electron JS to distribute it to other users?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Yes, once we have finished developing our desktop application, we can package it to distribute to other users. Electron JS provides us with tools to package our application into an executable package that can be installed and run on different operating systems.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"%C2%BFEs_necesario_tener_conocimientos_de_programacion_nativa_para_utilizar_Electron_JS_y_desarrollar_aplicaciones_de_escritorio_con_JavaScript\"><\/span>Do I need to have native programming knowledge to use Electron JS and develop desktop applications with JavaScript?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>You don&#039;t need to have any native programming knowledge to use Electron JS and develop desktop applications with JavaScript. With basic knowledge of HTML, CSS and JavaScript, we can start developing desktop applications with Electron JS. However, having knowledge of JavaScript and programming in general is essential to take full advantage of the potential of Electron JS.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"%C2%BFDonde_puedo_encontrar_recursos_adicionales_para_aprender_mas_sobre_el_desarrollo_de_aplicaciones_de_escritorio_utilizando_JavaScript_y_Electron_JS\"><\/span>Where can I find additional resources to learn more about developing desktop applications using JavaScript and Electron JS?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>There are numerous resources available online to learn more about developing desktop applications using JavaScript and Electron JS. You can consult the official Electron JS documentation at <a href=\"https:\/\/www.electronjs.org\/docs\" rel=\"nofollow noopener\" target=\"_blank\">https:\/\/www.electronjs.org\/docs<\/a> and explore different tutorials and examples in the Electron JS community. Additionally, there are many books and courses available that cover this topic in detail.<\/p>","protected":false},"excerpt":{"rendered":"<p>El desarrollo de aplicaciones de escritorio es un \u00e1rea en constante evoluci\u00f3n, y JavaScript se ha convertido en un lenguaje ampliamente utilizado en este campo. Gracias al framework Electron JS, podemos crear aplicaciones de escritorio de forma r\u00e1pida y sencilla utilizando JavaScript. En este art\u00edculo, exploraremos c\u00f3mo podemos utilizar JavaScript y Electron JS para desarrollar [&hellip;]<\/p>","protected":false},"author":1,"featured_media":24318,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[420,2207],"tags":[314,205,211,1281,185,1322,2208,60,524],"class_list":["post-24317","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","category-nodejs","tag-aplicaciones","tag-blog","tag-desarrollo","tag-escritorio","tag-javascript","tag-multiplataforma","tag-nodejs","tag-para","tag-utilizando"],"_links":{"self":[{"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/posts\/24317","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/comments?post=24317"}],"version-history":[{"count":0,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/posts\/24317\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/media\/24318"}],"wp:attachment":[{"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/media?parent=24317"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/categories?post=24317"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/tags?post=24317"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}