DEV Community: Chloe Condon 🎀

Using the Gemini API on Cloud Run to Build a Chat Application

Chloe Condon 🎀 — Mon, 31 Mar 2025 14:40:26 +0000

(🎨 cover image created with Imagen 3 in Gemini!)

Welcome to my blog series on building with Google AI tools! In this post, we'll create a simple chat application powered by Gemini and hosted on Cloud Run. If you're experimenting with LLMs or are looking to integrate AI into your web apps- then you're in the right place. So, let's starting learning!

👩‍🏫 What are we building?

We'll build a web-based chat interface that connects to the Gemini API and returns conversational responses. Our app will run on CLoud Run, and we'll use Cloud Build and Artifact Registry to containerize and deploy it.

By the end of this tutorial, you'll:

Set up a Python web app that talks to the gemini API
Containerize your app using Docker
Deploy the app to Cloud Run using Google Cloud tools
Start thinking about how to integrate LLMs into your own projects

So, think less HAL, more SmarterChild. 🤖💬 Let's dive in!

📝 Prerequisites

To get started, you'll need to make sure you have:

A Google Cloud project
The gcloud CLI installed and authenticated
Docker installed
Vertex AI API enabled on your project
💻 Optional: Use Cloud Shell for a fully configured environment

⚙️ Step 1: Clone the Chat App Template

To get started, let's pull down a prebuilt Python Flask app:

git clone https://github.com/ChloeCodesThings/chat-app-demo
cd chat-app-demo

You'll see our app has:

app.py - Flask routes and Gemini API logic
index.html - A basic chat UI
Dockerfile - Instructions for how to build container

🐳📁 Step 2: Build the Docker Image with Cloud Build

First, you'll need to set some environment variables:

export PROJECT_ID=$(gcloud config get-value project)
export REGION=us-central1
export AR_REPO=chat-app-repo
export SERVICE_NAME=chat-gemini-app

Create the Artifact Registry repo:

gcloud artifacts repositories create $AR_REPO \
--repository-format=docker \
--location=$REGION

Then build and push the image:

gcloud builds submit --tag $REGION-docker.pkg.dev/$PROJECT_ID/$AR_REPO/$SERVICE_NAME

🚀 Step 3: Deploy to Cloud Run

Now deploy the app:

gcloud run deploy $SERVICE_NAME \
  --image=$REGION-docker.pkg.dev/$PROJECT_ID/$AR_REPO/$SERVICE_NAME \
  --platform=managed \
  --region=$REGION \
  --allow-unauthenticated \
  --set-env-vars=GCP_PROJECT=$PROJECT_ID,GCP_REGION=$REGION

You’ll get a URL like https://chat-gemini-app-xxxxxx.run.app. Open it to chat with Gemini!

🔎✨ Step 4: How the Gemini Integration Works

Let’s peek at the backend logic. In app.py, this is where the magic happens:

from vertexai.preview.language_models import ChatModel

def create_session():
    chat_model = ChatModel.from_pretrained("gemini-2.0-flash")
    chat = chat_model.start_chat()
    return chat

def response(chat, message):
    result = chat.send_message(message)
    return result.text

So, each time the user submits a message, our app will:

Start a new chat session
Send the message to the Gemini model
Return the response as JSON

🤸‍♀️ Ok, let's try it out!

Enter a question like:

"What is Google Cloud Platform?"

…and you’ll get a contextual, LLM-generated response.

🎯 What’s Next?

Yay- we did it! 🥳 This is just the beginning! In future posts, we’ll cover:

Enhancing the chat UI
Keeping sessions persistent
Using system prompts to shape Gemini’s responses
Securing your endpoints with Firebase Auth or API Gateway

🎊 Give yourself a high-five!
In this post, you learned how to:

Build and deploy a simple Flask chat app using Gemini
Containerize it with Docker and push to Artifact Registry
Deploy to Cloud Run with minimal config

Want to learn more? Here's a tutorial you can check out

Until next time, folks! -Chloe

Got Bots? 4: Making Bots with the Azure Portal

Chloe Condon 🎀 — Thu, 29 Jul 2021 21:42:49 +0000

Thanks to everyone who joined me live for my 4th episode of Got Bots? with the Microsoft Reactor last week. It was such a joy to have y'all give your bot suggestions for our Clippy bot, and taking your questions on bots!

If you missed the fun live, don't worry- you can watch the replay here, and in the embedded video below! 🤖⤵️

Pssst! 🙋‍♀️ If you've missed any previous episode, check out my Got Bots? series summary dev.to post to get caught up!

On this episode we cover:

3:55 Previously on... Got Bots? (a short recap)
9:40 A review of QnA Maker
10:46 Daniel joins the stream for a brief cameo!
20:40 We talk about my Azure Functions Turnip Timer!
25:13 Testing and training out QnA Maker bot
26:19 Selecting chit-chat for your bot
46:39 Follow-up prompts with QnA Maker!

