Web app development with Autodesk Forge Data Exchange and AWS Amplify

JOHN CLARK: Hello and welcome to our presentation. Thank you so much for taking the time today to learn about how to develop a mobile app with the new Forge Data Exchange and AWS Amplify. I am John Clark, senior partner solutions architect with AWS, and with me today is Enrico Chionna, BIM technology manager, also with AWS.

The key learning objectives we will cover today are understand the use of Autodesk Forge Data Exchange, integrate disparate data into a single application, build an application using AWS and Autodesk Forge, identify new use cases for Autodesk Forge Data Exchange.

Just a quick look at what will be demoing today is, this is a web application. In the main screen we have our Forge Viewer, which we'll be looking at a model of Revit. It's actually a data exchange from Revit.

On the left, we have a data exchange panel, which will list data exchanges that we'll be adding to our application. And on the right, we have a list of IoT devices, which will list IoT devices that have been mapped to our model. And in the center we have a device stats dialogue, which comes up when you click on an IoT device, which you can use to look at the status of any IoT device in real time.

Other components of the demo include dialogues for things like log in, log out, adding new models, adding new IoT devices, and Autodesk authentication, which we will also demonstrate. Next, I'll cover what is Autodesk Data Exchange and how does data exchange work with Forge API?

Forge Data Exchange enables you to share only the portions of your data that you need to share. It works with Autodesk 2023, Revit 2023, and Adventure 2023. Data Exchange is a new capability released by Autodesk in April of this year. Data Exchanges are built on the Forge Data platform, which means a lot of the same API features that are available through the Forge API are also available through the Data Exchange API.

In addition, data exchange works as a data layer in the saved file, which enables data to be exchanged between Autodesk and non-Autodesk applications. As an example, a typical Data Exchange workflow might start with Revit. A Revit file is stored in Autodesk Docs, which is part of Autodesk Construction Cloud. Here we can create data exchanges of the Revit model. Since Data Exchange is part of the Forge API we can reference information in the data exchange and consume it in our third party app.

In this case, we're using AWS Amplify to build our app around the Autodesk Data Exchange. With AWS Amplify you can build full stack web and mobile applications. Before we dive into the AWS Amplify and build our web application, let's get a full picture of what is AWS. AWS is essentially the most flexible and secure cloud and computing environment that gives you the most flexibility and security. Let me break that down into six categories.

Security. At AWS security is priority number one and supports 98 security standards and compliance certifications, and when you run on AWS you run in a shared security model where AWS takes care of security of the cloud and you take care of security in the cloud enabling you to put more emphasis on securing your sensitive data.

Cost optimized. No need to use capital expense on local hardware. Pay only for what you use. With having optimized security and optimized costs, AWS gives you the ability to innovate more quickly and more frequently than ever before. Plus, AWS is elastic. The system automatically scales up or down resources depending on the workload demands in real time.

You also have more flexibility with access to 200 or more AWS services supporting virtually any cloud workload or use case. Lastly, you can deploy your applications globally in seconds. Quickly and easily deploying your apps across 26 geos around the world, including 84 availability zones all running AWS's own multiple redundant fiber optic network.

Now, let's take a look at what AWS Amplify is. AWS Amplify provides tools to build, ship, and scale your app. Build is where you can quickly create and configure the back end of your app. Connect to the back end and to the front and the UI front end. Ship allows you to deploy your application in a matter of seconds and scale enables you to extend use cases with direct access to 175 or more features of the AWS CDK, which is the cloud development kit. For this discussion, we will mostly focus on the build aspect of our demo, but we will touch on all of these concepts as we dive into our demonstration.

For the build phase of the developing our Amplify app you create the back end using any combination of the Amplify CLI, Amplify Studio, and Amplify Libraries. Also, listed here are a number of features categories, which you can combine to support virtually any use case imaginable, such as analytics to create graphs and charts, predictions using machine learning, publish and subscribe, notification mechanisms, custom functions, and for the development of our demo, we are using authentication, graph GL API, and PubSub. We will demonstrate these shortly. AWS Amplify also supports a number of industry standard languages and libraries such as JavaScript, React, Next.js, Android, iOS, among others, as you can see here.

Now, let's discuss developing the back end of our AWS Amplify app. As mentioned, there are three aspects to building an app. You have a visual dev environment, Amplify Studio, a full dev ops stack, Amplify CLI, and access to 175 plus AWS resources, as we mentioned. With Amplify Studio you can configure the back end of your application visually from the AWS console. There you can model your data with GraphGL API and DynamoDB tables manage, manage user groups and file storage, and set up authentication.

