Swift, Objective-C, Java, Kotlin – вот список языков программирования, которые вам понадобятся, чтобы создать мобильное приложение для Android и iOS. Внушительный список, на освоение которого может уйти много времени. Но мы то с вами хотим быстро – все и сразу: стать хакером за 2 дня, похудеть на 15 кг за одну неделю и прочие безобразия. Что делать? К счастью ребята из Facebook разделяют наше желание быстрого результата, поэтому они придумали фреймворк, который позволяет создавать мобильные приложения для Android и iOS только благодаря одному языку – JavaScript – и имя ему React Native.
Что такое React Native?
Если вы знакомы с веб-фреймворком React, для вас не составит труда быстро разобраться с тем, как работает React Native. По сути, React Native адаптирует фишки React под разработку мобильных приложений. Давайте рассмотрим несколько особенностей React Native:
Вывод: что такое React Native? Это фреймворк, позволяющий одновременно создавать мобильные приложения под Android и iOS, используя для этого независимые компоненты, и делать это на понятном человеку языке.
Быстрое создание React Native приложения
Вам уже не терпится приступить к любимому делу – написанию кода – я понимаю, и поэтому хватит лирики! Давайте кодить! Но потом 🙂 Все было бы проще, если бы все было проще. Нам необходимо сделать несколько подготовительных шагов и настроить окружение. Вот список действий, которые нам необходимо сделать:
Установка NodeJs
Как установить NodeJs вы можете прочитать в моей статье про Angular.
Установка Expo
Expo – это специальная библиотека, упрощающая разработку React Native приложений. Это альтернатива стандартному созданию приложения с помощью React Native CLI. Рассмотрение его работы выходит за рамки этой статьи. Главными преимуществами Expo являются готовая реализация многих нативных компонентов самого телефона, что позволяет быстрее создавать новые приложения, а также окружение, позволяющее быстро тестировать работу разрабатываемого приложения на своем смартфоне или эмуляторе.
Для того чтобы установить Expo выполните следующую команду в консоли:
React Native init vs Expo
В официальной документации React Native, из раздела Getting Started, мы узнаем о том, что у нас есть два пути запуска мобильного приложения: expo и react-native cli. Пользователи Windows и Linux, а таких большинство, зайдя во вкладку Building Projects with Native Code и выбирая Target OS: iOS, встречают надпись, которая отправляет их на стартер Expo, но перед тем как ставить Expo, предлагаю ознакомиться с информацией в следующей таблице и поберечь свою голову не только от тех тумаков, что получил я:
Если вы все же выбрали Expo, то вопрос времени, что вы столкнетесь с его ограничениями и захотите использовать нативные модули, то для этого вам придется делать detach. По своему опыту и многих знакомых коллег знаю, что detach делается криво, а это значит, что вам придется рефакторить кучу ошибок.
Для меня Live Reloading в симуляторе стал верным другом, но в Expo он постоянно ломается и его постоянно приходится перезапускать, от чего процесс разработки становится мучительным.
Если бы компоненты Expo работали бы и с react-native cli, то не было бы проблем, а так я наблюдаю пропасть в совместимости стартеров и самое печальное, что Expo начнет подкидывать вам свои дополнительные ошибки, связанные со своей инфраструктурой.
Конечно не у всех есть возможность купить Mac, но бэнчмаркинг двух стартеров и мой 2.5 годичный опыт работы на том и другом показывает, что разрабатывать приложение с react-native cli, даже только из под Windows на Android — это более выгодная инвестиция в более профессиональное решение, так как с React-Native используется одна кодовая база под iOS и Android.
Надеюсь на вашу обратную связь, благодаря которой информация в изложенной статье будет корректироваться и дополняться.
Упрощаем процесс разработки нативных React приложений с помощью Expo
С Expo разработчики могут создавать React Native приложения, не испытывая при этом проблем с установкой и настройкой зависимостей программного обеспечения таких как Android Studio, Xcode и других инструментов, которые необходимы для разработки и запуска React Native приложений.
В этом уроке я собираюсь показать вам, как создать простую игру для тренировки памяти с помощью Expo. В процессе вы также узнаете следующее:
Что такое Expo?
Ограничения Expo
Перед тем, как вы продолжите, важно ознакомиться с некоторыми ограничениями Expo:
Даже с учетом этих ограничений важно иметь в виду, что Expo является полностью функциональным фреймворком с огромной поддержкой часто используемых Android и iOS интерфейсов API. Это значит, что он обеспечит вас основным функционалом, который обычно нужен приложениям. Так что для реализации нативного функционала зачастую хватит возможностей Expo.
Обзор приложения
И вот как это выглядит, когда все пары открыты:
После того, как игра пройдена, пользователь может нажать на кнопку сброса, чтобы вернуть элементы в их первоначальное состояние. Это позволяет начать игру заново.
Установка Expo
В отличие от обычной разработки React Native, где нужно устанавливать и настраивать Android Studio или Xcode и другие зависимости, с Expo нужно выполнить только несколько шагов, чтобы начать разработку приложений:
Создание нового приложения Expo
После того как вы установили все зависимости, можно приступить к созданию нового приложения Expo:
После выполнения этой команды, будет создана новая директория MemoryGame. Переместитесь внутрь этой директории и запустите сервер среды разработки:
Кроме того, можно также использовать Expo XDE. Это позволит вам создавать и запускать приложения Expo через GUI. Вы можете скачать установщик с репозитория Expo на GitHub. В настоящее время поддерживается только Windows и Mac. Так что если вы на Ubuntu или другом Linux, лучше пока использовать командную строку.
После запуска сервера разработки, вы сможете увидеть что-то подобное этому:
Это QR-код, который указывает на рабочий предварительный просмотр проекта. Откройте приложение Expo на вашем телефоне и воспользуйтесь QR сканером. На данном этапе вы можете просматривать экран по умолчанию. Каждый раз, когда вы будете нажимать Control-S в любом из файлов проекта, предварительный просмотр автоматически будет перезагружен для отражения изменений.
Вы можете найти полный исходный код проекта в репозитории на GitHub. А если вы хотите попробовать приложение, то есть демо. Просто выберите соответствующий QR-код и сканируйте его на вашем телефоне с помощью клиентского приложения Expo.
Пишем код приложения
Теперь мы готовы к написанию кода приложения. Начнем с некоторых компонентов пользовательского интерфейса, прежде чем мы вернемся к началу и напишем основной компонент.
Компонент заголовка
Заголовок используется для отображения названия приложения. Создайте папку components. Внутри нее создайте файл Header.js и добавьте в него следующее:
Это просто обычный компонент React Native с некоторыми стилями для оформления пользовательского интерфейса нашего приложения.
Компонент набранных очков
Далее создадим компонент для отображения набранных очков (components/Score.js):
Опять же, это простой компонент с отображением текста и некоторыми базовыми стилями.
Компонент карты
Компонент карты (components/Card.js) будет отображать карты. Эти карты используют иконки из набора векторных иконок Expo. Одной из фишек Expo, которые доступны сразу после установки является то, что платформа включает в себя иконки из таких наборов как FontAwesome, Entypo и Ionicons.
В коде ниже вы можете увидеть, что мы используем только FontAwesome. В этом наборе есть значок, который мы используем для отображения карты в состоянии по умолчанию: знак вопроса. Как вы увидите позже в основном компоненте приложения, мы будем также использовать значки из Entypo и Ionicons. Ссылка на эти источники иконок будет передана тому компоненту, поэтому нет необходимости указывать их здесь:
Внутри метода render() мы используем только источник и значок, которые передаются как свойства, если карта открыта. По умолчанию он будет только отображать значок вопросительного знака от FontAwesome. Но если карта открыта, он будет использовать источник значка, значок и цвет, которые были переданы в свойствах.
Не забудьте добавить стили:
Вспомогательные функции
Основной компонент
Основной компонент (App.js) содержит основную логику приложения и объединяет все части вместе. Начните с включения пакетов React и Expo, которые мы будем использовать. В этот раз мы используем все источники иконок из пакета векторных иконок Expo:
Далее включим компоненты и вспомогательные функции, который мы создали ранее:
Это подводит нас к решению ниже, которое заключается в необходимости создать совершенно новый объект, преобразовать массив cards в строку и затем преобразовать эту строку обратно в массив. Мы используем строку, поскольку функции не могут быть преобразованы в строки. Мы затем объединим оба массива, чтобы получить в итоге массив, который содержит все карты, которые нам нужны:
Далее нужно создать уникальный идентификатор для каждого из элементов массива, указать источник иконки и затем установить закрытое состояние карты по умолчанию:
Сортируем карты в случайном порядке и установим состояние по умолчанию:
Метод render() отображает заголовок, карты, набранные очки и кнопку сброса текущей игры. Он использует функцию renderRows() для отображения отдельных рядов карт. На экране будет шесть рядов, содержащих по четыре карты:
Вот функция getRowContents() :
Внутри функции clickCard() мы получаем данные выбранной карты и проверяем, стоит ли продолжать ее обработку:
Теперь давайте напишем код для обработки выбранной карты.
Во-первых мы открываем карту и добавляем ее в массив выбранных карт:
После того, как в массиве выбранных карт находятся две карты, мы проверяем, совпадают ли названия значков этих карт. Если это так, то это означает, что пользователь выбрал правильную пару. Если они не совпадают, то выбрана неправильная пара. В таком случае мы закрываем первую карту, которая была выбрана, и затем добавляем небольшую задержку перед закрытием второй карты. (Таким образом, пользователь может видеть значок карты прежде чем она перейдет в закрытое состояние.)
Наконец мы добавим несколько основных стилей, чтобы наше приложение хорошо выглядело.
Тестирование приложения
Поскольку сервер разработки Expo был запущен все это время, каждое изменение должно было поступить на ваше мобильное устройство и произвести перегрузку приложения на нем. Проверьте приложение и убедитесь, что оно работает корректно.
Заключение
Также советуем ознакомиться и с некоторыми нашими другими уроками по разработке нативных React приложений!
Выше первое приложение React Native с Expo
Если вы похожи на меня, новичка в разработке мобильных приложений, но у вас есть опыт разработки с React, Expo — это отличный инструмент, который поможет вам создать свое первое мобильное приложение!
Expo — это набор инструментов, с помощью которого вы можете написать приложение React Native за считанные минуты. Он включает в себя готовые инструменты, такие как конфигурации Android Studio / XCode, управление сертификатами в Apple & Google и push-уведомления, и это лишь некоторые из них. Кроме того, команда в Экспо невероятно отзывчива и может быть легко достигнута через их форумы или канал Slack. У них даже есть Canny для запросов функций от сообщества.
Если вы не решаетесь установить какие-либо инструменты и зависимости, вы можете попробовать React Native непосредственно в своем веб-браузере с Snack.
В этой статье я расскажу о настройке вашей среды, установке зависимостей и написании кода для создания вашего первого мобильного приложения! К концу вы создадите приложение, которое собирает данные о геолокации мобильного телефона пользователя, передает эти данные о долготе и широте в API Open Weather и отображает информацию о погоде в одном компоненте React Native. Звучит довольно легко, верно? Ну что ж, начнем!
Установка
Сначала давайте возьмем ваш личный ключ API из Open Weather по адресу https://openweathermap.org/api. Хочу отметить, что для активации API-ключа Open Weather API требуется не менее 10 минут, поэтому я предлагаю начать с этого шага.
Далее нам нужно будет установить последнюю версию NodeJS. Вы можете скачать это здесь.
Также потребуется инструмент командной строки Expo. Вы будете запускать этот инструмент локально для упаковки, обслуживания и публикации своих проектов. Кроме того, кто не любит использовать командную строку? Идите вперед и откройте свой терминал, используя следующую команду:
Отлично, теперь, когда вы установили инструмент CLI в Expo, давайте инициализируем новый проект в терминале, перейдем в соответствующую папку и, наконец, запустим Expo.
Это предложит вам выбрать тип рабочего процесса, который вы предпочитаете в своем терминале. Для этого конкретного проекта я использовал управляемый рабочий процесс с пустым холстом. Затем вам нужно будет выбрать имя (название вашего приложения в том виде, в каком оно отображается как в Expo, так и на домашнем экране в виде отдельного приложения) и slug (понятное имя URL для публикации).
Создание мобильного приложения на React Native
Всем привет. Это будет первой частью в создании нашего мобильного приложения.
Мобильное приложение мы будем делать с помощью react native и expo. Мы создадим не большое новостное приложение. Для этого мы будем использовать php через rest api.
В нашем приложении мы будем выводить статьи, которые будут находиться в phpmyadmin.
Что такое expo?
Expo, представляет собой набор инструментов, библиотек и сервисов, которые позволяют создавать собственные приложения для iOS и Android с помощью JavaScript. Звучит многообещающе. Проще говоря, Expo помогает вам просматривать проекты, пока вы еще их разрабатываете. Expo CLI создает URL-адрес для разработки (аналогичный локальному хосту в Интернете), который затем можно открыть в клиенте Expo для предварительного просмотра приложения.
Установка Expo
Перед тем, как установить expo, убедитесь что вы установили npm.
Expo дает вам варианты. Вы можете предварительно просмотреть свое приложение через клиентское приложение Expo на своем мобильном устройстве или с помощью симулятора iOS / Android на своем компьютере. Я при создании приложения использовал expo на android.
Создание expo приложения
После установки Expo открывается интерфейс Expo CLI и позволяет выбрать имя проекта и шаблон. Мы выберем пустую страницу.
После этого, expo запустит локальный сервер разработки, откроет новое окно для просмотра сервера и предоставит вам QR-код, чтобы открыть ваш проект на вашем мобильном устройстве. Либо вы можете зарегистрироваться в мобильном приложении и expo cli, и он в мобильном приложение автоматически покажет текущие разработки.
Чтобы войти в expo на вашем компьютере используйте эту команду:
Установка react-navigation
Чтобы мы могли переходить с одного экрана на другой, нам нужно скачать react-nativation:
Начало разработки
Теперь давайте начнем нашу разработку.
Первое, что мы сделаем — это откроем App.js (наш главный файл).
Верстка
Чтобы наше приложение выглядело привлекательным, мы добавим пару элементов и добавим к ним стили.
Сначала добавим заголовок:
Теперь давайте добавим блок с выводом статей и стилизуем его.
На этой наш урок заканчивается.
В следующем уроке мы сделаем вывод данных mysql.
Если вам интересно, как все получиться перейдите и скачайте это приложение, там будет вкладка с новостями — мобильное приложение