Did you have fun? Thanks for joining me this month for Got Bots! Join me next month for Beep Boop: an AI/ML series (more details coming soon!)

Got Bots? 3: Making Bots with QnA Maker + Azure Bot Service

Chloe Condon 🎀 — Mon, 19 Jul 2021 23:40:06 +0000

Thanks to everyone who joined me live for my 3rd episode of Got Bots? with the Microsoft Reactor last week. Appreciate all of the folks who joined me live to build a Clippy QnA bot! 💛📎

If you missed the fun live, don't worry- you can watch the replay here, and in the embedded video below! 🤖⤵️

Pssst! 🙋‍♀️ If you've missed any previous episode, check out my Got Bots? series summary dev.to post to get caught up!

On this episode we cover:

2:53 Previously on... Got Bots? (a short recap)
9:11 What is QnA Maker, and who am I/why do I build bots?
17:44 Why built in chit-chat is important/useful when building bots!
24:45 How to get started building a bot with Azure QnA Maker
31:06 Populate our database with a PDF/Word Doc (try out these examples in our docs!)
34:59 I chit-chat about how great the Chit-Chat feature is. 🗣
46:26 I upload our PDF and ✨magically✨ create our knowledge base!
48:50 Testing our QnA bot and training the knowledge base.

// Detect dark theme var iframe = document.getElementById('tweet-1415370520888061955-483'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1415370520888061955&theme=dark" }

Did you have fun? check out Got Bots? 4 where I continue to work on our QnA Maker Clippy bot, and continue to test and add more to our knowledge base!

Got Bots?: A Weekly Bots Series with the Microsoft Reactor

Chloe Condon 🎀 — Thu, 15 Jul 2021 21:15:48 +0000

Have you ever wanted to learn about bots, but don't know where to start? 🤖 If you're looking for a fun, safe environment to ask questions and work through various projects, demos, examples, and free Microsoft resources- this show is for you!

Check out this series page, with links to summaries/timestamps, resources, and more! ⤵️

Got Bots Series Page!🤖💬

Join me, Chloe Condon (Senior Cloud Advocate on the Next Generation Experiences Team @ Microsoft) as I walk you through some of my favorite beginner projects to get started with building your own Twitter bots, chat bots, and more! This series will also cover beset practices when designing bots, and discuss the ethical choices you should consider while creating them.

Got Bots? 2: Making Bots with Azure Logic Apps

Chloe Condon 🎀 — Thu, 15 Jul 2021 00:43:11 +0000

Thanks to everyone who joined me live for our 2nd episode of Got Bots? with the Microsoft Reactor- I had a great time talking with y'all about Twitter bots, Azure Logic Apps, and discussing all the different ways to build a bot. 🤖 I'm so pleased with our final outcome: Bon Jovi Bot!

// Detect dark theme var iframe = document.getElementById('tweet-1413275719459688451-474'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1413275719459688451&theme=dark" }

If you missed the fun live, don't worry- you can watch the replay here, and in the embedded video below!

On this episode we cover:

