Законопроект Alipay в 2017 году действительно жил до ожиданий, и он снова пронзил экран.
Оглядываясь назад на конец этого года, можно выделить три феноменальных действия по прокрутке экрана:
Показать «18 лет», показать плейлист Netease, показать счета Alipay.
Пользователь сети пошутил: в 2018 году стартовала масштабная программа «свидания вслепую»…
Шоу «18 лет»,Посмотрите на значение;
Показать музыкальный плейлист NetEase,сухой вкус;
Показать счета Alipay,хвастаться богатством.
Разве три важных показателя «свидания вслепую» не одинаковы? !
Шутки шутками, как программист я допустил очередное "профессиональное заболевание". Как и в случае с апплетом «Jump Yijump», созданным WeChat, различные плагины и стратегии подсчета очков бесконечны и занимают заголовки основных технических СМИ.
Итак, я решил изучить техническую реализацию счетов Alipay. Но это не значит, что я создам еще один счет Alipay, ведь основная часть этого счета — это огромные данные о потреблении, стоящие за ним, которые я не могу получить, дожидаясь недобросовестных людей.
В связи с ограниченным уровнем личного опыта, если в предположениях, сделанных в этой статье, есть какие-либо недостатки, пожалуйста, поправьте меня. Если есть студенты из Ant Financial, которые готовы поделиться технической архитектурой законопроекта, это должно быть очень кстати.
Эта статья является личным предположением о реализации биллинговой технологии Alipay, которую я разделил на две части:внешний интерфейс,задняя часть. Снаружи внутрь выведите невидимую внутреннюю логику из видимого внешнего дисплея.
Во-первых, найти прорыв
Первый шаг во всем процессе исследования — найти вход, что, я думаю, является очень важным прорывом. Я делюсь счетом через DingTalk, затем вхожу в версию DingTalk для ПК, щелкаю правой кнопкой мыши общую запись и копирую URL-адрес целиком.
Для удобства объяснения, вот полный URL для всеобщего обозрения:
https://render.alipay.com/p/s/i/?scheme=alipays://platformapi/startapp?appId=68687017&showOptionMenu=NO&allowsBounceVertical=NO&transparentTitle=auto&bizScenario=Share&url=https://render.alipay.com/p/f/fd-jbg7if4k/index.html
Функция всего параметра схемы — попытаться открыть приложение Alipay на мобильном телефоне, что легко понять студентам, занимающимся мобильной разработкой. Конечно, эта попытка не обязательно будет успешной, это зависит от политики безопасности браузера.Вот результаты открытия в Safari (iPhone) и Chrome (ПК):
Схема поставляется с 6 параметрами, все из которых будут переданы в приложение для выполнения соответствующих операций. Я думал, что параметры схемы, разделяемые каждым пользователем, будут разными, но после некоторого сравнения я обнаружил, что это все одни и те же параметры. После некоторого исследования исходного кода я обнаружил, что параметры «bizScenario» будут другими, потому что я нашел прорыв от Dingding Share, поэтому значение bizScenario равно Share, но если он открывается из других каналов, значение равно Не обязательно одинаковые.
Что касается информации о пользователе, то ее следует получать, взаимодействуя с нативом через js на странице. Если мы хотим увидеть конечную страницу биллинга, мы можем напрямую скопировать параметр url в схему и открыть его в браузере.
На данный момент мы открыли дверь для изучения счетов Alipay.
Во-вторых, реализация передней страницы
Первое, что нужно понять, это то, что счет Alipay — этоSingle Page Application, другими словами, это одностраничное приложение, реализованное на html+js, чему я научился, это статические фоновые изображения + катсцены + слои данных. Это не только эффективно решает проблему кроссплатформенности, но и облегчает распространение.
Стоит отметить, что файлы css и js всего приложения, включая URL-адрес запроса ресурсов и т. д., были в определенной степени зашифрованы и запутаны, но понять их все еще сложно, особенно код js.
Всего есть 9 статических фоновых изображений, я поместил здесь три, чтобы вы могли это почувствовать.
Что касается источника данных и его слоев, все они выполняются через js, скриншот ниже сделан из консоли Chrome, показывающий основную часть страницы.DOM-элемент.
Он условно делится на три части:Загрузка, содержимое тела счета, сообщение об ошибке.
В процессе загрузки есть два основных элемента: один — это анимация загрузки, которая на самом деле представляет собой gif-анимацию перелистывания календаря, а другой — процент выполнения, который без тщательного рассмотрения должен быть фальшивым индикатором выполнения. Через **"AlipayJSBridge"** родному приложению поручено отправить запрос данных счета.Во время этого процесса индикация прогресса увеличивается с определенной скоростью, и она остановится, когда достигнет 97%, а затем официально введет счет пока не будут получены данные стр.
Основная часть законопроекта состоит из трех частей: перваяswiper, сдвиньте экран для переключения сцен, под ним находятся 9 подэлементов и 9 неподвижных изображений, соответствующих 9 сценам соответственно, вторая и третья части представляют собой два видеотега, которые воспроизводят следующую и предыдущую сцены соответственно. Файлы mp4 .
Часть сообщения об ошибке не имеет объяснения, строки подсказки, кнопки повторной попытки, и она понятна с первого взгляда.
Некоторые читатели могут спросить, как вы получили эти фотографии, видео и другие ресурсы? Это то, что я собираюсь рассказать дальше.
Давайте сначала посмотрим на определение структуры данных:
// 静态资源。
window.resource = [
{
"scene": "https://gw.alipayobjects.com/zos/rmsportal/epRpbpBcCZIKasROmxcL.jpg",
"video": {
"forward": "",
"back": ""
},
"__key": 9
},
{
"scene": "https://gw.alipayobjects.com/zos/rmsportal/epRpbpBcCZIKasROmxcL.jpg",
"video": {
"forward": "https://gw.alipayobjects.com/os/rmsportal/KwIPQNAHVfCMQSToOqxX.mp4",
"back": "https://gw.alipayobjects.com/os/rmsportal/zRAHVrBufLRAlmOMwXgA.mp4"
},
"__key": 1
},
{
"scene": "https://gw.alipayobjects.com/zos/rmsportal/ALzmXZZYrnFDqYFFrGjY.jpg",
"video": {
"forward": "https://gw.alipayobjects.com/os/rmsportal/QuZvhHxfIyRqgNxGQRqq.mp4",
"back": "https://gw.alipayobjects.com/os/rmsportal/zRAHVrBufLRAlmOMwXgA.mp4"
},
"__key": 2
},
{
"scene": "https://gw.alipayobjects.com/zos/rmsportal/ZcmJnyzRQNuFspDzfoxX.jpg",
"video": {
"forward": "https://gw.alipayobjects.com/os/rmsportal/CLryDglMNEQLfDxmYnUW.mp4",
"back": "https://gw.alipayobjects.com/os/rmsportal/nmqWCcwURUxRdUqgdJje.mp4"
},
"__key": 3
},
{
"scene": "https://gw.alipayobjects.com/zos/rmsportal/qQLBJCGEDtXCoCiOtPzc.jpg",
"video": {
"forward": "https://gw.alipayobjects.com/os/rmsportal/TUKbyXyonamHXwQifpDQ.mp4",
"back": "https://gw.alipayobjects.com/os/rmsportal/rwcPCPShQgxvVYfobSeU.mp4"
},
"__key": 4
},
{
"scene": "https://gw.alipayobjects.com/zos/rmsportal/zQzcNkGFJJqHinrABCDa.jpg",
"video": {
"forward": "https://gw.alipayobjects.com/os/rmsportal/OBocUmcqGaHuZJJkNQvV.mp4",
"back": "https://gw.alipayobjects.com/os/rmsportal/HbyqRtKZMlKFQZcxwCJy.mp4"
},
"__key": 5
},
{
"scene": "https://gw.alipayobjects.com/zos/rmsportal/JzzNsINqFRVOCAMNJonO.jpg",
"video": {
"forward": "https://gw.alipayobjects.com/os/rmsportal/kBYTpmZElHykGKYytIIG.mp4",
"back": "https://gw.alipayobjects.com/os/rmsportal/zvFLfvTTgXdUUCFHuIlv.mp4"
},
"__key": 6
},
{
"scene": "https://gw.alipayobjects.com/zos/rmsportal/vOpPBFXzjbvlSAxZBcSB.jpg",
"video": {
"forward": "https://gw.alipayobjects.com/os/rmsportal/dIPIDFjkwlJkxwjbtmRO.mp4",
"back": "https://gw.alipayobjects.com/os/rmsportal/VIbUIjvACyUlBSVULXbB.mp4"
},
"__key": 7
},
{
"scene": "https://gw.alipayobjects.com/zos/rmsportal/HJUaMfRgdvNwrxJgibsJ.jpg",
"video": {
"forward": "https://gw.alipayobjects.com/os/rmsportal/egQUtbPUbknxskiWkGgU.mp4",
"back": "https://gw.alipayobjects.com/os/rmsportal/JlBuZvsTbtOGIiUDNTuW.mp4"
},
"__key": 8,
"poster": "https://gw.alipayobjects.com/zos/rmsportal/guBrTMglMdSRsWcRnaXB.jpg"
}
];
Этот код взят со страницы выставления счетов, скопирован с консоли Chrome.
сцена — статичное изображение, используемое в качестве фона; вперед — анимация вперед, а назад — анимация назад; постер кажется малозначимым (с точки зрения реализации) и может рассматриваться как «запаска» для сцены; что касается поля __key, наиболее достойного рассмотрения, в приведенном ниже коде будет мое понимание этого поля.
Обратите особое внимание на последний набор объектов сцены. Видеоконтент в форварде, кажется, не отображается во всем счете. Я случайно дал мне увидеть имя аутсорсера для производства анимации. Это «куриная ножка», добавленная брат программист???
Также необходимо обратить внимание на значение значений forward и back. Значение значения поля «вперед» по-прежнему относительно легко понять, то есть ролики, воспроизводимые при переходе от текущей сцены к следующей сцене, в то время как значение значения поля «назад» немного сбивает с толку. пример: в объекте сцены с __key=3 в поле Back записываются ролики, которые откатываются к сцене с __key=2.
Потому что исходный код js настолько запутан, что его невозможно понять, а о реализации кода можно только догадываться по эффекту от взаимодействия. Вот код переключения сцен:
//此处也可以直接赋值为0，猜想__key的作用，为了用上此字段
var index = window.resource[0].__key;
var len = window.resource.length;
function next() {
if(index == window.resource[len - 1].__key) return; //at the last page
index = (index + 1) % len;
var resource = window.resource[index];
//1. play video in resource.forward.
//2. video player listener binding.
//3. to display data with animations after forward video completed.
}
function previous() {
if(index == window.resource[0].__key) return; //at the first page
var resource = window.resource[index];
//1. play video in resource.back.
//2. video player listener binding.
//3. to display data with animations after back video completed.
//4. set value for index variable.
index = (index == window.resource[1].__key) ? window.resource[0].__key : index--;
}
В основном, взяв модуль len и переключая сцену вперед и назад, можно добиться эффекта циклического воспроизведения. Предположение о поле __key также отражено в коде.Стоит отметить, что я перерыл все исходники js и нигде не нашел использования этого поля.Не знаю, было ли оно обфусцировано шифрованием. .
На этом введение в часть отображения страницы интерфейса закончено.
В-третьих, внутренняя интеграция данных
Эта часть содержания будет посвящена формированию данных счетов Alipay, что является чисто личным предположением о технической архитектуре Alipay и не отражает реальную работу.
Выше приведена диаграмма архитектуры, которую я считаю более разумной.Перспектива архитектуры размещена на уровне данных.
1,Database, этот уровень представляет кластер облачной базы данных.Базы данных во всем кластере, скорее всего, будут гетерогенными, такими как MySQL, Oracle, PostgreSQL, MongoDB и т. д. Кроме того, упомянутый здесь кластер также охватывает Taobao, Tmall, Используемая база данных продукты в системе Ali, такие как Alipay, поэтому эта часть выполняет много работы по вводу и выводу данных, что очень важно.
2,ХД, хранилище данных, хранилище данных. Важным источником данных являются кластеры облачных баз данных, и некоторые из них поступают непосредственно из файлов. Существует множество функций, которые могут быть реализованы в хранилище данных, среди которых работа ETL является единственным способом для BI.С помощью системы отчетности могут быть реализованы такие функции, как визуализация данных, анализ журналов, а также мониторинг эксплуатации и обслуживания.
3.MaxCompute, на самом деле это крупномасштабная распределенная вычислительная платформа, принадлежащая Alibaba Cloud.Среди них распределенные вычислительные среды, представленные Hadoop и Spark.Hadoop хорош для офлайн-вычислений, а Spark может выполнять быстрые вычисления в реальном времени.
4.DRDS и REST API. DRDS также является продуктом промежуточного программного обеспечения базы данных, производимым Alibaba Cloud.Как упоминалось выше, кластеры облачных баз данных являются гетерогенными, и промежуточное программное обеспечение должно участвовать в чтении и записи данных. Что касается API-интерфейсов REST, он в основном предоставляет некоторые API-интерфейсы столбцов для клиентов для выполнения операций с данными.
После объяснения всей схемы архитектуры я далее разберу весь процесс запроса данных.
1,генерация данных. В основном записи о потреблении пользователей в 2017 году с таких платформ, как Tmall, Taobao, Alipay, Ant Credit и т. д. Большая часть этих данных хранится в кластере базы данных в структурированном виде;
2,Генерация годовых данных для выставления счетов. Импортируйте данные о потреблении пользователя в 2017 году в хранилище данных, рассчитайте платежные данные каждого пользователя в автономном режиме через платформу распределенных вычислений и поместите эти структурированные платежные данные в кластер базы данных. Здесь целесообразно использовать офлайн-вычисления, ведь данные относятся к уровню PB, а вычисления в реальном времени могут выполняться только для отдельных пользователей, иначе это окажет определенное влияние на пользовательский опыт. Проще говоря, эта часть работы заключается в написании нескольких задач MapReduce, и этого должно быть почти достаточно для работы на платформе распределенных вычислений в течение 2-3 дней;
3.Сбор данных.到这个步骤，说明账单数据已经准备就绪了，客户端只需要调用API即可获取，也就能做出我们现在所看到的账单页面了。
4. Небольшое улучшение
Основываясь на исследованиях интерфейсного дисплея, я сделал предположение о вышеупомянутой архитектуре, но это не результат моего первого инстинкта. Я всегда думал, что маркетинговая деятельность, такая как счета Alipay и плейлисты NetEase, может использовать "статическая страница"Технологии. Конечно, у такой архитектуры есть и преимущества, и недостатки.Давайте сначала посмотрим на улучшенную схему архитектуры.
Видно, что фронтенд и бэкенд уже находятся в сильно развязанном состоянии, бэкенд отвечает только за генерацию биллинговых данных и заполнение биллинговой страницы пользователя, а фронтенд может получить доступ к указанной статике HTML-страница. Для этой архитектуры мы обсудим следующие три вопроса:
1, метод именования файлов html. По-прежнему остается большой простор для воображения, и существуют различные правила, такие как простое и грубое хеширование таких элементов, как идентификатор пользователя и время генерации. Конечно, есть требования и к файловым каталогам, поэтому я не буду здесь вдаваться в подробности.
2, Статические страницы Выбор технологии. Теоретически лучшим вариантом является технология CDN, эта технология на рынке относительно зрелая, безопасная для использования. CDN Если нет, то вы можете рассмотреть возможность использования SQUID, выполните кэширующий прокси-кэширующий сервис, можно считать оптимизированной версией CDN, если вам нужно только распространять контент без учета других более продвинутых функций, SQUID является хорошим решением.
3. Анализ применимых сценариев. Что меня больше всего привлекает в статике страницы, так это то, что она снимает нагрузку с доступа к большому количеству серверных данных и передает нагрузку на CDN, но не о чем беспокоиться, потому что это долгосрочный элемент CDN, стоимость внедрения низкая, а узкое место не так просто коснуться.Кроме того, без дополнительного доступа к сетевым данным не только не будет раскрыт API, но и есть определенная гарантия безопасности, и передняя страница также может быть открывается за считанные секунды, предоставляя пользователям отличный опыт. Поэтому, поскольку страница статична, она точно не подходит для тех сценариев, где страницы часто меняются или происходит сильное взаимодействие.
Первоначально страница счета Alipay на этот раз могла быть полностью статичной, но "Ворота лицензионного соглашения«Инцидент заставил меня отказаться от этой идеи. Появление этого эпизода означает, что все ранее сгенерированные страницы должны быть признаны недействительными и исправлены, что приведет к большому трафику и трате места для хранения, если не будут заменены предыдущие файлы. Но подумайте об этом, страница выставления счетов Alipay имеет встроенную динамическую авторизацию, поэтому сделать страницу статической не так просто.
V. Резюме
В этой статье проводится очень простой анализ технической реализации счетов Alipay от внешнего интерфейса до внутреннего интерфейса.Что касается некоторых технических деталей, которые не могут быть известны, в ней также приводятся некоторые собственные идеи реализации. Если читателям будет очень интересно после прочтения этой статьи, они также могут высказать свои мысли на эту тему.
Ежедневный обмен галантерейными товарами, предоставление ценной информации в мире Интернета, публичный аккаунт WeChat:Поглотитель технологий