Как создать виртуальную карту лояльности для добавления в Wallet. Часть 2: настройка контента
С вами Александр Чаусов, iOS TechLead. Продолжаем разбираться, как создать карту для Wallet.
В предыдущем посте обсудили, как создать файл .pkpass. Дальше всё будет крутиться вокруг него.
Директория .pass содержит файл pass.json: его нужно отредактировать, чтобы получить нужный контент на карте.
Важные ссылки:
🔹 Документация
🔹 Описание всех полей, которые могут быть использованы в pass.json
Обязательные поля
Которые должны быть определены в json-файле
• Краткое описание карты: отображается при добавлении и на задней стороне карты.
• Версия формата файла. Значение должно быть 1.
• Название организации, которая выдаёт карту.
• Identifier, который создавали на первом шаге.
• Серийный номер карты.
• TeamID команды-разработчика — с первого шага.
⚠️ Уникальность карты обеспечивается связкой полей
С вами Александр Чаусов, iOS TechLead. Продолжаем разбираться, как создать карту для Wallet.
В предыдущем посте обсудили, как создать файл .pkpass. Дальше всё будет крутиться вокруг него.
Директория .pass содержит файл pass.json: его нужно отредактировать, чтобы получить нужный контент на карте.
Важные ссылки:
🔹 Документация
🔹 Описание всех полей, которые могут быть использованы в pass.json
Обязательные поля
Которые должны быть определены в json-файле
• Краткое описание карты: отображается при добавлении и на задней стороне карты.
• Версия формата файла. Значение должно быть 1.
• Название организации, которая выдаёт карту.
• Identifier, который создавали на первом шаге.
• Серийный номер карты.
• TeamID команды-разработчика — с первого шага.
⚠️ Уникальность карты обеспечивается связкой полей
passTypeIdentifierи
serialNumber. Две карты с одинаковыми значениями считаются одинаковыми: если установить в кошелёк карту, у которой значения этих полей совпадают со значениями существующей, кошелёк заменит старую карту на новую.
🔥7
Элементы, из которых состоит pass 👆
На что обратить внимание в документации
• Подложите в папку <Название>.pass рядом с json-файлом:
‣ icon.png/[email protected] — иконка размером 29*29, отображается при добавлении карты в wallet и на lock-экране.
‣ logo.png/[email protected] — из документации «The allotted space is 160 x 50 points; in most cases it should be narrower», отображается в верхнем левом углу.
‣ strip.png/[email protected] — картинка-задник, которая отображается за primary-field. В sample-карте от Apple она размером 312*123.
• Обратите внимание на секцию документации про barcode: там указаны ограничения, допустимые поля, форматы отображения кода.
• Возможна локализация карты на несколько языков.
• Цвета кастомизируются.
• Очень интересная секция в документации «Relevance Information Displays Passes on the Lock Screen»: возможность показать карту на lock-экране, когда пользователь подошел к определённой локации или наступило определённое время.
⚠️ Суперважный элемент — поле
Итого
1️⃣ Редактируем файл pass.json, подглядывая в документацию и описание полей.
2️⃣ На выходе получаем json, по которому генерируем карту с дизайном, похожим на дизайн из макета.
3️⃣ Перекидываем карту по почте на свой девайс и проверяем, как она выглядит вживую.
В следующем посте расскажу, как связать карту с приложением.
На что обратить внимание в документации
• Подложите в папку <Название>.pass рядом с json-файлом:
‣ icon.png/[email protected] — иконка размером 29*29, отображается при добавлении карты в wallet и на lock-экране.
‣ logo.png/[email protected] — из документации «The allotted space is 160 x 50 points; in most cases it should be narrower», отображается в верхнем левом углу.
‣ strip.png/[email protected] — картинка-задник, которая отображается за primary-field. В sample-карте от Apple она размером 312*123.
• Обратите внимание на секцию документации про barcode: там указаны ограничения, допустимые поля, форматы отображения кода.
• Возможна локализация карты на несколько языков.
• Цвета кастомизируются.
• Очень интересная секция в документации «Relevance Information Displays Passes on the Lock Screen»: возможность показать карту на lock-экране, когда пользователь подошел к определённой локации или наступило определённое время.
⚠️ Суперважный элемент — поле
storeCard.backFields. На задней стороне обязательно должна быть инфа о том, кто выпустил карту лояльности и как до него достучаться. Это требование Apple: будут проверять на ревью (пункт 1.5).
Итого
1️⃣ Редактируем файл pass.json, подглядывая в документацию и описание полей.
2️⃣ На выходе получаем json, по которому генерируем карту с дизайном, похожим на дизайн из макета.
3️⃣ Перекидываем карту по почте на свой девайс и проверяем, как она выглядит вживую.
В следующем посте расскажу, как связать карту с приложением.
👏7
Первый эфир в канале: как РМ стал iOS-разработчиком в Surf 🤯
В четверг поговорим с Антоном, участником Летней Школы, о начале пути в iOS. Он поделится опытом с курсами, бэкграундом и pet-проектами.
Ещё Антон покажет структуру и преимущества стажировки в Surf — подробно, прозрачно, с примерами.
Формат эфира будет полезен как новичкам, так и тем, кто уже делает шаги в iOS-разработке. Со всем поможем — приходи 😌
Когда и куда?
🗓 24 ноября
⏰ 17:00
📍 Telegram-канал Surf iOS Team
В четверг поговорим с Антоном, участником Летней Школы, о начале пути в iOS. Он поделится опытом с курсами, бэкграундом и pet-проектами.
Ещё Антон покажет структуру и преимущества стажировки в Surf — подробно, прозрачно, с примерами.
Формат эфира будет полезен как новичкам, так и тем, кто уже делает шаги в iOS-разработке. Со всем поможем — приходи 😌
Когда и куда?
🗓 24 ноября
⏰ 17:00
📍 Telegram-канал Surf iOS Team
👍14
Сёрф iOS-разработка
Первый эфир в канале: как РМ стал iOS-разработчиком в Surf 🤯 В четверг поговорим с Антоном, участником Летней Школы, о начале пути в iOS. Он поделится опытом с курсами, бэкграундом и pet-проектами. Ещё Антон покажет структуру и преимущества стажировки в…
📍Встречаемся здесь через 3 часа и обсуждаем путь в iOS-разработку вместе с Антоном.
Ждём вас, будет интересно! Вопросы оставляйте в комментариях 😉
Ждём вас, будет интересно! Вопросы оставляйте в комментариях 😉
👍7
Начинаем эфир! Вопросы оставляйте в комментах под этим постом и в чате 😌
👍1
Media is too big
VIEW IN TELEGRAM
Делимся записью эфира для тех, кто не смог прийти ☺️
И прикрепляем полезные материалы от Антона. Презентация отдельным файлом в комментариях.
Если остались вопросы, задавайте в чате, ответим.
У нас к вам всего два вопроса👇
И прикрепляем полезные материалы от Антона. Презентация отдельным файлом в комментариях.
Если остались вопросы, задавайте в чате, ответим.
У нас к вам всего два вопроса👇
👍5
👍1
👍1
Forwarded from Сёрф Технологии
Приходи на iOS-тусовку с участием Surf 🤩
Мы с друзьями из Кошелька и Тинькофф приглашаем тебя на iOS-митап! Обсудим интересные кейсы в разработке, поделимся опытом и просто приятно проведём время.
В программе три выступления:
1️⃣ Зачем писать private
Богдан Маншилин, Engineering Manager в Кошельке
История одного проперти в классе фреймворка навигации, который должен был быть приватным, но вместо этого испортил всю задумку core-фреймворка.
2️⃣ Дружим Swift Concurrency с имеющейся кодовой базой
Тимур Хамидов, Старший разработчик, Отдел разработки мобильных платформ Тинькофф
Как подружить continuation с задачами и как тестировать асинхронный код без ожиданий — на примере проблем, с которыми столкнулась команда при применении Swift Concurrency.
3️⃣ SwiftUI — внедрение в аутсорс разработку
Владислав Климов, iOS Developer в Surf
Попытки внедрения и подходы, которые в Surf используют для навигации. Это история об исследовании с результатами, но открытым концом и интересными техническими решениями.
Когда и куда приходить
🗓 8 декабря
⏰ 19:00
📍 Онлайн: регистрация
🏢 Офлайн: Санкт-Петербург, адрес по ссылке
Мы с друзьями из Кошелька и Тинькофф приглашаем тебя на iOS-митап! Обсудим интересные кейсы в разработке, поделимся опытом и просто приятно проведём время.
В программе три выступления:
1️⃣ Зачем писать private
Богдан Маншилин, Engineering Manager в Кошельке
История одного проперти в классе фреймворка навигации, который должен был быть приватным, но вместо этого испортил всю задумку core-фреймворка.
2️⃣ Дружим Swift Concurrency с имеющейся кодовой базой
Тимур Хамидов, Старший разработчик, Отдел разработки мобильных платформ Тинькофф
Как подружить continuation с задачами и как тестировать асинхронный код без ожиданий — на примере проблем, с которыми столкнулась команда при применении Swift Concurrency.
3️⃣ SwiftUI — внедрение в аутсорс разработку
Владислав Климов, iOS Developer в Surf
Попытки внедрения и подходы, которые в Surf используют для навигации. Это история об исследовании с результатами, но открытым концом и интересными техническими решениями.
Когда и куда приходить
🗓 8 декабря
⏰ 19:00
📍 Онлайн: регистрация
🏢 Офлайн: Санкт-Петербург, адрес по ссылке
❤3👍1
Async/await в Swift
Async/await появился в Swift больше года назад. Но многие разработчики всё ещё не понимают, в чём его преимущества перед GCD и Operation и может ли он заменить реактивный фреймворк типа Combine. Давайте разберёмся в этом вопросе.
Async/await был создан, чтобы заменить GCD и Operation. Вместе их лучше не использовать: они основаны на разных механизмах.
Механизм работы
В Async/await используется собственный пул потоков. Количество используемых потоков не превышает количество ядер процессора.
Это стало возможным благодаря тому, что Async/await не блокирует потоки: поток может не простаивать в ожидании, а переключится на другую задачу.
Например: отправляем запрос на сервер. Во время ожидания ответа от сервера поток может заниматься чем-то другим.
Другие преимущества
✅ Код становится проще: более последовательным, нет необходимости передавать множество колбэков.
✅ Обработка ошибок тоже становится проще: теперь можно использовать стандартный механизм try-catch, а не передавать ошибки в колбэках.
Может ли Async/await заменить Combine
К сожалению, нет. Вместе с Async/await появилась AsyncSequence, которая позволяет асинхронно работать с коллекциями. Но AsyncSequence не обладает всеми возможностями, которые есть в Combine. Тем не менее, Async/await и Combine вполне можно использовать вместе.
Async/await поддерживается с iOS 13.
Async/await появился в Swift больше года назад. Но многие разработчики всё ещё не понимают, в чём его преимущества перед GCD и Operation и может ли он заменить реактивный фреймворк типа Combine. Давайте разберёмся в этом вопросе.
Async/await был создан, чтобы заменить GCD и Operation. Вместе их лучше не использовать: они основаны на разных механизмах.
Механизм работы
В Async/await используется собственный пул потоков. Количество используемых потоков не превышает количество ядер процессора.
Это стало возможным благодаря тому, что Async/await не блокирует потоки: поток может не простаивать в ожидании, а переключится на другую задачу.
Например: отправляем запрос на сервер. Во время ожидания ответа от сервера поток может заниматься чем-то другим.
Другие преимущества
✅ Код становится проще: более последовательным, нет необходимости передавать множество колбэков.
✅ Обработка ошибок тоже становится проще: теперь можно использовать стандартный механизм try-catch, а не передавать ошибки в колбэках.
Может ли Async/await заменить Combine
К сожалению, нет. Вместе с Async/await появилась AsyncSequence, которая позволяет асинхронно работать с коллекциями. Но AsyncSequence не обладает всеми возможностями, которые есть в Combine. Тем не менее, Async/await и Combine вполне можно использовать вместе.
Async/await поддерживается с iOS 13.
❤4🔥3👍1
Forwarded from Сёрф Технологии
iOS-тусовка с участием Surf уже завтра в 19:00 🔥
Мы с разработчиками из Кошелька и Тинькофф ждём тебя! Расскажем про документацию, фреймворки, архитектуру и кейсы из разработки.
Приходи и зови друзей, делимся главными ссылками:
• Регистрация.
• Программа.
Мы с разработчиками из Кошелька и Тинькофф ждём тебя! Расскажем про документацию, фреймворки, архитектуру и кейсы из разработки.
Приходи и зови друзей, делимся главными ссылками:
• Регистрация.
• Программа.
👍2
Как создать виртуальную карту лояльности для добавления в Wallet. Часть 3: связываем карту с приложением
С вами Влад Янковенко, iOS TeamLead, и Александр Чаусов, iOS TechLead. Продолжаем разбираться, как создать карту для Wallet.
В предыдущих сериях:
🔹 Начало работы: как сделать файл .pkpass
🔹 Как настроить контент
Работы в приложении
Сводятся к четырём этапам:
• Добавить кнопку добавления в Apple Wallet, если есть кошелек.
• По тапу на кнопку послать запрос на сервер, принять от него Data.
• Из полученной Data cгенерить PKPass, обработать возможные результаты.
• Добавить в кошелёк путём вызова PKAddPassesViewController.
Более детально описано в документации.
Добавление кнопки
Для кнопки добавления в кошелёк надо использовать системную кнопку PKAddPassButton. Гайдлайны
Перед добавлением можно проверить, есть ли поддержка Apple Wallet на устройстве.
Генерация PKPass из Data
При создании PKPass мы можем столкнуться с несколькими результатами: ошибка создания, успех. Дополнительно можем проверить наличие его в кошельке методом PKPassLibrary().containsPass(pass: PKPass).
Для теста можно сделать вспомогательный класс, который будет искать в проекте Pass.pkpass и возвращать его.
Добавление карты в кошелёк
Для добавления карты в кошелек создаём экзмепляр PKAddPassesViewController. Скармливаем ему в конструкторе PKPass, созданный из Data, полученной от сервера. И показываем PKAddPassesViewController на экране приложения.
Дополнительно мы можем подписаться на делегат PKAddPassesViewControllerDelegate, чтобы отловить событие завершения addPassesViewControllerDidFinish(_). В нём можно провести различные проверки, но тогда закрыть контроллер придется там же вручную.
С вами Влад Янковенко, iOS TeamLead, и Александр Чаусов, iOS TechLead. Продолжаем разбираться, как создать карту для Wallet.
В предыдущих сериях:
🔹 Начало работы: как сделать файл .pkpass
🔹 Как настроить контент
Работы в приложении
Сводятся к четырём этапам:
• Добавить кнопку добавления в Apple Wallet, если есть кошелек.
• По тапу на кнопку послать запрос на сервер, принять от него Data.
• Из полученной Data cгенерить PKPass, обработать возможные результаты.
• Добавить в кошелёк путём вызова PKAddPassesViewController.
Более детально описано в документации.
Добавление кнопки
Для кнопки добавления в кошелёк надо использовать системную кнопку PKAddPassButton. Гайдлайны
Перед добавлением можно проверить, есть ли поддержка Apple Wallet на устройстве.
Генерация PKPass из Data
При создании PKPass мы можем столкнуться с несколькими результатами: ошибка создания, успех. Дополнительно можем проверить наличие его в кошельке методом PKPassLibrary().containsPass(pass: PKPass).
Для теста можно сделать вспомогательный класс, который будет искать в проекте Pass.pkpass и возвращать его.
Добавление карты в кошелёк
Для добавления карты в кошелек создаём экзмепляр PKAddPassesViewController. Скармливаем ему в конструкторе PKPass, созданный из Data, полученной от сервера. И показываем PKAddPassesViewController на экране приложения.
Дополнительно мы можем подписаться на делегат PKAddPassesViewControllerDelegate, чтобы отловить событие завершения addPassesViewControllerDidFinish(_). В нём можно провести различные проверки, но тогда закрыть контроллер придется там же вручную.
👍5🔥2👏1
Как создать виртуальную карту лояльности для добавления в Wallet: полезные ссылки
🔹 Документация
🔹 Описание полей в Json-файле
🔹 Human Interface Guidelines для Wallet
🔹 Видео, как создать .pkpass
🔹 Обзорная статья What is PassKit
🔹 Статья про Apple Wallet на русском
🔹 Статья Creating your Pass. Материал древний, но именно там мы наконец-то нашли поле altText у баркода.
🔹 Документация
🔹 Описание полей в Json-файле
🔹 Human Interface Guidelines для Wallet
🔹 Видео, как создать .pkpass
🔹 Обзорная статья What is PassKit
🔹 Статья про Apple Wallet на русском
🔹 Статья Creating your Pass. Материал древний, но именно там мы наконец-то нашли поле altText у баркода.
🔥4❤2👍2
Списки и галереи — быстро и удобно. Знакомство с библиотекой RDDM
UITableView и UICollectionView — проверенные контейнеры для вёрстки списков и галерей. Но чтобы их добавить и настроить, необходимо написать много сопровождающего кода.
Например, для таблицы нужно:
🔹определить UITableViewDataSource,
🔹определить UITableViewDelegate,
🔹описать ячейку UITableViewCell,
🔹не забыть зарегистрировать тип ячейки,
🔹вызвать reloadData.
Чем больше ячеек, тем больше получается кода, размазанного по разным сущностям.
Когда-то давно мы в Surf 🏄♂️ устали от этого и создали RDDM — библиотеку, позволяющую удобно и быстро наполнять UITableView или UICollectionView, а также добавлять фичи с помощью плагинов.
Чтобы узнать больше, переходите в репозиторий проекта: там есть ExampleApp с примерами использования библиотеки и её фич.
Или прочитайте нашу статью об опыте добавления DiffableDataSource в RDDM.
💬 А каким инструментом для верстки списков и галерей пользуетесь вы? Пишите в комментариях 🙌
UITableView и UICollectionView — проверенные контейнеры для вёрстки списков и галерей. Но чтобы их добавить и настроить, необходимо написать много сопровождающего кода.
Например, для таблицы нужно:
🔹определить UITableViewDataSource,
🔹определить UITableViewDelegate,
🔹описать ячейку UITableViewCell,
🔹не забыть зарегистрировать тип ячейки,
🔹вызвать reloadData.
Чем больше ячеек, тем больше получается кода, размазанного по разным сущностям.
Когда-то давно мы в Surf 🏄♂️ устали от этого и создали RDDM — библиотеку, позволяющую удобно и быстро наполнять UITableView или UICollectionView, а также добавлять фичи с помощью плагинов.
Чтобы узнать больше, переходите в репозиторий проекта: там есть ExampleApp с примерами использования библиотеки и её фич.
Или прочитайте нашу статью об опыте добавления DiffableDataSource в RDDM.
💬 А каким инструментом для верстки списков и галерей пользуетесь вы? Пишите в комментариях 🙌
👍8🔥2🤩1
Карта для Wallet. Рекомендации по дизайну и аналитике
Бывают ситуации, когда смежные отделы в компании, участвующие в проектировании приложения для iOS, понимают не все тонкости платформы. Одна из задач iOS-разработчика — предоставить все необходимые данные для проектирования и дизайна.
Мы уже обсудили, как технически сделать карту лояльности для добавления в Wallet. Чтобы интеграция была качественно проработана с точки зрения дизайна и аналитики, подготовили эти рекомендации 👇👇👇
Для дизайнеров
🔹 Дать дизайнерам Human Interface Guidelines для кнопки добавления карточки на устройство, чтобы они понимали, как она выглядит и каких размеров.
🔹 Предоставить дизайнерам гайдлайны для нужной карточки. Там содержится много полезной информации: структура пакета, локализация, размеры картинок, схема карточки.
Для аналитиков
🔹 Попросить собрать у заказчика необходимые данные, которые нужно поместить на задней части карты.
🔹 Если есть коробочное решение для программы лояльности, попросить выяснить у заказчика, нужно ли с ним интегрироваться для выпуска и менеджмента карт лояльности в Apple Wallet.
🔹 Если карты будут генерироваться сервером, узнать, какие «плюшки» добавить. Например:
— Разные strip-картинки на основе данных пользователя: на карте зоомагазина — кошка для владельцев кошек и собака для владельцев собак.
— Добавление локаций любимых магазинов, чтобы карта лояльности появлялась на lock-экране, когда пользователь оказывается рядом.
Бывают ситуации, когда смежные отделы в компании, участвующие в проектировании приложения для iOS, понимают не все тонкости платформы. Одна из задач iOS-разработчика — предоставить все необходимые данные для проектирования и дизайна.
Мы уже обсудили, как технически сделать карту лояльности для добавления в Wallet. Чтобы интеграция была качественно проработана с точки зрения дизайна и аналитики, подготовили эти рекомендации 👇👇👇
Для дизайнеров
🔹 Дать дизайнерам Human Interface Guidelines для кнопки добавления карточки на устройство, чтобы они понимали, как она выглядит и каких размеров.
🔹 Предоставить дизайнерам гайдлайны для нужной карточки. Там содержится много полезной информации: структура пакета, локализация, размеры картинок, схема карточки.
Для аналитиков
🔹 Попросить собрать у заказчика необходимые данные, которые нужно поместить на задней части карты.
🔹 Если есть коробочное решение для программы лояльности, попросить выяснить у заказчика, нужно ли с ним интегрироваться для выпуска и менеджмента карт лояльности в Apple Wallet.
🔹 Если карты будут генерироваться сервером, узнать, какие «плюшки» добавить. Например:
— Разные strip-картинки на основе данных пользователя: на карте зоомагазина — кошка для владельцев кошек и собака для владельцев собак.
— Добавление локаций любимых магазинов, чтобы карта лояльности появлялась на lock-экране, когда пользователь оказывается рядом.
👍3🔥3👏2