2:15 Clippy Teams/desktop background! 📎
6:51 A quick recap on what we covered on episode 1 of Got Bots
12:10 I reference @jaydestro and how I originally learned about Azure Logic Apps on his show @azurefunbytes 📺 You can check out the original episode here, and check out the birth of the @TheBottFatherr LIVE!
12:45 Why I hate shirt bots, and why you should make sure your bots are ethical, kind, fair, and do not harass people.
16:45 I show a couple of my favorite bots that I originally built with Azure Logic Apps including Britney Bot and Shania Bot,
21:00 As promised, here are some Shania Twain bops: Man! I Feel Like a Woman (AKA "let's go girls), That Don't Impress Me Much, You're Still the One 🎶🤠🎸
25:25 I start building a Bon Jovi bot using Azure Logic Apps!
28:23 A sneak peek of how Britney Bot was made behind-the-scenes in the Azure portal
31:11 I mention a talk that I gave called at POWERful Devs conf called How to Make AI Feel Less Like Sci-Fi with AI Builder
44:34 Spin up a Logic App
1:14:06 It's alive!! 🥳 @bonjovibott tweets live using our Azure Logic App!

// Detect dark theme var iframe = document.getElementById('tweet-1413275719459688451-77'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1413275719459688451&theme=dark" }

Did you have fun? Check out Got Bots? 3: Making Bots with Logic Apps where I make a bot with QnA Maker!

Got Bots? 1: Intro to Bots & Ethical Bot Creation

Chloe Condon 🎀 — Thu, 08 Jul 2021 21:24:15 +0000

Thanks to everyone who joined me live for our 1st episode of Got Bots? with the Microsoft Reactor- it was so much fun to chat with y'all, share bot knowledge, and swap stories of the early days of AOL bots. 🤖

If you missed the fun live, don't worry- you can watch the replay here, and in the embedded video below!

On this episode we cover:

5:35 How I got started with bots (the birth of Shania Bot 🤠🎶)
9:26 Special guest, and co-creator of the Diva Bots Pj Metz joins the show! We chat about Azure Logic Apps
14:35 We touch briefly on Azure QnA maker, as well as my Wine Bot post on Dev.to 🍷
17:15 Pj and I chat about Shania Bot, BotianaGrande, Mechanical Carey, JustBotPaid, Britney Bot, and more of our favs! 🎶
24:21 We throw it back to the OG bot: SmarterChild!
29:00 I mention my pal Ben Parr and his company Octane AI
29:40 Virtual Tinkerbell meet & greet?! 🧚🏼😱
36:00 I mention The Bot Father himself, @jaydestro! Check out our episode where we chat all about Azure Logic Apps and build THE Bot Father!
41:06 A personal story about ethical bot creation (and shirt bots- ugh 😒😒😒)

Did you have fun? Check out Got Bots? 2: Making Bots with Logic Apps where I take your questions and spin up some fun bots with Azure Logic Apps- see ya then, and happy botting!

Using the Microsoft Face API, Spotify, and Azure Functions to get emotional

Chloe Condon 🎀 — Thu, 26 Nov 2020 01:22:37 +0000

Hey pals! This blog post was written in collaboration with Natalie Huang, a student in our 1st Azure Functions cohort of Bit Project's BitCamp. Below is the blog post tutorial she created showcasing the amazing new Azure Functions skills she used during the program. Natalie now works as an instructor for incoming Bit Project cohorts (while attending college- you can check out one of our lectures together here 🤩), and I could not be more proud of the work they has done this year! Enjoy Natalie's tutorial below!

You can get started with some free Microsoft Learn tutorials and follow along with Natalie at http://aka.ms/bitcampfunctionsnatalie

💕 -Chloe

Ever looked at your face and wondered how you were feeling? No? Neither have I, but lucky for the both of us, the Microsoft Face API can do exactly this. In this series, I’ll be outlining the process of building an app that recommends songs based on a picture(tagline: Upload a selfie. We choose the songs). The user will login to Spotify, upload a picture of themselves, and receive a customized playlist that (hopefully) matches their current mood. Here's a basic flowchart of our final project:

In Part 1, we’ll be focusing on the centerpiece: deciphering the user’s face.

We'll be using Azure Functions in this project. If you're unfamiliar, Azure Functions allows you to write and deploy serverless code without having to manage infrastructure. It incorporates a variety of triggers that allows your function to run on-demand in response to a variety of events. Here are a couple common triggers:

HTTP Trigger (today's star <3)
Timers Trigger(runs on a timed bases: daily, weekly, etc)
Blob Trigger(when a file is added to Azure Blob storage)
Cosmos DB Trigger(when data is added to Azure Cosmos DB)
Storage queue Trigger(when a message is submitted to the storage queue)

To familiarze yourself with the different types, I'd recommend trying out this Microsoft module, which runs you through some basic examples.

Creating a Face API Subscription

We'll be using the Microsoft API to extract data on a person's emotions from a picture. The Face API is a cognitive service that provides algorithms for identifying/detecting faces and analyzing attributes of faces in images. For more information, check out the API documentation and tutorials here. First step is to get an actual Face API endpoint. This can be done easily in the Azure Portal: Go to Create a Resource, press the AI + Machine Learning tab on the left, and select Face.

Deploy your resource, and save your endpoint!

Creating an Azure Function

It's time to create our Azure Function- I'm just using the Azure Portal, but those who prefer Visual Studio Code can refer here. In the portal, select Create a Resource **and then press **Function App. Select a Resource Group(mine uses the same one as the Face API resource) and give the app a unique name. For runtime stack, select Node.js and Version 12. For region, choose one near you.

Go to Hosting.

Select or create a new storage account to be linked to this function app. Select your operating system and the consumption plan.

Go to Monitoring.

Enable Application Insights.

Review + create your app! Once it's deployed, return to the Portal homepage and click into your newly deployed Function App. In the app service, click the Functions in the left tab(has the little fx symbol).

Now that our Function App exists, we can create an actual function.

Your functions page should look something like this, but empty. To create a function, click the +Add button and select HTTP trigger. Set your authorization level to function if you want to force the caller to provide a key, and anonymous if not. (Mine is currently anonymous).

Wait for the function to deploy, then click into the Code + Test tab and go to your index.js file.

Replace the code with this:

This code is triggered by an HTTP request and parses HTML multipart data(our image!) with the help of the extremely helpful parse-multipart library. We're then calling the Face API in the function analyzeImage using the subscription key and endpoint from earlier, passing in our parsed image. This uses the request-promise library, which is basically request but with Promise support, which we require in our async analyzeImage function. Using JSON.parse(), we return the body in a JSON format.

var multipart = require("parse-multipart");
var request = require('request-promise');
var util = require('util');

module.exports = async function (context, req) {
    context.log('JavaScript HTTP trigger function processed a request.'); 
    // encode body to base64 string
    var bodyBuffer = Buffer.from(req.body);

    var boundary = multipart.getBoundary(req.headers['content-type']);
    // parse the body with parse-multipart
    var parts = multipart.Parse(bodyBuffer, boundary);

    //calls a function that calls the Face API
    var result = await analyzeImage(parts[0].data);

    //stick the data returned into our http response!
    context.res = {
        body: {
            result
        }
    };
    console.log(result); 
    context.done();  
};

async function analyzeImage(byteArray){

    const subscriptionKey = 'YOUR KEY';
    const uriBase = 'YOUR ENDPOINT' + '/face/v1.0/detect';

  //Face API params
    const params = {
        'returnFaceId': 'true',
        'returnFaceAttributes': 'emotion'
    };

    const options = {
        uri: uriBase,
        qs: params,
        body: byteArray,
        headers: {
            'Content-Type': "application/octet-stream",
            "Ocp-Apim-Subscription-Key": subscriptionKey
        }
    }
    let jsonResponse;

    await request.post(options, (error, response, body) => {
        if (error){
            console.log('Error: ' + error);
            return;
        }

        jsonResponse = JSON.parse(body);   
    });
    return jsonResponse;

}

Here's an example of the JSON response returned for this image:

{
  "result": [
    {
      "faceId": "89afb8d2-500f-4f02-8863-8278fe5f47a2",
      "faceRectangle": {
        "top": 268,
        "left": 338,
        "width": 270,
        "height": 270
      },
      "faceAttributes": {
        "emotion": {
          "anger": 0,
          "contempt": 0,
          "disgust": 0,
          "fear": 0,
          "happiness": 1,
          "neutral": 0,
          "sadness": 0,
          "surprise": 0
        }
      }
    }
  ]
}

Apparently I'm 100% happy. yay.

Creating a Test HTML Webpage

Yay! We pretty much have everything we need to detect emotion in a face! We're going to test this out with a simple HTML webpage, though the actual frontend of our project will be a React App that we make later.

Here's the sample HTML webage with a HTML form(ft absolutely nonexistent styling)...

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>Azure App Service - Sample Static HTML Site</title>

  </head>

  <body>

    <div class="navbar-wrapper">
      <div class="container">
          <h1>Test your Function!</h1>
          <hr/>
      </div>
    </div>

    <!-- Wrap the rest of the page in another container to center all the content. -->

    <div class="container">
      <script>
      var loadFile = function(event) {
        var image = document.getElementById('output');
        image.src = URL.createObjectURL(event.target.files[0]);
      };
      </script>
      <form id="myform" onsubmit="event.preventDefault(); handle(event);" enctype="multipart/form-data">
        <div class="form-group">
          <label for="file"> Upload a Face Image File:</label>
          <!--<input type="file" name="file" id="file" class="form-control-file" /> -->
          <input type="file"  accept="image/*" name="image" id="file" onchange="loadFile(event)"/>
          <img id="output" width="200" /></p>
        </div>

        <button type="submit" class="btn btn-secondary btn-sm">Submit</button> 
        <button class="btn btn-secondary btn-sm" id="clear" onclick="event.preventDefault();clearForm()">Clear</button>
      </form>

      <hr/>

      <div id="emotion"></div>

    </div>

    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>
    <!-- <script src="js/bootstrap.min.js"></script> -->
    <script src="app.js" type="text/javascript"></script>
  </body>
</html>

...and the corresponding js file(called app.js).
Inside the app.js file, the handle(event)function is called upon form submission, and makes an http post call to your Azure Function with the submitted image in the body. Make sure you replace the url with your own Function url, and the key with your Function key.


function handle(event){

    event.stopPropagation();
    event.preventDefault();
    console.log('---- handle ---');

    var myform = document.getElementById('myform');

    console.log('---- myform ---'+myform);
    var payload = new FormData(myform);
    console.log('---- handle completed---');

    $.ajax({
        type: "POST",
        url: "YOUR FUNCTION URL HERE",
        crossDomain: true,
        data: payload,
        contentType: false,
        processData: false,

        //INCLUDE THIS HEADER IS YOUR FUNCTION IS NOT AUTH-LEVEL: ANONYMOUS, AND STICK YOUR FUNCTION KEY INSIDE
        headers: {'x-functions-key': 'YOUR FUNCTION KEY'},

        success: function (resp) {
            console.log(resp);
            var data = JSON.parse(resp);
            console.log(data.result);

            data = data.result[0];
            console.log(data);
            var emotion = data.faceAttributes.emotion;

            var resultString = `

            <h3>Emotions in the image:</h3><br />
            <p>anger: ${emotion.anger}</p>
            <p>contempt: ${emotion.contempt}</p>
            <p>disgust: ${emotion.disgust}</p>
            <p>fear: ${emotion.fear}</p>
            <p>happiness: ${emotion.happiness}</p>
            <p>neutral: ${emotion.neutral}</p>
            <p>sadness: ${emotion.sadness}</p>
            <p>surprise: ${emotion.surprise}</p>
            `;

            $('#emotion').html(resultString);
        },

        error: function (err) {
            console.log('---ERROR: '+err);
        }
    });
}

function clearForm(){
    document.getElementById('myform').reset();
    document.getElementById('emotion').innerHTML = '';

}

You can deploy this html page however you like- I'm just doing it with the live server extension in Visual Studio Code like so:

The final step for this test to work is to allow this HTML page to interact with your function through CORS. CORS, aka Cross-origin resource sharing, allows whatever domains our web application will be hosted on to access resources from another domain (in this case, we need access to our Azure Function). Go to your App Service resource(not the individual function) and click the CORS tab on the left side. Add your http: url to the allowed origins (this works with local hosts and live servers).

Run your HTML page, upload a file, and have fun seeing the results!

Check out the range in her face!!

Building a Heart Rate Monitor with Azure IoT Hub

Chloe Condon 🎀 — Mon, 31 Aug 2020 17:31:52 +0000

If you've ever built an IoT project from scratch, then you know how difficult it can be to start. From acquiring the right hardware, to choosing the right tools, to testing out compatible APIs- getting started with IoT can sometimes make you want to throw your computer across the room... 😖

Lucky for you- Beau Hayes-Pollard (Brookline High School, Class of 2022 🎓) has gone through all that for you and has created this amazing tutorial for his HeartRate Monitor with Azure IoT Hub!

While working as a mentor with the most recent cohort of students in BitCamp, I had the pleasure of watching Beau go through the high-highs and low-lows of debugging + troubleshooting how to make his very first IoT hardware project. 🤩 This project uses Azure IoT Hub to trigger an Azure Function when a resting heart rate above 100 bpm is detected. The function uses the Twilio API to send a warning message to the user's inputted contacts, ensuring that appropriate actions can be taken quickly. Beau got a chance to learn about technology and build his own ingenious, cheap, and easy-to-use health monitoring tool through the BitCamp program.

Lucky for you- Beau made a tutorial, so you don't have to start from scratch to build this project on your own! So, get that heart rate up, and enjoy building and testing this fabulous IoT Heart Rate Monitor tutorial- happy coding y'all! 💙:

IoT Heartrate Monitor using Azure Applications (with ESP8266 and HR Sensor)

For this project, I wanted to create an easy-to-use, efficient, and cheap solution to an expensive Hospital Quality HR Monitor. This device would be so unbelievably simple, even your grandma and grandpa could use it. However, the setup process is a bit more rigorous so make sure you have enough snacks. This tutorial will be split into a few different parts: #1 The hardware: connecting wires, plugging in cables, and debugging. #2 The software: setting the hardware up using the Arduino IDE and programming the ESP8266 (a Wi-Fi microchip) to connect to the Azure IoT Hub. Lastly, #3 Azure: connecting the Azure Applications to each other (i.e. IoT Hub → Event Grid → Event Subscription → Logic App (basically an Azure Function) → Twilio API).

Prerequisites

Before we get started, make sure you have the following: an azure subscription, you can make one for free. This will allow us to use server-less applications and run our program in the cloud. Secondly, make sure you have the following hardware: Adafruit Huzzah Feather (ESP8266), Breadboard Cables, and a DFRobot HR Sensor. Although you don't need to have the exact replicas, make sure your hardware is somewhat similar. Lastly, make sure you download the Arduino IDE and this ESP8266 Driver (your Huzzah/ESP8266 won't connect without it 🤗).

Connecting the Hardware

After you have unboxed all your packages and remembered to pop the bubble wrap, you will need to connect the DFRobot HR Sensor to the Huzzah. You will then have to connect the Huzzah to a power source (in this case, a computer so we can flash code onto it!) To do this, you will want to connect the three-prong cable (included with the HR Sensor) to 3 different breadboard cables. Then attach those breadboard cables to specific ports on the Huzzah. The three-prong cable is universal so it doesn't matter which breadboard cable you plug into which socket!

The names of the ports are the 3v3, GND, and A0/ADC. If you are having trouble finding them, I have attached a image of the Huzzah wiring here. If you are having issues, think of it as the 2nd, 4th, and 5th port on the reset button side of the Adafruit Huzzah Feather. Once your HR Sensor and Huzzah are connected, simply plug in your Huzzah to your computer with a micro USB cable. When everything is done, open up the Arduino IDE and make sure you install the driver (ESP8266 Driver) for compatibility between devices!

Coding the Software

You should already have the ESP8266 driver installed (link above) and Arduino IDE (also linked above) ready to go. The first thing you need to do is open up the Arduino IDE and open up the files linked in the GitHub. Once the files have been opened, you should see a file called config.h. In there, you should change the following: your WIFI SSID, WIFI PASS, and CONNECTION STRING. Your SSID and PASS are just the username and password for your home Wi-Fi. Make sure your internet doesn't have any extra steps (e.g. account login, redirect) To find your connection string, you must create an Azure IoT Hub. If you have trouble, check out this helpful article. Once you have created an IoT Hub, follow these steps to find your connection string. Go to the Azure Portal and find your IoT Hub. On the left side, you should see Shared Access Policies. Then click on Service and you will see four strings. The string titled Connection String -- Primary Key is the one you will want to copy and paste. Make sure you don't share your connection string, it is super important!

After you have finished configuring your config.h, you should have four different files named config.h, iothubClient.ino, main.ino, and message.ino opened. To flash your program to the ESP8266/Huzzah, verify your code and press the upload button in the top left corner. Before we do this, lets set up the rest of our Azure Applications! Below is an appropriate state of the system moving forward:

Finalizing Azure Applications

You're on the final stretch! There are only a few more things we need to do. We are gonna start off by creating a Logic App. Azure Logic Apps allow us to use triggers to call actions like reading an email, interacting with a database, and sending a text message. The first step is to create our own logic app. Follow this tutorial until you have to set a trigger. For our project, we will be using HTTP Requests. An HTTP request is just a format for requests and responses between a client and a server, passing data across components.

Once your logic app is setup, go to the logic app designer and create a new trigger. You should see the trigger When a HTTP request is received. After selecting it, you will see a box for Request Body JSON Schema. In the GitHub repo, you should see a folder called JSON. Open up the file called package.json and copy the code. Then click the blue text called use sample payload to generate schema. Paste the code and press done. If you get an error, try using the backup.json file. Next, create an action for your trigger. For this project, we need to use the Twilio API. Twilio is a messaging API that allows us to send SMS messages when our HTTP request is triggered. If you have any trouble making an account and linking your ID and TOKEN, follow this tutorial.

If everything went smoothly, you should now have a fully functional Azure Logic App that sends an SMS when an HTTP request is triggered! Lastly, we need to create an event subscription in our IoT Hub. This basically monitors incoming data and reacts to it. In this case, we want it to trigger the HTTP request using a webhook. Before we setup the event subscription, we need the HTTP Post URL. You can find this by opening your Logic App Designer and clicking on your trigger. Copy the link at the top and save it for later! Return to the Azure Portal and locate your IoT Hub. Once you're in your IoT Hub, go to Events and click New Subscription. Create a name, make sure the Event Schema is set to Event Grid Schema, and the filter is set to Device Telemetry. For the final step, set the Endpoint Type to Webhook and paste in the link you copied earlier. When you are finished, press Create.

Congratulations, you finished. Flash your Huzzah, do some jumping jacks, and give yourself a huge pat on the back! 🥳

Get Inspired By These BitCamp Final Projects by High School Students!

Chloe Condon 🎀 — Thu, 13 Aug 2020 04:11:16 +0000

This Summer, BitProject launched their very first BitCamp with 8 talented high school students from across the United States. BitCamps are 5-8 week software engineering bootcamps for high school and college students who want to explore various careers in tech. Students work with mentors from prestigious institutions and seasoned engineers from the industry to learn about cutting edge technology, and I had the pleasure to help support this most recent BitCamp with their Azure Functions projects thanks to a partnership with Microsoft!

From Heartbeat Monitors using Azure IoT Hub, to Song Recommendation Engines using Azure Cognitive Services, each student has published a step by step tutorial that you can walk through yourself.

I could not be prouder of our BitCamp students- and I'm so excited to see such creative projects and tutorials using Azure Functions and other Microsoft technologies- way to go team! 🥳 It's been incredible to watch these students from all over the United States learn together remotely. It's been such a pleasure to what them grow their computer science skills in just a couple weeks!

Wanna check out their presentations, LIVE? Check out the recording here

HeartRate Monitor with Azure IoT Hub

Beau Hayes-Pollard

Brookline High School, Class of 2022

As Beau loves to demonstrate, you can get your heart rate up in a hurry with just a few jumping jacks. Keeping track of this is exceptionally helpful to those working out or going about their day, as is demonstrated by the rise of FitBits and other tools in the space.

This project uses Azure IoT Hub to trigger an Azure Function when a resting heart rate above 100 bpm is detected. The function uses the Twilio API to send a warning message to the user's inputted contacts, ensuring that appropriate actions can be taken quickly. Beau got a chance to learn about technology and build his own ingenious, cheap, and easy-to-use health monitoring tool through the Bit Heroes program.

Upload Your Face. We pick the songs.

Natalie Huang

Los Altos High School, Class of 2020

If you've ever considered how a mood can change your music tastes, we wanted to use that to create an exciting software development experience. Natalie built an app that recommends songs based on a picture (tagline: Upload a selfie. We choose the songs).

This app allows users to submit a picture of their face and analyze their current mood. Based on their mood, it will recommend 10 personalized songs, and optionally create a playlist in the user’s Spotify account. Taking advantage of both the Microsoft Face API and the Spotify API, this was a truly impressive project!

Taking Control of Information Accountability with Azure Functions

Jesse Lee

Dougherty Valley High School, Class of 2022

In scrolling through social media feeds, online news articles, and an occasional high-quality technical blog post, you might ask yourself many questions about the quality and source of the material you're consuming. What is biased and how can I know what I'm reading is fair?

Jesse created a Chrome Extension that analyzes the sentiment, difficulty of reading, and political bias of an article using Azure Functions and the Microsoft Text Analytics API. Additional features include the option to find related articles, and a graphical display of the left/right bias throughout the articles.

Scheduling Bot

Meghna

Maine West High School, Class of 2021

The Scheduling Bot Meghna created doubles as a great conversationalist and organizer, allowing you to monitor daily events and appointments with ease. The Bot will ask you routine questions to demonstrate its interest in your life while keeping track of relevant events, reminders, and happenings behind the scenes. In the days/hours leading up to your scheduled events, the Bot will send you text reminders.

There are three components when creating this Bot - the actual Bot itself, a Web App, and the Azure Function that supports it. The Azure Bot has the key questions which it will ask the user when prompted, and being a web app allows it to store the information in a database. The API's three parts allow it so save, retrieve, and mark data as completed when appropriate. Lastly, the Azure Function periodically runs through the database to see if a reminder needs to be sent out to a user.

Overall, the Bot increases efficiency and productivity for the better, and makes planning your day effortless.

Emotional Analysis with Azure Functions

Lisa Leung

Monta Vista High School, Class of 2021

The Emotion Analyzer Tool is a Chrome extension that allows a user to upload an image of a person and receive a general summary of the person’s emotion. After a photo is uploaded through the extension, an HTTP request triggers an Azure Function that utilizes the Microsoft Face API to analyze the age, gender, and smile intensity of the person in the photo.

Lisa leveraged the full power of the Microsoft Face API with this amazing and convenient extension, and now you'll be able to find the perfect pictures to post!

Azure Saves the Day for Bit Heroes Call Center

Shreyan Mayukh Mitra

Adrian C. Wilcox High School, Class of 2023

Handling logistics in any context can be challenging, but Shreyan wanted to bring order to the chaos of call centers.

This app uses a web form to simulate data from a call center and trigger HTTP requests to Azure. Azure Logic Apps and Azure Blob Storage then send an email with all the relevant information and attachments. The webform can hold many different statistics and data about a specific call center, depending on the parameters set by the user, and is flexible too many environments.

Wanna check out their presentations, LIVE? We'll be hosting their presentations with the world on 8/13 in a livestream on Twitch and YouTube- JOIN US and RSVP here! 👉 http://tinyurl.com/bitazure

Using Cognitive Services and Mario Kart to Create "Astrology" with Chloe Condon

Chloe Condon 🎀 — Thu, 23 Jul 2020 11:57:52 +0000

Chloe Condon is a Cloud Advocate at Microsoft. Before attending Hackbright Academy and making the career switch into tech, she spent her nights and weekends on-stage as a musical theatre actress. She is passionate about bringing folks with non-traditional and creative backgrounds into technical spaces, and loves to find ways to teach and demo technical examples in quirky and humorous ways.

Have you ever wanted to learn more about cognitive services, but don’t know where to start? Then this is the talk for you! I’ll walk you through how to make your own “astrology” using images of cosplay characters, and share my story of how I created my own horoscopes with Mario Kart players- watch out for any stray banana peels! 🏁🍄⭐️🐢🍌

Here is a download link to the talk slides (PDF)

This talk will be presented as part of CodeLand:Distributed on July 23. After the talk is streamed as part of the conference, it will be added to this post as a recorded video.

Building an Animal Crossing Turnip Timer! [video]

Chloe Condon 🎀 — Tue, 21 Jul 2020 20:53:47 +0000

Have you started playing Animal Crossing New Horizons on your Nintendo Switch? Do you keep forgetting to buy turnips every Sunday? Looking for a fun & easy project that will help remind you when to start searching for Daisy Mae? 🤔💰📈

No problem! We made a Courier + Azure Function problem to solve that!

On this episode of Show & Tell, Aydrian Howard (Developer Advocate at Courier, and friend of Chloe irl and in Animal Crossing) joins me to talk all about our latest collab- an Animal Crossing Turnip Timer! 🏝 Using the power of Azure Functions & Courier- we talk through the high highs ("yay!! it's working!!") and the low lows ("noooo- not timezone/UTC math!?!") of building a project to help us remember when to purchase our turnips on Sundays.

👉 You can learn how to work with Azure Functions in this free and easy MSLearn tutorial here! 🌈 Execute an Azure Function with triggers

Wanna try out Courier to help simplify designing and sending notifications? 💌📱📫 Check them out at https://bit.ly/3iQR5Pe

Want more Animal Crossing content? You're in luck! Check out our previous episode with Brendon North of the Nintendo Nerds to see his Animal Crossing Game Show Set here! 🎨🕹🏝👉Brendon North Shows Chloe An Animal Crossing Game Show Set!

How to Make AI Feel Less like Sci-Fi with AI Builder

Chloe Condon 🎀 — Sun, 12 Jul 2020 01:56:36 +0000

#PowerfulDevs Conference

RSVP HERE BY JULY 15:

https://aka.ms/powerfuldevsconf

The Powerful DEVs Conference is the first virtual conference of its kind. We will showcase how developers can leverage the Power Platform to build applications faster and with far less effort. Connect with industry-recognized ProDev influencers, Microsoft Cloud Advocates, trusted and diverse community leaders, and members of the Power Platform Team.

BOOKMARK THIS FOR RESOURCES AND DISCUSSION WITH SPEAKERS

#powerfuldevs Conference: Join us on July 15th Online!

JennyMEvents for Microsoft Azure ・ Jul 10 '20

#powerfuldevs #powerplatform #prodev #programming

Revisit this page during the event to engage in live (and post-event) discussions on those topics with both speakers and community. The speakers will be here for a live Q&A for at least 30 minutes immediately after their session concludes. After the event, come back to find additional slides, videos, and resources for this session.

About This Session:

July 15, 2020: 12:30 PDT - 12:55 PDT

"Artificial Intelligence" may seem like a deeply complex and technical topic- but did you know you can build your own models with zero code? In this talk, I'll share how you can build and train your own models and add even more intelligence to your apps with Azure AI + Cognitive Services!

About the Speakers:

Chloe Condon is a Cloud Advocate @ Microsoft where she loves to showcase fun ways to use Azure. Follow @chloecondon on Twitter.

DEV Community: Chloe Condon 🎀

Using the Gemini API on Cloud Run to Build a Chat Application

👩‍🏫 What are we building?

📝 Prerequisites

⚙️ Step 1: Clone the Chat App Template

🐳📁 Step 2: Build the Docker Image with Cloud Build

🚀 Step 3: Deploy to Cloud Run

🔎✨ Step 4: How the Gemini Integration Works

🤸‍♀️ Ok, let's try it out!

🎯 What’s Next?

Got Bots? 4: Making Bots with the Azure Portal

Got Bots? 3: Making Bots with QnA Maker + Azure Bot Service

Got Bots?: A Weekly Bots Series with the Microsoft Reactor

Check out this series page, with links to summaries/timestamps, resources, and more! ⤵️

Got Bots Series Page!🤖💬

Got Bots? 2: Making Bots with Azure Logic Apps

Got Bots? 1: Intro to Bots & Ethical Bot Creation

Using the Microsoft Face API, Spotify, and Azure Functions to get *emotional*

Creating a Face API Subscription

Creating an Azure Function

Creating a Test HTML Webpage

Building a Heart Rate Monitor with Azure IoT Hub

IoT Heartrate Monitor using Azure Applications (with ESP8266 and HR Sensor)

Prerequisites

Connecting the Hardware

Coding the Software

Finalizing Azure Applications

Get Inspired By These BitCamp Final Projects by High School Students!

Wanna check out their presentations, LIVE? Check out the recording here

HeartRate Monitor with Azure IoT Hub

Beau Hayes-Pollard

Upload Your Face. We pick the songs.

Natalie Huang

Taking Control of Information Accountability with Azure Functions

Jesse Lee

Scheduling Bot

Meghna

Emotional Analysis with Azure Functions

Lisa Leung

Azure Saves the Day for Bit Heroes Call Center

Shreyan Mayukh Mitra

Wanna check out their presentations, LIVE? We'll be hosting their presentations with the world on 8/13 in a livestream on Twitch and YouTube- JOIN US and RSVP here! 👉 http://tinyurl.com/bitazure

Using Cognitive Services and Mario Kart to Create "Astrology" with Chloe Condon

Building an Animal Crossing Turnip Timer! [video]

How to Make AI Feel Less like Sci-Fi with AI Builder

#PowerfulDevs Conference

#powerfuldevs Conference: Join us on July 15th Online!

JennyMEvents for Microsoft Azure ・ Jul 10 '20

About This Session:

About the Speakers:

Using the Microsoft Face API, Spotify, and Azure Functions to get emotional