A second way to develop the back end of your application is with the Amplify CLI, which again, is a full dev ops stack. With Amplify CLI you can model your data, manage users groups, set up authentication, everything we just discussed with Amplify Studio. In addition, with Amplify CLI you can transform your scheme definitions to GraphGL API and DynamoDB tables automatically. And it automatically generates back end code for Swift, Java and JavaScript, which you can easily consume. We will demonstrate these two important features of Amplify CLI.

For the UI development of AWS Amplify app we used a few components such as the Autodesk Forge Viewer, which is a WebGL-based JavaScript library for our 3D, and can also be 2D, data exchanges. The Forge Viewer works with a number of Autodesk applications such as AutoCAD, Fusion 360 and Revit, which we will demonstrate. It also is compatible with all modern browsers.

For the UI of our application, meet Cloudscape, which you can find at Cloudscape.design. You may notice the look and feel of the Cloudscape components to be familiar. This is because cloud scape was developed by AWS in 2016 and is still used today across many web applications owned by AWS and is now freely available as an open source design system. Also note that the AWS continues to enhance the system based on customer feedback.

For the design of our application, Cloudscape makes it very easy to add components and produce a consistent look and feel across the application. These are the main components we implemented for application such as app layout, top navigation, side navigation, help panel and others. Now that we have a good understanding of the three aspects to building an app with AWS Amplify, let's take a look at a simple use case for a demonstration.

You're an architect and you have designed this amazing school building. You design the building in Revit and manage the Revit files in Autodesk Construction Cloud. Now that the beautiful school building is built, the building manager is familiar with AWS Amplify has an idea to map the IoT enabled lights throughout the building and create a web app to visualize the location and status of each light in the building.

The building manager contacts the architect and asks, may I have a copy of the 3D design of the building so that I can map my IoT lights? The architect replies, well, I'm not able to provide the entire model due to its size and potential proprietary information, but I can provide a new feature from Autodesk called Data Exchange. Would that work? The building manager replies, absolutely. Yes. That will work perfectly for my app because I'm able to reference information in the Data Exchange through the Forge API.

So the architect creates a Data Exchange of the Revit model containing only the information the building manager needs. The URL of the Data Exchange is passed to the building manager. The URL is then entered into the web app where it is parsed and then Forge Viewer displays the Data Exchange in the web application. Now, Enrico will walk you through a quick demo of the app to give you some context as we discuss the details of the implementation following this quick demo.

ENRICO CHIONNA: Thank you, John. So we already built a web application that does this and we are going to show you how the end product looks like in this quick 3 minute video. So first, we're signing in the AWS application with email and password. Then we authenticate with Autodesk in order to access our data exchanges and models that are on ACC and BIM 360.

Now that we're back in our main application, we can select any model to view it in the Forge Viewer. From here, we can expand the device menu on the right to list all the IoT devices. In this case, lighting fixtures that have been mapped to our model.

Clicking on a device will open up a pop up showing that device statistics for the last 14 days. To add a new model, the user can click on a button and paste an invite URL from ACC. This will fetch the latest version of that model and add it to the app. We can now view the newly added model in the viewer, as well.

Because this model does not have any IoT devices mapped yet, we can map a series of new devices to specific model elements in the Forge Viewer. In this instance, we are mapping three different exterior lights. Every time a new device is added it's automatically reflected in the device list, as well as it's in the viewer.

The application should now be able to display real time device status updates. Now, to simulate this we can navigate to the app sync service in the AWS console. And after logging in as the user, we can trigger a mutation that changes the device status. In this case, we are changing the device status to off.

We can try again and this time, we change it to malfunction and we see that both the viewer and the device list are updated. Finally, when we are done working we can sign out and exit the application.

In this section, we will dive deeper into setting up a back end and integrating the back end with your React app. We will create a web app with a GraphQL API that stores and retrieves items in a cloud database. In addition, we'll demonstrate how to authenticate users, communicate with our API, and integrate with Forge. To design our app, we started from a wireframe mockup and then we went to a high fidelity version using Cloudscape design system.

For the front end our application will leverage react components from two different libraries. In red is the Amplify Authenticator. This component comes from the AWS UI library, which wraps the entire React app and protects it with its fully automated authentication flow. In blue are the components that use the Cloudscape design system library. These are components like the main app, top navigation, the app layout components. They are nested within each other and make up the entire application and set the feel and look of our app.

