dezembro 21, 2016 Comments 13 Paulo Rogério 8607 Views

Xamarin – Como consumir uma api local que roda no IIS Express no emulador

Aprenda a consumir uma api local direto do emulador

Hoje venho trazer uma dica bem interessante para vocês, irei explicar como podemos rodar 2 projetos ao mesmo tempo, um que rodará nosso emulador e outro que rodará nossa api local diretamente no IIS Express usando de quebra o modo debug.

Tenho um projeto na seguinte estrutura abaixo:

Como podemos ver eu tenho uma pasta ClientSide onde fica todo o código dos meus apps e tenho uma pasta ServerSide que fica meu código que roda no servidor que no caso é uma Web Api.

Na pasta ClienteSide temos um projeto chamado NewPlayer do tipo Portable, é nele que eu crio minhas Views, ViewModels e etc.
Também é neste projeto que eu consumo minha API.

Para debugar meu aplicativo e minha WebApi ao mesmo tempo eu configuro meu Visual Studio para iniciar 2 projetos de uma vez, basta clicar com o botão direito na solução e ir em propriedades, você verá uma tela parecida com essa abaixo:

Como podemos ver eu inicio meu projeto Android e minha Api ao mesmo tempo. Mas um problema muito comum que nós temos é ao tentar acessar API pelo aplicativo não conseguimos.

Como podemos ver acima a WebApi está rodando normalmente em meu computador.

Mesmo que você chame no seu App assim http://localhost:58529/api/test/v1/online, ele não vai enxergar simplesmente por ele ser uma máquina virtual, ou seja, é como se fosse um outro computador.

Ai você pensa, vou passar meu IP, também não irá funcionar.

A primeira solução é fazer um deploy de sua WebApi para o IIS e depois chamar o diretório virtual que você criou.

A segunda solução que é a que vim propor a vocês, é configurar nossa máquina, para que o aplicativo consiga consumir sua API que foi levantada direto do seu Visual Studio através do IIS Express, assim você poderá debugar tanto o aplicativo como a API enquanto o Visual Studio tiver rodando.

Para isso é bem simples.

Vamos utilizar o gerenciador de pacotes NPM para instalar o iisexpress-proxy. Para isso iremos precisar de ter o Node.js instalado na máquina.

Para baixar e instalar o Node.JS acesse https://nodejs.org/en/

Após instalar o Node.Js é bem simples, basta instalar o pacote do iisexpress-proxy em nossa máquina.

Para isso abra o prompt do Node.Js em sua máquina e digite.

npm install -g iisexpress-proxy

1	npm install -g iisexpress-proxy

Após instalar vamos dar o comando que vai substituir a porta do seu IIS Express para uma porta que o Emulador entenda.

iisexpress-proxy PortaDaApi to 3000

1	iisexpress-proxy PortaDaApi to 3000

Como podemos ver eu to substituindo a porta de minha API 58529 para 3000

Agora basta em nosso aplicativo mudar a url de nossa api, ficando assim http://192.168.0.102:3000/api/test/v1/online

Substitua o localhost pelo IP de sua máquina e a porta 3000 que você acabou de criar.

No código de nosso serviço ficaria algo mais ou menos assim:

namespace NewPlayer.Api.Base
{
    public class RestClient
    {
        /// <summary>
        /// RestClient implements methods for calling CRUD operations
        /// using HTTP.
        /// </summary>
        public class GenericRestClient<T>
        {
            string WebServiceUrl = "http://192.168.0.102:3000/api/" + typeof(T).Name.ToString() + "s/";

            public async Task<List<T>> GetAsync()
            {
                var httpClient = new HttpClient();

                var json = await httpClient.GetStringAsync(WebServiceUrl);

                var taskModels = JsonConvert.DeserializeObject<List<T>>(json);

                return taskModels;
            }

            public async Task<bool> PostAsync(T t)
            {
                var httpClient = new HttpClient();

                var json = JsonConvert.SerializeObject(t);

                HttpContent httpContent = new StringContent(json);

                httpContent.Headers.ContentType = new MediaTypeHeaderValue("application/json");

                var result = await httpClient.PostAsync(WebServiceUrl, httpContent);

                return result.IsSuccessStatusCode;
            }

            public async Task<bool> PutAsync(int id, T t)
            {
                var httpClient = new HttpClient();

                var json = JsonConvert.SerializeObject(t);

                HttpContent httpContent = new StringContent(json);

                httpContent.Headers.ContentType = new MediaTypeHeaderValue("application/json");

                var result = await httpClient.PutAsync(WebServiceUrl + id, httpContent);

                return result.IsSuccessStatusCode;
            }

            public async Task<bool> DeleteAsync(int id)
            {
                var httpClient = new HttpClient();

                var response = await httpClient.DeleteAsync(WebServiceUrl + id);

                return response.IsSuccessStatusCode;
            }
        }
    }
}

namespace NewPlayer.Api.Base

