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