Я написал пару статей о Firebase, и теперь я хочу понять, почему я считаю, что Angular и Firebase - идеальное сочетание для первоклассного веб-приложения. Нет лучшего способа сделать это, чем разобраться с этими удивительными технологиями, создав собственное приложение. В этой серии статей я расскажу о создании полноценного веб-приложения. В этой первой части я расскажу вам, что такое Firebase, а затем мы перейдем к созданию проекта Firebase и запуску веб-приложения.

Firebase

Если вы еще не использовали Firebase, я НАСТОЯТЕЛЬНО рекомендую вам попробовать. Firebase - это серверная часть как услуга, предоставляющая вам все инструменты, позволяющие полностью абстрагироваться от вашей серверной части. Firebase предоставляет вам аутентификацию, настраиваемые функции, 2 разные базы данных NoSQL, хранилище файлов, статический хостинг сайтов (с бесплатным сертификатом SSL), легко реализует машинное обучение, всю аналитику, которая вам может понадобиться, обмен сообщениями в облаке (возможность работы в push-уведомлениях для веб-платформ и мобильных устройств) и многое другое, о чем я не буду вдаваться в подробности для краткости.

Все упомянутые мной предложения удивительно просты в использовании и интегрируются в существующее приложение, и так же легко, если вы начинаете с нуля. Создаете ли вы собственное мобильное приложение, гибридное приложение, веб-приложение или видеоигру, Firebase предлагает простые в использовании SDK практически на любом языке.

В контексте этой статьи я расскажу только о создании веб-приложений с помощью Angular и Firebase, но вы можете легко использовать эти методы на любой платформе, для которой вы создаете.

Создание веб-приложения

Веб-приложения великолепны своей гибкостью. Их можно использовать на любом устройстве с подключением к Интернету. С помощью PWA мы даже можем взять наше веб-приложение и предоставить пользователям полунативный опыт работы с приложением.

Вместо того, чтобы просто говорить об этом, сегодня мы собираемся создать реальное приложение с использованием Angular и Firebase. В конце этой серии статей у нас будет полнофункциональное приложение, размещенное на Firebase, которое сможет использовать каждый.

Для начала мы создадим приложение для создания заметок, похожее на Google Keep. В этой статье будет рассказано только о настройке вашего проекта Firebase. В следующей статье мы поговорим о интерфейсе командной строки Firebase и создадим правила Firestore.

Создание проекта Firebase

Первое, что мы собираемся сделать, это перейти в панель управления Firebase. Если у вас нет учетной записи, вам придется создать ее, но тогда вы попадете на страницу, указанную выше. Следующее, что нужно сделать, это ввести необходимую информацию.

Тогда мы можем выбрать Google Analytics или нет. Я просто оставлю настройки по умолчанию и двинусь дальше.

Следующее, что нужно сделать, - это выбрать для использования проект Google Analytics, и тогда мы сможем создать наш проект. Как только проект будет успешно создан, мы увидим экран успеха.

Одна вещь, которая мне действительно нравится в Firebase, - это панель инструментов. Это мелочь, но она настолько проста в использовании и действительно делает работу намного лучше.

Настройка аутентификации

Первое, что нам нужно сделать, это перейти на вкладку «Аутентификация», а затем мы собираемся настроить некоторые методы входа.

Первое, что мне нужно, это адрес электронной почты и пароль.

Если вам интересно, что такое вход без пароля, я найду минутку, чтобы объяснить. Обычно происходит то, что пользователь регистрируется только со своим адресом электронной почты. Затем Firebase отправит пользователю ссылку по электронной почте для подтверждения адреса электронной почты. Как только их адрес электронной почты будет проверен, они смогут войти в систему. Итак, теперь пользователь может перейти в ваше приложение, ввести свой адрес электронной почты, а затем Firebase отправит им электронное письмо со специальной ссылкой. Эта ссылка содержит код аутентификации, который каждый раз будет отличаться. Как только пользователь нажимает на эту ссылку, он будет аутентифицирован с помощью Firebase. Это действительно отличный метод входа, о котором я, вероятно, напишу еще одну статью.

Следующий метод входа, который мне нужен, - это вход в Google.

Чтобы настроить это, вам просто нужно выбрать свой адрес электронной почты из раскрывающегося списка и нажать «Сохранить». Теперь ваши поставщики услуг входа настроены, и мы готовы создать аутентификацию пользователей.

Я не буду здесь подробно останавливаться на всех методах аутентификации, но, как вы видите, их довольно много. Если вы хотите их настроить, Firebase даст вам довольно четкие инструкции, как это сделать, и сделает весь процесс невероятно простым. Как вы увидите, как только мы начнем создавать поток аутентификации Google, другие поставщики услуг входа будут в основном такими же.

База данных

В этом проекте мы собираемся использовать Cloud Firestore, который представляет собой масштабируемое хранилище документов NoSQL Firebase. Чтобы создать экземпляр Firestore, мы перейдем на вкладку «База данных» в разделе «Разработка» на боковой панели. Затем мы собираемся нажать кнопку «Создать базу данных». Вы увидите следующее модальное окно:

Это относится к правилам Firestore, и мы поговорим о них через секунду, но вы можете найти документацию здесь. Мы собираемся оставить его по умолчанию в заблокированном режиме, что в основном означает, что никто не сможет читать или записывать какие-либо данные в базу данных. Не волнуйтесь, мы изменим это чуть позже.

Следующее, что нам нужно сделать, это выбрать регион, в котором мы хотим запустить Firestore.

Я собираюсь пока оставить нас в центре внимания, но вы можете выбрать любой регион, который вам нравится, но примите во внимание предупреждение в модальном окне. Если вы новичок во всем этом и только начинаете, я бы не обращал особого внимания на то, где это не повлияет на вашу жизнь. Итак, теперь наша база данных (в основном) настроена, и мы можем перейти к фактическому приложению.

Резюме

В этой статье я немного рассказал о том, что такое Firebase, и мы просмотрели панель управления и настроили наш проект. Если у вас есть какие-либо вопросы относительно панели управления Firebase или настройки вашего проекта, я с радостью отвечу на них.

В следующей статье я перейду к настройке интерфейса командной строки Firebase и настройке правил Firestore.

Читайте часть 2 здесь.

📝 Прочтите этот рассказ позже в Журнале.

👩‍💻 Просыпайтесь каждое воскресное утро и слышите самые интересные истории недели в области технологий, ожидающие в вашем почтовом ящике. Прочтите информационный бюллетень« Примечательно в технологиях .