Générer des QRCodes en Swift

Aujourd’hui nous allons voir comment générer des QRCodes sur iOS en utilisant les librairies natives fournis par Apple. L’ensemble du code de ce tutoriel est comme d’habitude disponible sur github. Bonne lecture !

Avant d’entrer dans le coeur du sujet nous allons commencer par créer les fondations de notre application de création de QRCode. Pour cela ouvrez Xcode, ensuite créez un nouveau projet en utilisant le modèle Single View Application que vous appellerez après QRCodeGenerator. Maintenant ouvrons le storyboard et préparons notre interface graphique :

Pour ce faire nous aurons juste besoin de 2 éléments :

1 UITextField que nous appellerons qrcodeTextField.
1 UIImageView que nous appellerons qrcodeImageView.

Pensez aussi à lier la ViewController comme UITextFieldDelegate pour savoir quand le texte de qrcodeTextField change :

import UIKit

class ViewController: UIViewController, UITextFieldDelegate {
  @IBOutlet weak var qrcodeTextField: UITextField!
  @IBOutlet weak var qrcodeImageView: UIImageView!

  // MARK: - Updating the QRCode

  func updateQRCodeImageWithText(text: String) {
    print(text)
  }

  // MARK: - UITextField Delegate Methods

  func textField(textField: UITextField, shouldChangeCharactersInRange range: NSRange, replacementString string: String) -> Bool {
    if let text = textField.text {
      let newText = (text as NSString).stringByReplacingCharactersInRange(range, withString: string)

      updateQRCodeImageWithText(newText)
    }

    return true
  }
}

Dans cet example nous avons lier nos éléments à notre contrôleur, nous avons également implémentés la méthode textField(_: shouldChangeCharactersInRange: replacementString:) afin de réagir à chaque changement de texte en appellant la méthode updateQRCodeImageWithText(_:) qui va se charger de générer notre QRCode et de l’afficher correctement. Pour le moment cette méthode affiche change changement sur la console.

Générer un QRCode

Pour générer un QRCode rien de plus simple. Apple fournit une bibliothèque CIImage qui nous permet de faire cela très facilement que nous devons au préalable importer :

import CoreImage

Maintenant nous allons générer une image contenant le QRCode avec le texte en entrée :


var qrcodeImage: CIImage?

func updateQRCodeImageWithText(text: String) {
  if let data = text.dataUsingEncoding(NSISOLatin1StringEncoding, allowLossyConversion: false),
     let filter = CIFilter(name: "CIQRCodeGenerator") {
    filter.setValue(data, forKey: "inputMessage")
    filter.setValue("Q", forKey: "inputCorrectionLevel")

    qrcodeImage = filter.outputImage
  }
}

Ici nous déclarons tout d’abord une variable globale qrcodeImage qui contiendra notre image. Puis dans la méthode updateQRCodeImageWithText(_:) nous convertissons notre texte en NSData en utilisant le NSISOLatin1StringEncoding (recommendation d’Apple, mais NSUTF8StringEncoding fonctionne aussi) et nous préparons un filtre CIQRCodeGenerator qui permet de générer le code.

Ensuite, après avoir créer notre filtre, nous renseignons 2 valeurs : l’inputMessage qui contient le NSData de ce que l’on souhaite générer et l’inputCorrectionLevel qui définit la tolérance aux é-erreur du générateur :

L : 7% de tolérance aux erreurs
M : 15% de tolérance aux erreurs
Q : 25% de tolérance aux erreurs
H : 30% de tolérance aux erreurs

Une fois fini nous pouvons récupérer l’image générer par le filter. Cette image est une CIImage avec 1 point de résolution pour les plus petits rectangles. Maintenant il nous faut convertir cette image en UIImage pour l’afficher sur notre écran :

var qrcodeImage: CIImage? {
  didSet {
    if let image = qrcodeImage {
      qrcodeImageView.image = UIImage(CIImage: image)
    }
    else {
      qrcodeImageView.image = nil
    }
  }
}

Ici nous écoutons les changements sur la variable qrcodeImage et nous la convertissons en UIImage quand l’image est disponible avant de l’afficher dans qrcodeImageView. Voilà le résultat :

Mince, le QRCode n’est pas net. Comme expliqué avant l’image est en réalité très petite par défaut. Il nous faut donc la retailler correctement avant de générer notre image. Pour cela nous allons ajouter ces quelques lignes de code dans le didSet de notre variable qrcodeImage :

let scaleX = qrcodeImageView.bounds.width / image.extent.width
let scaleY = qrcodeImageView.bounds.height / image.extent.height

let transformedImage = image.imageByApplyingTransform(CGAffineTransformMakeScale(scaleX, scaleY))

qrcodeImageView.image = UIImage(CIImage: transformedImage)

Comme expliqué avant, nous calculons le ratio entre l’image à afficher et l’image original avant de créer notre nouvel image taillée aux bonnes dimensions :

Voilà ! C’est finit. Vous pouvez maintenant générer autant de QRCode que vous le souhaitez. Vous pouvez retrouver le projet complet sur github.

Conclusion

Maintenant que nous sommes à la fin de ce tutoriel, j’espère vraiment que cette application, que nous avons construit étape par étape, vous aidera à créer vos propres QRCodes. Comme vous l’avez vue à travers la réalisation de ce prototype, il a été relativement simple de venir à bout de ce processus. Quoi qu’il en soit, la prochaine fois que vous aurez à intégrer la génération de QRCode à vos applications, vous serez en mesure de le faire !

À bientôt pour de nouvelles aventures.