Skip to content

Commit 9605118

Browse files
committed
Freshness pass
1 parent 2f7b38d commit 9605118

File tree

1 file changed

+33
-30
lines changed

1 file changed

+33
-30
lines changed

articles/ai-services/immersive-reader/tutorial-ios-picture-immersive-reader.md

Lines changed: 33 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
---
22
title: "Tutorial: Create an iOS app that takes a photo and launches it in the Immersive Reader (Swift)"
33
titleSuffix: Azure AI services
4-
description: In this tutorial, you will build an iOS app from scratch and add the Picture to Immersive Reader functionality.
4+
description: Learn how to build an iOS app from scratch and add the Picture to Immersive Reader functionality.
55
#services: cognitive-services
6-
author: rwallerms
6+
author: sharmas
77

88
ms.service: azure-ai-immersive-reader
99
ms.topic: tutorial
10-
ms.date: 01/14/2020
11-
ms.author: rwaller
10+
ms.date: 02/28/2024
11+
ms.author: sharmas
1212
#Customer intent: As a developer, I want to integrate two Azure AI services, the Immersive Reader and the Read API into my iOS application so that I can view any text from a photo in the Immersive Reader.
1313
---
1414

@@ -18,31 +18,31 @@ The [Immersive Reader](https://www.onenote.com/learningtools) is an inclusively
1818

1919
The [Azure AI Vision Read API](../../ai-services/computer-vision/overview-ocr.md) detects text content in an image using Microsoft's latest recognition models and converts the identified text into a machine-readable character stream.
2020

21-
In this tutorial, you will build an iOS app from scratch and integrate the Read API, and the Immersive Reader by using the Immersive Reader SDK. A full working sample of this tutorial is available [here](https://github.com/microsoft/immersive-reader-sdk/tree/master/js/samples/ios).
21+
In this tutorial, you build an iOS app from scratch and integrate the Read API, and the Immersive Reader by using the Immersive Reader SDK. A full working sample of this tutorial is available [here](https://github.com/microsoft/immersive-reader-sdk/tree/master/js/samples/ios).
2222

2323
If you don't have an Azure subscription, create a [free account](https://azure.microsoft.com/free/cognitive-services/) before you begin.
2424

2525
## Prerequisites
2626

27-
* [Xcode](https://apps.apple.com/us/app/xcode/id497799835?mt=12)
28-
* An Immersive Reader resource configured for Microsoft Entra authentication. Follow [these instructions](./how-to-create-immersive-reader.md) to get set up. You will need some of the values created here when configuring the sample project properties. Save the output of your session into a text file for future reference.
29-
* Usage of this sample requires an Azure subscription to the Azure AI Vision service. [Create an Azure AI Vision resource in the Azure portal](https://portal.azure.com/#create/Microsoft.CognitiveServicesComputerVision).
27+
* MacOS and [Xcode](https://apps.apple.com/us/app/xcode/id497799835?mt=12).
28+
* An Immersive Reader resource configured for Microsoft Entra authentication. Follow [these instructions](how-to-create-immersive-reader.md) to get set up.
29+
* An Azure subscription to the Azure AI Vision service. Create an [Azure AI Vision resource in the Azure portal](https://portal.azure.com/#create/Microsoft.CognitiveServicesComputerVision).
3030

3131
## Create an Xcode project
3232

3333
Create a new project in Xcode.
3434

35-
![New Project](./media/ios/xcode-create-project.png)
35+
:::image type="content" source="media/ios/xcode-create-project.png" alt-text="Screenshot of the Create a new Xcode project screen.":::
3636

3737
Choose **Single View App**.
3838

39-
![New Single View App](./media/ios/xcode-single-view-app.png)
39+
:::image type="content" source="media/ios/xcode-single-view-app.png" alt-text="Screenshot of the template gallery to select a single view app.":::
4040

4141
## Get the SDK CocoaPod
4242

4343
The easiest way to use the Immersive Reader SDK is via CocoaPods. To install via Cocoapods:
4444

45-
1. [Install CocoaPods](http://guides.cocoapods.org/using/getting-started.html) - Follow the getting started guide to install Cocoapods.
45+
1. Follow the getting started guide to [install Cocoapods](http://guides.cocoapods.org/using/getting-started.html).
4646

4747
2. Create a Podfile by running `pod init` in your Xcode project's root directory.
4848

@@ -68,20 +68,20 @@ The easiest way to use the Immersive Reader SDK is via CocoaPods. To install via
6868

6969
## Acquire a Microsoft Entra authentication token
7070

71-
You need some values from the Microsoft Entra authentication configuration prerequisite step above for this part. Refer back to the text file you saved of that session.
71+
You need some values from the Microsoft Entra authentication configuration prerequisite step for this part. Refer back to the text file you saved from that session.
7272

7373
````text
7474
TenantId => Azure subscription TenantId
75-
ClientId => Azure AD ApplicationId
76-
ClientSecret => Azure AD Application Service Principal password
75+
ClientId => Microsoft Entra ApplicationId
76+
ClientSecret => Microsoft Entra Application Service Principal password
7777
Subdomain => Immersive Reader resource subdomain (resource 'Name' if the resource was created in the Azure portal, or 'CustomSubDomain' option if the resource was created with Azure CLI PowerShell. Check the Azure portal for the subdomain on the Endpoint in the resource Overview page, for example, 'https://[SUBDOMAIN].cognitiveservices.azure.com/')
7878
````
7979

80-
In the main project folder, which contains the ViewController.swift file, create a Swift class file called Constants.swift. Replace the class with the following code, adding in your values where applicable. Keep this file as a local file that only exists on your machine and be sure not to commit this file into source control, as it contains secrets that should not be made public. It is recommended that you do not keep secrets in your app. Instead, we recommend using a backend service to obtain the token, where the secrets can be kept outside of the app and off of the device. The backend API endpoint should be secured behind some form of authentication (for example, [OAuth](https://oauth.net/2/)) to prevent unauthorized users from obtaining tokens to use against your Immersive Reader service and billing; that work is beyond the scope of this tutorial.
80+
In the main project folder, which contains the *ViewController.swift* file, create a Swift class file called `Constants.swift`. Replace the class with the following code, adding in your values where applicable. Keep this file as a local file that only exists on your machine and be sure not to commit this file into source control because it contains secrets that shouldn't be made public. We recommended that you don't keep secrets in your app. Instead, use a backend service to obtain the token, where the secrets can be kept outside of the app and off of the device. The backend API endpoint should be secured behind some form of authentication (for example, [OAuth](https://oauth.net/2/)) to prevent unauthorized users from obtaining tokens to use against your Immersive Reader service and billing; that work is beyond the scope of this tutorial.
8181

8282
## Set up the app to run without a storyboard
8383

84-
Open AppDelegate.swift and replace the file with the following code.
84+
Open *AppDelegate.swift* and replace the file with the following code.
8585

8686
```swift
8787
import UIKit
@@ -135,7 +135,7 @@ class AppDelegate: UIResponder, UIApplicationDelegate {
135135

136136
## Add functionality for taking and uploading photos
137137

138-
Rename ViewController.swift to PictureLaunchViewController.swift and replace the file with the following code.
138+
Rename *ViewController.swift* to *PictureLaunchViewController.swift* and replace the file with the following code.
139139

140140
```swift
141141
import UIKit
@@ -369,13 +369,13 @@ class PictureLaunchViewController: UIViewController, UINavigationControllerDeleg
369369
})
370370
}
371371

372-
/// Retrieves the token for the Immersive Reader using Azure Active Directory authentication
372+
/// Retrieves the token for the Immersive Reader using Microsoft Entra authentication
373373
///
374374
/// - Parameters:
375-
/// -onSuccess: A closure that gets called when the token is successfully recieved using Azure Active Directory authentication.
376-
/// -theToken: The token for the Immersive Reader recieved using Azure Active Directory authentication.
377-
/// -onFailure: A closure that gets called when the token fails to be obtained from the Azure Active Directory Authentication.
378-
/// -theError: The error that occurred when the token fails to be obtained from the Azure Active Directory Authentication.
375+
/// -onSuccess: A closure that gets called when the token is successfully received using Microsoft Entra authentication.
376+
/// -theToken: The token for the Immersive Reader received using Microsoft Entra authentication.
377+
/// -onFailure: A closure that gets called when the token fails to be obtained from the Microsoft Entra authentication.
378+
/// -theError: The error that occurred when the token fails to be obtained from the Microsoft Entra authentication.
379379
func getToken(onSuccess: @escaping (_ theToken: String) -> Void, onFailure: @escaping ( _ theError: String) -> Void) {
380380

381381
let tokenForm = "grant_type=client_credentials&resource=https://cognitiveservices.azure.com/&client_id=" + Constants.clientId + "&client_secret=" + Constants.clientSecret
@@ -553,19 +553,22 @@ class PictureLaunchViewController: UIViewController, UINavigationControllerDeleg
553553
## Build and run the app
554554

555555
Set the archive scheme in Xcode by selecting a simulator or device target.
556-
![Archive scheme](./media/ios/xcode-archive-scheme.png)<br/>
557-
![Select Target](./media/ios/xcode-select-target.png)
558556

559-
In Xcode, press Ctrl + R or select the play button to run the project and the app should launch on the specified simulator or device.
557+
:::image type="content" source="media/ios/xcode-archive-scheme.png" alt-text="Screenshot of the archive stream.":::
558+
559+
:::image type="content" source="media/ios/xcode-select-target.png" alt-text="Screenshot of the simulator selection target.":::
560+
561+
In Xcode, press **Ctrl+R** or select the play button to run the project. The app should launch on the specified simulator or device.
560562

561563
In your app, you should see:
562564

563-
![Sample app](./media/ios/picture-to-immersive-reader-ipad-app.png)
565+
:::image type="content" source="media/ios/picture-to-immersive-reader-ipad-app.png" alt-text="Screenshot of the sample app with text to be read.":::
564566

565-
Inside the app, take or upload a photo of text by pressing the 'Take Photo' button or 'Choose Photo from Library' button and the Immersive Reader will then launch displaying the text from the photo.
567+
Take or upload a photo of text by pressing the **Take Photo** button or **Choose Photo from Library** button. The Immersive Reader then launches and displays the text from the photo.
566568

567-
![Immersive Reader](./media/ios/picture-to-immersive-reader-ipad.png)
569+
:::image type="content" source="media/ios/picture-to-immersive-reader-ipad.png" alt-text="Screenshot of the Immersive Reader app.":::
568570

569-
## Next steps
571+
## Next step
570572

571-
* Explore the [Immersive Reader SDK Reference](./reference.md)
573+
> [!div class="nextstepaction"]
574+
> [Explore the Immersive Reader SDK reference](../../reference.md)

0 commit comments

Comments
 (0)