WPRM Example: Phone number validation API

In this example, we will validate a phone/mobile number using numverify API. Please, make sure that:

  1. Establishing Connection:
    If you checked the API’s documentation, you will find that to make a request to the service server you have to use a URL which have 2 parts: base url (http://apilayer.net/api/validate) and parameters (access_key=YOUR_ACCESS_KEY&number=14158586273). The first part is static and the second is dynamic in most cases which means that you can change the results if you changed the parameters’ values.
    To establish a connection you need to know 3 thing about your API:

    • Its base url.
    • the results (response) format [Json, XML, etc ..].
    • The parameters Keys: the name of the parameters like access_key & currencies.

    Once you now that, go to Restful Manager > Connection, add a new connection, give it a relevant name(you will need it soon)  and add the data as in the following screenshot then click Save.
    Note: You can get access key to the API by signing up for a free plan.
    conn2

  2. Create request and Connection Settings:
    Next, we need to assign those parameters to suitable data so that the web service can query it and return the required data response. In our example, we’ll 2 parameter values which are access_key and number.
    Now, go to Restful Manager > Requests, add a new request. and give it a name, then select the connection name that you have just created. When the parameters show up, populate the parameter values as you see in the following screenshot.
    As you can see, there are a lot of options in Parameter values setting, most of them is to set the dynamic data retrieval which makes this plugin powerful:
    access_key: will be fixed value since access keys doesn’t change.
    number: the phone number would be a post/user meta as in this example. you can make it related to current logged in user by retrieving user’s meta phone number that the system is previously saved.
    Once you populated those fields, click save.
    paramvals
  3. Request’s Display Settings:
    After you save your values, you will find new sections are generated in the request page. One of them is ‘Display Settings’ which responsible for what you want to do with the response results:

    • Display Vs. Save then Display: WPRM give a chance to save selected items from the results in database or just display it in runtime. In this example, we will just choose ‘runtime request’ to only display the results.
    •  Where to display results: decide where to show the results template by selecting post type and then before or after content or you can just use a shortcode to add it wherever you like. We will use shortcode so we can add it as a widget(may be you want to add it in some user section).
    • Showing repeatable results: select where or not to loop through results. This used only when you have a group of results that share the same group of parameter keys(discussed in other example).
    • Start Checking dummy data: add all values in this section with full fixed(no dynamic work is here) dummy(but correct) data then click ‘check request’ once you see results check only the data that you want it to show up in your app or widget. once you’are finished click save.
      disset
  4. Templating Results:
    Now every thing is ready except how the results will look like!! so here comes the last section, ‘Template Settings’. You will find in it 2 parts:

    • Header or non-repeatable Template: this is the template that we’ll use. you can add text inline style and html to template you results. The links below the editor is a shorthand to help you copy and paste to the editor:
      • the results keys
      • Functional helpers like: if/ifExists/section

      In the GIF below, we check if the number is valid by checking the ‘valid’ results item if it’s equal to 1(check the documentation).

    • Repeatable template: if you have a repeatable data you will setup this template exactly as the above to be in for each repeated item at a time.
      newphonetemp
      Click to see full image and clear text

      Save the changes once you finish. The GIF above shows how it would look like. It’s so simple but it could be effective in real app or website.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s