The way our application will interact with the Forge platform is via three different APIs. The Authentication API will be used to generate a 3-leg access token and authorize our app to act on behalf of the user. The viewer is then used to load and display a rigged model in our application and the Data Management API is used to retrieve the latest version of a model from BIM 360 or ACC.

The overall app architecture and development will work just like this. On one side, we have our users who interact with the client application while on the other side, we have developers. The developers install and configure the Amplify CLI, which initializes a new project and the can service in the AWS cloud. A new React app is then created and we set up Amplify in the front end. New AWS services are then gradually added via the Amplify CLI.

We will start with Amazon Cognito to manage our users, and then we will add a GraphQL API using AWS app sync, and create a database with DynamoDB. We then integrate the Forge API and then we go live with our application. For this, we will need to host and deploy the application using Amplify, which uses CloudFront and S3. We will perform this step at a later time.

Before we begin developing our application we need to make sure that we have the following installed. We need Node.js, Npm, and Git installed on our machine. If you don't already have an AWS account, you'll need to create one. There are no upfront charges or any term commitments and signing up gives you immediate access to the AWS free tier. We'll also need an Autodesk account, this is to access models on ACC, and a Forge account to access the API.

Five are the steps needed to create an Amplify project. First, we will need to install the Amplify CLI. Then we will configure Amplify. We will start a new React application. We'll initialize the Amplify project. And finally, we will set up Amplify in the front end.

Let's take a look at how the code looks like. So first, we will install and configure the Amplify CLI. With these two lines of code the CLI will guide you through the process of creating a new IM user that will be used by the Amplify CLI to add AWS services.

To set up the project, we'll first need to create a new React app using these three lines of code. And the result should look something like this. Now that we have running front end react up, it's time to set up Amplify back end with this one line of code. So we just run Amplify in it and then Amplify will prompt you for the name and a few other configuration settings. You can accept the defaults.

When you initialize a new Amplify project using the Amplify CLI, Amplify generates all this code for you. This is the back end of your application. This includes the Amplify back end definition. It also includes an aws-export.js that holds the configuration for the back end services. And lastly, it modifies the gitignore file, adding some generic files to the ignore list. Once again, this code is all generated for you by Amplify.

At the same time, a cloud project is created for you in the Amplify Console. In this case, we can access by running the command amplify console in the command line. The console provides a list of back end environments, deep links to provision resources for Amplify category, status of recent deployments and instructions on how to promote, clone, pool, and delete back end resources.

Our last step is to connect Amplify to our front end React app. This allows the client to interact with our backend services. All we need are these three lines of code and you can add them to your index file in your source directory. Here, we are importing Amplify and the AWS export and we use them to configure Amplify in our frontend. Once this connection is complete, future backend updates are automatically reflected through this setup.

Now that our React app is setup and Amplify's initialized, we are ready to add a new service such as Authentication and GraphQL API, as well as Forge in the next step. So next, we need to install the Amplify UI package. We'll use this library for our main app Authentication UI component.

We also need to install the following packages from Cloudscape. The global stats package will give our app a nice look thanks to its CSS. The components package contains all the React components to build our app user interface. And finally, the design tokens to apply Cloudscape styles to the Amplify UI component.

So to add authentication to our app the Amplify framework uses Amazon Cognito to create a fully automated authentication flow. This means that with a few lines of code we will have a professional web application capable of signing in, signing up, password recovery, and even email verification when a user registers. As a result of adding authentication, this is our web app now. Pretty awesome, right?

So let's see how it's done. To add Authentication, we simply ran amplify add auth in the command line. We then follow the prompts and choose email as our preferred sign in method. We then run the amplify push command, which deploys the code to our back end. And now the authentication service has been deployed and you can start using it. To view the deployed services in your project at any time you can go to your amplify console by running the amplify console command.

This will open up the console. Once we are in the AWS Console, our Amplify dev environment will look something like this. As you can see, our authentication services have been deployed. Now, if you switch to Cognito we see that there is a newly created user pool to manage all our users. If we take a look at the signing experience tab at the bottom, email is set as our sign in method just like we specified earlier in the command line.

Here, I'm showing you how we can add the fully automated authentication flow to our app in under three lines of code using the authentication component. We just need to import the Authenticator component from Amplify UI React package. Then input also, styles.CSS. We then wrapped the app function with the authenticator component and we're done.

The authenticator works seamlessly with the Amplify CLI to automatically work with your backend so no extra configuration is needed here. If we take a look at the application, now we should see how we went from the React app to our authenticated component. Now, the authenticator component is getting a React application and is ready to go.

