Создайте полнофункциональное приложение для недвижимости за считанные минуты

Станьте следующей Trulia, Zillow или Airbnb, выпустив приложение по недвижимости для iOS и Android за считанные минуты. Загрузите наш функциональный шаблон приложения React Native Real Estate, интегрированный с Firebase Backend, чтобы буквально сегодня запустить собственное приложение. Созданный с особым вниманием к деталям, этот красивый шаблон приложения, написанный на React Native, представляет собой лучший способ ускорить разработку вашего нового мобильного приложения.

Теперь давайте продолжим реализацию входа на Github с помощью Firebase и React, а затем сделаем доступными с помощью Bit.

Чему вы научитесь…?

  • Как передать реквизит в React.
  • Как использовать аутентификацию Firebase.
  • Как создать и настроить приложение Github.
  • Как использовать Бит.

Большинство моментов уже было рассмотрено в первой главе, поэтому эта глава делает концепции еще более ясными по мере нашего продвижения вперед.

Требования

Вот полный список плагинов, пакетов и сервисов, которые нам понадобятся, чтобы получить что-то из этого руководства:

  • Nodejs v8.x.x или более поздней версии установлен вместе с NPM/yarn.
  • Учетная запись Firebase, Github и Bit.
  • Уже завершенный проект из предыдущей главы.
  • Пакет Firebase и Bit.

Создайте приложение на GitHub

сначала создайте новое приложение GitHub

и заполнение всех необходимых данных

Приложение GitHub легко создать, теперь у нас есть новое приложение

получить идентификатор клиента и секрет клиента

Настройка приложения FireBase

перейдите в наше приложение и откройте «Аутентификация»> «Метод входа»> вставьте идентификатор клиента и секрет клиента на вкладке Github.

и сохраните, теперь мы можем использовать Github Login в нашем приложении

Создайте компонент входа в Github

теперь мы реплицируем другой компонент, который мы создали из предыдущей части, и изменяем все функции, классы, имена файлов на Github.

в GitHubAuth.jsx меняем все на Gihutb

и на index.js

теперь мы можем использовать компонент в основном App.js

пусть тестирование

это работа, давайте снова поделимся на Bit

Сделайте его многоразовым и общедоступным с помощью Bit



Обмен повторно используемыми компонентами кода в команде · Bit
Легко обменивайтесь повторно используемыми компонентами между проектами и приложениями, чтобы строить быстрее в команде. Совместная разработка…bit.de



Чтобы сделать наш код повторно используемым и общедоступным, мы сделаем некоторую реструктуризацию и переместим весь наш код в компоненты (это не обязательно, но лучше при использовании Bit). Затем мы экспортируем его (со всеми его зависимостями) в коллекцию компонентов в облаке Bit, чтобы поделиться с другими и легко использовать повторно.

На этом этапе мы собираемся снова отправить новый компонент, то есть компонент входа в Google, в Bit. У нас уже установлен пакет Bit и подключен к нашей учетной записи Bit. Итак, нам нужно создать коллекцию и начать с отслеживания компонента.

Примечание. На первом и втором этапе необходимо установить учетную запись Bit. Эти шаги можно пропустить, если у вас уже есть учетная запись Bit.

1. Инициализировать бит в проекте

Здесь мы создаем новую коллекцию на Bit, в которую мы собираемся отправить весь код нашего компонента. Мы используем страницу конфигурации Bit «create collection», чтобы создать новую коллекцию с именем «firebase-auth-collection», как показано на снимке экрана ниже:

Чтобы успешно отправить весь проект в Bit, вам необходимо следовать инструкциям, приведенным на странице, показанной ниже:

Во-первых, нам нужно установить Bit CLI

Используя НПМ,

npm install bit-bin --global

Затем нам нужно перейти в каталог проекта в нашем Bit CLI и выполнить команды bit init и запустить bit login в Bit CLI, как показано на снимке экрана ниже:

2. Настройте компилятор React для нашего компонента

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

bit import bit.envs/compilers/react --compiler

3. Отслеживание компонентов

Нам нужно отслеживать наш компонент, используя следующую команду в вашей командной строке или консоли Bit:

bit add src/components/GithubAuth

Результат после выполнения команды показан ниже на скриншоте:

4. Пометить и экспортировать

Здесь мы собираемся установить версию для всех отслеживаемых компонентов и экспортировать в эту коллекцию, используя следующую битовую команду:

bit tag --all 1.0.0

Наконец, нам нужно выполнить следующую битовую команду, чтобы отправить код нашего компонента в битовую коллекцию, которую мы создали ранее:

bit export krissnawat.firebase-auth-collection

Теперь наш пакет в эфире на Бите. Это наш второй компонент в нашей коллекции аутентификации firebase, как показано на снимке экрана ниже:

Наконец, нам нужно заменить компонент в нашем файле App.js, как показано во фрагменте кода ниже:

Наконец, реализация входа в Github с аутентификацией firebase и загрузка компонента в Bit завершена. Теперь мы можем запустить проект локально, чтобы все протестировать.

Вывод

В этом руководстве мы узнали, как реализовать вход в Github с помощью firebase. Мы также узнали о реализации повторно используемого кода в виде компонентов, как и в предыдущей главе. Наконец, нам удалось добавить второй компонент в нашу коллекцию Firebase Auth.