{

public class RestClient

{

/// <summary>

/// RestClient implements methods for calling CRUD operations

/// using HTTP.

/// </summary>

public class GenericRestClient<T>

{

string WebServiceUrl = "http://192.168.0.102:3000/api/" + typeof(T).Name.ToString() + "s/";

public async Task<List<T>> GetAsync()

{

var httpClient = new HttpClient();

var json = await httpClient.GetStringAsync(WebServiceUrl);

var taskModels = JsonConvert.DeserializeObject<List<T>>(json);

return taskModels;

}

public async Task<bool> PostAsync(T t)

{

var httpClient = new HttpClient();

var json = JsonConvert.SerializeObject(t);

HttpContent httpContent = new StringContent(json);

httpContent.Headers.ContentType = new MediaTypeHeaderValue("application/json");

var result = await httpClient.PostAsync(WebServiceUrl, httpContent);

return result.IsSuccessStatusCode;

}

public async Task<bool> PutAsync(int id, T t)

{

var httpClient = new HttpClient();

var json = JsonConvert.SerializeObject(t);

HttpContent httpContent = new StringContent(json);

httpContent.Headers.ContentType = new MediaTypeHeaderValue("application/json");

var result = await httpClient.PutAsync(WebServiceUrl + id, httpContent);

return result.IsSuccessStatusCode;

}

public async Task<bool> DeleteAsync(int id)

{

var httpClient = new HttpClient();

var response = await httpClient.DeleteAsync(WebServiceUrl + id);

return response.IsSuccessStatusCode;

}

Bom espero que tenham gostado da dica!

Até a próxima!

Share this on WhatsApp

Previous Xamarin Forms - Data Binding entre controles

Next Divulgue sua vaga de emprego no I love code

Tags IIS visual studio Xamarin

Category API Dicas Mobile Sem categoria

About author

Paulo Rogério 205 posts

Sou apaixonado por tecnologia e adoro criar aplicações desktop, web e mobile. Adoro aprender e compartilhar conhecimento, meu hobby é ajudar as pessoas.

13 Comments

Oziel Guimarães
maio 16, 15:11 Reply

A porta tem que ser obrigatoriamente *3000*??
- Paulo Rogério
  maio 16, 16:08 Reply
  
  Você pode mudar se quiser!
Eclesio Melo
maio 22, 01:42 Reply

Me ajudou muito mano.
- Paulo Rogério
  maio 22, 08:16 Reply
  
  A ideia é ajudar a comunidade. Se sentir falta de um artigo só entrar em contato que se eu tiver conhecimento eu faço!
vagner correa
maio 24, 13:54 Reply

não funcionou Depois de executar a troca de porta tenho a mensagem abaixo IIS Express Proxy 1.3.0 Usage examples: iisexpress-proxy 51123 to 3000 iisexpress-proxy [http(s)://]192.168.0.100:51123 to 3000 iisexpress-proxy [http://]domain.com:80 to 3000 iisexpress-proxy [https://]ssl-domain.com:443 to 3000 e tentei acessar minha webapi com o endereço meuip:3000/api/usuarios mas não rolou
Gandalf
agosto 04, 21:14 Reply

Cara, baita ajuda!!!
levy
agosto 20, 10:00 Reply

cara eu perdi um dia inteiro para consumir um localhost e por fim acabei tendo que criar um site no IIS. essa sua solução deu certo aqui e fiz em 5 minutos! ajudou muito!
alehlima018
novembro 17, 17:08 Reply

Muito obrigado, resolveu um problemão!
Alexandro
janeiro 21, 23:44 Reply

Legal cara, obrigado pela dica!
Alessandre
agosto 12, 12:48 Reply

Valeu amigão!!!!!! ajudou muito"""
Marco Antonio
janeiro 03, 22:37 Reply

Muito boa a dica. Obrigado.
vagnercds
julho 25, 10:16 Reply

Oi Paulo Pelo que entendi, você colocou o projeto xamarin e a api dentro da mesma solução. No meu caso, eu tenho cada projeto "Aplicativo" e "WebApi" em suas respectivas soluções, e gostaria de depurar cada um em uma instancia do Visual Studio. Tentei seguir esse procedimento, mas não rolou, porque não consegui chamar meu localhost pelo IP, Tentei tanto pelo IIS Express quanto pelo IIS Local. Vc tem ideia de como faz isso ou já encontrou algum tutorial de como se faz isso? Estou procurando a dias e não encontro nada que funcione.
Links Uteis – Totvers Advpl
maio 29, 10:06 Reply

[…] Xamarimhttps://ilovecode.com.br/xamarin-como-consumir-uma-api-local-que-roda-no-iis-express-no-emulador/https://tecnoblog.net/277750/como-ativar-o-modo-desenvolvedor-no-android/https://ilovecode.com.br/xamarin-como-consumir-uma-api-local-que-roda-no-iis-express-no-emulador/ […]

Xamarin – Como consumir uma api local que roda no IIS Express no emulador

Aprenda a consumir uma api local direto do emulador

About author

You might also like

Qual o melhor aplicativo híbrido ou nativo?

[IONIC 3] – Selecionar items com ion-Slide e ion-Chip

Como instalar PWA no Desktop sem usar Electron!

13 Comments

Oziel Guimarães

Paulo Rogério

Eclesio Melo

Paulo Rogério

vagner correa

Gandalf

levy

alehlima018

Alexandro

Alessandre

Marco Antonio

vagnercds

Links Uteis – Totvers Advpl

Leave a Reply

Clique aqui para cancelar a resposta.

Buscar no site

FIQUE ATUALIZADO

GRUPOS VIPS

Siga-nos

Cursos

Desenvolvedor PL/SR front-end React

Desenvolvedor(a) ASP.NET Senior

Desenvolvedor Full Stack Sênior

Tech Lead

Arquiteto de Software (.Net)