English

Integración Nästa Coach iOS

General

Utilizarás un WKWebView para mostrar el componente. Asegurate de tener WebKit.framework agregado al proyecto.

Abre el proyecto en Xcode, en la navegación del proyecto (Project Navigator) a la izquierda de Xcode, haz clic en el nombre del proyecto para acceder a la configuración del mismo.
En la configuración, en el panel izquierdo, selecciona el target al que agregarás el framework WebKit.
Ve a la pestaña "General" y baja hasta encontrar la sección "Frameworks, Libraries, and Embedded Content".
Utiliza el botón de "+" al final de esta sección para desplegar una lista de frameworks disponibles. Busca "WebKit" y el framework WebKit debería aparecer en esta. Selecciona WebKit.framework y haz clic en el botón de Agregar (Add) para incluirlo en el proyecto.

Una vez mostrado, el WKWebView necesitara acceder a la cámara, asegúrate de configurar la posibilidad de pedir estos permisos en el archivo Info.plist:

Abre el proyecto en Xcode y selecciona el archivo Info.plist file en la navegación del proyecto (Project Navigator).
Agrega una nueva entrada haciendo clic derecho en cualquier otra entrada existende o haciendo clic en el botón "+" que aparece cuando colocas el ratón sobre las entradas existentes.
Introduce la clave (key) como: NSCameraUsageDescription.
Introduce como valor una cadena que describa la razón por la que acceder a la cámara es necesario en la aplicación, por ejemplo, "Esta aplicación requiere acceso a la cámara para hacer fotografías".

Swift

Agregar un WKWebView al storyboard: Abre el storyboard de tu proyecto, arrastra un WKWebView desde la biblioteca de objetos a tu vista de controlador y conecta el WKWebView a tu ViewController creando un IBOutlet

Configurar el WKWebView en el ViewController: Abre el archivo de tu ViewController y configura el WKWebView para cargar el HTML.

import UIKit
import WebKit

class ViewController: UIViewController {

    @IBOutlet weak var webView: WKWebView!

    override func viewDidLoad() {
        super.viewDidLoad()

        let token = "<your-token>"
        let clientId = "<your-client-id>"
        let mainColor = "#4b858e" /* Puedes cambiar los valores por defecto */
        let mainActive = "#2c4e54"
        let mainDisabled = "#9db8bc"
        let secondary = "#a3d5cd"
        let secondaryDark = "#9ac6bf"
        let secondaryMiddle = "#c8e7e2"
        let secondaryLight = "#e8f6f3"
        let secondarySuperDark = "#7baaa3"
        let font = "'Montserrat', sans-serif"
        let language = "" // Si se deja vacío, se utilizará el lenguaje del sistema. Las opciones son: "es" para español, "en" para inglés y "va" para valenciano
        let maxWidth = "420px"
        let height = "500px"

        let htmlData = """
            <html>
              <head>
               <style>
                 :root {
                   --nasta-main: \(mainColor);
                   --nasta-mainActive: \(mainActive);
                   --nasta-mainDisabled: \(mainDisabled);
                   --nasta-secondary: \(secondary);
                   --nasta-secondaryDark: \(secondaryDark);
                   --nasta-secondaryMiddle: \(secondaryMiddle);
                   --nasta-secondaryLight: \(secondaryLight);
                   --nasta-secondarySuperDark: \(secondarySuperDark);
                   --nasta-font: \(font);
                   --nasta-microMaxWidth: \(maxWidth);
                   --nasta-microHeight: \(height);
                 }
               </style>
             </head>
             <body>
             <recycling-app
               client-id="\(clientId)"
               token="\(token)"
               language="\(language)"
             ></recycling-app>
             <script src="https://recycling.nastaeco.com/recycling.umd.js"></script>
           </body>
         </html>
        """

        let baseURL = URL(string: "https://www.recycling.nastaeco.com")
        webView.loadHTMLString(htmlData, baseURL: baseURL)
    }
}

