B4J Tutorial [web]Web API Tutorial - Getting Started

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: 120

aeric

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

1684393221479.png


In Web API Template, uncomment ConfigureCORS
Add the following inside the sub:
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

To 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

Second option, just extract the vue.zip to xamp or laragon root and run using a web server.
Take note of the port number.

vue source: webapi2-vue.zip
release build: vue.zip

Update: fix favicon in public folder
Note: Uncomment (enable) ConfigureResponse in Web API Server v2.03 for this example to work
 

Attachments

  • vue.zip
    36.1 KB · Views: 113
  • webapi2-vue.zip
    14.6 KB · Views: 116
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