Tutorial 2: Search an image from Phone - iOS

In the first tutorial, we have shown you how to use the SDK builtin scanner, but sometimes you might need more control on what is sent to the server. In this tutorial, we will create an app that let users pick an image from their Phones' photo gallery as the data source to the search query. As to how to install and initialise SDK, please refer to 'How to Use SDK Quick Start'

1. Create a new app

Create new Xcode project with any name you want, for example, AIQKit-Example. Project type here we use is Single View App

2. Background and Button

In the ViewController.m, find the function,

ViewController.m

- (void)viewDidLoad

In this function, we change background colour:

Code

[self.view setBackgroundColor:UIColorFromRGB(0xf6921e)];

and then add a button to invoke the builtin scanner,

Code

// add button

UIButton *scannerButton = [UIButton buttonWithType:UIButtonTypeCustom];

scannerButton.frame = CGRectMake(padding, 260.0 + padding, self.view.frame.size.width - 2*padding, 44.0);

scannerButton.backgroundColor = [UIColor whiteColor];

[scannerButton setTitleColor:UIColorFromRGB(0xf6921e) forState:UIControlStateNormal];

scannerButton.layer.cornerRadius = 16.0;

[scannerButton setTitle:btnTitle forState:UIControlStateNormal];

[scannerButton addTarget:self action:btnClicked forControlEvents:UIControlEventTouchUpInside];

[self.view addSubview:scannerButton];

In above code, we installed a callback function for button click event, which is called btnClicked, then add this button to view.

3. Define the callback funciton

We setup image picker controller and callback to pick a photo

Code

UIImagePickerController *imagePickerController = [[UIImagePickerController alloc] init];

imagePickerController.sourceType = UIImagePickerControllerSourceTypeSavedPhotosAlbum;

imagePickerController.mediaTypes = @[(NSString *)kUTTypeImage];

imagePickerController.delegate = self;

imagePickerController.allowsEditing = NO;

[self presentViewController:imagePickerController animated:YES completion:nil];

4. Process response

Here is an example of typical handler to process response from server,

Code

(void)processSearchResponse:(iQAPISearchResponse *)searchResponse
{    
    if (searchResponse.payload) {
        SVModalWebViewController *webViewController = [[SVModalWebViewController alloc] initWithURL:searchResponse.payload];
       // here you got matched URL, which you can use web view controller to show it
        [self presentViewController:webViewController animated:YES completion:nil];
    } else {
        // No result found.
    }
}

5. Test the App

As always, you can checkout source code for this app at https://github.com/IQNECT-ORG/aiqkit-ios

Download example project and execute command,

Code


$> pod install
                    

After the above command is executed, cocoapods libraries will be downloaded and installed to project, which can be seen in Pods folder.

open workspace in Xcode,

Code


$> open AIQKit-Example.xcworkspace
                    

Choose scheme – FromPhotoAlbum,

And build or [CMD]+B

Connect your device and run.

When app is running, you suppose to see following,