DEV Community

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

Posted on • Edited 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

When it opens, select CREATE and on the basic section, input the right details to proceed


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

The resource should begin to deploy. see it through till deployment is complete

Your function app is deployed and ready to carry your calculator app

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


Search for App function, select it and click next

Give your project a name and click next

Leave the next page at default settings.

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


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.

Now delete code line 21 till the end.


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


You should get this result verifying no issues with our build

Now we will publish our calculator to azure by selecting thr build drop down and select publish.

Next, click on Azure and click "Next"

Top comments (0)