{"blocks":[{"type":"paragraph","data":{"text":"Лет 10 назад создание веб-приложения, работающего в реальном времени, было непосильной задачей для многих программистов. Теперь же с появлением Firebase любой может начать разработку своего приложения, не беспокоясь о серверной части проекта."}},{"type":"paragraph","data":{"text":"Firebase предоставляет разработчикам следующие инструменты:"}},{"type":"list","data":{"items":["сервис авторизации,","базы данных,","хранилище файлов,","хостинг."],"style":"unordered"}},{"type":"paragraph","data":{"text":"Всё это создано для того, чтобы меньше беспокоиться о серверной составляющей и больше внимания уделять клиентской части проекта."}},{"type":"paragraph","data":{"text":"В этой статье показан процесс разработки простого веб-приложения, в котором можно в реальном времени просматривать, добавлять и удалять данные о локациях со всего света."}},{"type":"image","data":{"file":{"id":85342,"url":"https://media.tproger.ru/uploads/2018/07/vf-gif.gif"},"alt":"","title":"","caption":"","stretched":false,"withBackground":false,"withBorder":false,"width":800,"height":458}},{"type":"header2","data":{"level":2,"text":"Принимаемся за работу"}},{"type":"paragraph","data":{"text":"Прим. перев. Данный материал предполагает, что Node.js и NPM уже установлены в системе."}},{"type":"paragraph","data":{"text":"Для начала понадобится установить vue-cli следующей командой:"}},{"type":"code","data":{"code":"$ npm install -g vue-cli","language":"bash lazy-code"}},{"type":"paragraph","data":{"text":"Создайте новое приложение с помощью Vue CLI и сразу запустим его:"}},{"type":"code","data":{"code":"$ vue init webpack fire-app\r\n$ cd fire-app\r\n$ npm run dev","language":"bash lazy-code"}},{"type":"paragraph","data":{"text":"В браузере по адресу http://localhost:8080 должно открыться приложение."}},{"type":"header2","data":{"level":2,"text":"Установка Firebase и VueFire"}},{"type":"paragraph","data":{"text":"На данном этапе есть только стандартное приложение на Vue, и для работы с онлайн базой данных в него надо добавить немного магии. Для этого следует открыть Firebase и создать новый бесплатный проект. Зайдите в панель управления и нажмите на Add Firebase to your Web App. Скопируйте databaseURL и projectID, они понадобятся позже."}},{"type":"image","data":{"file":{"id":85437,"url":"https://media.tproger.ru/uploads/2018/07/1-2-1.jpg"},"alt":"","title":"","caption":"","stretched":false,"withBackground":false,"withBorder":false,"width":800,"height":391,"optimizedFile":{"original":"https://media.tproger.ru/uploads/2018/07/1-2-1.jpg","alt":"Создание простого веб-приложения с Vue и Firebase 2","dimensions":{"width":800,"height":391},"additionalSizes":{"srcSet":[{"url":"https://tproger.ru/signed_image/8c4Z0zmT-6o7-ED_yCvLtDIpN_JY115zNk7jfhY-VqU/rs:fill:766:0:true/cb:vimg_2/f:webp/aHR0cHM6Ly9tZWRpYS50cHJvZ2VyLnJ1L3VwbG9hZHMvMjAxOC8wNy8xLTItMS5qcGc","dpr":1,"width":766},{"url":"https://tproger.ru/signed_image/aRmgOt_ZG4ICzPCUW-GgiEuZ1ZizThqUC9fDlZ3kVoE/rs:fill:1532:0:true/cb:vimg_2/f:webp/aHR0cHM6Ly9tZWRpYS50cHJvZ2VyLnJ1L3VwbG9hZHMvMjAxOC8wNy8xLTItMS5qcGc","dpr":1,"width":1532},{"url":"https://tproger.ru/signed_image/wBICUpAu3IFXiFzb8BTcFG1PIquSfYna_VhtDZgBEzU/rs:fill:686:0:true/cb:vimg_2/f:webp/aHR0cHM6Ly9tZWRpYS50cHJvZ2VyLnJ1L3VwbG9hZHMvMjAxOC8wNy8xLTItMS5qcGc","dpr":1,"width":686},{"url":"https://tproger.ru/signed_image/iS5Wbd_pa5dzXqrLsHIbYhocqyxvA5oZVLjREfEmFE0/rs:fill:1372:0:true/cb:vimg_2/f:webp/aHR0cHM6Ly9tZWRpYS50cHJvZ2VyLnJ1L3VwbG9hZHMvMjAxOC8wNy8xLTItMS5qcGc","dpr":1,"width":1372},{"url":"https://tproger.ru/signed_image/ghltuDHYmsouQ0QeEMXjO3n-zQyWx9m3PoetiX2qN_Y/rs:fill:636:0:true/cb:vimg_2/f:webp/aHR0cHM6Ly9tZWRpYS50cHJvZ2VyLnJ1L3VwbG9hZHMvMjAxOC8wNy8xLTItMS5qcGc","dpr":1,"width":636},{"url":"https://tproger.ru/signed_image/Edvx7HxZ7pupfc16inUdTWvUG6djQOYTyOQTWdu1zYk/rs:fill:1272:0:true/cb:vimg_2/f:webp/aHR0cHM6Ly9tZWRpYS50cHJvZ2VyLnJ1L3VwbG9hZHMvMjAxOC8wNy8xLTItMS5qcGc","dpr":1,"width":1272},{"url":"https://tproger.ru/signed_image/5NgmhAYYrkS0UcqsrPAbeVfq3Xsw7fMj7B3JRotqoHc/rs:fill:466:0:true/cb:vimg_2/f:webp/aHR0cHM6Ly9tZWRpYS50cHJvZ2VyLnJ1L3VwbG9hZHMvMjAxOC8wNy8xLTItMS5qcGc","dpr":1,"width":466},{"url":"https://tproger.ru/signed_image/ixyS_1K4-qcnBP5vStnsEG8T8jaac1gC8KlM8vouLB4/rs:fill:932:0:true/cb:vimg_2/f:webp/aHR0cHM6Ly9tZWRpYS50cHJvZ2VyLnJ1L3VwbG9hZHMvMjAxOC8wNy8xLTItMS5qcGc","dpr":1,"width":932}],"sizes":[{"media":"(min-width: 1441px)","size":"766px"},{"media":"(min-width: 1281px)","size":"686px"},{"media":"(min-width: 1281px)","size":"766px"},{"media":"(min-width: 961px)","size":"766px"},{"media":"(min-width: 671px)","size":"636px"},{"media":"(min-width: 500px)","size":"466px"}]}}}},{"type":"paragraph","data":{"text":"Следующим шагом будет установка Vuefire, который добавит поддержку Firebase в проект. Для это воспользуйтесь следующей командой:"}},{"type":"code","data":{"code":"$ npm install vuefire@next firebase --save","language":"bash lazy-code"}}]}

Ошибка в настройках сайта