[plugin] apiPluxml - Soyez API en coupant la tête de PluXml !? :(

gcyrillus-nomade · 16 févr.

Bonjour,
Voici un petit plugin qui s'apparente plus à un outil en version bêta pour le moment https://ressources.pluxopolis.net/banque-plugins/plugins/ApiPluXml.zip

:ebauche d'api en evolution:

19-02-2024 :update: https://ressources.pluxopolis.net/banque-plugins/plugins/ApiPluXml1.0.zip
22-02-2024 version 2 : https://ressources.pluxopolis.net/banque-plugins/plugins/ApiPluXml.2.0.zip
24-02-2023 version 2.5 : https://ressources.pluxopolis.net/banque-plugins/plugins/ApiPluXml.2.5.zip
26-02-2023 version 2.5.2 : https://ressources.pluxopolis.net/banque-plugins/plugins/ApiPluXml.2.5.2.zip

:toujours pas une réelle API à ce stade:

son github : https://github.com/gcyrillus/ApiPluXml

Il renvoi quelques contenus de votre site au format json. C'est un peu comme les fils RSS , vous avez accès aux contenus sans qu'ils soient intégrés dans une page HTML. Pour le moment, categories, tags, articles , commentaires peuvent etre traités et affichés, seul le contenu des pages statique n'est pas renvoyé.

L'utilisation classique de ce genre de script est d'aller interroger l'API en ajax puis de récupérer les données que vous souhaitez pour les afficher sur votre page. Cela peut-être la page d'un Forum ou, hehe, d'un autre CMS, ou d'une application

Si vous y voyez un intérêt particulier et des applications possibles, des fonctionnalités à ajouter, autres, n’hésitez pas à commenter pour faire évoluer PluXml en mode "HeadLess".

testez en ligne ce que vous pouvez faire de ces données : https://pluxopolis.net/crashnewstest/?apiPluxml

Aide du plugin ApiPluXml

aide redigé

Hook >aucun -|_ Options: GET uniquement -|- Clé de connexion (actuellement optionnelle)

Utilisation

Activer le plugin - Les données publiques de votre site sont alors aussi consultables via l'Api.

acceder à votre site par son adresse en ajoutant à l'url les données que vous voulez utiliser

Tableaux des données disponibles:

Affichage brut

Le format d'affichage brut au format json est lisible à l'écran. C'est aussi un format standard accessible par de nombreux programmes et scripts.

Pour accéder a l'aide: Taper l'adresse de votre site suivi de ?apiPluxml
Pour obtenir les données des catégories au format json:: Taper l'adresse de votre site suivi de ?apiPluxml&categorie
Pour obtenir les données des pages statiques au format json:: Taper l'adresse de votre site suivi de ?apiPluxml&static
Pour obtenir les données des mots clés au format json:: Taper l'adresse de votre site suivi de ?apiPluxml&etiquette
Pour obtenir les données des articles au format json:: Taper l'adresse de votre site suivi de ?apiPluxml&article
Pour obtenir les données des commentaires au format json:: Taper l'adresse de votre site suivi de ?apiPluxml&commentaires
Pour obtenir des données de configuration au format json:(données sensibles filtrées): Taper l'adresse de votre site suivi de ?apiPluxml&config
Pour obtenir les données des Auteurs au format json:(données sensibles filtrées): Taper l'adresse de votre site suivi de ?apiPluxml&authors

En installant ce plugin, ce sont toutes ces données qui peuvent être consultée à distance sans ouvrir vos pages.

Affichage Personnalisé

Les données fournies peuvent-être traitées par differents langages et réutilisées de differentes manieres. Le plugin vous propose un fichier javacript doté de plusieurs fonctions d'affichages et options de configurations pour traiter les données renvoyer par un site où le plugin apiPluXml est activé.Le site peut-être distant ou être le site lui même.

Voici le début du fichier JavaScript avec ces options de configaration à regler à votre convenance

Extrait de apiCalling.js/*/Config/*/
const apiKey = 'apiPluXml'; // Dans le futur, ce sera votre clé personnel à demander au responsable du site duquel vous souhaitez utiliser les ressources.
const ProtocolHTTP = 'https';/* anything or http */
const apiPluXmlSite = 'pluxopolis.net/crashnewstest';/* pluxml site domain name  where to fetch datas examples: [pluxopolis.net/crashnewstest] (without brackets)   */
const apibypage=''; /* default value is 5*/  
let artcontent= false ; /* afficher uniquement le chapo des articles distants | pour voir tout l'article : mettre à true */
/*/End Config/*/

Pour un fonctionement optimale, il est necessaire que le site sollicité et le site demandeur se connectent et échangent via le protocol sécurisé HTTPS.

Avec ce fichier JavaScript vient un fichier HTML d'exemple d'utilisation de l'unique fonction pour interrogé l'API et un conteneur HTML qui sert de receptacle pour l'affichage.Voici un aperçu de ce fichier :

Fichier apiCalling.html<script>
////fonctions d'appels et d'affichage html
//========================================
//  getPlxApiResult(apiPluXmlSite+'/?apiPluxml') ; // aide descriptif
//  getPlxApiResult(apiPluXmlSite+'/?apiPluxml&static','static') ;
    getPlxApiResult(apiPluXmlSite+'/?apiPluxml&article&page_number=1&bypage=5','article') ;
//  getPlxApiResult(apiPluXmlSite+'/?apiPluxml&categorie','categorie') ;
//  getPlxApiResult(apiPluXmlSite+'/?apiPluxml&etiquette','etiquette') ;

////fonction d'appels , retourne un objet json
//============================================
//  getPlxApiResult(apiPluXmlSite+'/?apiPluxml&commentaires','commentaires') 
//  getPlxApiResult(apiPluXmlSite+'/?apiPluxml&authors','authors') 
</script>
<div id="results"><!-- La requête s'affiche ici --></div>

décommenter les lignes que vous voulez utiliser

Ce ne sont bien entendue que quelques exemples d'usage possibles.

Pour plus d'aide ou remonter un dysfonctionement , il ya le forum de pluxml et/ou son repo github pour y trouver la dernière version, proposer des corrections ou notifier des défauts.

gcyrillus-nomade · 19 févr.

Passage en version 1 : https://ressources.pluxopolis.net/banque-plugins/plugins/ApiPluXml1.0.zip
avec un code (à coller dans une page HTML) en exemple qui affiche la liste des pages statiques d'un site PluXml avec ce plugin :

    <script>
    /*/Config/*/
    const apiKey = 'apiPluXml';
    const ProtocolHTTP = 'https';/* anything or http */
    const apiPluXmlSite = 'pluxopolis.net/crashnewstest';/* pluxml site domain name  where to fetch datas example: [pluxopolis.net/crashnewstest] (without brackets)   */
    /*/End Config/*/


let s = ''; 
if(ProtocolHTTP != 'http') s='s';
function getPlxApiResult(u,q) {
    fetch('//'+u,{
        method: 'GET',
        headers:{'apiKey': apiKey
        }
    })
    .then(response => response.text()) // Parse the response as text
    .then(text => {
        try {
            const data = JSON.parse(text); // Try to parse the response as JSON
            console.log(data);
            show(data,'json',q);
            } catch(err) {
            console.log(text);
            show(text,'html',q);
        }
    });  
}

function show(datas,type,q) {
    const res = document.querySelector("#results");

    if(type=='html') {
        res.insertAdjacentHTML( 'afterend',datas);
    }
    if (type=='json'){


      if(q =='static') {
        let static=new Array();
        let tpl='<ul>';
        Object.entries(datas).forEach((entry) => {
            const [key, value] = entry;
            let num= entry[0].replace(/^0+/, '');
            tpl +='<li><a hre'+'f="http'+s+'://'+apiPluXmlSite+'/?static'+ num +'/'+ datas[`${key}`]['url']+'">'+ datas[`${key}`]['name']+'</a></li>';
            console.log(datas[`${key}`]['name'])
        });
        tpl +='</ul>';
        res.insertAdjacentHTML( 'afterbegin', tpl);
      }
    }

}

//getPlxApiResult(apiPluXmlSite+'/?apiPluxml') ; // aide descriptif
getPlxApiResult(apiPluXmlSite+'/?apiPluxml&static','static') ;
//getPlxApiResult(apiPluXmlSite+'/?apiPluxml&article','article') ;
//getPlxApiResult(apiPluXmlSite+'/?apiPluxml&categorie','categorie') ;
//getPlxApiResult(apiPluXmlSite+'/?apiPluxml&commentaires',commentaires') ;
//getPlxApiResult(apiPluXmlSite+'/?apiPluxml&etiquette','etiquette') ;

</script>
<div id="results"><!-- La liste s'affiche ici --></div>

le script est dans cette page _{le plugin aussi => compatible free} : http://gcyrillus.free.fr/589/index.php?static2/test et affiche les liens des static d'un autre.

C'est pas extraordinaire, mais si vous avez d'autres idées ou exemples , allez y

Sudwebdesign · 20 févr.

J'aime l'idée, elle va être utile

Après le test de la page http://gcyrillus.free.fr/589/index.php?static2/test et le blanc après le titre Test, je suis allés voir la source, il y a bien le js mais il est bloqué par le nouveau système de sécurité des navigateurs récents

Access-Control-Allow-Headers

Voici les erreurs rapporté par mon Firefox 121 :

Blocage d’une requête multiorigine (Cross-Origin Request) : la politique « Same Origin » ne permet pas de consulter la ressource distante située sur https://pluxopolis.net/crashnewstest/?apiPluxml&static. Raison : l’en-tête « apikey » n’est pas autorisé d’après l’en-tête « Access-Control-Allow-Headers » de la réponse de pré-vérification des requêtes CORS. en savoir plus

[Édit] Elle est tellement récente que la page en français de MDM est inexistante PLM.

Blocage d’une requête multiorigine (Cross-Origin Request) : la politique « Same Origin » ne permet pas de consulter la ressource distante située sur https://pluxopolis.net/crashnewstest/?apiPluxml&static. Raison : échec de la requête CORS. Code d’état : (null). en savoir plus

Uncaught (in promise) TypeError: NetworkError when attempting to fetch resource.

Peut-être qu'en plus du Access-Control-Allow-Origin qu'il suffit d'un

headers('Access-Control-Allow-Headers: apiKey');

(ou avec *) quelque part ds le plugin.
Note : la page https://pluxopolis.net/crashnewstest/?apiPluxml&static donne bien le json

Bout du script en cause de la page http://gcyrillus.free.fr/589/index.php?static2/test

    function getPlxApiResult(u,q) {
        fetch('https://'+u,{
            method: 'GET',
            headers:{'apiKey': apiKey
            }
        })

Bien bien ce greffon et bonne continuation.

gcyrillus-nomade · 20 févr.

@Sudwebdesign arf,

plugin pas à jour/version différentes sur les 2 sites , mea culpa
free est en HTTP , Si la requête provient d'un site en HTTPS, alors il y a blocage.(quelques uns de mes test vers free en local n’était pas en https, je suis passé à coté.)
en gros :

HTTPS->HTTP = blocage (la seule solution est de passer en https .. exit l’hébergement free, après du php5 bridé, on se prive de pas grand chose si on a pas une âme d'archeoDev lol.
HTTP->HTTP = ça passe !
HTTP->HTTPS = ça passe !
HTTPS->HTTPS = ça a surtout l'air prévu comme ça en fait

Enfin il faut un code 200 en réponse, si vous avez un 301, ce n'est pas bon. Cela veut dire que le site a son option urlrewriting activée, il faut alors retirer le ? de l'url pour avoir un code 200 , évitant ainsi la redirection et un 301 en retour. (Modifications du scripts d'exemples dans les prochains jours)

Merci de ton retour

gcyrillus-nomade · 22 févr.

passage en version 2 https://ressources.pluxopolis.net/banque-plugins/plugins/ApiPluXml.2.0.zip
j'ai un peu compléter le script pour afficher depuis n'importe où: _{(par exemple dans une statique @ http://gcyrillus.free.fr/new/index.php?static7/test-apipluxml login : vip pass: vip et / ou http://gcyrillus.free.fr/589/index.php?static3/test-free-to-free)}
1. l'aide
2. liste de liens des statiques
3. liste de lien des catégories
4. liste des liens des tags
5. listes des articles avec une pagination Besoin d'un coup de pouce ici , le premier(dernier) article ne s'affiche pas .array dans un object récalcitrant)

Il y a quelques valeurs à configurer au début du script.
0. indiquez si il s'agit d'un site en http . Cela ne marche que depuis un site lui même en http (par exemple entre deux site chez free)
1. nom de domaine où se trouve un pluxml avec le plugin apiPluxml activé
2. une clé . pour le moment il n'y en a pas besoin (c'est une evolution probable)
3. nombre d'article à afficher par page
4. affichage ou non de Content true ou false, si false il y a le lien lire ... sous le chapo
5. lien des categorie et tag extrait et inserer aux articles ainsi que le nom de l'auteur et date de publication

Cliquer ce texte pour afficher les codes

        <script>
        /*/Config/*/
        const apiKey = 'apiPluXml';
        const ProtocolHTTP = 'https';/* anything or http */
        const apiPluXmlSite = 'pluxopolis.net/crashnewstest';/* pluxml site domain name  where to fetch datas example: [pluxopolis.net/crashnewstest] (without brackets)   */
        const apibypage=''; /* default value*/  
        let artcontent= false ; /* pour voir tout l'article : mettre a  true */
        /*/End Config/*/

        /* fetch datas */
        let s = ''; 
        if(ProtocolHTTP != 'http') s='s';
        function getPlxApiResult(u,q) {
            fetch('//'+u,{
                method: 'GET',
                headers:{'apiKey': apiKey
                }
            })
            .then(response => response.text()) // Parse the response as text
            .then(async text => {
                try {
                    const data = JSON.parse(text); // Try to parse the response as JSON
                    if(q == 'article') {
                        // data.result.unshift(data.result[0]);
                        let rubricks = [];
                        await getCatNames(rubricks)
                        let authors = [];
                        await getAuthors(authors);
                        show(data,'json',q, rubricks, authors);
                        } else {
                        show(data,'json',q);                
                    }
                    } catch(err) {
                    show(text,'html',q);
                }
            });  
        }


        /* show what we got */
        function show(datas,type,q, rubricks='', authors='') {
            const res = document.querySelector("#results");        
            if(type=='html') {
                res.insertAdjacentHTML( 'afterend',datas);
            }
            if (type=='json'){

                if(q =='static' || q =='categorie') {
                    let tpl='<p>Pages: <b>'+q+'</b> de <b>'+ apiPluXmlSite +'</b></p><ul>';
                    Object.entries(datas).forEach((entry) => {
                        const [key, value] = entry;
                        let num= entry[0].replace(/^0+/, '');
                        if(datas[`${key}`]['active'] == '1') tpl +='<li><a hre'+'f="http'+s+'://'+apiPluXmlSite+'/?static'+ num +'/'+ datas[`${key}`]['url']+'">'+ datas[`${key}`]['name']+'</a></li>';
                    });
                    tpl +='</ul>';
                    res.insertAdjacentHTML( 'afterbegin', tpl);
                }

                if(q =='etiquette') { 
                    let string ='';
                    Object.entries(datas).forEach((entry) => {
                        const [key, value] = entry;
                        if(datas[`${key}`]['active'] == '1') string+= datas[`${key}`]['tags']+',';
                    });

                    const myTags = string.replace(/\,$/, "").replace(/\s/g, "").split(",");
                    let iterate = [...new Set(myTags)];
                    let tagList='<p><b>'+q+'s</b> de <b>'+ apiPluXmlSite +'</b></p><nav class="tagApiList">';
                    let tags='';
                    tagList += getTags(tags,iterate);
                    tagList +='</nav><style>.tagApiList{display:flex;flex-wrap:wrap;gap:.5em}.tagApiList a{display:block;border:1px solid;padding-inline:.5em;border-radius:5px}</style>';
                    res.insertAdjacentHTML( 'afterbegin', tagList);
                }


                if(q =='article') { 
                    let page_number = '1';
                    if(apibypage != Number(apibypage) || apibypage <1 ) bypage = datas.bypage; else bypage = apibypage;
                    if(datas.page_number != undefined) page_number = datas.page_number
                    let pages = Math.ceil(datas.result.length / bypage);
                    let next='';
                    let previous ='';
                    let first = (Number(page_number) * Number(bypage)) - Number(bypage) + 1;
                    let last = Number(bypage) * Number(page_number) + Number(bypage)  - Number(bypage) + 1;
                    let nextPage= ++datas.page_number;
                    let nextlast = last + Number(bypage);
                    let whereAt='';
                    if(pages>1) whereAt =' <span class="apiPageAt">Page <b>'+page_number +'</b> / '+pages+' </span>&nbsp;';
                    if(page_number > 1) previous='<button onclick="getPlxApiResult(\''+apiPluXmlSite+'/?apiPluxml&article&bypage='+bypage+'&page_number='+ --page_number + '\',\'article\');return false;">previous</button>';
                    if(last < datas.result.length) next = '<button onclick="getPlxApiResult(\''+apiPluXmlSite+'/?apiPluxml&article&bypage='+bypage+'&page_number='+ nextPage + '\',\'article\');return false;">next</button>';
                    let datart = Object.entries(datas.result)
                    datart =  datart.slice(--first,--last);
                    datart.reverse()
                    let articles ='';
                    res.innerHTML='';
                    res.insertAdjacentHTML( 'beforeend', '<nav class="apiNav">'+previous+' '+whereAt+' '+ next +'</nav>');
                    datart.forEach(function(art,articles){res.insertAdjacentHTML( 'afterbegin',getArticles(articles,art['1'],rubricks,authors))})
                }
            }
        }
        function getArticles(articles,art,rubricks,authors) {
            console.log('sub-index: ' +articles)
            artTags = art.tags.replace(/\,$/, "").replace(/\s/g, "").split(",");
            tags= getTags('',artTags);
            artCats = art.categorie.replace(/\,$/, "").replace(/\s/g, "").split(",");
            cats=getCategories('',artCats,rubricks);
            datef = getDate(art.date);
            if(artcontent ==false ){ art.content = `Lire la suite de: <a href="http${s}://${apiPluXmlSite}/?article${art.numero}/${art.url}">${art.title}</a> <hr>`;}
            else {art.content ='<div>'+art.content+'</div>';}
            articles =`
            <article class="articleApilList">
                <h2><a href="http${s}://${apiPluXmlSite}/?article${art.numero}/${art['url']}">${art.title}</a></h2>
                <p>Ecrit le ${datef} par: <b>${authors[art.author]['name']}</b> | Catégorie: ${cats} |Etiquette: ${tags}</p>
                <div>${art.chapo}</div>
                ${art.content}
            </article>
            `;
            return articles;//show!


        }
        function getTags(tags,tagada) {    
            tagada.forEach(tag => tags +='<a hre'+'f="http'+s+'://'+apiPluXmlSite+'/?tag/'+ tag.normalize("NFD").replace(/[\u0300-\u036f]/g, "") +'" target="_blank">'+ tag +'</a> ');
            return tags;                
        }
        function getCategories(cats,catagada,rubricks) {  // extraction de chaque etiquettes  
            catagada.forEach(cat => cats +='<a hre'+'f="http'+s+'://'+apiPluXmlSite+'/?categorie'+ cat+'/'+rubricks[cat].url+'" target="_blank">'+ rubricks[cat].name +'</a> ');
            return cats;                
        }
        function getDate(artdate) {// deconstruction de la chaine en date lisible
            const year = artdate.slice(0, 4);
            const month = artdate.slice(4, 6);
            const day = artdate.slice(6, 8);
            let datef =  day+  '-'+ month+ '-' +year ;
            return datef;
        }

        async function getCatNames(rubricks) {
            // faut retrouver la correspondance du numéro donc second request et on attend
            rubricks = await fetch("//" + apiPluXmlSite + "/?apiPluxml&categorie", {
                method: "GET",
                headers: { apiKey: apiKey }
            })
            .then((response) => response.json())
            .then((json) => {
                try {
                    Object.entries(json).forEach((entry) => {
                        //rubricks[num].cat.name = cat.url;
                        const [key, value] = entry;
                        rubricks[key] ={}
                        rubricks[key].name = value.name;
                        rubricks[key].url = value.url;
                    });

                    } catch (err) {
                    console.log("rub error");
                }

                return rubricks;
            });

        }

        async function getAuthors(authors) {
            // faut retrouver la correspondance du numéro donc second request et on attend
            authors = await fetch("//" + apiPluXmlSite + "/?apiPluxml&authors", {
                method: "GET",
                headers: { apiKey: apiKey }
            })
            .then((response) => response.json())
            .then((json) => {
                try {
                    //console.log(json['001'].name );
                     Object.entries(json).forEach((entry) => {
                     const [key, value] = entry;
                     authors[key]={}
                     authors[key].name= value.name;
                     authors[key].infos = value.infos;
                     });


                    } catch (err) {
                    console.log("fetch author error");
                }

                return authors;
            }); 
        }

        // fonctions d'appels et d'affichage
        //getPlxApiResult(apiPluXmlSite+'/?apiPluxml') ; // aide descriptif
        //getPlxApiResult(apiPluXmlSite+'/?apiPluxml&static','static') ;
        getPlxApiResult(apiPluXmlSite+'/?apiPluxml&article&page_number=1&bypage=5','article') ;
        //getPlxApiResult(apiPluXmlSite+'/?apiPluxml&categorie','categorie') ;;
        //getPlxApiResult(apiPluXmlSite+'/?apiPluxml&etiquette','etiquette') ;

        //fonction d'appel ,
        //getPlxApiResult(apiPluXmlSite+'/?apiPluxml&commentaires','commentaires') 

        /* sources 
            https://stackoverflow.com/questions/990904/remove-accents-diacritics-in-a-string-in-javascript
            https://stackoverflow.com/questions/12248854/javascript-remove-last-character-if-a-colon & https://stackoverflow.com/questions/10800355/remove-whitespaces-inside-a-string-in-javascript
            https://stackoverflow.com/questions/1960473/get-all-unique-values-in-a-javascript-array-remove-duplicates  // let unique = [...new Set(myArray)];
            ... forum.pluxml.prg, alsacréations.com, pluxopolis.net, php.net, mdn, ....
        */                  
                    </script>
                <div id="results"><!-- La liste s'affiche ici --></div>

Les commentaires ne sont pas encores filtrés pour affichage. Pour le moment l'API n'a qu'une option : GET en front . Pas d'options POST de prévue pour le moment permettant de commenter par exemple. Rien non plus d'envisager pour un backend, si vous demandez: celle de Pluxml est parfaite

gcyrillus-nomade · 24 févr.

Passage en version ~~2.5~~ 2.5.2
Modifications

du script d'exemple divisé en deux parties,
- Configuration et appels sur la page pour afficher les données en HTML
- Fonctions d'affichage sur le site distant (la où est installer le plugin).
modification du fichiers d'aide
Ajout du thumbnail si article affiché (à suivre, car le script estime que l'url du fichier images est relative )

Nouvelle archive https://ressources.pluxopolis.net/banque-plugins/plugins/ApiPluXml.2.5.2.zip

@Sudwebdesign (si dans la console tu as un message de blocage avec un code 301, il faut retirer le ? dans l'appel de l'API pour ne pas avoir de redirection , cela arrive lorsque l'urlrewriting est activé, il faut donc l'url récrite )

entre deux sites en https: https://pluxopolis.net/crashnewstest/static5/sub2 ok
entre deux site en http http://gcyrillus.free.fr/new/index.php?static7/test-apipluxml ok
entre un http et un https http://gcyrillus.free.fr/589/index.php?static5/test-free-to-https fails

Amusez vous bien avec