B4J Tutorial [Web] Web API Tutorial - Getting Started

Note:
This tutorial is based on Web API Server v2.02 and is deprecated.
Refer to
Using MinimaList Controller and Code Snippets

Introduction:

This tutorial is based on Web API Template 2.

How to install:

1. Download the template and copy it to B4J Additional Library folder.
1684044460362.png


2. Open B4J and you will see the template when you select menu File->New.
1684044149566.png


Getting Started

1. To quick start, just run the project in debug mode.
2. Browse to http://127.0.0.1:8080/web/help to test the API. You can also click on "Open API Documentation" button on home page.
3. Click the first example [GET] /web/api/v2/data under DATA controller to expand the section.
4. Click the green "Submit" buton to execute a call to the API.
5. The Response texbox should display an empty list.
6. You can proceed with other API examples.

Basic Configuration

The API server requires the following configuration in Main module and must be in the following order.
B4X:
ConfigurePaths
ConfigureElements
ConfigureHandlers
ConfigureControllers
Other configurations are optional and order are not important.

ConfigurePaths
First thing to configure
This setting is determined by the values in Config.ini (inside Objects folder).
For starting, just let the default values.
You can then edit the Config.ini file using any Text Editor.

ConfigureElements
Configure this after ConfigurePaths
This setting depends automatically by ConfigurePaths above.
Nothing is needed to be configured here.

ConfigureHandlers
Configure this after ConfigureElements
By default, ApiHandler is the only required handler.
If WebHandler is enabled (uncommented), then we can use it to route non-API URL to show web front-end such as home page.
If HelpHandler is enabled (by default), API documentation is available for debugging the API without client app or Postman.
If HelpHandler is disabled (commented) then API documentation is not available for debugging. This handler is not required in release mode.

ConfigureControllers
Configure this after ConfigureHandlers
If HelpHandler is used, this configuration includes which controller class to display on the API documentation page.
By default, only DataController is added.
When you have more controllers, you can add them here.
You can hide some APIs using #Hide keyword

Note: Please do not post your question in this thread. Start a new question and tag with [Web API 2] in the title.
 
Last edited:

aeric

Expert
Licensed User
Longtime User
Example 1
Open PDF file in new tab or download file as attachment using form post.

1684250894643.png


B4X:
Public Sub GetPDF
    ' #Desc = Open PDF file
    ' #Plural = Sample
    Dim SU As StringUtils
    File.WriteBytes(File.DirTemp, "temp.pdf", SU.DecodeBase64(FileBase64))   
    If File.Exists(File.DirTemp, "temp.pdf") Then
        Response.ContentType = "application/pdf"
        Response.SetHeader("Content-Disposition", "inline;filename=temp.pdf")
        'Response.SetHeader("Content-Disposition", "attachment;filename=temp.pdf")
        Dim in As InputStream = File.OpenInput(File.DirTemp, "temp.pdf")
        File.Copy2(in, Response.OutputStream)
        Response.OutputStream.Close
    Else
        Utility.ReturnHtmlPageNotFound(Response)
    End If
End Sub

p/s: At the time of writing, Web API Template v2.02 is not yet released. So this example is a pre-released version.
 

Attachments

  • PDFDemo.zip
    277 KB · Views: 258

aeric

Expert
Licensed User
Longtime User
Example 2
Vue 3 CRUD (with help from chatGPT and perplexity)

1684393221479.png


In AppStart,
ServerConfiguration.EnableCORS = True
ServerConfiguration.SimpleResponse.Enable = False

Make sure the following is correct in ConfigureCORS of ServerConfiguration:
B4X:
Paths.Add(CreateMap("path": ROOT_PATH & API_PATH & "v2/data/*", "origins": "http://localhost, http://127.0.0.1:3000", "methods": "POST,PUT,DELETE", "headers": "*")) ' vue.js prod/dev app

Run as Development:

Run vue project from source:
1. Unzip the webapi2-vue.zip
B4X:
cd webapi2-vue
2. Install npm modules
B4X:
npm install
3. Run development server
B4X:
npm run dev -- --port 3000

Run as Production:
You can also extract the vue.zip to xamp or laragon root and run using a web server.
Take note of the port number (80) or if you have set a different port to match the CORS settings.

vue.zip (compiled release)
webapi2-vue.zip (vue source)
MinimaListApi.zip (B4J server)
 

Attachments

  • vue.zip
    36.1 KB · Views: 260
  • webapi2-vue.zip
    14.6 KB · Views: 254
  • MinimaListApi.zip
    433.4 KB · Views: 131
Last edited:

aeric

Expert
Licensed User
Longtime User
Example 2 will get error if run with Web API Template v2.03.
Solution is uncomment (enable) ConfigureResponse in Main module (ConfigureServer sub) to set SimpleResponse = True.
 
Top