Я человек далекий от программирования, живу за колючкой и люблю бить баклуши. Но случилось непредвиденное, моему сербскому другу Джонни, приехавшему в гости, понадобился QR-код. Пришлось расчехлить клавиатуру.
Краткое содержание первой серии
Ко мне приехал мой сербский приятель Никола Павлович, вакцинированный2 Пфайзером. В нашей стране его всюду просили показать QR-код или гуляй мимо. Ситуация идиотская. Человек дважды привит Пфайзером, а его никуда не пускают. Я был в бешенстве.
-Джонни, сгенерю-ка я тебе QR-код, - подумал я и сгенерил.
Как действует QR-код
Чтобы понять сценарий верификации кода, пришлось отправиться в местную Плазу (привет Виктору Левашову) и предъявить охраннику свой QR-сертификат. Откуда у меня сертификат? А я вакцинирован Спутником V. И вот что я обнаружил
охранник включил телефон
охранник включил камеру на телефоне
навел камеру на мой QR-код
нажал на всплывающий поп-ап
Проходи!
На экране телефона охранника высветилась информация обо мне в стыдливо прикрытом виде
Sic! В QR-коде просто зашифрован линк-ссылка на сайт Госуслуг. В чьей-то голове сформулировалось техническое задание о разработке приложения под iOS. Голова оказалась моя. И заметьте, информация на экране приложения не является персональной. Очевидно, что аббревиатура ФИО и 3 последние цифры паспорта никак не идентифицируют человека. По этим данным даже пол гражданина (гражданки?) не определить.
Техническое задание
Надо сделать сайт-пародию (дюжина строк кода на PHP) который отображает информацию из строки url-запроса типа http://govuslugi.her/vam_qr.php?string=BBB_15031964_22345
Надо сделать iOS приложение (пару дюжин строк на swift), которое будет генерить QR-код и показывать его на экране iPhone.
Серверная часть она же Web
Вообще, публикация планировалась как учебник по SwiftUI+MVVM+Reactive, но для общего понимания задачи приведу прототип серверной части.
Я сделал веб-страничку на PHP, она будет отображать входящую информацию, записанную в параметре name нашего url-запроса. Типа www.fig.vam/vsem.php?name=jonny_depp
Я извиняюсь, последний раз я кодировал на пе-хе-пе в 2005 году, поэтому прошу прощения за олд-стайл. Слава Джобсу, в PHP не надо проверять строку на её существование и на наличие в ней символов в нужных местах, код никогда не ломается и это прекрасно. Ой, тухлые помидоры!
if (isset($_GET['name'])) $name=($_GET['name']); else $name="Xerr"; list($fio, $birth, $pass) = explode("_", $name); $user = m_substr($fio, 0, 1, 'UTF-8')."***** ".m_substr($fio, 1, 1, 'UTF-8')."***** ".mb_substr($fio, 2, 1, 'UTF-8')."********"; $passport = "Паспорт: ".substr($pass, 0, 2)."*****".substr($pass, 2, 3); $birthday = "Дата рождения: ".$birth;
Как видите, мы получили 3 нужные переменные, которые будем отображать на веб-страничке. П-последний раз я кодировал на Х-Т-М-Л в 1997 году, поэтому извините за олд-олд-стайл из прошлого тысячелетия.
echo ' <div class="top"><strong> <span style="font-size:140%;color:#FF0000">QR</span> <span style="font-size:140%;color:#6666CC">УСЛУГИ</span></strong> <span style="color:#ffffff">BASHNI.ORG</span> <span style="font-size:140%;color:#000000">RUS</span></div> <div class="relative">СЕРТИФИКАТ О ГЕНЕРАЦИИ<br>QR-КОДА-19 <div class="absolute">Действителен</div> <br><p>№ QR9290499831</p></div><div class="info"><br>'.$user.'</div> <div class="info">'.$port.'</div> <div class="info">Дата рождения: '.$birth.'</div> <div class="close">Закрыть</div>';
Стили я опустил, их можно посмотреть на гитхабе. Они тупые и загадочные, как <див>ы из древних сказок Востока.
SwiftUI+MVVM
Переходим к приложению под iOS. Прости, google. Выбираем паттерн проектирования MVVM. Разумеется, для нашей маленькой задачи он избыточен, но потренироваться всегда полезно. Вдруг интервью на сеньора?? Я готов, если что, звоните от $4000. Телефон зашит в статье.
Модель содержит простейшую структуру из строки, которую надо где-то превратить в код-картинку и логическую переменную, говорящую что превращение совершилось/не совершилось.
struct UserModel { var user: User mutating func updateUser(name:String, birth:String, pass:String) { let d = "_" let temp = name+d+birth+d+pass self.user = User(isValid: true, string: temp ) } mutating func cleanUser() { self.user = User(isValid: false, string: "") } struct User { var isValid:Bool var string:String func genUrl()->String { return urlPath+self.string } } }
Полный текст файла ModelView.swift можно посмотреть на гитхабе. Вторая часть нашего паттерна - файл ContentView.swift. Он рисует в одном окне InputView ввод строки и кнопки, а во втором окне QRView изображение QR-кода. Этот SwiftUI стиль и он очень информативен - не нужны XIB-ы, верстка идет прямо в коде в джава-стиле.
import SwiftUI struct ContentView: View { @ObservedObject var model: ModelView var body: some View { if model.isValid() { QRView(model: model) } else { InputView(model: model) } } } struct InputView: View { var model: ModelView @State private var name: String = "" @State private var birth: String = "" @State private var passport: String = "" var body: some View { VStack { Spacer() TextField("3 буквы ФИО", text: $name) TextField("ДР 15.03.1964", text: $birth) TextField("2+3 цифры паспорта", text: $passport) Spacer() HStack { Button("Сделай QR", action: { self.model.tapQRButton(name, birth, passport) }) Spacer() Button("Очистить", action: { name="" birth = "" passport = "" self.model.tapClean() }) }.padding() Spacer() } .padding() .textFieldStyle(RoundedBorderTextFieldStyle()) } } struct QRView: View { var model: ModelView @State private var isSharePresented: Bool = false var body: some View { VStack { if let image = model.generateQRCode() { Text("QR код").bold() Text("успешно сформирован") Spacer() Image(uiImage: image).resizable() .frame(width: 200, height: 200) } else { Text("QR код").bold().foregroundColor(.red) Text("не сформирован").foregroundColor(.red) Spacer() Image(systemName: "qrcode").resizable() .frame(width: 75, height: 75) } Spacer() Button("Назад", action: { self.model.tapClean() } ).padding() }.padding() Spacer() } } struct ContentView_Previews: PreviewProvider { static var previews: some View { ContentView(model: ModelView()) } }
И, наконец, последний акт Мерлезонского балета - это файл ModelView.swift, который одним глазом глядит на ContentView и получает от него сообщения о нажатии на кнопку, а другим глазом он глядит на UserModel, куда он складывает полученную от ContentView информацию и забирает строку, которую превращает в QR-картинку и возвращает в ContentView.
// // ModelView.swift // import UIKit class ModelView: ObservableObject { @Published private var model:UserModel = UserModel() func isValid()->Bool { return model.user.isValid } func tapQRButton(_ name:String,_ birth:String,_ pass:String) { model.updateUser(name: name, birth: birth, pass: pass) } func tapClean() { model.cleanUser() } func generateQRCode() -> UIImage? { var uiImage: UIImage? // let string = model.user.genUrl() let string = "https://github.com/PapaBubaDiop/qrushka" if let data = string.data(using: String.Encoding.utf8) { if let filter = CIFilter(name: "CIQRCodeGenerator", parameters: ["inputMessage": data, "inputCorrectionLevel": "L"]) { if let outputImage = filter.outputImage, let cgImage = CIContext().createCGImage(outputImage, from: outputImage.extent) { let size = CGSize(width: outputImage.extent.width * 5.0, height: outputImage.extent.height * 5.0) UIGraphicsBeginImageContext(size) if let context = UIGraphicsGetCurrentContext() { context.interpolationQuality = .none context.draw(cgImage, in: CGRect(origin: .zero, size: size)) uiImage = UIGraphicsGetImageFromCurrentImageContext() } UIGraphicsEndImageContext() } } } return uiImage } }
ModelView объявлена внутри ContentView реактивной
@ObservedObject var model: ModelView
и это значит, что графические окна перерисовываются каждый раз когда меняется содержимое нашей модели. Еще раз сценарий нашего приложения
вводим текст и нажимаем кнопку в ContentView
ModelView получает этот текст и обновляет UserModel и значит меняется сам
UserModel формирует из текста url виде строки
раз UserModel изменился, то и ModelView изменился, значит ContentView перерисовывается в соотвествии с новыми данными, которые появились в ModelView
Ура, проект готов и компилируется. No Errors No Warnings.
Запускаем приложение в симуляторе
И получаем стартовый экран. Заполняем поля в соответсвии с документом Джонни.
Нажимаем кнопку Сделай QR и получаем QR-картинку, в которой скрыт линк на наш сайт, где уже лежит php-скрипт, описанный выше. Сформированные картинки, граждане, настоящие!
Вы можете навести свой девайс на картинку и протестировать ее. Мою протестировал тот же охранник из Плазы. Welcome to Russia, Джонни!
Внимание! Никогда так не делайте! Не используйте прототип в незаконных целях! Потому что скоро это будет весить от 3-х до 5-ти.
Заключение
Вся эта история, разумеется, вымышлена от начала и до конца, но код, товарищи, настоящий! Ссылка на гитхаб прилагается.
Задачка
QR-код формируется разной зернистости в зависимости от длины строки. Мое приложение зашифровало в коды число 0 и число 1. Угадайте, где какой QR-код для 0 и 1?
