Пойдем на рыбалку на бас-бас-бас-базар.
Начнем с Firebase,
премиум-предложения от Google.
Давайте немного разберемся о Firebase,
настроим сервер Firebase,
а затем мы рассмотрим угловое приложение,
которое я собираюсь модифицировать на основе
предыдущего углового приложения, которое вы видели в предыдущей лекции.
Мы изменим его, чтобы использовать Firebase в качестве бэкэнда.
Таким образом, как мы увидим в конце этого урока,
это упражнение и следующее упражнение,
мы можем легко взять угловое приложение и модифицировать его, чтобы использовать
Firebase в качестве бэкэнда в качестве поставщика услуг.
Чтобы начать путешествие,
давайте пойдем на firebase.google.com, чтобы немного понять о Firebase.
Тема своего рода делает целую презентацию о Firebase,
я быстро проведу вас через то, что было
объяснено на самом сайте Firebase, потому что они дают вам
достаточно деталей о том, как Firebase поддерживает различные функции.
Итак, давайте пробежим через этот сайт, чтобы понять, как работает Firebase.
Поэтому, если вы заходите на веб-сайт, как вы можете видеть,
он говорит, что Firebase помогает вам создавать лучшие мобильные приложения и развивать свой бизнес.
И затем, как вы видите здесь,
он объясняет вам подробности о том, как он позволяет
быстро создавать приложения без необходимости управления серверной инфраструктурой для вашего приложения
и единой консолью, объединяющей множество продуктов, которые работают вместе.
Таким образом, это все продукты, предлагаемые Google, которые работают вместе, чтобы удовлетворить ваши потребности бэкэнда.
А также здесь вы можете использовать
многие дополнительные продукты, которые доступны в Google.
Так, в частности, в этом упражнении
мы будем использовать Cloud Firestore,
новое положение от Google.
Мы посмотрим подробнее об этом позже.
Мы рассмотрим, как мы можем использовать поддержку аутентификации
, которая предоставляется Firebase для аутентификации пользователей.
Мы рассмотрим облачное хранилище для хранения наших файлов изображений и их обслуживания.
И тогда мы также рассмотрим, как мы можем использовать все это вместе с
модулем узла FireBase, который мы можем включить вместе с модулем узла
angularfire2 в наше угловое приложение, чтобы
мы могли общаться с нашим бэкендом Firebase в качестве сервиса.
Кроме того, глядя более подробно,
мы видим, как
сама тире Firebase предоставляет различные функции, такие как позволяет развертывать
различные пользовательские функции для разной адаптации вашего приложения и
как легко интегрировать ваш бэкэнд либо с iOS,
Android или веб-приложением .
В частности, мы рассмотрим веб-приложение и использование JavaScript, а
также использование того, как мы будем
включать это в наше угловое приложение немного позже.
А также Firebase предоставляет базу данных в реальном времени,
как исходную базу данных в реальном времени,
а также новый Cloud Firestone,
позволяют автоматически синхронизировать данные между различными пользовательскими устройствами.
Таким образом, любые изменения, сделанные
на стороне сервера, будут автоматически отражаться на всех клиентах,
и, конечно, вы можете прочитать более подробную информацию о Firebase на этом сайте.
И начать очень легко, потому что базовое предложение является бесплатным для пользователей.
Итак, давайте начнем использовать Firebase.
Мы настроим нашу учетную запись Firebase, а затем получить доступ и настроить наш бэкэнд в качестве сервера,
который мы затем будем использовать из нашего углового приложения.
Итак, это быстрый тур по Firebase,
но вместо того, чтобы просто смотреть на них,
давайте зайдем и фактически испачкаем наши руки,
настраивая базу Firebase
обратно в службу, а затем используя ее в нашем угловом приложении.
Так что, чтобы начать,
как вы увидите правый край здесь,
он говорит перейти на консоль.
Очевидно, что у вас должен быть аккаунт Google, чтобы иметь возможность использовать Firebase.
Это само собой разумеется,
и вы должны войти в свой аккаунт Google.
Итак, как вы можете видеть,
я уже в моем аккаунте Google.
Так что это даст мне доступ к консоли.
Если вы не вошли в систему,
то вам лучше войти в свой аккаунт Google.
Поэтому, когда вы переходите на консоль,
это приведет вас к консоли служб Firebase здесь,
где вы можете настроить проекты.
Поэтому, когда вы идете на консоль,
как вы можете видеть, в ней говорится, что добавьте проект.
И, как вы можете видеть,
я уже пробовал свои силы в настройке
другого проекта Firebase, прежде чем я объяснил это вам.
Так что давайте создадим проект здесь.
Поэтому мы нажмем на проект добавления,
и это должно вызвать красивое маленькое окно,
где вы можете ввести информацию.
Таким образом, мы назовем этот проект как ConfusionServer,
как вы ожидали, и настроим его там, где бы вы ни находились в данный момент.
Поэтому я собираюсь настроить его для использования в
Гонконге и создания проекта.
И как только ваш проект будет создан,
это то, что вам будет представлено Firebase.
И здесь вы увидите, что первое, что вы хотели бы захватить,
- это информация о вашей конфигурации Firebase,
чтобы вы могли использовать ее в своем угловом приложении.
Чтобы сделать это,
нажмите на эту кнопку здесь.
Таким образом, он говорит, добавьте Firebase в свое веб-приложение.
И это предоставит вам кучу информации, которую
вы должны скопировать и сохранить, потому что я буду
использовать эту информацию для настройки
моего углового приложения немного позже в следующем упражнении.
Поэтому сохраните эту информацию в удобном месте,
чтобы вы могли использовать эту информацию при настройке сайта вашего клиента.
Следующим шагом я поставлю здесь пару аккаунтов.
Поэтому позвольте мне нажать на аутентификацию здесь.
И когда аутентификация будет поднята,
мы настроим методы входа, которые мы будем использовать для нашего сервера Firebase,
и в моем случае
я буду использовать пароль электронной почты в качестве одного из вариантов.
Таким образом, мы включим пароль электронной почты.
Я также включу вход в систему Google.
Таким образом, эти два включены.
Если вы хотите, вы можете включить другие способы проверки подлинности пользователей.
Далее, перейдя к пользователям, теперь,
если вы войдете в это приложение с вашей учетной записью Google,
этот пользователь будет автоматически добавлен в вашу систему.
Но прямо сейчас я собираюсь настроить одного пользователя с электронной почтой и паролем.
Поэтому я настрою admin@confusion.net,
и я установлю пароль здесь и добавлю пользователя.
Таким образом, это будет один пользователь,
который может войти в систему с помощью комбинации email-password.
Мы также можем зарегистрироваться, чтобы получить доступ к этому, используя наш аккаунт Google.
Таким образом, мое угловое приложение,
я настрою использовать как способ ввода пароля электронной почты,
так и вход на основе учетной записи Google.
После этого мы отправимся на хранение.
Таким образом, мы установим хранилище следующим образом.
Таким образом, хранилище - это место, где вы можете настроить способ
загрузки файлов на ваш сервер, а затем сделать их доступными для использования.
Таким образом, это хранилище, я собираюсь настроить свое хранилище для хранения
изображений, которые мы будем использовать и сохранить с нашего сайта сервера.
Поэтому, когда вы настраиваете хранилище,
он придумает набор правил безопасности,
которые определяют, какие операции будут разрешены пользователем.
Таким образом, он говорит, что позволяет читать,
писать: если request.auth не равен нулю,
так что это означает, что только пользователи, которые
вошли в этот сервер, смогут читать и писать.
Теперь я собираюсь изменить это, чтобы разрешить чтение для кого угодно,
но записи будут разрешены только аутентифицированными пользователями.
Так что мы скажем, понял,
а потом я начну.
Итак, в правилах
я зайду в правила здесь, а затем изменю правила,
чтобы пользователи могли читать с сервера.
Теперь мы можем настроить его на определенном уровне папок,
но так как это простое приложение,
я собираюсь настроить его на уровне всего хранилища.
Итак, здесь, я скажу, разрешить чтение,
а затем я собираюсь изменить это правило, чтобы сказать разрешить чтение,
и я скажу, разрешить запись, если запрос.
Таким образом, как вы можете видеть,
пользователям будет разрешено читать из хранилища.
Любой пользователь будет иметь право читать, даже без аутентификации,
но запись ограничивается только пользователями, которые входят в систему.
Таким образом, это простая модификация правил доступа,
правил безопасности.
Вы можете быть более подробно об этом,
но в простом примере
я собираюсь остаться с этим.
А потом мы опубликуем эти правила на нашем сервере.
Затем возвращаясь к файлам, в файлах,
я собираюсь создать новую папку здесь с именами изображений.
Теперь, как вы видите,
правила могут быть настроены для этой конкретной папки изображений,
так что пользователи смогут читать только из этой папки изображений, а затем только
авторизованные пользователи могут загружать в эту папку изображений, если вы это решите.
Но, прямо сейчас, я собираюсь оставить его как таковой,
как общий набор правил, который я настроил там.
Теперь перейдите в папку с изображениями.
Я собираюсь загрузить кучу изображений в эту папку здесь.
Поэтому позвольте мне захватить кучу изображений, которые у меня есть для моего приложения.
Итак, ранее я использовал эти изображения в других моих приложениях.
Я собираюсь выбрать все эти изображения, а затем загрузить их в хранилище Google здесь.
Эти изображения доступны в
файле images.zip, который я предоставил вам в предыдущем упражнении,
в предыдущем уроке.
Поэтому просто загрузите файл images.zip,
или если вы уже загрузили,
у вас должны быть эти изображения с собой, чтобы вы могли загрузить их в файл.
Когда вы загружаете эти изображения,
вы можете нажать на любое из этих изображений, а также заметить, что внизу,
он дает вам это местоположение файла.
Вам нужно скопировать этот URL для этого местоположения файла, потому что, когда мы настраиваем нашу базу данных,
в поле изображений наших данных JSON,
мы собираемся настроить каждый из них с этим URL-адресом для соответствующего изображения.
Далее мы перейдем к этой базе данных.
В базе данных у вас есть два варианта.
Вы можете перейти с старой базой данных в реальном времени,
которая поддерживается Google,
и действительно большинство современных приложений, которые используют Firebase, будут использовать базу данных в реальном времени.
Но затем, в этом курсе,
мы рассмотрим новую бета-версию Firestore.
Бета-версия Firestore предоставляет гораздо более полную базу данных в реальном времени.
Таким образом, это база данных следующего поколения в реальном времени и
предоставляет гораздо более продвинутые способы выполнения запросов и
автоматического масштабирования их хранилища для нас.
Так что мы пойдем с бета-версией Firestore.
Теперь одна из причин для меня снова начать с
бета-версии Firestore просто потому, что она
позволяет нам хранить информацию в виде документов и коллекций.
Теперь, из нашего опыта работы с MongoDB,
мы уже знаем, как работают документы
и коллекции, поэтому бета-версия Firestore является гораздо лучшим выбором для нас,
так как мы уже знаем, как это настраивается.
Если вы хотите использовать стандартную базу данных реального времени по умолчанию,
вы можете сделать это.
Но база данных в реальном времени хранит все ваши данные в
одном большом дереве и имеет ограниченный объем запросов.
Поэтому для правил безопасности для моего Firestore
я пойду с тестовым режимом,
где я просто оставлю его открытым для людей, чтобы читать и писать в данный момент.
И это нормально, потому что мы просто тестируем базу данных, но обычно
я бы предложил использовать более настроенный способ работы с вашей базой данных здесь.
Итак, мы начнем с тестового режима, с которого начнем.
И поэтому мы установим правила безопасности, как это, для начала.
Вы можете перейти с более сложной настройкой инструмента безопасности.
Так что, как вы видели с хранилищем,
мы создали так, что чтение разрешено
кем угодно, но записи разрешены только авторизованными пользователями.
Мы также можем настроить подобный функционал здесь.
Итак, это сервер confusionserver.
Итак, в правилах,
позвольте мне перейти в это хранилище, а затем просто скопировать правило из хранилища здесь,
и мы установим такое же ограничение здесь.
Таким образом, мы позволим любому читать, но только
авторизованным пользователям записывать в базу данных.
Таким образом, возвращаясь к базе данных, в правилах,
мы можем сказать разрешить чтение: а затем вторая строка я собираюсь заменить это,
сказав, что разрешить запись, если request.auth не равен нулю.
Таким образом, только люди, которые вошли в систему,
они смогут вносить изменения в данные, чтобы мы,
по крайней мере, имели некоторую защиту моих данных.
Теперь, здесь, мы теперь можем графически добавить данные в наше приложение.
И это, я нахожу самый быстрый способ добавления данных.
Если вы настроили сайт клиента,
вы также можете публиковать данные с сайта клиента, но,
прямо сейчас, мы начнем с добавления в три коллекции здесь.
Итак, первая коллекция, которую я добавлю, это блюда.
И мы можем добавлять документы в посуду,
чтобы добавить наш первый документ.
Поэтому, чтобы добавить документ в блюда,
помните, что я дал вам файл db.json там.
Таким образом, вы можете пойти с файлом DB.json, а затем добавить,
шаг за шагом, каждое из блюд, которые у нас есть.
Итак, здесь, я собираюсь настроить первое блюдо здесь.
Таким образом, для блюда, мы можем позволить Firebase автоматически назначить идентификатор для нашего документа.
Поэтому я позволю этому автоматически назначить.
Итак, мы добавим первое блюдо здесь.
Название поля и первое блюдо здесь.
Поэтому мы должны кропотливо добавить,
понемногу, каждое из блюд здесь.
Так что мы скажем имя,
а затем мы скажем категорию, которая является основной.
И тогда мы добавим изображение,
которое я собираюсь вернуться и добавить немного позже, потому что мне нужно скопировать
URL-адрес изображения из моего хранилища и использовать его здесь.
Тогда мы будем помечены как Hot, цена.
Таким образом, у нас есть
категория, имя, категория, изображение, этикетка, цена
, описание, которые я собираюсь скопировать и вставить из моего файла DB.json.
И, наконец, флаг,
который я установлю как логическое и установлю это в true в этом случае.
Таким образом, это будет наш первый документ, который мы добавим в нашу базу данных здесь.
Таким образом, вы сразу заметили, что
в нашей базе данных добавляется первый документ.
Таким образом, мы увидим блюда и первый документ,
и вы можете увидеть информацию об этом документе, настроенном здесь.
Таким образом, у нас есть категория, описание
, признакам, изображение, этикетка, имя и цена.
Мы также добавим еще одно поле здесь под названием CreateDat,
и это будет метка времени.
И метка времени будет сегодняшней временной меткой, а затем я оставляю там значение времени как таковое.
Таким образом, мы можем добавить метки времени также к этому, и, также,
мы добавим еще одну метку времени как UpdateDat и с меткой времени здесь.
Итак, у нас есть еще две временные метки.
Теперь, для изображения,
мы отправимся в хранилище здесь.
И из нашего хранилища, в изображениях,
мы выберем файл изображения здесь,
а затем перейдите в местоположение файла, а затем скопируем этот URL-адрес здесь.
Поэтому, если мы просто нажмем на это,
этот URL-адрес будет скопирован.
Поэтому мы вернемся к
этой базе данных, а затем
отредактируем поле изображения, а затем добавим туда этот URL-адрес.
Например, вы можете идти вперед и добавить оставшиеся блюда,
акции, а также лидеров.
Поэтому, как только вы завершите все шаги,
которые займет довольно много времени для вас, чтобы сделать шаг за шагом.
Поэтому я позволил вам закончить добавление всей этой информации в ваш Firebase.
Таким образом, после того, как вы завершите ввод всех данных в
вашу базу данных, ваши блюда должны иметь четыре блюда здесь.
Опять же, убедитесь, что вы инициализировали
поле изображения с URL-адресом из этого хранилища для этого конкретного изображения.
Так что у вас будет одна, две, три и четыре блюда.
Тогда у вас будет четыре лидера соответственно.
Раз, два, три и четыре и одно повышение здесь.
Опять же, убедитесь, что вы инициализировали изображения для каждого из
них соответствующим образом из хранилища Firebase.
При этом наш сервер полностью настроен.
Таким образом, наш сервер Firebase имеет все данные, необходимые для выполнения наших планов.
Теперь мы перейдем к следующему упражнению,
где мы настроим наш угловой клиент, чтобы иметь возможность получить доступ к
этому бэкенду Firebase как к службе, а затем получить
данные, а затем также отправить данные на свой сервер Firebase.
С этим мы завершаем это упражнение.
В этом упражнении мы видели, как легко для нас
настроить наш сервер Firebase как сервис для аутентификации,
для хранения файлов и их обслуживания, а также хранения информации в
базе данных Cloud Firestore в виде коллекций и документов внутри коллекций.
С этим мы завершаем это упражнение.