Recuerda cambiar los valores de your-token por tu token y your-client-id por tu client id.

Objective-C

Agregar un WKWebView al storyboard: Abre el storyboard de tu proyecto, arrastra un WKWebView desde la biblioteca de objetos a tu vista de controlador y conecta el WKWebView a tu ViewController creando un IBOutlet

Configurar el WKWebView en el ViewController: Abre el archivo de tu ViewController y configura el WKWebView para cargar el HTML.

#import "ViewController.h"
@import WebKit;

@interface ViewController ()
@property (weak, nonatomic) IBOutlet WKWebView *webView;
@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];

    NSString *token = @"<your-token>";
    NSString *clientId = @"<your-client-id>";
    NSString *mainColor = @"#4b858e"; /* Puedes cambiar los valores por defecto */
    NSString *mainActive = @"#2c4e54";
    NSString *mainDisabled = @"#9db8bc";
    NSString *secondary = @"#a3d5cd";
    NSString *secondaryDark = @"#9ac6bf";
    NSString *secondaryMiddle = @"#c8e7e2";
    NSString *secondaryLight = @"#e8f6f3";
    NSString *secondarySuperDark = @"#7baaa3";
    NSString *font = @"'Montserrat', sans-serif";
    NSString *language = @""; // Si se deja vacío, se utilizará el lenguaje del sistema. Las opciones son: "es" para español, "en" para inglés y "va" para valenciano
    NSString *maxWidth = @"420px";
    NSString *height = @"500px";

    NSString *htmlData = [NSString stringWithFormat:@"<html><head><style>:root { --nasta-main: %@; --nasta-mainActive: %@; --nasta-mainDisabled: %@; --nasta-secondary: %@; --nasta-secondaryDark: %@; --nasta-secondaryMiddle: %@; --nasta-secondaryLight: %@; --nasta-secondarySuperDark: %@; --nasta-font: %@; --nasta-microMaxWidth: %@; --nasta-microHeight: %@; }</style></head><body><recycling-app client-id='%@' token='%@' language='%@'></recycling-app><script src='https://recycling.nastaeco.com/recycling.umd.js'></script></body></html>", mainColor, mainActive, mainDisabled, secondary, secondaryDark, secondaryMiddle, secondaryLight, secondarySuperDark, font, maxWidth, height, clientId, token, language];

    NSURL *baseURL = [NSURL URLWithString:@"https://www.recycling.nastaeco.com"];
    [self.webView loadHTMLString:htmlData baseURL:baseURL];
}

@end

Recuerda cambiar los valores de your-token por tu token y your-client-id por tu client id.

Resolución de problemas

Algunas versiones de iOS requieren que la propiedad allowsInlineMediaPlayback se agregue a la configuración del WKWebView para evitar que la imagen de la cámara ocupe toda la pantalla y no se pueda capturar la imagen correctamente.

Swift

// Inicializar un objeto WKWebViewConfiguration.
let webViewConfiguration = WKWebViewConfiguration()
// Permitir que videos en el HTML con el atributo "playsinline" se visualicen dentro del elemento.
webViewConfiguration.allowsInlineMediaPlayback = true
// Inicializar el WkWebView con el objeto WKWebViewConfiguration.
webView = WKWebView(frame: view.frame, configuration: webViewConfiguration)
view.addSubview(webView)

Objective-C

// Inicializar un objeto WKWebViewConfiguration.
WKWebViewConfiguration *webViewConfiguration = [[WKWebViewConfiguration alloc] init];
// Permitir que videos en el HTML con el atributo "playsinline" se visualicen dentro del elemento.
webViewConfiguration.allowsInlineMediaPlayback = YES;
// Inicializar el WkWebView con el objeto WKWebViewConfiguration.
self.webView = [[WKWebView alloc] initWithFrame:self.view.frame configuration:webViewConfiguration];
[self.view addSubview:self.webView];