Tutorials
No Results

Create Publication

We are looking for publications that demonstrate building dApps or smart contracts!
See the full list of Gitcoin bounties that are eligible for rewards.

Tutorial

Intermediate · 30 minutes

An iOS App Using Augmented Reality for Purchases

This tutorial teaches you the first steps in how to implement a transaction with the Algorand network on Xcode. The objective is first how to Install and use the Algorand Swift SDK Package on Xcode and how to implement an Ios Augmented Reality App using SwiftUI performing a transaction using the PureStake API and MyAlgo Wallet.

Requirements

Xcode 12 Developer Tools Download Here
Reality Composer (iPad / iPhone only) Download Here
Swift Algorand-Sdk Download Here
PureStake Account Create
TestNet Account See Tutorial
My Algo Algorand Wallet Create
To run this App you need:
iOS device with iOS 13 or later installed.
iOS device with an A9 chip or newer that will support AR.

Note: When you run the app, you will need to deploy it on an actual device as the simulators do not render AR well.

Background

Augmented reality let you build experiences like digital data, images and 3D on the physical world. And let humans interact with the digital and physical world.
With the increase of mobile devices, AR applications like Pokémon Go are developed for the individual consumer as well to the Business-to-business (B2B) market.
With the power of Algorand Blockchain Augmented reality experiences are more secure and profitable. Users can verify the authenticity of any purchase and the proof of ownership.

The PureStake API Service https://developer.purestake.io/
About the PureStake API: https://www.purestake.com/technology/algorand-api/
Code Samples: https://developer.purestake.io/code-samples
API Examples: https://github.com/PureStake/api-examples

Steps

1. Reality Composer

Reality Composer is an AR authoring tool that let you prototype and produces AR experiences directly in AR. You don’t need any code experience or 3D knowledge to start developing great AR experiences.
Integrated into Xcode turn AR experiences more powerful. Now, let’s start our AR experience.
Open Reality Composer, create a new project.
This tutorial uses Reality Composer from within Xcode. You can access the software by launching Xcode and choosing
Xcode -> Open Developer Tool -> Reality Composer.
EditorImages/2021/04/28 21:42/00openrealitWhite.png

EditorImages/2021/04/28 21:42/0openrealitWhite.png

2. Anchors

First, choose the type of Anchor for your AR experience.
EditorImages/2021/04/28 21:43/2newWhite.png

Second, save the project and change the project name. Anchor is set to horizontal, leave the rest of the settings at their default values for now.
EditorImages/2021/04/28 21:43/3renameWhite.png

Add your model to use as the anchor, give a name and scale the object.
EditorImages/2021/04/28 21:44/4addpizzaWhite.png

3. Frame Objects

In Reality Composer images are Frames. To insert an image to the scene click on the objects button at the top menu bar, and search for Frame and add the assets.
On the configure section, choose the image to import for each frame.
EditorImages/2021/04/28 21:44/6addframeWhite.png
Figure 3-1 Choose art Frame

On the configure section, choose the image to import for each frame, by clicking on the frame so a circle surrounds it, and under the configure section press the add image choose button and then import.
Repeat the process and then import the images for the buy button and the order placed.

EditorImages/2021/04/28 21:44/7sellectimageWhite.png
Figure 3-2 Import an image

You can check on GitHub the image add for Order Placed Here

EditorImages/2021/04/29 09:55/31renameWhite.png
Figure 3-3 All images
Now add the Sign and customize as you wish.

EditorImages/2021/04/28 23:52/6addSetaWhite.png
Figure 3-4 Choose the Sign

EditorImages/2021/04/28 23:52/6addSeta1White.png

Figure 3-4 Customize the Sign

4. Behaviors, Triggers and Actions

Using Behaviors we can interact with objects in Reality Composer scene.
First add a Behavior preset, by selecting the Behaviors panel in the top bar.

EditorImages/2021/04/28 21:45/8behaviorWhite.png

