How to integrate a Photo Editor into your iOS App

7-minute Video Tutorial


4 min read
How to integrate a Photo Editor into your iOS App
This tutorial is going to walk you through the integration process of the PhotoEditor SDK for iOS. You’ll learn how to setup the editor in seven minutes using CocoaPods. We created similar tutorials for Android and HTML5, so make sure to check those out as well.(Please make sure to get a trial license for the PhotoEditor SDK before integrating it.)

Transcript

In this tutorial, we’re going to show you how to integrate the PhotoEditor SDK into your iOS app. We’re going to use Xcode and the PhotoEditor SDK’s documentation. So, first of all, we navigate to the “Getting Started” guide for iOS. We’re going to install the SDK using CocoaPods, because it is the recommended way to initialize this dependency.

We create a new Xcode project and select the “Single View App” template. Then, we assign a name to our project. For this tutorial, we’ll go with “PhotoEditorApp.” Here, it is essential that the given bundle identifier is identical to the one you used to request your license with. We decide to save our project files to the documents folder and create the new project.

Now, we change the iOS Deployment Target to version 9.0 as the SDK supports all iOS versions from 9.0 upwards, and thus, our app will be available for the highest possible number of devices. After that, we insert our previously downloaded license file into our app by simply dragging and dropping the file into our app’s folder. Here, it’s important that “Copy items if needed” is checked so that our license file will be copied to the appropriate place in our project instead of just being referenced.

Now, we can close our Xcode project. We open our folder structure and see that our project has been created in the documents folder. Now, we need the terminal to install the PhotoEditor SDK via CocoaPods. We type cd which is short for “change directory”, to change the directory of our source files. We can copy the project’s path via drag and drop. We now instruct CocoaPods to prepare Xcode for the use with CocoaPods by typing pod init. After that, CocoaPods creates the file “podfile.” We open the podfile in a text editor by double-clicking.

Here, we uncomment the second line and thus define that our project shall run from iOS version 9.0 upwards. Next, we copy this line (pod 'PhotoEditorSDK') from the PhotoEditor SDK’s documentation and paste it under # Pods for PhotoEditorApp to create a dependency between our project and the PhotoEditor SDK. We save the podfile and close the text editor. Now, we return to the terminal and instruct CocoaPods to install all dependencies by typing pod install and executing our command with the return key.

Here we can see that CocoaPods advises us to open our Xcode project with the xcworkspace file only. Furthermore, we see that there’s now a new folder called “pods.” Ideally, you wouldn’t check that folder into your source control system as it potentially contains large files, which can result in some issues. Github, for example, has a limit for the maximum file size, which the PhotoEditor SDK would exceed. So, it would be best if every user that works on the project activates pod install to install the dependencies for each processing machine.

Now, we can open the project file to incorporate our license into the file AppDelegate.swift. We copy this line from our documentation and paste it under the method UIApplication, didfinishLaunchingWithOptions.

if let licenseURL = Bundle.main.url(forResource: "license", withExtension: "") {
    PESDK.unlockWithLicense(at: licenseURL)
  }

It is important that we name our license file exactly like we did when we incorporated it into our project. In our case, that would be “ios_license” instead of “license.” Also, we can see that there is an error message, because we haven’t imported the PhotoEditor SDK yet. We simply type import PhotoEditorSDK, and the issue is resolved. Now our project is prepared so that we can use the PhotoEditor SDK with an active license.

Next, we’re going to prepare our app, so that it actually uses the PESDK. We configure our app with the Main.storyboard by opening the assistantview and creating a new button by just dragging and dropping it on the canvas. We’re going to use Alignment Constraints so that the button will always be displayed in the middle of the screen no matter the form factor of the device in use.

We’re going to name our button after our app and link it from our storyboard with our source code on the right-hand side via drag and drop. Now, we’re going to set a name for our method that is going to be called once the button is pressed. For this tutorial, we’ll go with startPhotoEditor.

We’ve decided that we want to start the PhotoEditor SDK with a CameraViewController. So, we copy the respective code from our documentation and paste it in the body of our method under startPhotoEditor.

let cameraViewController = CameraViewController()
present(cameraViewController, animated: true, completion: nil)

When we save the file, we get yet another error message that the camera can’t be found because we haven’t imported the PhotoEditor SDK for this source file either. Once we’ve done that, the error message disappears.

As we want our editor to start in camera mode, we have to create some entries in the Info.plist file that will allow us to use our device’s camera and grant access to our device’s image library. That is a restriction by Apple. If we didn’t create these entries, we wouldn’t be able to use our app as it would crash as soon as we open the camera. All necessary entries can be found under “Privacy.” First, we need “Camera Usage Description.” Here, we have to give a reason why we want access to our user’s camera. Said reason should be as meaningful as possible. For this tutorial, we’ll go with “We use your camera to take photos for editing.” We also want to allow the import of photos from the device’s library, so we add the identifier “Photo Library Usage Description” and type “We use your photos so that you can edit them” as description.

Now, we can run the app in the simulator. If we wanted to run the app on a physical device, we’d have to provide an Apple iOS developer account under “Team” so that the app can be signed because only registered developers are allowed to install apps on physical devices. However, we’ll go with the simulator.

Thanks for reading! To stay in the loop, subscribe to our Newsletter.

Related Articles

What is a Design Editor SDK
9 min read
CE.SDK v1.33 Release Notes
4 min read

GO TOP