Español

Nästa Coach iOS Integration

General

You will use a WKWebView to display the component. Ensure you have WebKit.framework added under your project's frameworks.

Start by opening your project in Xcode, in the Project Navigator on the left side of Xcode, click on your project's name at the top to access the project settings.
Within the project settings, on the left panel, select the target where you want to add the WebKit framework.
Go to the "General" Tab and scroll down to find the section labeled "Frameworks, Libraries, and Embedded Content".
Use the "+" button at the bottom of this section to open a list of available frameworks and libraries. Search for "WebKit" and you should see the WebKit framework appear in the list. Select WebKit.framework and click the "Add" button to include it in your project.

Once displayed, the WKWebView will have to access the camera, ensure you set up requesting permissions for it in your Info.plist file:

Open your project in Xcode and select the Info.plist file in the project navigator.
Add a new entry by right-clicking on any existing key or hovering over and clicking the "+" icon.
Set the key to NSCameraUsageDescription.
Set the value to a string that describes why your app needs access to the camera, such as "This app requires camera access to take photos."

Swift

Add a WKWebView to the storyboard: Open the storyboard of your project, drag a WKWebView from the object library to your controller view and connect the WKWebView to your ViewController by creating an IBOutlet.

Configure the WKWebView in the ViewController: Open your ViewController file and configure the WKWebView to load the 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" /* You can change the default values */
        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 = "" // If left empty, the system default language will be used. Options include: "es" for spanish, "en" for english and "va" for valencian
        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)
    }
}

Remember to change the values of your-token to your token and your-client-id to your client id.

Objective-C

Add a WKWebView to the storyboard: Open the storyboard of your project, drag a WKWebView from the object library to your controller view and connect the WKWebView to your ViewController by creating an IBOutlet.

Configure the WKWebView in the ViewController: Open your ViewController file and configure the WKWebView to load the 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"; /* You can change the default values */
    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 = @""; // If left empty, the system default language will be used. Options include: "es" for spanish, "en" for english and "va" for valencian
    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

Remember to change the values of your-token to your token and your-client-id to your client id.

Troubleshooting

Some iOS versions require that the allowsInlineMediaPlayback property is explicitly set in the WKWebView configuration to avoid having the camera image occupy the whole screen and hinder correct image capture.

Swift

// Initialize a WKWebViewConfiguration object.
let webViewConfiguration = WKWebViewConfiguration()
// Let HTML videos with a "playsinline" attribute play inline.
webViewConfiguration.allowsInlineMediaPlayback = true
// Initialize the WKWebView with your WKWebViewConfiguration object.
webView = WKWebView(frame: view.frame, configuration: webViewConfiguration)
view.addSubview(webView)

Objective-C

// Initialize a WKWebViewConfiguration object.
WKWebViewConfiguration *webViewConfiguration = [[WKWebViewConfiguration alloc] init];
// Let HTML videos with a "playsinline" attribute play inline.
webViewConfiguration.allowsInlineMediaPlayback = YES;
// Initialize the WKWebView with your WKWebViewConfiguration object.
self.webView = [[WKWebView alloc] initWithFrame:self.view.frame configuration:webViewConfiguration];
[self.view addSubview:self.webView];