Я человек далекий от программирования и люблю бить баклуши. Но случилось непредвиденное, моему сербскому другу Джонни, приехавшему в гости, понадобился QR-код. Пришлось расчехлить клавиатуру.

eventWillAppear

Ко мне приехал мой сербский приятель Никола Павлович, вакцинированный² Пфайзером. Здесь его всюду просили показать QR-код или гуляй мимо. Ситуация идиотская. Человек привит Пфайзером, а его никуда не пускают. Я был в бешенстве.

-Джонни, сгенерю-ка я тебе QR-код, - подумал я и сгенерил.

Как я узнал, как действует QR-код

Чтобы понять сценарий верификации кода, пришлось отправиться в местную Плазу и предъявить охраннику свой QR-сертификат (я вакцинирован Спутником V). Вот что я обнаружил

• охранник включил телефон

• охранник включил камеру на телефоне

• навел камеру на мой QR-код

• нажал на всплывающий поп-ап

• Проходи!

На экране телефона охранника высветилась информация обо мне в стыдливо прикрытом виде

Я понял! В QR-коде просто зашифрован линк на сайт Госуслуг. В чьей-то голове сформулировалось ТЗ о разработке кода для моего серба. Голова оказалась моя. Кроме того, заметьте, информация на экране никак не может быть персональной. Аббревиатура ФИО и 3 последние цифры паспорта никак не идентифицируют человека, по таким данным даже пол гражданина (гражданки?) не определить.

Техническое задание

• Надо сделать сайт-пародию (пару строки на PHP) который отображает информацию из get-request типа 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?