How to add search to your iOS app with Elastic App Search: Part 2

In part one, we went over setting up your Elastic stack and ingesting data. In the second part of this blog series, we will be creating an iOS app that uses Elasticsearch for searching a movie database. Note: This tutorial is based on Elasticsearch version 7.12.x Starting a New Xcode Project

Open Xcode and create a new project.
In the iOS tab, select App and choose Next
Configure the options for setting up the new app

    Product name: App-Search
    Team: 
    Organization Identifier: 
    Interface: SwiftUI
    Life Cycle: SwiftUI App
    Language: Swift
    Use core data: No
    Include tests: No

Select Next
Choose where to save your project, and select Create

Building the UI The UI will be built out in the ContentView.swift file. The basic structure of the UI will be as follows:

        CODE

        DIAGRAM

        SCREENSHOT

         VStack {

HStack { HStack { Image() #Magnify glass TextField() #Search Button() #"x" clear } Button() #"Cancel" } List(results) { HStack { Image() #Movie poster VStack { Text() #Title Text() #Description } } } }

Since the UI is not the main focus of this tutorial, I'll just post the full code for the UI without going into too much detail.
//

// ContentView.swift // app-search // // Created by Ethan Groves on 3/5/21. // import SwiftUI struct ContentView: View { // @State variables are special variables that are automatically monitored for changes, and will update any UI elements that contain references @State var results: [Result] = [] @State private var searchText = "" @State private var showCancelButton: Bool = false private let TmdbApiKey = "my_tmdb_api_key" //------------------------------------ // The main body of the UI //------------------------------------ var body: some View { VStack(alignment: .leading) { //-------------------------------- // Search bar //-------------------------------- HStack { HStack { Image(systemName: "magnifyingglass") TextField("search", text: $searchText, onEditingChanged: { isEditing in // Set Bool to show the cancel button whenever there is text in the field self.showCancelButton = true }, onCommit: { // When a search is submitted, send it to App Search and get the results AppSearch().getResults(searchTerm: searchText) { (results) in self.results = results } }) // Display a small 'x' button in the text field which can clear all text Button(action: { self.searchText = "" }) { Image(systemName: "xmark.circle.fill").opacity(searchText == "" ? 0 : 1) } } // Formatting and styling for the search bar .padding(EdgeInsets(top: 8, leading: 6, bottom: 8, trailing: 6)) .foregroundColor(.secondary) .background(Color(.secondarySystemBackground)) .cornerRadius(10.0) // Display a 'Cancel' button to clear text whenever there is text in the TextField if showCancelButton { Button("Cancel") { UIApplication.shared.endEditing() self.searchText = "" self.showCancelButton = false } } } // Formatting and styling for the 'Cancel' button .padding(.horizontal) //-------------------------------- // Table containing search results //-------------------------------- List(results) { result in // For each search result returned from App Search, build a simple UI element HStack { // If the search results contain a URL path for a movie poster, use that for the image // Otherwise, grab a random image from http://source.unsplash.com if result.posterPath.raw != nil { let imageURL = "https://image.tmdb.org/t/p/w500" + result.posterPath.raw! + "?api_key=" + TmdbApiKey AsyncImage( url: URL(string: imageURL)!, placeholder: { Text("Loading...")}, image: { Image(uiImage: $0).resizable() } ) // Formatting and styling for the image .aspectRatio(contentMode: .fit) .frame(width: 100) } else { let imageURL = "https://source.unsplash.com/user/jakobowens1/100x150?" + String(Int.random(in: 1.. https://www.elastic.co/blog/how-to-add-search-to-your-ios-app-part-2