A Guide to Embedded App Development with Procore
Published: 2023-07-03 10:34:11

Now a day's, construction industry is undergoing a digital transformation, and various software platforms like Procore are leading the way in revolutionizing construction project management. With Procore's open API, developers have the opportunity to extend the platform's functionality by creating embedded apps. In this blog post we are going to discuss  about "World of Embedded app development with Procore", the development points, benefits etc. 

Before going in deep lets understand what is Embedded Application? -
	It’s a software or application that is designed and integrated into a larger system or device to perform specific functions. The term "embedded" implies that the software is embedded within the other application or firm of a device, rather than being a standalone application running on a general-purpose computer or device. 
	Embedded app have limited user interfaces, as they primarily focus on performing specific tasks behind the scenes. 
Now, we have some idea about Embedded application. Before starting  actual development on application; Let's more understand about Procore's API. I am going to tell you what user or developer need to do if you are going to develop embedded application for Procore. We will discuss all technical points required for app development. We will not discuss about theoretical sign off document and other process. 

**Setup Developer Account:** 
	As a developer you need to create signup to developer portal (https://developers.procore.com/signup) to build an application. 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9nynlovfwduqfxbdsobu.png)

	Once done with registration at developer portal. User or developer need to create new app at Procore development environment. Once developer creates app will get Procore Client ID, Client Secret, Sandbox environment and URL etc and access to the app page. These details are required for User/Developer for implementing authentication with Procore.

**Define Your App's Purpose:**
	Clearly define the purpose of your embedded app. Determine the problem it aims to solve or the specific functionality it should provide within the Procore ecosystem. Consider the needs of Procore users and identify gaps or opportunities where your app can add value.
	Our app purpose is simple, "Our application can be used by Procore user. To use the same; user or application user need to buy API key (or license)and utilize that key further in application". Here; we want the details of user who is going to utilize or installing our this application.  
**Plan your application:**
	Define your application architecture and workflow. Define the key functionality, features we are offering with application. Check out how our application will interact with Procore users and How app will integrate with Procore data. Draw some architectural diagrams and run all virtual use cases on it.
Review Procore's API Documentation: 
	To understand available end points, data model, authentication methods Thoroughly review Procore's API documentation. This documentation (https://developers.procore.com/documentation/introduction) will guide you in making API calls to fetch and manipulate data within Procore.  

**Build and Test app:**
	Start building you’re application as defined in Architectural diagram. Utilize all the end points API and stack to integrate app with Procore. Try to follow best practices provided by Procore to handle the data. Ensure the all functionality will be provided by your application as mentioned. 
	While building application; One point I noticed that We need to Embed this app inside Iframe. So, try to test and verify each single functionality will work under Iframe or not? User this url (https://iframetester.com/) to test your application under embedded app. 

**Handle Sign in With Procore:**
	If your application want the details of user who is trying to use our application or you are going to implement data connector app with in Iframe; then in such case - Developer need to implement Sign in With Procore functionality. To implement this functionality under I frame is quite difficult as -  Under Iframe Sign in with Procore page not loads.  I have implemented this functionality using window Pop up. (Means - once user click on Sign in button - one window popup loads with Sign in screen and once sign in complete, again redirected user to the main screen where he redirected.)


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lyrj9cmue0t70gp3wl2n.png)

**Client side storage not work:**
	Now a days most developers are using client side storage mechanism to store some key value. But this will not work here with Procore Embedded app as we are integrating our application inside Iframe. Client side storage not work in Iframe; if parent and child domain was different. It was because of cross origin policy. 
	I observed this issue while building our application, I tried almost all client side storage approaches () but not worked with Procore Embedded app. This is an important point each developer need to keep that in mind. 

**Submit Your App for Review:**
	Once your app is developed and tested, submit it to Procore for review. Procore has a review process to ensure that apps meet their quality and security standards. Provide all the necessary information about your app, including its purpose, functionality, and integration points with Procore.

This blog will provides a general overview of the process for developing embedded apps with Procore. It is essential to refer to Procore's official documentation and resources for detailed instructions and the latest information