App Development: QR Code

Learning Outcomes:

This lesson will focus on the creation of an Apple application on IOS using the XCode development tool. You will learn the basics of the swift programming language and how packages are used to create a simple application. The app will focus on grabbing an input from the user, mainly being a website, and creating a Quick Response (QR) Code from the website where the use can save the QR Code onto their photo library.

Materials:

• Apple Mac with XCode
• IOS Device (recommended but not required)

1. XCode: Set – Up:

How It Works:

The video explains the initial step on creating an XCode IOS project and how to add a swift file to the project. When opening the XCode application, it is important to be on the latest version of XCode available to support the latest version of IOS development.

Steps:

1. Creating a project:
   1. Open XCode and ensure you are on the latest version.
   2. Select the option “Create a new XCode Project”
   3. On “Choose a template for your new project”, ensure that IOS is selected.
   4. Under “Application” select the “App” function.
   5. Under “Choose options for your new project” fill in the necessary information but ensure Interface is set to “SwiftUI”, Life Cycle is set to “SwiftUI App” and Language is set to “Swift”.
   6. Choose a location where the project will be saved.
2. Creating/adding a swift file:
   1. Right click on the Project folder you would like to add the file too.
   2. Select the “New File…” option.
   3. On “Choose a template for your new project”, ensure that IOS is selected.
   4. Select “Swift File”.
   5. Name the file and choose where the file will be saved.

2. QRCodeView:

How It Works:

This video explains the creation of the QR Code Viewer. The QR Code Viewer is a view type that takes the URL as a parameter and uses filtering and masks to create a QR Code Image and return it to the Content View. You will be creating three functions: the body, generateQRCodeImage, and returnQR. The body will be a View type where it will create an Image from calling the generateQRCodeImage function using the URL passed by the Content View. The generateQRCodeImage function will take a string (the URL) and use image filtering functions and image masking along with image transformation functions to create the QR code image from the string; then the function will return the QR image as an UIImage. Finally, the returnQR function will call the function generateQRCodeImage and return the QR Image; this is done to shorten the referencing in Content View.

Steps:

1. Start with the generateQRCodeImage and create a data variable that will be used by the image filter to create a QR Code filter
2. Create a scale and a transform variable using a CGAAffineTransform to transform the filter.
3. Create a condition where if the URL exist a qrCodeImage is created with the transformation that was coded previously; if the URL does not exist it will throw an unscannable QR code image.
4. In the body use the Image() command to create the image type from the generateQRCodeImage function; the image is also being resize and interpolation is removed to appear clearly on the view.
5. Then create the returnQR() function by setting a variable such as QR and setting it equal to the image passed by generateQRCodeImage, then return that variable.

3. TextClearButton:

How It Works:

This video will explain how to code the clear text button, which will clear the URL or text enter by the user. To do this will we create a ViewModifier type that will modify a view type (the Context View). You will create an HStack where the content will be displayed on the left and the clear button lable will be displayed on the right. If there is no text present on the view then the button will hide, thus not appearing to the user, however if there is text present on the view the button label will be visible to the user. The button is programed to replace the content from the text in the view to an empty array, “ “, thus essentially clearing out the text.

Steps:

1. We will be creating a structure called TextFiledClearButton which is a View Modifier type, this will allow us to modify a view
2. Create the body of the structure, which will create a HStack, which will order the content horizontally.
3. In the body, make the first section of the HStack the content of the text field; this will be the URL entered by the user.
4. In the body, make the second section of the HStack the button, however the button must only appear if there is text in the field.
5. To ensure the button is only visible if there is a URL, we will check whether the field is empty, if yes then the button label will be visible, if not the label will be hidden.
6. Then we will create an action for the button, which will change the text (URL) into an empty string --> “ “.
7. Finally will add a label to the button, by using Xcode built in “delete.left” label; this will show the button as an arrow, with an X, pointing left.

4. ContentView:

How It Works:

This video will explain the creation the content view, which is the user’s interactive (UI) page. This code section will utilize all of the previous code sections created to create a layout that is easy to use and appealing to the user. You will create a page tittle, label titles, text fields for user input, and section to organize the position of the QRCodeView and the save button.

Steps:

1. Create a VStack to organize all the content in a vertical way.
2. Create a title for the application such as “QR App”
3. Create your first section, we will be using these to group related content in the VStack
4. In this first section you will place your section title and your text field.
5. Tittle this section “Enter a Website” and create a Text Field (this is where the user will type in their website) with a temporary fill such as “website”, set auto capitalization and auto correct to off/false.
6. Create a second section and tittle it “QR Code”, this section will be used to hold the sections holding the QRCodeView and the “Save to Photos” button and display it only if text has been added to the Text Filed in the previous section.
7. We will create a condition statement with an if statement. This will allow the section to be displayed only if there is text in the text field
8. Within our second section you will create another section, in this section we will call the QRCodeView and pass our user’s text which is called “link”. We will also use positioning and patdding so the QR code is nice and center.
9. Now create another section within the created section, this will be for our button.
10. We will create a button with a label “Save QR Code’ and create an action that will save the QR code to the user photo library and direct the use to the photo’s app; this will be done using the UIImageWriteToSavedPhotosAlbum and UIApplication.
11. There is a critical step that we will need to do before we save content to photos, and that is asking the user for photo saving access. To do this we have to add a property list to info.plist called “Privacy – Photo Library Addition Usage Description” and add why the app would like access.
12. The last park we will do is create a final section where we will add the second condition, which will be an else statement. This mean that is there is no text present the following text will be displayed, “Your QR code will appear here”.

Additional Resources

• QR Code Application (XCode) Lesson Plan