DEV Community

Cover image for A Comprehensive Guide to Creating a Function App Calculator, Publishing to Azure Portal, and Pushing to GitHub
Wisdom Iyayinosa Bezaleel
Wisdom Iyayinosa Bezaleel

Posted on • Updated on

A Comprehensive Guide to Creating a Function App Calculator, Publishing to Azure Portal, and Pushing to GitHub

Prerequisite
Download and install Visual Studio Community 2022
Have an existing GitHub Account and of course, an active subscription on your Azure Account.

The first step is to create a function app on your Azure portal. In the search bar, type in FUNCTION APP and click on it
Image description
When it opens, select CREATE and on the basic section, input the right details to proceed

Image description
Choose a resource group, you can instantly create one if you dont already have one.
Give your function app a name as i have done.
Other settings should take replica of my own settings in the image above.
Leave every other settings on the other section as default and proceed to review and create
Image description
The resource should begin to deploy. see it through till deployment is complete
Image description
Your function app is deployed and ready to carry your calculator app
Image description

Now lets go to visual studio
Open your virtual studio application, select new project

Image description
Search for App function, select it and click next
Image description
Give your project a name and click next
Image description
Leave the next page at default settings.

Image description

Now we are going to edit this set of codes to create our calculator app

Image description
Edit the function name on line 15 and the public static class line 13 to "Sum". This programming language allows you to calculate the total of a set of numbers.
Image description
Now delete code line 21 till the end.

Image description
Type the following code from line 22 to replace the deleted codes;
int x = int .Parse(req.Query["x"]);
int y = int.Parse(req.Query["y"]);
int result = x+y;
return new OkObjectResult(result);

Once you are done click on build at the top of the page

Image description
You should get this result verifying no issues with our build

Image description

Now we will publish our calculator to azure by selecting thr build drop down and select publish.
Image description
Next, click on Azure and click "Next"
Image description

Image description

Image description

Top comments (0)