nw.js 打包换桌面图标

This is not your typical "paste this here" and "paste that there"-type tutorial (you can find plenty of those here on cometchat.com/tutorials). While those tutorials certainly have merit, I am going to share my thought process from beginning to end.

这不是典型的“ 在此粘贴 ”和“ 在此 粘贴 ”类型的教程(您可以在cometchat.com/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:

问题: