can we fetch our blog posts with the searchbar discussed in the new docs?

Daniel Mulroy

Hi David and Linda,

David, it seems like the code in the blog article you linked retrieves the articles from the 'official' AppDrag API and inserts them into a Cloudbackend table... but it doesn't mention at all how to link that to a search bar via PageBuilder.

I did this here: https://community.appdrag.com/post/2048 searching the AppDrag Blog API directly, without copying it into our own table first... but it's fairly technical for non-coders to set up and I think we're all looking forward to a PageBuilder-native solution.... so.... is there one?

Linda MacDonald

@David-Alimi @Daniel-Mulroy @Wassim thanks a mil so I got it to fetch the blog articles, but I want to fetch in the feature images as well (please see my modified code below) it does make a space for my images in the datatable, but the table doesn't display the feauture image, just a blank image (transparent placeholder) and when I click on the datatable that contains the image i get a 404 error, so I am guessing I am doing it wrong?

code_text
```var request = require('request');
var cloudbackend = require('appdrag-cloudbackend');
cloudbackend.init(process.env.APIKEY, process.env.APPID);

exports.handler = (event, context, callback) => {

    var options = {
      'method': 'POST',
      'url': 'https://api.appdrag.com/api.aspx',
      'headers': {
        'Content-Type': 'application/x-www-form-urlencoded'
      },
      form: {
        'command': 'BlogArticlesList',
        'appID': process.env.APPID,
        'orderBy': 'publishDate'
      }
    };
    request(options, async function (error, response) { 
        var articles = JSON.parse(response.body).Table
        
        for (let i = 0; i < articles.length; i++) {

            let title = articles[i].title ;
            let description =  articles[i].description;
            let image =  articles[i].image;
            let author = articles[i].author;
            let PublishDate = articles[i].PublishDate;
            
            var query = "INSERT INTO ArticlesBlog (title, description, image, author, PublishDate)";
            query += "VALUES ('" + title + "', '" + description + "', '" + image + "','" + author + "', '"+ PublishDate +"')";
            await cloudbackend.sqlExecuteRawQuery(query)
        }
        callback(null, 'OK')
    });
}

Linda MacDonald

@David-Alimi do you have an idea on how I include the feature image in the database? please find my modified code in below code

regards Linda

David Alimi

Hi, @Daniel-Mulroy,

In fact, this tutorial was only to retrieve blog data and insert it into a table so that she can follow the article on creating a search bar here : https://support.appdrag.com/doc/Creating-a-search-bar.

Thanks, for your article its really nice !

Have a nice day

David Alimi

Hello @Linda-MacDonald,

First of all, this is an example of what you receive from the API :
alt text

So we need to use "imageURL" and not 'image',
Then, as you can see we will receive an incomplete link, so what you need to do is to add this below your variable let PublishDate :

            let image = articles[i].imageUrl;
            image = '//cf.appdrag.com/APPID/'+ image

APPID : You can find the APPID of your project at the top right of your API function screen by clicking on 'Configure' :

alt text

Then, execute and you will see your images in your database :

alt text

Don't hesitate if you've got other questions.
Thanks & Have a nice day

Daniel Mulroy

@David-Alimi, very cool! Would have been perhaps simpler than what I did (client-side everything) and yes, much more helpful now that I see the second part of the tuto

David Alimi

@Daniel-Mulroy

Linda MacDonald

@David-Alimi said in can we fetch our blog posts with the searchbar discussed in the new docs?:

image = '//cf.appdrag.com/APPID/'+ image

Hi again David thanks a mil for the tut, but I think I am messing up again so I changed image to image url and addec my appid and have saved and published my api key but my images are still not showing. Have doublechecked that my appid is correct and have pasted it where it say APPID in your example. do I need to change the 'image' column in my database as well? perhaps url or something?

var request = require('request');
var cloudbackend = require('appdrag-cloudbackend');
cloudbackend.init(process.env.APIKEY, process.env.APPID);

exports.handler = (event, context, callback) => {

    var options = {
      'method': 'POST',
      'url': 'https://api.appdrag.com/api.aspx',
      'headers': {
        'Content-Type': 'application/x-www-form-urlencoded'
      },
      form: {
        'command': 'BlogArticlesList',
        'appID': process.env.APPID,
        'orderBy': 'publishDate'
      }
    };
    request(options, async function (error, response) { 
        var articles = JSON.parse(response.body).Table
        
        for (let i = 0; i < articles.length; i++) {

            let title = articles[i].title ;
            let description =  articles[i].description;
            let category =  articles[i].category;
            let author = articles[i].author;
            let PublishDate = articles[i].PublishDate;
            let image = articles[i].imageUrl;
            image = '//cf.appdrag.com/APPID/'+ image
            
            var query = "INSERT INTO ArticlesBlog (title, description, image, category, author, PublishDate)";
            query += "VALUES ('" + title + "', '" + description + "', '" + image + "','" + author + "','" + category + "', '"+ PublishDate +"')";
            await cloudbackend.sqlExecuteRawQuery(query)
        }
        callback(null, 'OK')
    });
}

code_text

Linda MacDonald

@David-Alimi ok finally got it to work but I could only get it to work after manually saving and publishing my api several times...so this is a manual process, i.e. I cannot get the blogposts to be saved automatically?

Daniel Mulroy

Hi Linda,

You could try the "Schedule" option on the right side to have it run once per hour, day, etc. in order to keep current

Linda MacDonald

@Daniel-Mulroy excellent idea thanks a mil Daniel

Linda MacDonald

@David-Alimi

so now to the search functionality. I noticed that you add the "what" word in your search example, but I don't have just one word I want to target. I want the title and a descriptioin. Does this mean that I have to copy and paste all titles and descriptions so that the search works on my blog posts?
thanks in advance
Linda

David Alimi

Hi @Linda-MacDonald,

In our example, the user enters the word 'what' in the search bar and we search if it exists only in our titles (and our output is only the title of the article found).
However, you can also search if this word exists either in the title or in the description, and in this case you can select in the output ('title' and 'description')

If you want to search only in titles but want to receive the title + description, it's up to you to choose the output columns you want to receive.

Here is an example :

alt text

I hope I answer your question well.

Thank you and have a nice day

Linda MacDonald

@David-Alimi thanks a mil yes I would like to search in title, description and fetch the feature image...basically want to replicate the search in the ecommerce templates, it's really cool

David Alimi

Hello @Linda-MacDonald,

I just modified the article to use the BLOG API with a search bar even more easily only in the front-end.

PS: No need to use the backend anymore
You can find the article here.

Linda MacDonald

@David-Alimi fantastic
I have been obsessing about search for AGES!! can we analyze our search-results somehow? if we use the database that is? I actually want to understand when people do not find what they are looking for, i.e. when they get 'result not found' and when they use a synonym which isn't in the blog post but would be the same topic. Is that level of analysis possible using appdrag only?

REMINDER

can we fetch our blog posts with the searchbar discussed in the new docs?