Second, click the plus button and select start hidden.
EditorImages/2021/04/28 21:45/9addbehaviorWhite.png

The Behavior preset give two components, a scene start trigger and an action sequence, where contains the affected objects that will get the Hide action.
EditorImages/2021/04/28 21:45/10triggerWhite.png

Change the Behavior preset name.
EditorImages/2021/04/28 21:46/11renamebehaviorWhite.png

“Explore the Reality Composer project available on Github (Here ), and get all the knowledge you need to develop your own.
You need to download the full project from Github. Open algoaugmentedReality on Xcode and select AlgoAugment.rcproject. Press the “Open in Reality Composer” button and explore the Behaviours panel.

EditorImages/2021/04/29 00:10/12sequence1White.png

The complete Behaviour animated sequence as followed.

EditorImages/2021/04/28 21:46/12sequenceWhite.png

5. Custom Buy Behavior

First, add a Behavior preset, by selecting the Behaviors panel in the top bar, and create a custom Behavior.
Second, add Trigger select Tap.
Third, add Action select notify. On the identifier give a name to be called by Xcode later.
EditorImages/2021/04/28 21:46/13pizzaactionWhite.png

6. Creating an AR Project with Xcode and ARKit

Now that we finish our Reality Composer scene, let’s start the first RealityKit project.
Open Xcode select a new project and create a new App.

EditorImages/2021/04/28 21:49/1firstIosWhite.png
EditorImages/2021/04/28 21:49/2firstiosWhite.png

Note: If you download the completed solution and you get a build error on compile that says error: loading(assetPath: "audio:com.apple.rc.audio.people.applause-fx-04/Applause%20FX%2004.caf")
Click on the play sound action in the RC editor for Behavior and download Applause FX 04.caf
EditorImages/2021/04/29 00:13/soundWhite.png

7. SwiftUI User Interface and Reality Kit

The ContentView
This first View is where we can run the full App. Here we create one more Stack for ARKit implementation.

struct ContentView: View {

    var body: some View {

        NavigationView {

            VStack(alignment: .center) {//vs1

                Image("augmenteAlgo")

                    .edgesIgnoringSafeArea(.top)

                    .frame(minWidth: 0, maxWidth: UIScreen.main.bounds.width)

                VStack(alignment: .center){

                    NavigationLink(destination: arView()) {

                        Image("go")

                    }

                }

                VStack(alignment: .leading) {//vs1

                    Text("3DLIFESTUDIO")
                        .font(.custom("Avenir-Bold", size: 10))

                        .foregroundColor(Color.gray)
                        .multilineTextAlignment(.leading)
                        .padding([.leading, .bottom], 10.0)
                }

                .frame(minWidth: 0, maxWidth: UIScreen.main.bounds.width)
                .edgesIgnoringSafeArea(.all)
                .background(Color.white)
            }
            .background(Color.white)
            .edgesIgnoringSafeArea(.all)

        }
        .navigationViewStyle(StackNavigationViewStyle())

    }

}

Here I set up a NavigationView with instance NavigationLink. The user can tap on the “GO” button and perform that navigation to “arView”.

EditorImages/2021/04/29 09:05/16contentviewWhite.png
Figure 7-1 Call to arView

The arView
In this Stack, we need to import RealityKit and add the following lines of code to the Struct.
The ARViewContainer is the core of any RealityKit Experience.

struct arView: View {

    var body: some View {
        return VStack {

            ARViewContainer().edgesIgnoringSafeArea(.all)

        }

    }

}

EditorImages/2021/04/29 09:19/17arviewWhite.png
Figure 7-2 Replace value for ALGOD_API_TOKEN

EditorImages/2021/04/29 09:22/173arviewWhite.png
Figure 7-3 Replace mnemonic and receiver address.

To be able to test the app need to add the following on the info.plist.
EditorImages/2021/04/28 21:50/18cameraWhite.png

