Что вы будете строить. Смотрите живую демо и Git Repo здесь.

Введение

Хотите продвинуться в карьере разработчика приложений? Тогда пришло время завершить этот проект LinkedIn Clone. Мы создадим клон LinkedIn с помощью ReactNative, что значительно улучшит ваше понимание этой кроссплатформенной среды. Это руководство было составлено с помощью ReactNative, Firebase и CometChat. Мы создадим проект с вашими навыками JavaScript, как показано на изображениях выше.

Если вы хотите добавить этот проект в свое портфолио, то прыгайте со мной на клавиатуру, и мы во всем разберемся.

Предпосылка

Чтобы усвоить этот урок, у вас уже должны быть базовые знания ReactNative, остальные стеки можно легко понять без проблем. Ниже перечислены пакеты, используемые для разработки этого приложения.

Установка зависимостей проекта

Сначала загрузите и установите Node.js на свой компьютер, посетите их веб-сайт и завершите установку, если вы еще этого не сделали. Затем вам нужно установить Expo-CLI на свой компьютер, используя приведенную ниже команду. Вы можете посетить их страницу документа, используя эту ссылку.

Установить Expo-CLI

npm install --global expo-cli

После этого откройте терминал и создайте новый выставочный проект с именем LinkedIn-clone и выберите пустой шаблон при появлении запроса. Используйте приведенный ниже пример, чтобы сделать это.

Создайте новый выставочный проект и перейдите в каталог

expo init linkedin-clone
cd linkedin-clone

Запустить только что созданный выставочный проект

expo start

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

Отлично, теперь давайте установим эти необходимые зависимости для нашего проекта, используя приведенную ниже инструкцию. Менеджер пакетов по умолчанию для выставки — yarn, см. коды ниже.

Установите собственные библиотеки реактивной навигации

yarn add @react-navigation/native
yarn add @react-navigation/native-stack

Установка зависимостей в управляемый проект Expo

expo install react-native-screens react-native-safe-area-context

Установите Yup и Formik для проверки наших форм

yarn add formik yup

Удивительно, теперь давайте настроим Firebase для этого проекта.

Настройка Firebase

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

#Install firebase with the command
expo install firebase

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

Мы продолжим, зарегистрировав учетную запись firebase, если у вас ее еще нет. После этого перейдите в Firebase и создайте новый проект с именем LinkedIn-clone, активируйте службу аутентификации по электронной почте и паролю, подробности описаны ниже.

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

Эпик, давайте активируем службу Firestore, которую мы будем использовать для хранения всех сообщений, поступающих из нашего приложения LinkedIn-clone.

Чтобы активировать службу Firestore, перейдите на вкладку Firestore на боковой панели, как показано на изображениях ниже, и нажмите «Создать базу данных».

Затем перейдите к правилам Firestore и внесите изменения, как показано на изображениях ниже.

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

Щелкните вкладку с одним полем и добавьте исключение, как показано на изображении ниже.

Введите сообщения в качестве идентификатора коллекции и отметку времени в качестве поля. Нажмите «Далее» и включите области, как показано на изображениях ниже.

Если вы правильно выполнили вышеуказанные шаги, вы должны получить тот же результат, что и на изображении ниже.

Как только все будет завершено, индикаторы загрузки в блоках исключений должны исчезнуть и теперь должны выглядеть так.

Отлично, вы настроили все, что нам нужно для сервисов Firestore, теперь давайте сгенерируем ключи конфигурации Firebase SDK.

Вам нужно пойти и зарегистрировать свое приложение в рамках вашего проекта Firebase.

На странице обзора проекта выберите вариант добавления приложения и выберите Интернет в качестве платформы.

После завершения регистрации конфигурации SDK вернитесь на страницу обзора проекта, как показано на изображении ниже.

Теперь вы нажимаете на настройки проекта, чтобы скопировать настройки конфигурации SDK.

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

Создайте файл в корне этого проекта с именем firebase.js и вставьте следующие коды и сохраните.

Если вы следовали всему этому правильно, вы прекрасны. Теперь мы сделаем то же самое для CometChat.

Настройка CometChat

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

Нажмите кнопку Добавить новое приложение, чтобы создать новое приложение. Вам будет представлено модальное окно, в котором вы можете ввести сведения о приложении, которое необходимо создать. Пример показан на изображении ниже.

После создания приложения вы перейдете на панель инструментов приложения, которая должна выглядеть следующим образом.

Вам также потребуется скопировать эти ключи в отдельный файл, как показано ниже. Просто создайте файл с именем CONSTANTS.js в корне проекта и вставьте приведенный ниже код. Теперь укажите этот файл в файле gitIgnore, который также находится в корне этого проекта, это гарантирует, что он не будет опубликован в Интернете.

