firebase-perf_使用node-webkit，Firebase和AngularJS构建聊天应用程序

<div class="styledBody__StyledBody-kvy0sj-0 enxCuw" style="font-size: 16px;">
<p>firebase-perf</p>
<p> 在本文中，我们将构建一个名为<strong>vTak的</strong>基于桌面的聊天应用程序。我们将使用<a href="https://github.com/rogerwang/node-webkit">node-webkit</a>为核心桌面应用程序和<a href="https://www.firebase.com">Firebase</a>提供动力，作为我们的实时数据存储。我们将使用名为<a href="https://github.com/arvindr21/slush-wean">slush-wean</a>的<a href="http://slushjs.github.io/generators">slush生成器</a>来构建基本的node-webkit / Express / Angular应用。最终产品将如下图所示。 </p>
<p style="display:block;text-align:center;"><img alt="应用截图" class="alignnone size-full wp-image-89034" height="587" src="https://beijingoptbbs.oss-cn-beijing.aliyuncs.com/cs/5606289-28db01eee01dcfa113775e06e090df6d" width="967"></p>
<h2 id="prerequistes"> <span style="font-weight: bold;">先决条件</span> </h2>
<p> 如果您不熟悉node-webkit，请参考以下资源： </p>
<p> <a href="http://thejackalofjavascript.com/getting-started-with-node-webkit-apps">Node Webkit –使用Node和Web技术构建桌面应用程序</a> <br> <a href="http://thejackalofjavascript.com/node-webkit-powered-dashboard-app">节点Webkit驱动的仪表板应用程序</a> <br> <a href="http://thejackalofjavascript.com/node-webkit-and-angularjs-a-moviestub-app/">节点webkit和Angularjs – MovieStub应用</a> </p>
<p> 如果您不熟悉Firebase，则应查看以下资源： </p>
<p> <a href="http://thejackalofjavascript.com/getting-started-with-firebase">Firebase入门</a> </p>
<p> 我建议在使用node-webkit应用程序时使用Sublime文本。有关更多信息，请参见<a href="https://github.com/rogerwang/node-webkit/wiki/Debugging-with-Sublime-Text-2-and-3">此处</a> 。 </p>
<h2 id="the-application"> <span style="font-weight: bold;">应用程序</span> </h2>
<p> 如前所述，我们将使用node-webkit，Firebase和Angular构建一个名为vTak的聊天应用程序。 vTak将允许用户通过注册或使用社交身份验证提供程序（例如Twitter，Google和Facebook）进行登录。为此，我们将利用Firebase的简单登录。用户登录后，我们将显示要加入的聊天室列表。用户选择房间后，我们会将用户连接到该房间并获取所有聊天消息。然后，用户可以开始聊天。 </p>
<h2 id="getting-started"> <span style="font-weight: bold;">入门</span> </h2>
<p> 为了构建应用程序基础，我们将利用一个名为<code>slush-wean</code>的slush生成器。这将通过Express和Angular集成为我们搭建一个基本的node-webkit应用。 </p>
<p> 创建一个名为<code>vTak</code>的新文件夹，并在此处打开一个新的终端/提示。首先，我们将使用以下命令全局安装<code>gulp</code> ， <code>slush</code>和<code>slush-wean</code> ： </p>
<pre class="blockcode" tabindex="0"><code class="language-">$ npm i -g gulp slush slush-wean</code></pre>
<p> 要搭建Wean App，请运行<code>slush wean</code> 。通过输入项目名称<code>vTak</code>完成脚手架。 Slush将花一些时间来设置项目并下载所需的依赖项。要运行该应用程序，请执行<code>gulp run</code> 。 </p>
<p> <code>gulp run</code>将触发<a href="https://github.com/mllrsohn/node-webkit-builder">node-webkit-builder</a>获取运行该node-webkit应用程序所需的库，因此您不必担心。这是一次过程，最多需要5分钟。下载完成后，将启动dekstop应用。 </p>
<p> 应用启动时，您会看到一个启动屏幕约3秒钟，然后出现主页。如果签出脚手架项目，则应看到以下结构： </p>
<pre class="blockcode" tabindex="0"><code class="language-">.
├── app.js
├── gulpFile.js
├── index.html
├── package.json
├── public
│ ├── css
│ │ ├── app.css
│ │ └── bootstrap.css
│ ├── fonts
│ │ ├── ...
│ ├── js
│ │ └── app.js
│ ├── lib
│ │ ├── angular-resource.min.js
│ │ ├── angular-route.min.js
│ │ ├── angular.min.js
│ │ ├── bootstrap.min.js
│ │ └── jquery.min.js
│ └── partials
│ └── head.html
├── routes
│ └── index.js
└── views
└── index.ejs</code></pre>
<p> 快速概述： </p>
<div>
<div></div>
</div>
<ul><li> <em>app.js</em> ：Express服务器配置 </li><li> <em>gulpFile.js</em> ：任务运行器 </li><li> <em>index.html</em> ：应用程序主页/启动屏幕 </li><li> <em>公用文件夹</em> ：静态资源（客户端-我们的应用程序将在这里开发） </li><li> <em>路线</em> ：特快路线 </li><li> <em>view</em> ：Express提供的Angularjs应用程序的初始视图 </li></ul>
<p> 我们的第一步是设置身份验证。为了使这篇文章保持简单，我写了另一篇名为<a href="http://thejackalofjavascript.com/node-webkit-firebase-simple-social-authentication">node-webkit和Firebase

firebase-perf_使用node-webkit，Firebase和AngularJS构建聊天应用程序

浏览过的版块