8. Add Swift Algorand Sdk Packages

First “l like to thank Jesulonimi21 for the Swift Algorand-SDK.” Go to the following link and copy the main Branch.
https://github.com/Jesulonimi21/Swift-Algorand-Sdk
EditorImages/2021/03/28 00:44/3Git.png
Second, add the Swift Algorand-Sdk Package Dependency. Select Branch - main and hit the next button, you’ve successfully added the packages.
EditorImages/2021/04/28 21:51/4packageWhite.png
EditorImages/2021/04/28 21:51/6packageWhite.png

9. PureStake API Configuration

PureStake can easily get up and running on the Algorand Network. To know more check this link “https://developer.algorand.org/tutorials/getting-started-purestake-api-service/#1-create-a-purestake-api-account” a walkthrough for using the PureStake API to interact with the Algorand network.

First, need to set the PureStake API address and past your API key on the Token. Please don’t share your API Key.

import SwiftUI
import swift_algorand_sdk

struct fuelService: View {
    var ALGOD_API_ADDR="https://testnet-algorand.api.purestake.io/ps2"
    var ALGOD_API_TOKEN=Gs——————————————————“
    var ALGOD_API_PORT=""

Second, need to set the client,

 let algodClient=AlgodClient(host: ALGOD_API_ADDR, port: ALGOD_API_PORT, token: ALGOD_API_TOKEN)
  algodClient.set(key: "X-API-KeY")

10. Account Configuration

Also note use of the mnemonic from code is only for tutorial purposes and should not be done in production. Use a wallet to store private keys such as Algosigner, MyAlgo or Algorand Wallet or store in a secure storage area of the device. 
Don´t forget to use Algorand dispenser to add founds to your wallet.

First your mnemonic account,

 let mnemonic = "star star star star star star star star star star star star star star star star star star star star star star star star star”

Second your address Key,

let account = try Account(mnemonic)

 let senderAddress = account.getAddress()
 let receiverAddress = try! 
Address("KRRRRRRRRRRRRRRRRRRRRRRRRR")

11. ARKit and Algorand interaction

In the ARViewContainer we implement all the functionality. The State variables are the single source of truth for the view.
We provide the code that adds the Trigger to the “buy” Behavior. When the notification is set, the transaction starts.

struct ARViewContainer: UIViewRepresentable {

    @State var ALGOD_API_ADDR="https://testnet-algorand.api.purestake.io/ps2"
    var ALGOD_API_TOKEN="G----------------------------------"
    @State var ALGOD_API_PORT=""

    @State private var transactionIsShowing = false

    func makeUIView(context: Context) -> ARView{

        let arView = ARView(frame:.zero)

        let algoAnchor = try! AlgoAugment.loadRussPizza()

        let sunInfoAction = algoAnchor.actions.allActions.filter({$0.identifier == "buy"}).first
        sunInfoAction?.onAction = { entity in

            self.goTransaction()
            if transactionIsShowing == true {

                algoAnchor.notifications.showTransaction.post()
            }

        }

        arView.scene.anchors.append(algoAnchor)

        return arView
    }

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

    }

12. Create a transaction

The Transaction
If the transaction succeeds we send a notification to the scene.

func goTransaction()  {

    let algodClient=AlgodClient(host: ALGOD_API_ADDR, port: ALGOD_API_PORT, token: ALGOD_API_TOKEN)
    algodClient.set(key: "X-API-KeY")

    do {

        let mnemonic = "digital music music music crew review music unit finger music music music special music special review cost special music music music review review music music"


        let account = try Account(mnemonic)
        //all fine with jsonData here

        let senderAddress = account.getAddress()
        let receiverAddress = try! Address("ICUJJVODN5F6CYMRZYF4UJJV----------------------Y")


        algodClient.transactionParams().execute(){ paramResponse in
            if(!(paramResponse.isSuccessful)){
                print(paramResponse.errorDescription!);
                print("transaction OK!")
                return;
            }


            let tx = try? Transaction.paymentTransactionBuilder().setSender(senderAddress)
                .amount(1)
                .receiver(receiverAddress)
                .note("Swift Algo sdk is cool".bytes)
                .suggestedParams(params: paramResponse.data!)
                .build()


            let signedTransaction=account.signTransaction(tx: tx!)

            let encodedTrans:[Int8]=CustomEncoder.encodeToMsgPack(signedTransaction)



            algodClient.rawTransaction().rawtxn(rawtaxn: encodedTrans).execute(){
                response in
                if(response.isSuccessful){
                    print(response.data!.txId)
                    print("Sucess")
//
                    transactionIsShowing = true
//
                }else{
                    print(response.errorDescription!)
                    print("Failed")
                }

            }
        }

    } catch {
        //handle error
        print(error)
    }
    print("algo buy!")
}

//


   }

