Usage scenarios or usage instructions to Api details page

[bajiat]

Include simple usage instructions or common usage instructions to API details page. These instructions should contain a possibility to copy at least user's API key (if an API key is available and if a proxy has been selected to this particular API)

User story

As an API consumer
I want to be able to quickly find out how to use the API I'm interested in through APInf
so that I do not have to find the information from several different places

Definition of done

• Select what would be the two most common / relevant methods of making api calls
  • url parameter - with ?api_key=### query parameter
  • request header - passing in X-Api-Key as a request header
• Document the methods in user instructions
• Add the usage instructions to the API profile view (Details tab)
• Auto-insert e.g. base URL and user's API key. (API key only if a proxy has been selected)
• Allow copying base URL and user's API key, if available.

Wireframe

[philippeluickx]

Concretely, some information about development.
I am using Android as an example here, with Retrofit the de-facto REST library - https://github.com/square/retrofit

OkHttpClient client = new OkHttpClient();

client.interceptors().add(new Interceptor() {
    @Override
    public Response intercept(Chain chain) throws IOException {
        Request request = chain.request();
        HttpUrl url = request.url().newBuilder().addQueryParameter("api_key","XYZ123").build();
        request = request.newBuilder().url(url).build();
        return chain.proceed(request);
    }
});

Retrofit retrofit = new Retrofit.Builder()
        .baseUrl("CLIENT.apinf.io")
        .client(client)
        .build();




public interface SpaceshipsService {
  @GET("spaceships")
  Call<List<Spaceship>> listSpaceships();
}

The relevant places are

The base url

.baseUrl("CLIENT.apinf.io")

The api-key parameter added to every request

HttpUrl url = request.url().newBuilder().addQueryParameter("api_key","XYZ123").build();

The actual call to an endpoint, as defined in Swagger

  @GET("spaceships")

As an Android developer, the first 2 items is what I need for configuration and I find this in detail or settings somewhere. The third item I find that in documentation.

[Nazarah]

@NNN : what are your ideas about the possible UI view? please let me know.

[Nazarah]

@NNN Based on our discussion, I prepared the given wireframe.
Please make suggestions about possible changes in the look&feel or description text.