nw.js 打包换桌面图标
This is not your typical "paste this here" and "paste that there"-type tutorial (you can find plenty of those here on /tutorials). While those tutorials certainly have merit, I am going to share my thought process from beginning to end.
这不是典型的“在此粘贴”和“在此粘贴”类型的教程(您可以在/tutorials上找到很多这样的教程 )。 虽然这些教程肯定有优点，但我将从头到尾分享我的思考过程。
The application I built is simple enough. When someone loads the app, they are prompted to enter their username and begin chatting:
我构建的应用程序很简单。 有人加载应用程序时，系统会提示他们输入用户名并开始聊天：
The application ultimately runs on Node with help from NW.js (previously known as node-webkit). NW.js is advantageous because it enables us to code cross-platform desktop applications using our favorite web technologies. For this application, I chose to use React and Redux.
该应用程序最终在NW.js(以前称为node-webkit)的帮助下在Node上运行。 NW.js的优势在于，它使我们能够使用自己喜欢的Web技术对跨平台的桌面应用程序进行编码。 对于此应用程序，我选择使用React和Redux。
The back-end logic - from sending and receiving messages in real-time to populating what I call the "participant list" - is powered by CometChat. You will learn more about CometChat as you read on.
后端逻辑-从实时发送和接收消息到填充所谓的“参与者列表”-由CometChat提供支持。 阅读后，您将了解有关CometChat的更多信息。
This post is not intended to be a walkthrough. Although I will be explaining the technical components of this application, my main ambition is to help you think through a solution from beginning to end. Hopefully, when you finish this post you'll be a slightly better developer and consider CometChat for your growing tool belt.
本文不旨在作为一个演练。 尽管我将解释此应用程序的技术组件，但我的主要目标是帮助您从头到尾地思考解决方案。 希望当您完成这篇文章后，您将成为一个稍微更好的开发人员，并考虑使用CometChat作为您不断发展的工具带。
Just want the example code?
只需要示例代码？
You may see the source code here. There is also a detailed README, where you will find all the information you need to install, run and test the app.
您可能会在此处看到源代码。 还有一个详细的自述文件 ，您将在其中找到安装，运行和测试该应用程序所需的所有信息。
Because the desktop app is built using web technologies, it is entirely possible to run it in your browser. Towards the end of this post, I will show you how to deploy the app on Netlify.
由于桌面应用是使用网络技术构建的，因此完全有可能在浏览器中运行它。 在这篇文章的结尾，我将向您展示如何在Netlify上部署该应用程序。
规划(Planning)
In this section we have to decide what components will we need to build. What functionality will they have? In other words, what are the questions we need to answer, to plan the building process?
在这一部分中，我们必须决定我们需要构建哪些组件。 他们将具有什么功能？ 换句话说，我们需要回答哪些问题来计划构建过程？
Let’s step back for a while and think. Try asking yourself the questions who will take us to the structure we need for our app.
让我们退后一会儿思考。 尝试问自己一个问题，谁将带我们进入应用程序所需的结构。
Below I am going to lay out my questions and the answers. This is the process of the actual building the structure of the app, but in your head first. Keep in mind that it happens very often such that when answering a question new questions appear. This was the case with me as well.
下面我将列出我的问题和答案。这是实际构建应用程序结构的过程，但首先要在您的脑海中进行。请记住，这种情况经常发生，因此在回答问题时会出现新的问题。我也是这种情况。
Questions:
问题：
What am I doing? 😆我在做什么？ 😆 What kind of app am I going to be building?我要开发什么样的应用程序？ What are the most common components, such an app needs to have?这种应用程序需要具备哪些最常见的组件？ How do the app’s components interact with each other?应用程序的组件之间如何交互？ What level of completion am I aiming for — (demo apps are not supposed to be fully featured)?我的目标是达到什么水平？(演示应用程序不应具有全部功能)？
Answers(following the order of the questions):
答案(按照问题的顺序)：
This is the most neglected question that many people forget to think about.When one can step aside first and give a clear answer to this question, his path for future developments becomes settled. In my specific case the answer I got sounds something like this — “I am thinking about building a chat app. This app should serve as a tutorial demo app. It will have to provide basic functionality for ‘having a chat’ by using CometChat API. It should run on a desktop”. The styling and specific details about what goes where will come later in the process.
这是许多人忘记思考的最被忽略的问题。当人们可以先走到一边并明确回答这个问题时，他的未来发展之路就定下来了。 在我的特定情况下，我得到的答案听起来像这样-“我正在考虑构建一个聊天应用程序。 该应用程序应作为教程演示应用程序。 它必须提供使用CometChat API进行“聊天”的基本功能。 它应在台式机上运行”。 有关样式的详细信息以及后续操作的详细信息。
A chat app that will run on desktop and serve as a demo for this tutorial.一个聊天应用程序，它将在桌面上运行，并作为本教程的演示。
To give a proper answer to this question, a non-familiar person would have to do some research first. Take a look at real-world chat applications. Make notes of what features they have. How are they put them in place, how do they interact between them and with the users of the app. In my case, I had some previous experience and got, more or less, the idea of what I need.
为了给这个问题一个正确的答案，一个陌生的人必须首先做一些研究。 看一下现实世界中的聊天应用程序。 记下它们具有的功能。 他们如何将它们放置到位，它们之间以及与应用程序用户之间如何交互。 就我而言，我曾经有过一些经验 ，或多或少地了解了我所需要的东西。
The interaction between the components would be pretty straight forward. The user should be able to use the main component that is a text input and a button to send messages. And a sidebar component to see the other chat participants.组件之间的交互将非常简单。 用户应该能够使用主要组件，即文本输入和按钮来发送消息。 还有一个侧边栏组件，用于查看其他聊天参与者。 The demo app should provide basic chat functionality — send and receive real-time messages. And be able to run on a desktop (without a browser).演示应用程序应提供基本的聊天功能-发送和接收实时消息。 并能够在台式机(无需浏览器)上运行。
特征(Features)
I have decided to implement the following features to the demo app:
我决定对演示应用程序实现以下功能：
Send with Enter key使用Enter键发送 A sidebar with names and last active time带有名称和上次激活时间的侧边栏 Welcome screen with input and validation with error messages欢迎屏幕，其中包含输入和验证以及错误消息 Chat area with auto-scroll to bottom自动滚动到底部的聊天区域 Chat message and time of sending.聊天消息和发送时间。
前端-React(Front End — React)
We are going to use React to build our user interface. Below, I am going to list the components I have created and a short explanation about each of them:
我们将使用React构建用户界面。 在下面，我将列出我创建的组件以及每个组件的简短说明：
ChatPane — this is the main container-like component that contains the Participants and Conversation components and passes the data they need to visualize.
ChatPane-这是类似于容器的主要组件，其中包含“参与者”和“对话”组件，并传递其可视化所需的数据。
Conversation — this is the component responsible for typing and sending chat messages.
对话 -这是负责输入和发送聊天消息的组件。
Footer — displays a simple footer message, containing the app name and version, as defined in package.json file.
页脚 -显示简单的页脚消息，其中包含应用程序名称和版本，如package.json文件中所定义。
Header — header component holding the application menu bar.
标头 -包含应用程序菜单栏的标头组件。
MenuAppBar — application menu bar component, simulating how a real menu bar would look like. The hamburger menu on the left and the profile dropdown menu on the right are fake — clickable, but not functional.
MenuAppBar —应用程序菜单栏组件，模拟真实菜单栏的外观。 左侧的汉堡菜单和右侧的配置文件下拉菜单是伪造的-可单击，但不起作用。
Messages — a container component, holding a message itself — it has the name of the sender, the message content and the time of sending.
消息 -一个本身包含消息的容器组件-它具有发件人的名称，消息内容和发送时间。
Participants — this component shows the name of a chat member and the time when he joined.
参与者 -此组件显示聊天成员的姓名和他加入的时间。
Welcome — this component is responsible for displaying the login page — the starting point of our app, where we have logic related to checking for certain allowed usernames and storing them to the local storage for later use. I also implemented basic error handling logic, which shows an error when the selected username is not correct, as per CometChat API (in this specific case for our demo) registered usernames — superhero1, superhero2 and so on till 5.
欢迎使用 -此组件负责显示登录页面，这是我们应用程序的起点，在这里我们具有与检查某些允许的用户名并将其存储到本地存储以供以后使用相关的逻辑。 我还实现了基本的错误处理逻辑，根据CometChat API(在本例中为演示)，注册的用户名(superhero1，superhero2等，直到5)会显示错误，当所选的用户名不正确时显示错误。
Here a visual representation of the app components:
这里是应用程序组件的可视化表示：
状态管理-Redux(State Management — Redux)
Every modern application these days has a state. Place in the memory where the application is storing certain data for later use. For our application state management, we use Redux. Of course, for a simple app like this, we could go without using Redux at all. But, from the learning point of view (after all we all do this for learning new stuff, right?), I think it would be nice to see the whole cycle of sending a request to an API, going through a middleware (redux-thunks) and getting the response recorded to the state. And we will manage this state by using Redux.
这些天的每个现代应用程序都有一个状态。 放置在应用程序存储某些数据以供以后使用的内存中。 对于应用程序状态管理，我们使用Redux 。 当然，对于这样的简单应用程序，我们完全可以不使用Redux。 但是，从学习的角度来看(毕竟我们都是为了学习新东西而这么做的，对吗？)，我认为很高兴看到通过中间件(redux-重击)并将响应记录到状态。 我们将使用Redux管理此状态。
这个怎么运作(How it works)
The main building blocks in a Redux app are called reducers — small functions used for managing the state. Simply said, what they do is accepting the old state object as input and, depending on certain actions (which are also passed in the same input), returning new state object. The new state could be changed in full or just partially.
Redux应用程序中的主要构建模块称为reducers-用于管理状态的小功能。 简而言之，他们所做的就是接受旧的状态对象作为输入，并根据某些操作(也在相同的输入中传递)来返回新的状态对象。 新状态可以全部或部分更改。
In our app, we have three simple reducers, which are responsible for those parts of the state, responsible for the users’ list, the login process and sending/receiving messages. All of them can be seen in /src/reducers folder, along with a file containing the initial state of our app.
在我们的应用程序中，我们有三个简单的reducer，分别负责状态的那些部分，用户的列表，登录过程以及发送/接收消息。 所有这些都可以在/ src / reducers文件夹中找到，以及一个包含我们应用程序初始状态的文件 。
Redux, as state management library, can be used with any other UI framework, practically every app that needs to have a state can benefit from using Redux. If you want to go deeper, start from their website and follow along.
Redux作为状态管理库，可以与任何其他UI框架一起使用，几乎每个需要状态的应用程序都可以从使用Redux中受益。 如果您想更深入，请从他们的网站开始，然后继续。
副作用处理-Redux Thunks(Side Effects Handling — Redux Thunks)
One of the best known approaches for managing side effects in a redux app is called redux-think. This is what we use in our application as well. If you want to learn more details about redux thunks and how to use them, I recommend their website as a starting point and then build a small application, like this one for example :).
在redux应用程序中管理副作用的最著名方法之一称为redux-think 。 这也是我们在应用程序中使用的。 如果您想了解有关redux thunk和如何使用它们的更多详细信息，我建议您以它们的网站为起点，然后构建一个小型应用程序，例如：:)。
In our project, in /src/actions folder, is where I put the thunks used in the demo application. And in /store directory is where the configurations for the redux store live.
在我们的项目中/ src / actions文件夹中 ，是放置演示应用程序中使用的thunk的地方。 在/ store目录中是redux存储的配置所在。
使其成为桌面-NW.js(Make it desktop — NW.js)
The part of our application that makes it possible for our app to run on desktop is taken care of by a library called NW.js. Remember that we are building a desktop application. Exactly the desktop part is going to be implemented via NW.js. Similar to Electron, another library for building desktop applications, NW.js provides a way to the developers to use their web skills to build applications that can run on a desktop. This means you can still use your JavaScript/React skills when building an app and then leverage the power of the desktop operating system via Nw.js APIs. In other words, Nw.js gives you the ability to make a skeleton app, which can be “filled” with your UI, no matter what library you have used to create it. And the best thing is that such an app has access to Node.js/NW.js APIs and the DOM in the same JavaScript context.
我们的应用程序使该应用程序可以在桌面上运行的部分由一个名为NW.js的库负责 。 请记住，我们正在构建一个桌面应用程序。 确切地说，桌面部分将通过NW.js实现。 与另一个用于构建桌面应用程序的库Electron相似，NW.js为开发人员提供了一种使用开发人员的网络技能来构建可以在桌面上运行的应用程序的方法。 这意味着您在构建应用程序时仍可以使用JavaScript / React技能，然后通过Nw.js API利用桌面操作系统的功能。 换句话说，Nw.js使您能够制作骨架应用程序，无论您使用什么库创建骨架应用程序，都可以用UI对其进行“填充”。 最好的事情是，这样的应用程序可以在同一JavaScript上下文中访问Node.js / NW.js API和DOM。
Since we mentioned the other big player in the field of building cross-platform desktop apps, let me give you a brief comparison between the two.
既然我们提到了构建跨平台桌面应用程序领域的另一大参与者，那么让我简要介绍一下两者。
Nw.js vs电子(Nw.js vs Electron)
Entry of Application
输入申请
In NW.js the main entry point of an application is a web page or a JS script. You specify an HTML or js file in the package.json and it is opened in a browser window as the application's main window (in case of an HTML entrypoint) or the script is executed.在NW.js中，应用程序的主要入口点是网页或JS脚本。 您可以在package.json中指定一个HTML或js文件，并在浏览器窗口中打开该文件作为应用程序的主窗口(如果是HTML入口点)或执行脚本。 In Electron, the entry point is a JavaScript script.在Electron中，入口点是JavaScript脚本。
Build System
建立系统
Nw.js uses ChromiumNw.js使用Chromium
Electron uses libchromiumcontent to access Chromium's Content API. libchromiumcontent is a single shared library that includes the Chromium Content module and all of its dependencies.
Electron使用libchromiumcontent访问Chromium的Content API。 libchromiumcontent是一个单个共享库，其中包括Chromium Content模块及其所有依赖项。
Node Integration
节点整合
In NW.js, the Node integration in web pages requires patching Chromium to work.在NW.js中，网页中的Node集成需要修补Chromium才能起作用。 In Electron uses a different way to integrate the libuv loop with each platform's message loop to avoid hacking Chromium.In Electron使用不同的方式将libuv循环与每个平台的消息循环集成在一起，从而避免入侵Chromium。
Multi-context
多上下文
Because of how NW.js was implemented concepts of Node context and web context were invented.由于如何实现NW.js，因此发明了Node上下文和Web上下文的概念。
By using the multi-context feature of Node, Electron doesn't introduce a new JavaScript context in web pages.
通过使用Node的多上下文功能，Electron不会在网页中引入新JavaScript上下文。
聊天— CometChat(Chat — CometChat)
The usage of CometChat API is pretty straight-forward. It’s a RESTFull API, on which is built another layer of abstraction - CometChat SDK. It allows us to call directly exposed methods for different actions we might want to perform, such as send. Here an example of such a method:
CometChat API的用法非常简单。 这是一个RESTFull API，在其上构建了另一层抽象-CometChat SDK。 它允许我们针对可能想要执行的不同操作(例如发送)调用直接公开的方法。 这里是这种方法的一个例子：
return CometChat.sendMessage(textMessage).then( message => {console.log("Message sent successfully:", message);return message;}, error => {console.log("Message sending failed with error:", error); });
You may see all the Chat API logic in /src/chat-api folder. There you will also see the mocks I created, which allow us to test our app without real connection to the API.
您可能会在/ src / chat-api文件夹中看到所有的Chat API逻辑。 在该处，您还将看到我创建的模拟，这些模拟使我们无需真正连接到API即可测试我们的应用。
改进之处(Improvements)
Every project deserves some thoughts after finishing the first phase. One part of this thought process would be dedicated to how it went, what was good and bad, and what might be done better. And one part would be dedicated to thinking about possible improvements. Here are a few ideas for our case. If someone goes to this direction and implement any of these for real, please do not forget to let me know :)
在完成第一阶段后，每个项目都应引起一些思考。 这种思考过程的一部分将致力于过程的进行，优缺点以及可能做得更好的方面。 其中一部分将致力于思考可能的改进。 以下是我们案例的一些想法。 如果有人朝着这个方向发展并真正实现了其中任何一个，请不要忘记让我知道:)
Waiting animation for when loading the chat history and the user list加载聊天记录和用户列表时的等待动画 Option for skipping the login screen, if already logged跳过登录屏幕的选项(如果已登录) Option for sending invitations to new users向新用户发送邀请的选项 Option for seeing the status of a message — sent, received, read查看消息状态的选项-已发送，已接收，已阅读 Emojis support表情符号支持
Inline links/images/video support, such that the user can see them interpreted — playing video, rendered image or web page to which a link is pointing. I have added these as issues in my GitHub, in case anyone wants to take a look.
内联链接/图像/视频支持，以便用户可以看到它们的解释-播放链接指向的视频，渲染的图像或网页。 我已将这些作为问题添加到我的GitHub中 ，以防任何人想看看。
在Netlify上部署(Deploy on Netlify)
To deploy your application to Netlify platform you need to create an account first. Go to their website and sign up for new account. After that go ahead and login. While still under Sites section, you should see a button for deploying new site from Git.
要将应用程序部署到Netlify平台，您需要首先创建一个帐户。 转到他们的网站并注册新帐户。 之后，继续并登录。 在“站点”部分下，您应该看到一个用于从Git部署新站点的按钮。
Click it and follow the steps to create a new site for deployment from your GitHub repositories. Your process should be similar to what is shown in the image below.
单击它，然后按照步骤创建一个新站点，以便从您的GitHub存储库进行部署。 您的过程应类似于下图所示。
Now, the last step before having your app deployed is to make sure you have the correct build commands and environment variables in place. To do that, after you create your site for deployment, go toBuild & deploysettings screen and enter the following (don’t forget to use your repo URL):
现在，部署应用程序之前的最后一步是确保您具有正确的构建命令和环境变量。 为此，在创建要部署的站点之后，转到“构建和部署设置”屏幕并输入以下内容(请不要忘记使用您的回购URL)：
UnderEnvironmentsection is where you need to enter the environment variables as defined in your .env file. Here is how it looks mine:
在“环境”部分下，您需要输入.env文件中定义的环境变量。 这是我的样子：
Note:I have erased the values as this is supposed to be private info and you should not share yours as well.
注意：我已删除了这些值，因为这应该是私人信息，您也不应共享您的值。
That should be enough for you to have your app deployed on Netlify. Keep in mind theDeploysdefault settings are set to ‘auto publishing’, which means that it will trigger a deploy on each commit you do to themaster branchin your repo. This is the place where you can trigger a deploy manually as well. This is how myDeploysscreen looks like:
这足以使您的应用程序部署在Netlify上。 请记住，“部署”默认设置被设置为“自动发布”，这意味着它将在您对存储库中的master分支的每次提交上触发部署。 在这里，您也可以手动触发部署。 这是我的“部署”屏幕的样子：
结论 (Conclusion)
In this tutorial, we saw how can we leverage our web development skills to create applications that can run on a desktop. What we built is a demo application, that lacks a lot of a fully-featured-production-ready app features, but when one wants to learn and share, this would do the job. If you would like to deepen your knowledge in this direction, I would recommend you to try to improve it, by implementing features that are more likely to be seen in a real desktop application.
在本教程中，我们看到了如何利用我们的Web开发技能来创建可以在桌面上运行的应用程序。 我们构建的是一个演示应用程序，它缺少许多功能齐全的可用于生产的应用程序功能，但是当人们想要学习和共享时，就可以完成工作。 如果您想在此方向上加深了解，我建议您通过实现在实际桌面应用程序中更可能看到的功能来尝试改进它。
There are plenty of opportunities to explore out there, I hope this tutorial entertained you enough to keep your flame of curiosity burning even more.
有很多机会可以探索，我希望本教程对您有足够的乐趣，以使您的好奇心进一步燃烧。
🔥 Thanks for reading! 🔥
🔥感谢您的阅读！ 🔥
Notes:
笔记：
In order to use Nw.js DevTools you need to install the SDK build — https://nwjs.io/downloads/ - version 0.38.2 or higher.
为了使用Nw.js DevTools您需要安装SDK构建- https://nwjs.io/downloads/ -版本0.38.2或更高。
Resources:
资源：
Q: What is a ‘thunk’? A: The sound your head makes when you first hear about redux-thunk. Ok sorry, that was awful. But…
问：什么是“ thunk”？ 答：当您第一次听到有关redux-thunk的声音时，您的头会发出声音。 好的，抱歉，这太糟糕了。 但是...
[book] Cross-Platform Desktop Applications: Using Node, Electron, and NW.js[book]跨平台桌面应用程序：使用Node，Electron和NW.js [book] Cross-platform Desktop Application Development: Electron, Node, NW.js, and React[book]跨平台桌面应用程序开发：Electron，Node，NW.js和React
Thunk middleware for Redux
用于Redux的Thunk中间件
/docs/hooks-reference.html#useref
/docs/hooks-reference.html#useref
翻译自: /news/how-i-build-a-desktop-chat-app-with-cometchat-and-nw-js-and-how-you-can-too/
nw.js 打包换桌面图标
