Integración de ChatGPT en Swift: Ejemplo Práctico

ChatGPT in swift

En el mundo del desarrollo de software, las aplicaciones impulsadas por inteligencia artificial (IA) se están convirtiendo rápidamente en una tendencia. ChatGPT, el modelo de lenguaje avanzado de OpenAI, ofrece una poderosa funcionalidad para mejorar la interacción de los usuarios en aplicaciones de mensajería, asistencia virtual y otras soluciones basadas en IA. En esta entrada de blog, te guiaré a través del proceso de integración de ChatGPT en una aplicación de iOS desarrollada con Swift, utilizando la API de OpenAI para interactuar con el modelo. Al final, tendrás una aplicación que pueda comunicarse con ChatGPT de manera sencilla.

Requisitos previos

Antes de comenzar con el desarrollo, asegúrate de tener los siguientes componentes listos:

1. Xcode instalado en tu Mac.

2. Una clave API válida de OpenAI. Puedes obtener una registrándote en OpenAI.

3. Conocimientos básicos de Swift y la plataforma iOS.

Paso 1: Configurar un proyecto de Xcode

1. Abre Xcode y crea un nuevo proyecto. Elige “App” bajo la plantilla de iOS y asegúrate de seleccionar Swift como lenguaje de programación.

2. En la sección de “Deployment Info”, asegúrate de que tu proyecto esté configurado para iOS 14.0 o superior, ya que utilizaremos las características modernas de Swift y SwiftUI.

Paso 2: Crear el servicio para la API de OpenAI

Para interactuar con el modelo de ChatGPT, necesitamos hacer solicitudes HTTP a la API de OpenAI. Lo haremos creando una clase en Swift que maneje las solicitudes y respuestas.

Código del servicio API:

Primero, crea un archivo Swift llamado OpenAIService.swift. Este archivo contendrá el código para manejar las solicitudes a la API de OpenAI.

				
					import Foundation

class OpenAIService {
    private let apiKey = "TU_CLAVE_API" // Asegúrate de reemplazar con tu propia clave API
    private let apiUrl = "https://api.openai.com/v1/chat/completions"
    
    func sendMessage(message: String, completion: @escaping (String?) -> Void) {
        guard let url = URL(string: apiUrl) else { return }
        
        let headers = [
            "Authorization": "Bearer \(apiKey)",
            "Content-Type": "application/json"
        ]
        
        let body: [String: Any] = [
            "model": "gpt-3.5-turbo",  // Puedes cambiar el modelo si es necesario
            "messages": [
                ["role": "user", "content": message]
            ]
        ]
        
        var request = URLRequest(url: url)
        request.httpMethod = "POST"
        request.allHTTPHeaderFields = headers
        
        do {
            request.httpBody = try JSONSerialization.data(withJSONObject: body, options: [])
        } catch {
            print("Error serializando el cuerpo de la solicitud: \(error)")
            return
        }
        
        let task = URLSession.shared.dataTask(with: request) { data, response, error in
            if let error = error {
                print("Error en la solicitud: \(error)")
                completion(nil)
                return
            }
            
            guard let data = data else {
                print("No se recibieron datos")
                completion(nil)
                return
            }
            
            do {
                if let json = try JSONSerialization.jsonObject(with: data, options: []) as? [String: Any],
                   let choices = json["choices"] as? [[String: Any]],
                   let firstChoice = choices.first,
                   let message = firstChoice["message"] as? [String: Any],
                   let content = message["content"] as? String {
                    completion(content)
                } else {
                    completion(nil)
                }
            } catch {
                print("Error procesando la respuesta JSON: \(error)")
                completion(nil)
            }
        }
        
        task.resume()
    }
}
				
			

Explicación del código:

apiKey: Esta es la clave de autenticación que obtienes desde OpenAI.

sendMessage(message:completion:): Esta función envía una solicitud HTTP POST a la API de OpenAI con el mensaje del usuario. Recibe el mensaje de entrada, y en su bloque de finalización (completion), retorna la respuesta del modelo ChatGPT.

•Se utiliza URLSession.shared.dataTask para enviar la solicitud HTTP y procesar la respuesta asincrónicamente.

Paso 3: Crear la interfaz de usuario con SwiftUI

Ahora que tenemos el servicio listo, podemos construir una interfaz de usuario simple utilizando SwiftUI. Crearemos una vista donde el usuario pueda escribir un mensaje y ver la respuesta de ChatGPT.

Código de la vista principal:

Crea un archivo Swift llamado ContentView.swift y agrega el siguiente código:

				
					import SwiftUI

struct ContentView: View {
    @State private var userMessage: String = ""
    @State private var chatResponse: String = "La respuesta de ChatGPT aparecerá aquí."
    @State private var isLoading: Bool = false
    private let openAIService = OpenAIService()
    
    var body: some View {
        VStack {
            Text("Chat con GPT")
                .font(.title)
                .padding()
            
            TextField("Escribe tu mensaje...", text: $userMessage)
                .textFieldStyle(RoundedBorderTextFieldStyle())
                .padding()
            
            Button(action: {
                sendMessage()
            }) {
                Text("Enviar")
                    .padding()
                    .foregroundColor(.white)
                    .background(Color.blue)
                    .cornerRadius(10)
            }
            .disabled(isLoading || userMessage.isEmpty)
            .padding()
            
            if isLoading {
                ProgressView("Cargando...")
                    .padding()
            }
            
            ScrollView {
                Text(chatResponse)
                    .padding()
            }
            
            Spacer()
        }
        .padding()
    }
    
    private func sendMessage() {
        isLoading = true
        openAIService.sendMessage(message: userMessage) { response in
            DispatchQueue.main.async {
                if let response = response {
                    chatResponse = response
                } else {
                    chatResponse = "Hubo un error obteniendo la respuesta."
                }
                isLoading = false
                userMessage = ""
            }
        }
    }
}
				
			

Explicación del código:

  • userMessage: Una variable de estado que almacena el mensaje escrito por el usuario.
  • chatResponse: Almacena la respuesta de ChatGPT.
  • sendMessage(): Llama al servicio OpenAIService para enviar el mensaje y actualizar la interfaz de usuario con la respuesta.

La interfaz de usuario cuenta con un campo de texto, un botón para enviar el mensaje, y un área para mostrar la respuesta de ChatGPT. Mientras se está procesando la solicitud, aparece un indicador de carga (ProgressView).

Paso 4: Ejecutar la aplicación

Una vez que hayas implementado el código anterior, puedes ejecutar la aplicación en el simulador de iOS o en un dispositivo físico. Al iniciar la app, podrás escribir un mensaje en el campo de texto, y al presionar el botón “Enviar”, el mensaje se enviará a ChatGPT. La respuesta se mostrará en la pantalla una vez que la API haya devuelto los datos.

Conclusión

Con esta implementación, has creado una aplicación básica que integra ChatGPT utilizando Swift y SwiftUI. Este es solo el comienzo, y puedes expandir esta funcionalidad agregando características como mantener un historial de conversación, mejorar el diseño de la interfaz, o incluso gestionar diferentes personalidades del modelo ChatGPT dependiendo del contexto de uso.

Integrar un modelo de IA en una aplicación nativa de iOS puede agregar un valor significativo, y OpenAI proporciona herramientas robustas para hacerlo posible. ¡Espero que este tutorial te haya ayudado a comprender cómo implementar esta funcionalidad de manera práctica!

Gracias por leer. Si te ha parecido interesante este artículo puedes dejarme un comentario. felíz codificación!

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Scroll al inicio