All streams
Search
Write a publication
Pull to refresh
34
0
Максим @dev_family

Руковожу студией веб-разработки в Минске

Send message

How to add a card to Apple Wallet in React Native?

Reading time4 min
Views1.7K

Mobile developers can use Apple Wallet and Google Wallet integrations for different types of apps.

Once we already wrote our own library for Apple Wallet in React Native because we couldn't find anything ready to use. But now that Google Wallet is fully released, it's time to update it.

Now, this library provides integration with both Apple Wallet on iOS and Google Wallet on Android. It allows you to add, remove, and check for existing passes on iOS, and add passes to Google Wallet on Android.

Read more

Технологии слежения: простой гайд для настройки системы мониторинга вашего бизнеса

Reading time4 min
Views3K

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

Grafana — это интерфейс для анализа данных в различном виде. Причем источником данных может быть что угодно: база данных, excel.

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

Читать далее

Использование технологии iBeacon в React Native

Reading time14 min
Views1.3K

В предыдущей статье мы рассказали про использование беакон-маяков и технологии BLE в приложениях на React Native c помощью библиотеки React Native BLE. Теперь перейдем к более совершенному подходу для работы с маяками, — разработаем нативный модуль на iOS.

Читать далее

Как использовать iBeacon и BLE в React Native?

Reading time5 min
Views1K

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

Читать далее

Технология BLE для бизнеса

Level of difficultyEasy
Reading time5 min
Views1.6K

Вам до сих пор кажется, что когда официант фастфуда находит вас в самом потаенном уголке ресторана и приносит ваш заказ, — это магия? Не хочется вас расстраивать, но это технологии. К тому же не такие уж и сложные, но очень интересные. Весь секрет в особых маячках и технологии BLE. Давайте разберемся, как все настроить и какими могут быть кейсы с их использованием для общепита и ритейла.

Читать далее

Family Frontend Meetup #3

Reading time3 min
Views764

Автогенерация функций выборки данных с помощью Orval, переработка логики оптимизации изображений с заменой нашего компонента Picture, обновления Next.js 15 и небольшой бонус – наш топ библиотек, которые упростят поддержку и разработку вашего проекта, а также сэкономят время на его инициализацию.

Читать далее

Интеграция Unity кода в React Native. Часть 2

Reading time15 min
Views581

Всем привет! На связи снова команда dev.family. Мы продолжаем разбирать тему интеграции Unity-проекта в приложение, написанное на React Native.

В предыдущей серии…

Мы начали с того, что поместили игру на Unity в наше приложение. Как это было, можно почитать в предыдущей статье. Но пока части кода не взаимодействуют друг с другом, значит, работа не закончена. У нас есть кнопка «Save Result». Под нее было бы неплохо написать логику, чтобы показать, что у нас получилось.

Спойлер: этим и не только займемся прямо сейчас.

Что будет дальше

Во второй части статьи мы возьмем текущую связку React Native + Unity и сделаем так, чтобы одна часть кода могла получать и обрабатывать сообщения с другой. И наоборот.

Продолжаем наше Unity-journey!

Предупреждение

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

Читать далее

Автогенерация функций выборки данных и всей сопутствующей типизации с помощью Orval

Reading time7 min
Views1.4K

Требования к быстрому и качественному созданию интерфейсов растут с каждым днем. Поэтому разработчики плавно отходят от написания вручную кода, который может быть сгенерирован автоматически. Мы перешли к автоматизации с таким инструментом, как Orval. Расскажем, как это было, поделимся примером кода и библиотеками (следите за ссылками в тексте).

Читать далее

Интеграция Unity кода в React Native

Reading time7 min
Views1.7K

Всем привет! На связи снова команда dev.family с весьма необычной темой. В этот раз поговорим об играх. А именно, как интегрировать Unity в React Native.

На самом деле, это очевидно, что на React Native игру не напишешь. Оно и не надо. Движков, позволяющих разрабатывать игры под разные платформы и операционных системы, будь то iOS или Android, macOS или Windows, — огромное множество. Есть среди Unity и Unreal Engine. Сегодня мы посмотрим, как использовать первый из них в кросс-платформенных мобильных приложениях.

Думаю, не стоит говорить, что сделать полноценно игру на Unity удобнее. Зачем тогда вообще нужна эта странная и непонятная интеграция?

Начнем с того, что игры могут иметь обширное меню и различный функционал. Допустим, встроенный мессенджер, большие настройки, — те же гильдии внутри игры и тд. Речь не идет об AAA играх по типу Genshin, а, скорее, о маленьких инди или подобных, где всю игру можно сделать отдельным приложением, а сами механики и сцены скинуть на юнити. Также юнити хорош не только в создании игр, но и использовании таких технологий как VR или AR, где можно использовать сцены, различные модели, коллизии этих моделей и другое. Тут схожая ситуация с той, где у нас есть отдельное приложение и мы делаем переход на экран с Unity проектом.

Читать далее

Создаем Telegram WebApp. Часть II: установка Telegram mini-app

Reading time5 min
Views5K

Привет! Это снова команда dev.family. Мы продолжаем эксперимент по созданию приложения на React Native, которое будет работать как Telegram Web App.В предыдущей серии мы рассказали про особенности разработки веб-приложения на React Native с использованием react-native-web и моментах, в которых отходили от документации (весь код и детали процесса вы найдете в первой части);

Теперь перейдем к установке самого веб-приложения в Telegram-бот.

Читать далее

Создаем Telegram Web App. Часть I: разработка на React Native Web

Reading time17 min
Views7.7K

