Create GitHub profile viewer in web API c#

Arshia — Fri, 09 Aug 2024 16:01:06 +0000

Hi, my name is Arshia. In this article I'm gonna show your how to create a GitHub profile viewer in Web API c#.

1- Open terminal, and write dotnet new webapi --use-controllers (If you use .net cli on Windows, linux,mac), or if you use Visual Studio, Open Visual Studio then click on create new project and then select webapi project.

2 - We need to create a class which named UserInfo. This class have below properties.

public class UserInfo
{
    public string AdditionalName { get; set; }
    public string Name { get; set; }
    public string Bio { get; set; }
}

For example, this image is shows How to Equal each property in a class to GitHub Profile

Now , We add HtmlAgilityPack Package. you can use this command for add HtmlAgilityPack to your project.

dotnet add package HtmlAgilityPack --version 1.11.62

HtmlAgilityPack is an HTML parser written in C# to read/write DOM and supports plain XPATH or XSLT. More information in Html Agility Pack

All right, now just we create a controller with name GithubController

dotnet new apicontroller -n GithubController

In visual studio, right click on your project and then click on Add, afterward click on class.

In inside GithubController, Add this methods and variables.

    [Route("api/[controller]")]
    [ApiController]
    public class GithubController : ControllerBase
    {
        private HttpClient? _httpClient;
        private Uri? _uri;
        private HtmlDocument? _htmlDoc;


        [HttpGet("Profile/{name}")]
        public async Task<ActionResult<string>> GetProfile(string name)
        {
            var pageResult = await LoadPage(name);
            if (pageResult)
            {
                var iamgenode =  _htmlDoc?.DocumentNode.SelectNodes("//img")[2].Attributes["src"];
                var image = iamgenode?.Value;

                return Ok(image);
            }

            return NotFound("User not found in github.");
        }


        private async Task<bool> LoadPage(string name)
        {
            var uri = "https://github.com/" + name;

            _uri = new Uri(uri);

            _httpClient = new HttpClient();
            _httpClient.BaseAddress = _uri;

            var webPage = new HtmlWeb();
            _htmlDoc = webPage.Load(_httpClient.BaseAddress);
            var pageFounder = _htmlDoc.DocumentNode.SelectSingleNode("//title");

            if (pageFounder.InnerHtml == "Page not found · GitHub · GitHub")
                return false;

            return true;
        }



    }

Now we run project.Open your browser and append the following address to the url.

/api/github/profile/Arshiya-A

As you see, the profile image is shows.Just sufficient, received url copy and paste in browser url.

For testing APIs, you can use swagger api in your project.

Now add this method to GithubController.

   [HttpGet("Info/{name}")]
        public async Task<ActionResult<UserInfo>> GetInfo(string name)
        {

            var pageResult = await LoadPage(name);
            if (pageResult)
            {
                var additionalNameSpan = _htmlDoc.DocumentNode.SelectNodes("//span")[37];
                var nameSpan = _htmlDoc.DocumentNode.SelectNodes("//span")[36];

                var bioDiv_Type1 = _htmlDoc.DocumentNode.SelectNodes("//div")[138];
                var bioDiv_Type2 = _htmlDoc.DocumentNode.SelectNodes("//div")[146];

                string additionalName = GetAdditonalName(additionalNameSpan);

                string username = GetUsername(nameSpan);

                string bio = "User is not have bio";
                bio = GetBio(bioDiv_Type1, bioDiv_Type2);

                var userInfo = new UserInfo()
                {
                    AdditionalName = additionalName,
                    Name = username,
                    Bio = bio,
                };

                return Ok(userInfo);
            }

            return NotFound("User not found in github.");
        }

And run again project.Result is following image.

bioDiv_Type 2 for some profiles , that have follower and following.

Thank you for reading this article. You can see this project and my other projects on GitHub.
This project address : Github profile viewer
My GitHub address : My GitHub page

Web music player with html-css-javascript

Arshia — Wed, 07 Aug 2024 19:12:46 +0000

Hi, my name is Arshia and this is my first post on I dev.to . I made a simple web music player with HTML, css and javascript. you can add this widget to your project.

Soon , in dev.to im create a post related by how to use this music player and how to worked that but before that you can see this post on my github channel

GitHub : https://github.com/Arshiya-A

DEV Community: Arshia

Create GitHub profile viewer in web API c#

Web music player with html-css-javascript