The document provides an overview of building a .NET Core API to integrate with Google Cloud Firestore. It discusses moving from a two-tier architecture with the frontend directly accessing Firestore, to a three-tier architecture with a middle API tier. This improves scalability, maintainability and allows other clients beyond the web frontend. The speaker demonstrates creating the Firestore database, building the .NET Core API using the Firestore SDK, and updating the React frontend to call the new API instead of the Firestore JavaScript API directly.

1. Building a.NET Core API
using Google Cloud Firestore
Philly.NET Code Camp 2019.1 – April 13 2019
Microsoft – Malvern, PA
Mike Melusky - @mrjavascript

2. About Speaker
• Michael Melusky
• Software Developer at Audacious Inquiry in Baltimore, MD
• Professor at Penn State University
• Interests include grilling meat, meat smoking and BBQ

3. Topics
• Overview of what we’re building
• Introduce Google Cloud Firestore
• Integrate the Firestore API into the client-side code
• Build a .NET Core 2.1 API using Google’s Nuget package for Firestore
• Replace client-side calls to use the new API (and axios)
• Wrap up

4. Code is on github
• Web code: https://github.com/mrjavascript/phillynet_201901_web
• API code: https://github.com/mrjavascript/phillynet_201901_api

5. What are we building?

6. Basic front end application
• Starting with a basic web application
• Built using React, but can be done in Vanilla JS or using another
framework
• ** DEMO **

7. Google Cloud Firestore

8. Google Cloud Firestore
• Cloud Firestore is a NoSQL document database built for automatic
scaling, high performance, and ease of application development
• Meant to replace the real-time database engine in Google Firebase
• Can use it in web apps or native apps
• A number of SDKs available (JavaScript, C#, Java, Python, et al)

9. Google Cloud Firestore
• Can manage via web console: https://console.firebase.google.com
• Let’s create a database for our application
• ** DEMO **

10. Firestore JavaScript API

11. Firestore JavaScript API
• Currently our React app has data hardcoded (componentDidMount)
• Let’s change that to use FireStore for the data source
• JavaScript: npm install firebase@5.9.3 –save
• ** DEMO **

12. What else can Firestore do?

13. Firestore Web Hosting
• You can host your web app on Firestore
• Deploy using NPM:
• npm install -g firebase-tools
• firebase login
• firebase init
• npm run build
• firebase deploy --only hosting
• ** DEMO **

14. Two and Three Tier
Architecture

15. Two Tier Architecture
• Currently the application we have is considered two tier architecture
• The data tier is Firestore
• The presentation tier is React
• All business logic is written in the presentation tier

17. Two Tier Architecture
• Works fine if we’re only planning on developing a web application
• What about if you want to develop a native application:
• Mobile Devices (iOS and Android)
• Gaming Consoles (PS4 and XBOX One)

21. Some issues with this approach
• Lots of repeated code
• Everything is dependent on Firestore (single point of failure)
• How do we handle transactions? (ACID)
• How do we handle authentication?
• How about filesystem resources like image upload?

22. Solution
• Instead of using two-tier architecture, we should use three-tier
architecture
• The data tier can remain Firestore, but we’re introducing a middle
tier RESTful API (written using .NET Core)
• We take the business logic out of the presentation tier and transition
it to the middle tier
• This approach makes our presentation tier a thin client

27. Three tier architecture
• If we ever need to migrate from Firestore to another database engine,
you’ll only need to change the code in the API layer!
• Let’s look at the API and start integrating Firestore
• ** DEMO **

28. C# and Firestore

29. Firestore authentication
• With C# and the Firestore SDK, you need a private key from Google
to access the database
• You can generate one the application can use here:
https://console.cloud.google.com/projectselector2/apis/credentials
• Ensure that this private key does not get committed into source
control!
• ** DEMO **

30. Change the React app to use
the .NET Core API

31. Ajax and XML HTTP Request
• Currently the React application obtains data directly using Google’s
JavaScript API for Firestore
• We need to replace these calls to use our new RESTful API
• We can use any method in JavaScript to do this:
• XMLHttpRequest, jQuery and .ajax(), fetch API in ES6
• Since we’re using React, axios is an excellent option
• npm i axios
• ** DEMO **

32. Closing Remarks

33. Any questions?
• Thank you for coming
• Slides on SlideShare, code on Github
• @mrjavascript