Всем привет! На связи команда dev.family, и мы вернулись с новым экспериментом. Хотим поделиться опытом разработки приложения на React Native для нескольких платформ и мессенджера, а именно – iOS, Android, Web и Telegram.

Разработчики давно пишут приложения под Web на React Native. Например, так работают Meta, Twitter (X) и Flipkart. Но для нашего кейса важен контекст, с которым можете столкнуться и вы. К нам пришел клиент, у которого уже было приложение под Android и iOS на React Native. Он захотел еще одну версию продукта – в формате Telegram Web App. Ранее мы работали c таким видом приложений для другого проекта, но так и не зарелизили его. Готовый прототип стал основой для разработки нового кейса.

Читать далее

React Native Splash Screen — support for different themes

Reading time5 min
Views2.5K

Hi all! The dev.family team is in touch. In this article, we are sharing a short guide on how to install Splash Screen in a cross-platform app written in React Native with support for multiple themes.

Splash screen is the first screen that users see before loading into the main application. This screen is perhaps the best way to make the name of your app, and in general, its entire name, more memorable.

But this is not the main role of the splash screen. Under it, for example, you can hide receiving data from the API and loading the main application. We do this when we show the loader on the screen when loading the same data. This allows you to improve the UX and immediately demonstrate the finished application to the user. And as a result, remove the extra loader when opening it for the first time.

In this short guide, we will look at installing splash screens for iOS and Android using the react-native framework using the react-native-splash-screen library.

Read more

React Native Splash Screen — поддержка разных тем

Reading time6 min
Views1.9K

Всем привет! На связи команда dev.family. В этой статье мы делимся кратким гайдом по установке Splash Screen в кросс-платформенное приложение, написанное на React Native, с поддержкой нескольких тем.

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

Но это не основная роль splash screen. Под ним, например, можно спрятать получение данных с API и прогрузку основного приложения. Мы так делаем, когда показываем лоадер на экране при загрузке тех же данных. Это позволяет улучшить UX и демонстрировать пользователю сразу готовое приложение. А как следствие — убрать лишний лоадер при первом открытии.

В этом кратком гайде мы разберем установку splash screen сразу для iOS и Android на фреймворке react-native с использованием библиотеки react-native-splash-screen.

Читать далее

Прогрессивный рендер изображений с использованием blurhash

Reading time10 min
Views2.4K

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

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

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

Читать далее

Open Source решение на React для быстрого создания панели управления в проекте

Reading time5 min
Views17K

Мы занимаемся разработкой на аутсорсе. Часто стартуем новые проекты. Не работаем с готовыми CMS – всё на фреймворках с нуля, обычно PHP, node.js у нас на бекенде. В таких проектах постоянно требуется создавать панель управления. 

В 90% случаев это довольно однотипные таблички и формы. Процесс их создания превращается в рутину. В остальных 10% встречаются и сложные задачи, которые требуется реализовать в панели управления: особенные интерфейсы, логику. 

Мы искали инструмент, чтобы клепать однотипные админки, но при необходимости создавать и кастомные решения. У нас были такие требования:

Читать далее

Монорепозиторий на TypeScript вместо подорожника. Как мы все сломали и сделали лучше

Level of difficultyMedium
Reading time11 min
Views7.2K

Всем привет, на связи dev.family. Хотим рассказать про интересный проект, над которым мы трудимся почти полгода, и до сих пор продолжаем. За это время в нем многое произошло, многое поменялось. Мы открыли для себя что-то интересное, успели набить шишек.

Читать далее

Что такое менеджер пакетов, и в чем разница YARN, NPM, PNPM?

Level of difficultyEasy
Reading time9 min
Views40K

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

Читать далее

Чеклист для дизайнеров от frontend и mobile разработчиков

Reading time4 min
Views8.2K

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

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

Читать далее

Обновление производительности BonsaiDb: глубокое погружение в синхронизацию файлов

Reading time16 min
Views1.4K

BonsaiDb – это новая база данных, которая должна стать самой удобной для разработчиков базы данных Rust. У BonsaiDb есть уникальный набор функций, предназначенных для решения большого количества распространенных проблем с данными. По ссылке можно узнать подробнее, что такое BonsaiDb?

tl; dr: BonsaiDb работает медленнее, чем сообщалось ранее 

Я настроил виртуальную машину сервера Ubuntu 20.04 под управлением ядра 5.4.0-110-generic и размышлял, как лучше отключить компьютер после вызова sync_file_range, когда @justinj снова пришел на помощь, указав, что существует /proc/sysrq-trigger. Он также поделился своим постом в блоге, где рассказывал о проведении аналогичных тестов против fsync. С их помощью он хотел изучить, как создавать надежный журнал базы данных. На следующий день после последнего поста @justinj сообщил, что они отследили один из примеров Nebari и не увидели ни одного выполненного системного вызова fsync. Это произошло из-за неправильного трактования термина "true sink" в std::io::Write. Оказалось, выполнение Write::flush() для std::io::File – это не операция, так как "true sink" было ядром, а не диском.

Я выпустил Nebari v0.5.3 в тот же день. Я запустил набор тестов Nebari и... ничего не изменилось. Я запустил пакет на GitHub Actions – никаких изменений. Я запустил пакет на своем выделенном VPS, который использую для более стабильной среды бенчмаркинга, чем GitHub Actions... никаких изменений. Я запустил пакет на своем Mac ... ужасное замедление. Я расскажу ниже, почему так произошло, но первоначальное впечатление было, что я каким-то образом увернулся от пули.

Читать далее

Information

Rating
Does not participate
Location
Lissabon, Lisboa, Португалия
Registered
Activity