EditorImages/2021/04/28 21:52/22sucssesWhite.png

EditorImages/2021/04/28 22:18/23viewwhite.png

13. Complete arView code

struct arView: View {

    var body: some View {
        return VStack {

            ARViewContainer().edgesIgnoringSafeArea(.all)

        }

    }

}


struct ARViewContainer: UIViewRepresentable {

    @State var ALGOD_API_ADDR="https://testnet-algorand.api.purestake.io/ps2"
    var ALGOD_API_TOKEN="G----------------------------------"
    @State var ALGOD_API_PORT=""

    @State private var transactionIsShowing = false

    func makeUIView(context: Context) -> ARView{

        let arView = ARView(frame:.zero)

        let algoAnchor = try! AlgoAugment.loadRussPizza()

        let sunInfoAction = algoAnchor.actions.allActions.filter({$0.identifier == "buy"}).first
        sunInfoAction?.onAction = { entity in

            self.goTransaction()
            if transactionIsShowing == true {

                algoAnchor.notifications.showTransaction.post()
            }

        }

        arView.scene.anchors.append(algoAnchor)

        return arView
    }

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

    }


func goTransaction()  {

    let algodClient=AlgodClient(host: ALGOD_API_ADDR, port: ALGOD_API_PORT, token: ALGOD_API_TOKEN)
    algodClient.set(key: "X-API-KeY")

    do {

        let mnemonic = "digital music music music crew review music unit finger music music music special music special review cost special music music music review review music music"


        let account = try Account(mnemonic)
        //all fine with jsonData here

        let senderAddress = account.getAddress()
        let receiverAddress = try! Address("ICUJJVODN5F6CYMRZYF4UJJV----------------------Y")


        algodClient.transactionParams().execute(){ paramResponse in
            if(!(paramResponse.isSuccessful)){
                print(paramResponse.errorDescription!);
                print("transaction OK!")
                return;
            }


            let tx = try? Transaction.paymentTransactionBuilder().setSender(senderAddress)
                .amount(1)
                .receiver(receiverAddress)
                .note("Swift Algo sdk is cool".bytes)
                .suggestedParams(params: paramResponse.data!)
                .build()


            let signedTransaction=account.signTransaction(tx: tx!)

            let encodedTrans:[Int8]=CustomEncoder.encodeToMsgPack(signedTransaction)



            algodClient.rawTransaction().rawtxn(rawtaxn: encodedTrans).execute(){
                response in
                if(response.isSuccessful){
                    print(response.data!.txId)
                    print("Sucess")
//
                    transactionIsShowing = true
//
                }else{
                    print(response.errorDescription!)
                    print("Failed")
                }

            }
        }

    } catch {
        //handle error
        print(error)
    }
    print("algo buy!")
}

//


   }

EditorImages/2021/04/29 10:27/algopizzabuy.jpg

14. Github Project

Go to the following link and try the full project.
https://github.com/3dlifee/algoAugmentedReality.git

Thanks.

April 30, 2021