В этом посте мы собираемся создать настольное приложение для чата с именем vTak . Мы будем использовать node-webkit для поддержки основного настольного приложения и Firebase в качестве хранилища данных в реальном времени. Мы будем использовать генератор слякоти с именем slush-wean для создания базового приложения node-webkit / Express / Angular. Конечный продукт будет выглядеть примерно так:
Prerequistes
Если вы новичок в node-webkit, пожалуйста, обратитесь к следующим ресурсам:
Node Webkit — Создание настольных приложений с использованием Node и веб-технологий
Приложение Dashboard для Node Webkit
Node webkit и Angularjs — Приложение MovieStub
Если вы новичок в Firebase, вы должны проверить следующие ресурсы:
Я бы рекомендовал использовать Sublime text при работе с приложениями node-webkit. Обратитесь сюда для получения дополнительной информации.
Приложение
Как упоминалось ранее, мы собираемся создать приложение чата с именем vTak с помощью node-webkit, Firebase и Angular. vTak позволит пользователям войти в систему, зарегистрировавшись или используя провайдеров социальной аутентификации, таких как Twitter, Google и Facebook. Для этого мы будем использовать простой вход в Firebase. Как только пользователь войдет в систему, мы покажем список чатов, в которые нужно вступить. Как только пользователь выберет комнату, мы подключим его к этой комнате и получим все сообщения чата. Затем пользователь может начать общаться.
Начиная
Чтобы создать базу приложения, мы собираемся использовать генератор slush-wean именем slush-wean . Это создаст для нас базовое приложение node-webkit с интеграцией Express и Angular.
Создайте новую папку с именем vTak и откройте новый терминал / приглашение здесь. Сначала мы установим gulp , slush и slush-wean глобально, используя следующую команду:
$ npm i -g gulp slush slush-wean
Чтобы выложить приложение на отъём, запустите slush wean . Завершите строительные работы, указав название проекта как vTak . Slush потребуется время, чтобы настроить проект и загрузить необходимые зависимости. Чтобы запустить приложение, выполните gulp run .
gulp run будет запускать node-webkit-builder для извлечения библиотек, необходимых для запуска приложения node-webkit, поэтому вам не нужно об этом беспокоиться. Это однократный процесс, который займет до 5 минут. После завершения загрузки приложение dekstop запустится.
Когда приложение запустится, вы увидите заставку в течение примерно 3 секунд, а затем появится домашняя страница. Если вы извлекаете проект scaffolded, вы должны увидеть следующую структуру:
. ├── 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
Краткий обзор:
- app.js : экспресс-настройка сервера
- gulpFile.js : исполнитель задач
- index.html : главная страница приложения / заставка
- общая папка: статические ресурсы (на стороне клиента — наше приложение будет разрабатываться здесь)
- маршруты : экспресс-маршруты
- view : начальный вид для нашего приложения Angularjs, обслуживаемого Express
Наш первый шаг — настроить аутентификацию. Чтобы этот пост был простым, я написал еще один пост под названием node-webkit и Firebase — Простая и социальная аутентификация . Вы можете следить за публикацией, чтобы интегрировать аутентификацию с нашим приложением node-webkit.
Я буду продолжать с вывода вышеупомянутого поста. Вы можете создать приложение из приведенного выше поста или клонировать папку ng-auth из этого репозитория . Как только вы клонируете / загрузите репозиторий, очистите содержимое папки vTak и скопируйте содержимое ng-auth в vTak .
Примечание: мы собираемся использовать версию Angular из вышеприведенного поста.
Как только вы скопируете содержимое, запустите npm i для установки зависимостей. Затем откройте gulpFile.js и прокомментируйте / раскомментируйте задачи в соответствии с вашей ОС. Наконец, откройте /public/js/controllers.js и обновите строку 5 следующим образом:
var ref = new Firebase('https://nwkchatapp.firebaseio.com/');
При желании вы можете настроить собственную учетную запись Firebase. Какой бы подход вы ни использовали, ваша окончательная структура проекта должна быть:
И когда вы запустите приложение ( gulp run ), вы должны увидеть следующий экран входа в систему.
Продолжить развитие
Вы можете обновить имя приложения до vTak в index.html и package.json .
Далее мы загрузим необходимые файлы Firebase. Загрузите firebase.js , angularfire.min.js и firebase -simple-login.js и поместите их в папку public/lib .
Обновите views/index.ejs как показано ниже.
<!DOCTYPE html> <html ng-app="ng-auth"> <head> <title>vTak</title> <link rel="stylesheet" href="css/bootstrap.css"> <link rel="stylesheet" href="css/app.css"> <script src="lib/angular.min.js"></script> <script src="lib/angular-route.min.js"></script> <script src="lib/angular-resource.min.js"></script> <script type="text/javascript" src="lib/firebase.js"></script> <script type="text/javascript" src="lib/firebase-simple-login.js"></script> <script type="text/javascript" src="lib/angularfire.min.js"></script> <script type="text/javascript" src="lib/jquery.min.js"></script> <script type="text/javascript" src="lib/bootstrap.min.js"></script> <script src="js/app.js"></script> <script src="js/factory.js"></script> <script src="js/controllers.js"></script> <script src="js/directives.js"></script> </head> </head> <body> <div class="container" ng-controller="AppCtrl"> <div ng-include src="'partials/head.html'"></div> <hr/> <ng-view></ng-view> </div> </body> </html>
Теперь немного очистим домашнюю страницу приложения (страницу, на которую пользователь направляется после входа в систему). Откройте public/partials/head.html и обновите его, как показано ниже:
<div class="header" ng-controller="Toolbar"> <div class="btn-group pull-right"> <a href="#" class="btn btn-xs btn-default" ng-show="user" ng-click="logoutUser()">Logout</a> <button ng-click="minimize()" type="button" class="btn btn-default btn-xs"> <span class="glyphicon glyphicon-minus"></span> </button> <button ng-click="toggleFullscreen()" type="button" class="btn btn-default btn-xs"> <span class="glyphicon glyphicon-fullscreen"></span> </button> <button ng-click="close()" type="button" class="btn btn-default btn-xs"> <span class="glyphicon glyphicon-remove"></span> </button> </div> <h1>vTak</h1> </div>
Мы переместили кнопку выхода из тела страницы в верхний колонтитул рядом со значками действий окна.