iOS: How To Save Document Scans To A UICollectionView
& My Lambda Journey
The Onboarding
For the final unit in Lambda School, students are given an opportunity to experience working on a project that resembles real work in the field, in a unit they call ‘Lambda Labs’. My cohort was granted the honor to work with an organization called Story Squad. The product they wanted was a cross-platform application that encourages youth ages 8–12 to engage in reading and submitting original writings and drawings through their preferred device, my team was responsible for the iOS release.
When prompted on the different features that the stakeholders wished for, our track team for the iOS release was divided into two teams. My team was given our user stories and were able to form tasks from the problems we needed to address. Some problems that needed to be solved were the implementation of the devices camera to be used in the iOS app, and also network calls to save the captures to the backend database.
Experiencing Real World Work, In A Mock Environment
In Lambda Labs, our main focus is on collaboration and how to effectively work as a team. Given our User Stories, we were able to create various tasks that we could take on as a feature that each team member would be responsible for. A specific request from the stakeholders was to have a camera that provides guides for the user to take better scans. I took the opportunity to learn a bit of a previously unfamiliar framework called VisionKit. VisionKit includes a native document scanner that the user can use to provide guides that find page edges, options to edit camera captures and save them as PDF files rather than images.
Some concerns that arose while starting work on this feature were that at first, there were very few resources that I could find online that offered the precise implementation for the problem I needed to solve. Relative information that I could use and having trouble finding it was my initial concern, and it quickly became the first personal roadblock I’d have to cross for this project.
Setting Up The Document Scanner
After scouring the Apple Documentation and Googling for all the information I could find on how I would implement my task, I finally found a lead. With that, I created a dummy project so I could test out the implementation of the document camera feature without touching the actual codebase. Lets take a look at the steps I took to navigate myself through this new framework.
1. Create a basic UI
(Note: To get the most from this How-To:, Basic iOS/XCode knowledge is suggested for this portion of the article. Project set up, storyboard, IBOutlets and Actions, collection view set up are not explained in full).
As you can see below, I set up a very basic UI using Xcode’s Storyboard interface to get started quickly. I added a bar button into the Navigation Bar to fire up the camera, and a UIImageView to hold the users capture.
2. Implement the Document Scanner
Every Storyboard project in Xcode will come with a ViewController Scene and file already hooked up to start with. First, lets hook up our IBOutlets and IBActions and name them accordingly. In configureDocumentView(), we create an instance of aVNDocumentCameraViewController, set its delegate to itself (which we will look at in the next snippet), and then we present the scanner view. configureDocumentView() is then called in our action documentScannerWasPressed().
3. Where The Magic Almost Happens
Our extension of ViewController is where we want to conform to the VNDocumentCameraViewControllerDelegate that will handle events that come from the scanner. Calling its function didFinishWith will carry out any instructions you give it when the user presses SAVE after taking their scans. In didFinishWith we process the scans with a for-loop, set the image to our imageView and dismiss the view at the end.
Very nice! But the main capability of my feature was to give the user the capability to capture multiple scanned images, and review those images through a collection view. That is when I hit my second roadblock. In my dummy project, if I took 3 scans and saved them, I was only able to get the first capture into a view. This was a problem.
4. How I Got Multiple Scans To Populate The Collection View
When dealing with multiple elements, in this case, images, we want to create an empty array [scanImages] for our images to be stored. Rather than setting the processed image to the imageView, we want to append()each iteration of image to that array that we created. Lastly, all we have to do now is inject the array to the collectionViewDatasource.
Do What It Takes To Advance The Team
My partners and I encountered numerous roadblocks along the way. Some of them stemming from our personal tasks, and others came from the project as a whole. From stakeholders wanting a total redesign for the entire iOS app, to some team members not being present in meetings resulting in not being up to date to the most recent changes, it was a test of adapting to different situations that my immediate partners and I were able to face together and overcome.
Although current state of the project is still in production, the user stories and features that my partners and I were given are complete. A huge shout out to, Norlan Tibenear who was able to completely rewrite the UI programmatically, and Sammy Alvarado, who set up access to the device camera and camera roll for the user to upload drawings. We are currently missing the ability to submit the captures to a custom database, but you can see the full implementation of my feature below.
On To The Next One
As we pass this project on to future teams, I would like to see the captured images/scans being sent to the backend for submission. But before that can be successful, the login must be completed by the team that had the authorization tasks. Over the many hours that I have spent with my team, I was given feedback on my work. I found that although I am highly capable of delivering the task that I am responsible for, I am still a very reserved developer and need to be sure to make my ideas known. Being a part of this project, I’ve gained the confidence knowing that I do have valid ideas and can play a meaningful role in future teams that I am a part of. Thanks for reading!