export const CONSTANTS = {
APP_ID: 'xxx-xxx-xxx',
REGION: 'us',
Auth_Key: 'xxx-xxx-xxx-xxx-xxx-xxx-xxx-xxx',
}

Фантастически, этого достаточно для настроек, давайте начнем интегрировать их все в наше приложение.

Каталог компонентов

У нас есть несколько каталогов в этом проекте, начнем с папки компонентов. Создайте папку с именем component в корне этого проекта. Начнем с компонента Header.

Компонент заголовка

Используя возможности react-native-media-query, вы сможете создать компонент заголовка, как показано на изображении выше.

Отлично, давайте добавим следующий компонент в каталог компонентов.

Компонент BottomTabs

Этот липкий компонент виден в нижней части главного экрана. Когда вы нажмете кнопку публикации, вы перейдете на экран AddPostScreen. Создайте компонент с именем BottomTabs.js и вставьте в него приведенные ниже коды. См. фрагмент кода ниже.

Наконец, давайте включим компонент карты для этого проекта.

Компонент карточки

Это хорошо продуманная карта со многими частями, лучше увидеть код самостоятельно. Создайте компонент с именем Card.js в каталоге компонентов и вставьте в него приведенные ниже коды.

Круто, мы только что закончили с каталогом компонентов, пришло время создать экраны.

Каталог экранов

Экраны можно сравнить со страницами веб-сайта, каждый экран представляет собой страницу, и вы можете перемещаться от экрана к экрану с помощью пакета ReactNativenavigator. Перейдем к SignupScreen.

Экран регистрации

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

Экран входа

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

Главный экран

Главный экран состоит из трех компонентов. Компоненты Header, Card и BottomTabs. Этот экран динамически отображает компонент карты синхронно с сообщениями в Firestore. См. фрагмент кода ниже.

Экран AddPost

Этот экран отвечает за создание новых сообщений. Используя Formik и Yup, мы собираем данные из формы и сохраняем их в базу данных Firestore. Вот коды, демонстрирующие такое поведение.

Экран списка чатов

Экран списка чатов отвечает за перечисление всех пользователей, зарегистрированных на нашей платформе. Используя CometChat SDK, мы получим список зарегистрированных у нас пользователей. Вот так выглядит код.

Экран чата

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

Настройка маршрутизатора

Теперь, когда у нас есть код проекта, давайте настроим навигационные маршрутизаторы и защиту, создадим и вставим следующие коды, как указано ниже.

Файл навигации

Это разделяет экраны на две группы: те, которые требуют аутентификации, и другие, не требующие аутентификации.

Создайте новый файл в корне проекта с именем "navigation.js" и вставьте в него приведенные ниже коды.

Файл AuthNavigation

Этот файл логически представляет вам экраны на основе authState службы аутентификации Firebase. Чтобы продолжить, создайте еще один файл в корне проекта с именем «AuthNavigation.js» и вставьте в него приведенные ниже коды.

Файл приложения

Наконец, замените коды в файле App.js следующими кодами.

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

Загрузите следующие изображения и поместите их в каталог ресурсов.

https://raw.githubusercontent.com/Daltonic/linkedIn-clone/main/assets/logo.png

https://raw.githubusercontent.com/Daltonic/linkedIn-clone/main/assets/avatar.jpg

https://raw.githubusercontent.com/Daltonic/linkedIn-clone/main/assets/default-avatar.jpg

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

# Start your ReactNative local server on the web view

yarn web

Заключение

Здесь нет ничего невозможного; вы можете раздавить чат-приложение с помощью ReactNative, Firebase и CometChat. Вы видели, как реализовать это шаг за шагом; теперь пришло время сокрушить другие чат-приложения самостоятельно. У меня также есть другие руководства, которые покажут вам, как создать приватный или общедоступный групповой чат. Я с нетерпением жду ваших потрясающих творений.

Дальнейшее чтение



Я создал бессерверное приложение для живого чата с помощью Next.js, Fauna и WunderGraph для интерактивных запросов GraphQL
Пошаговое руководство по созданию масштабируемого приложение для чата, использующее бессерверные технологии, с небольшой помощью…javascript.plainenglish.io



об авторе

Госпел Дарлингтон начал свой путь в качестве инженера-программиста в 2016 году. За эти годы он приобрел полноценные навыки работы со стеками JavaScript, такими как React, ReactNative, VueJs и другими.

В настоящее время он работает фрилансером, создает приложения для клиентов и пишет технические руководства, обучая других тому, что делает он.

Евангелие в Дарлингтоне открыто и доступно для вас. Вы можете связаться с ним в LinkedIn, Facebook, Github или на его сайте.

Больше контента на plainenglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку здесь.