IOS-SwiftUI

IOS Swift integration

All function details are mentioned detaily in mobile section. This section includes platform specific codes.

We created class named WebView to open Website.We mentioned key points in comments

//

// WebView.swift

// PhotoMakeupDemo

//

import Foundation

import SwiftUI

import WebKit

struct Webview: UIViewRepresentable{

var webUrl: String

private var wkWebView: WKWebView?

init(webUrl: String) {//Takes url

self.wkWebView = WKWebView()

self.webUrl = webUrl

}

func makeUIView(context: Context) -> WKWebView {

let request = URLRequest(url: URL(string: webUrl)!)//make requesr

let command = """

origin = 'http://127.0.0.1:8000';

initProducts('038f1611-201e-4614-ab25-c3b9fff38905', origin);

activeProduct = {"********"}

set_active_products(JSON.stringify(activeProduct))

"""//This command will work after website loaded

let WKJS = WKUserScript(source: command, injectionTime: WKUserScriptInjectionTime.atDocumentEnd, forMainFrameOnly: false)

wkWebView?.configuration.userContentController.addUserScript(WKJS)

wkWebView?.load(request)

return wkWebView!

}

func updateUIView(_ uiView: WKWebView, context: Context) {

}

func goBack(){//You can add wkWebView commands if you need

wkWebView?.goBack()

}

func evaluateJS(command: String){

wkWebView?.evaluateJavaScript(command)

}

func loadURl(webUrl: String){

let url = URL(string: webUrl)

let request = URLRequest(url: url!)

wkWebView?.load(request)

}

}

And our main App like below.

//

// PhotoMakeupDemoApp.swift

// PhotoMakeupDemo

//

// Created by Apple on 11.02.2021.

//

import SwiftUI

import WebKit

struct Product {

let id = UUID()

let name: String

let category: String

let code: String

let color: UIColor

}//Struct type product

@main

struct PhotoMakeupDemoApp: App {

var webView: Webview = Webview(webUrl: "https://devphotomakeup.pulpoar.com")//Our plugin url

var products = [

Product(name: "Pulpoar Lipstick 01", category: "Lipstick", code: "l01", color: UIColor(hex: "#8d2152")),

Product(name: "Pulpoar Lipstick 02", category: "Lipstick", code: "l02", color: UIColor(hex: "#A4585E")),

Product(name: "Pulpoar Lipstick 3", category: "Lipstick", code: "l03", color: UIColor(hex: "#7f081d")),

Product(name: "Pulpoar Blusher 01", category: "Blusher", code: "b01", color: UIColor(hex: "#f27a51")),

Product(name: "Pulpoar Eyeliner 01", category: "Eyeliner", code: "e01", color: UIColor(hex: "#000000")),

Product(name: "Pulpoar Foundation 01", category: "Foundation", code: "f01", color: UIColor(hex: "#DFBBA1")),

Product(name: "Pulpoar Eyeshadow 01", category: "Eyeshadow", code: "es01", color: UIColor(hex: "#9B7977")),

Product(name: "Pulpo Demo Mascara 1", category: "Mascara", code: "m01", color: UIColor(hex: "#000000")),

Product(name: "Pulpo Demo Eyepencil 1", category: "Eyepencil", code: "ep01", color: UIColor(hex: "#000000")),

]// list of product for demo

@State var tapCounter: Int = 0

var body: some Scene {

WindowGroup {

ZStack {

webView.frame(width: 400, height: 400, alignment: .center)

VStack {

Spacer()

ScrollView(.horizontal) {

HStack(alignment: .bottom) {

ForEach(products, id: \.id) { product in

Button(action: {

webView.evaluateJS(command: "applyProduct('\(product.category)','\(product.name)')");//We add action to apply product

}, label: {

Text(" ")

})

.frame(width: 56, height: 56, alignment: .center)

.foregroundColor(Color.black)

.background(Color.init(product.color))

.clipShape(Circle())

}

}

.padding(.vertical)

}.background(Color.init(UIColor(red: 1, green: 1, blue: 1, alpha: 0.5)))

}

}

}

}

}

//We decide to use hex codes for product, UIColor is not supported by default. You can use below extension

public extension UIColor {

public convenience init(hex: Int, alpha: CGFloat = 1.0) {

let red = CGFloat((hex & 0xFF0000) >> 16) / 255.0

let green = CGFloat((hex & 0xFF00) >> 8) / 255.0

let blue = CGFloat((hex & 0xFF)) / 255.0

self.init(red: red, green: green, blue: blue, alpha: alpha)

}

public convenience init(hex string: String, alpha: CGFloat = 1.0) {

var hex = string.trimmingCharacters(in: .whitespacesAndNewlines).uppercased()

if hex.hasPrefix("#") {

let index = hex.index(hex.startIndex, offsetBy: 1)

hex = String(hex[index...])

}

if hex.count < 3 {

hex = "\(hex)\(hex)\(hex)"

}

if hex.range(of: "(^[0-9A-Fa-f]{6}$)|(^[0-9A-Fa-f]{3}$)", options: .regularExpression) != nil {

if hex.count == 3 {

let startIndex = hex.index(hex.startIndex, offsetBy: 1)

let endIndex = hex.index(hex.startIndex, offsetBy: 2)

let redHex = String(hex[..<startIndex])

let greenHex = String(hex[startIndex..<endIndex])

let blueHex = String(hex[endIndex...])

hex = redHex + redHex + greenHex + greenHex + blueHex + blueHex

}

let startIndex = hex.index(hex.startIndex, offsetBy: 2)

let endIndex = hex.index(hex.startIndex, offsetBy: 4)

let redHex = String(hex[..<startIndex])

let greenHex = String(hex[startIndex..<endIndex])

let blueHex = String(hex[endIndex...])

var redInt: CUnsignedInt = 0

var greenInt: CUnsignedInt = 0

var blueInt: CUnsignedInt = 0

Scanner(string: redHex).scanHexInt32(&redInt)

Scanner(string: greenHex).scanHexInt32(&greenInt)

Scanner(string: blueHex).scanHexInt32(&blueInt)

self.init(red: CGFloat(redInt) / 255.0,

green: CGFloat(greenInt) / 255.0,

blue: CGFloat(blueInt) / 255.0,

alpha: CGFloat(alpha))

}

else {

self.init(red: 0.0, green: 0.0, blue: 0.0, alpha: 0.0)

}

}

var hexValue: String {

var color = self

if color.cgColor.numberOfComponents < 4 {

let c = color.cgColor.components!

color = UIColor(red: c[0], green: c[0], blue: c[0], alpha: c[1])

}

if color.cgColor.colorSpace!.model != .rgb {

return "#FFFFFF"

}

let c = color.cgColor.components!

return String(format: "#%02X%02X%02X", Int(c[0]*255.0), Int(c[1]*255.0), Int(c[2]*255.0))

}

}

caution

Provide camera permission to capture photo

Result:

You can request sample project from here.