One more step before we move on. Now that we have a fully automated authentication flow, we want to customize its look to match our brand and app identity. Since we are using Cloudscape as our primary design system, we want to apply the same primary color from Cloudscape to the Amplify UI component. To do so, we can create a custom theme object where we specify that the amplify primary color should be equal to the Cloudscape primary color. To do this, we are leveraging design tokens, which luckily both libraries use.

Finally, we need to pass the new theme object to the Amplify UI theme provider component, which wraps our main app component. This will apply the custom theme to all Amplify UI component. The final look of our authenticator is this, as you can see all primary colors, including the top font, the bottom background, and the forgot your password link. Match or react out primary color.

Now, let's move on to adding GraphQL API using Amplify. Now, throughout this next feature Amplify uses AWS app sync to create a GraphQL API and Amazon DynamoDB to create a NoSQL database. We'll see how to fetch models, create new ones, and subscribe to real time updates.

For this section, we only need four steps to set up a new API. First we create the API, then we edit its schema, we deploy the API, and then we connect it to the front end. So once again, just one line of code to create the API by running amplify add api and following the Amplify CLI prompts we can create these new services. We then select GraphQL and we give it a name. Finally, remember to say yes to edit the API schema now.

Once again, Amplify is doing the heavy lifting for you here and it's generating all the backend code. In this example, it created a dedicated API folder and updated the backend-config.json file. Now, Amplify also opened up the schema.graphql file for you. In order to set up our data scheme, we modified the template schema provided by Amplify to have two types, models and devices where one model can have many devices associated to it. With the @model directive, the CLI will scaffold out the necessary database in dynamioDB, the schema for crud and list operations, and the GraphQL resolvers needed to make everything work together.

The @ off directive allows you to set custom authorization rules. The @ has many since the one to many relationship between models and devices. Finally, at the bottom we created a custom subscription to receive real time updates for every time a device is updated. To deploy this app to the backend. Sorry, to deploy his API to the back end, we run the push command. Now, with the API live we can start interacting with it.

Once again, Amplify is generating more code for you and this time Amplify has generated all these code just for us. Let's take a look at what looks inside. You'll see here that the code generated by Amplify includes operations for creating, reading, updating, deleting, and listing models and devices, and even the code for subscribing to real time updates.

This is an example of how easy it is to call this API from our front end. The first code shows how you can get a list of all our models with only three lines of code. Use this to populate our list of models in the UI. The second code shows how we can fetch a list of devices that belong to a specific model. After a user has selected one, in this case, we are passing a model idea as a filter.

We use these to populate the device list in our application. Similarly with three lines of code we can create a new model record in our database. We use this when the user adds a new model via the dedicated button. We then do the same thing again when the user adds a new device using the device button.

Finally, we've registered a subscription from the client to listen to real time device state changes. We use these to update both our device lists and the viewer. To integrate Forge with our client we will be using its Authentication API and the Data Management API. so after logging into the Amplify app up, need to send the user to the desk authorization web flow using the three lag token with implicit grant. After the user signs in with Autodesk is then redirected back to our application with a URL that contains the access token. We need these access tokens to make any subsequent API calls to Forge.

To add a new model to the app the user needs to paste the Data Exchange URL that was shared by the architect. We then extract the projectID and entityID parameters from the URL and with this info, and then the axis token we can call the Data Management API to retrieve the latest version of that model as well as its name. This is a sample API response from Forge after getting the deep latest version of an item on ACC.

Then, to add the Model Viewer we leverage the Forge Viewer API and the Data Visualization Extension, which is used to overlay sprites representing IoT devices. This link points you to the Forge data visualization library that contains step by step instructions on how to implement the viewer in your application and show IoT devices using the extension.

If you are wondering how much this app costs, well, let's find out together. We have divided costs between producer of models and direct exchanges, AKA the architect, and the consumer, or the vendor. From the other side the architect will incurring cost associated with Revit and ASC licensing to design in Revit and to host the models in the OS Construction Cloud. No Forge costs here.

For the vendor there is no need to use Reddit, so no costs on the Revit side. They don't need a license because they can just access the project if they're invited to it and they will need to sign up for Forge. However, the four APIs that we have used in our app do not have any costs associated with it. So it should be free. From the AWS side, only the vendor will need an AWS account. The services used by this app are managed by AWS Amplify. However, when you use the amplified framework you pay only for the underlying AWS services you use or based on your free tier. There are no additional charges for using the Amplify framework.

And these are lists of useful resources for you to consult ranging from Autodesk Forge, to AWS Amplify, Cloudscape, and if you want to sign up for a free tier with AWS. This concludes our presentation. Thank you very much for your attention.