BY Ajay Singh30 Jul 2021 Edit
Fetch GitHub User profile using WebAtoms - Xamarin.Forms.

A Xamarin.Forms simple app example: Fetch GitHub users information via API


Very simple example of a XAMARIN.FORMS that accepts a GitHub username and once it receives username, it asks the GitHub API for the user information, and prints them.

Code

Before proceedings to our code example let`s first understand what is Web Atoms.

Web Atoms is an advanced MVVM framework to write cross platform applications in HTML5 and Xamarin.Forms.

We start by creating the class MainPage.tsx, the one that will display our image and details as gathered from GitHub.

This is our View.

export default class MainPage extends AtomXFContentPage {

    public viewModel: MainPageViewModel;

    public create() {

        this.viewModel = this.resolve(MainPageViewModel);

        this.render(
            <XF.ContentPage title="Github Profile">
                <XF.StackLayout padding={20} >
                   <XF.SearchBar
                        text={Bind.twoWays((x) => this.viewModel.login)}
                        placeholder="Type username"
                        textColor="#1a4e8e"
                        placeholderColor="#1a4e8e"
                        backgroundColor="#e6ebed"/>
                         <XF.Frame 
                            padding="0"
                            margin="0,20,20,20"
                            horizontalOptions="CenterAndExpand"
                            verticalOptions="Center"
                            cornerRadius="100"
                            isClippedToBounds="true"
                            heightRequest="170"
                            widthRequest="170"
                            backgroundColor="transparent">
                        <XF.Image 
                            source = {Bind.oneWay(()=> this.viewModel.model.avatar_url)}
                            verticalOptions="FillAndExpand"
                            horizontalOptions="FillAndExpand"/>
                         </XF.Frame>   
                        <XF.Label 
                            textColor="#1a4e8e"
                            fontSize="20"
                            fontAttributes="bold"
                            horizontalOptions="Center" horizontalTextAlignment="Center"
                            text = {Bind.oneWay(() => this.viewModel.model.name )} />
                        <XF.Label 
                            textColor="Black"
                            fontSize="18"
                            fontAttributes="bold"
                            horizontalOptions="Center" horizontalTextAlignment="Center"
                            text = {Bind.oneWay(() => this.viewModel.model.location )} />

                         <XF.Grid padding="15,35,5,5" margin= "0,20,0,0" backgroundColor="#1a4e8e" >
                                <XF.Grid.columnDefinitions >
                                    <XF.ColumnDefinition width="25*" />
                                    <XF.ColumnDefinition width="25*" />
                                    <XF.ColumnDefinition width="25*" />
                                </XF.Grid.columnDefinitions>
                                <XF.Grid.rowDefinitions>
                                    <XF.RowDefinition height="30"  />
                                    <XF.RowDefinition height="30" />
                                    <XF.RowDefinition height="30" />
                                </XF.Grid.rowDefinitions>
                            <XF.Label 
                                fontSize="24" 
                                horizontalOptions="Center" 
                                horizontalTextAlignment="Center"
                                textColor="White" 
                                fontAttributes="bold" 
                                text={Bind.oneWay(() => this.viewModel.model.following)} />
                            <XF.Label {... XF.Grid.column(1)} 
                                fontSize="24" 
                                textColor="White" 
                                horizontalOptions="Center" 
                                horizontalTextAlignment="Center" 
                                fontAttributes="bold" 
                                text={Bind.oneWay(() => this.viewModel.model.public_repos)} />
                            <XF.Label {... XF.Grid.column(2)} 
                                fontSize="24" 
                                textColor="White" 
                                fontAttributes="bold" 
                                horizontalOptions="Center" 
                                horizontalTextAlignment="Center"  
                                text={Bind.oneWay(() => this.viewModel.model.followers)} />
                            <XF.Label {... XF.Grid.row(1)} 
                                textColor="#2776d7" 
                                text="Following" 
                                horizontalOptions="Center" 
                                horizontalTextAlignment="Center"  />
                            <XF.Label 
                                {...XF.Grid.column(1)} 
                                {...XF.Grid.row(1)} 
                                text="Repository" 
                                textColor="#2776d7" 
                                horizontalOptions="Center" 
                                horizontalTextAlignment="Center"  />
                            <XF.Label 
                                {...XF.Grid.column(2)} 
                                {...XF.Grid.row(1)} 
                                text="Follower" 
                                textColor="#2776d7" 
                                horizontalOptions="Center"
                                horizontalTextAlignment="Center"  />
                        </XF.Grid>
                </XF.StackLayout>
            </XF.ContentPage>);
    }

}

The next part is ViewModel.

export default class MainPageViewModel extends AtomViewModel {

    public model: IProfileModel;
    public login: string ="";

    @Inject
    private profileService: ProfileService;

    @Load({init: true, watch:true, watchDelayMS:1000})
    public async loadProfile(){
        this.model = await this.profileService.getProfile(this.login);
        this.login="";
    } 
}

Cool! We must have a way now to ask GitHub for the details of a single username. and we ask GitHub for information about a user using their public APIs,:

Look at the service declaration.

 @DISingleton()
 @BaseUrl("https://api.github.com/users/")
 export default class ProfileService extends BaseService {

  @Get("{login}")
  public getProfile( 
        @Path("login") login: string): Promise<IProfileModel> {
        return null;
    }
}

As easy as it looks, its very easy to configure REST service.

The last part is our Model.

export default interface IProfileModel {
    location?: string;
    id?: number;
    avatar_url?: string;
    name?:string;
    html_url?:string;
    followers?: number;
    public_repos?: number;
    following?: number;
};

Output

image

BY Ajay Singh
1 Like
LikeCommentSave
LikeCommentSaveShare
1

POPULAR POSTS
17 Mar 2021
LATEST ACTIVITY
srikanth.naidu
liked this post.
malli
saved this post.
Show more
ARCHIVES
2021
2020
2019
2018
TAGS
javascript (41)
developer (25)
javascriptdeveloper (15)
coding (10)
Xamarin.Forms (10)
webatoms (8)
arrays (7)
xamarin (7)
android (6)
typescript (6)
function (5)
csharp (4)
iOS (4)
methods (4)
object (4)
update (4)
web-atoms (4)
arrayoperation (3)
decorators (3)
programming (3)
prototype (3)




Web Atoms: JSX (TSX + TypeScript) for Xamarin.Forms, Hot Reload Your App in Production Environment

PlaygroundSamples Repository