Développement d'une barre de contribution intégrable

Je me suis fait la réflexion ces derniers jours :wink: Même moi je ne la connais pas par coeur :stuck_out_tongue: Je pensais ptet à utiliser un nom de domaine de type financement.duniter.org. Après c’est vrai que mon serveur n’est pas une bête de course. Les instances Diaspora et Peertube qui sont dessus ne sont pas très véloces :confused:

:star_struck: :star_struck: :star_struck:

Salut @Paidge et les autres…

J’ai regardé le code et il y a un truc que je ne comprend pas bien. Pourquoi passer par du php pour générer la barre alors que tout peut être fait dans le navigateur ?

En tant que tel, cela oblige à avoir un serveur apache qui va générer la barre avec les fichiers iframe.php et image.php alors que l’on pourrait se passer d’un serveur en faisant directement une requête sur l’api g1.duniter.fr.
Vous pensez peut-être à faire un cache serveur pour décharger g1.duniter.fr ? Ça peut en parti se remplacer par du localstorage sur le navigateur.

Il vaut mieux faire tout ce que l’on peut sur un navigateur et pas sur un serveur non ?

6 « J'aime »

Je pense que paidge est plutôt expérimenté avec PHP.
Voici la raison pour laquelle c’est fait sur le serveur et pas dans le client (moteur JS) en JavaScript.

1 « J'aime »

@yyy a commencé une POC en Javascript, mais il n’a pas été au bout du projet. Je suis entièrement d’accord que passer par un serveur est overkill. Mais cette barre PHP est exemplaire et peux servir de base à une migration en full JS !

1 « J'aime »

Comment fait-on pour générer une image directement dans le navigateur ?

J’avais d’ailleurs demandé sur ce fil si quelqu’un savait faire ça (car le besoin est là, clairement). Serais-tu capable de faire ça @ManUtopiK ?

Tu peux utiliser le canvas, mais le mieux c’est de créer un svg ! Le svg peut même s’animer en y ajoutant du javascript dedans ! http://www.petercollingridge.co.uk/tutorials/svg/interactive/javascript/

4 « J'aime »

Et avec cette façon de faire, peut-on insérer l’image sur un forum avec du BBCode ?

Tout a fait d’accord !
J’avais en tête que ça pourrait être en JS avec une configuration faites dans https://g1.duniter.fr/api
D’autant que les pod Cesium+ ElasticSearch indexent les mouvements et permettent une recherche rapide. Si ça t’intéresse, c’est accessible sur les URL du type g1.data.duniter.fr/g1/movement/_search?pretty&q=comment:REMU* ou en POST (Pour faire des « aggregation » : sum, avg, etc.)

1 « J'aime »

A mon avis, oui :slight_smile: si ma mémoire est bonne, @ManUtopiK avait coder le site ggouv.org
@ManUtopiK tu confirmes ?

Bonne mémoire, ça fait quelques années maintenant…c’était en PHP.

Oui je suis carrément intéressé ! Y-a-t il une doc sur l’api de césium ou tu as un lien de la lib qui génère l’api ? Faudrait que je regarde plus en détail césium… J’avais fait un tour pour regarder comment c’était fait avec Angular. Mais c’est chaud, je connais plus React et surtout Vue…

Oui j’ai déjà commencé à bidouiller. Ouvre la console de ton navigateur et copie-colle ça :

apiNode = "g1.duniter.fr"
pubkey = '27b1j7BPssdjbXmGNMYU2JJrRotqrZMruu5p5AWowUEy'
startTime = new Date("2019-10-07T18:00:00+00:00").getTime() /1000
now = Math.round(Date.now() /1000)
total = 0
target = 4000
arrayFinal = []
mapDelta = []
donneurs = []

await fetch(`https://${apiNode}/tx/history/${pubkey}/times/${startTime}/${now}`)
.then(response => response.json())
.then(response => {
    const transactions = response.history.received
    let tmpTimestamp = startTime

    transactions.map(tx => {
        const donneur = tx.issuers[0]
        const outputs = tx.outputs

        if (donneur !== pubkey) {
            if (!donneurs.includes(donneur)) donneurs.push(donneur)

            outputs
            .filter(output => output.includes(pubkey))
            .map(output => {
                console.log(output)
                const timestamp = tx.time
                const montantTx = Number(output.match(/^(\d+):/)[1])/100
                if (timestamp !== tmpTimestamp) arrayFinal.push({t: tmpTimestamp, y: total.toFixed(2)})
                const tday = 43200 + timestamp - timestamp%86400
                if (mapDelta[tday]) {
                    mapDelta[tday] += Math.round(montantTx)
                } else {
                    mapDelta[tday] = Math.round(montantTx)
                }
                total += montantTx
                tmpTimestamp = timestamp
            })
        }
    })
    arrayFinal.push({t: tmpTimestamp, y: total.toFixed(2)}, {t: now, y: total.toFixed(2)})
})
.catch(error => console.log("Erreur : " + error))

const dividend = await fetch(`https://${apiNode}/blockchain/with/ud`)
.then(resp => resp.json())
.then(async data => await fetch(`https://${apiNode}/blockchain/block/${[...data.result.blocks].pop()}`)
    .then(resp => resp.json())
    .then(data => data.dividend/100))

console.log({
    pubkey,
    dividend,
    total: total.toFixed(2),
    donneurs,
    arrayFinal,
    mapDelta,
    percentage: Math.round(total/target*100)
})

Tu as toutes les données qu’il te faut dans le console.log :slight_smile:

D’ailleurs, j’ai pas trouvé plus court que ça pour avoir le DU :

const dividend = await fetch(`https://${apiNode}/blockchain/with/ud`)
.then(resp => resp.json())
.then(async data => await fetch(`https://${apiNode}/blockchain/block/${[...data.result.blocks].pop()}`)
    .then(resp => resp.json())
    .then(data => data.dividend/100))

Obligé de taper 2 fois sur l’api. Césium ne le fournit pas directement ? @kimamila

3 « J'aime »

Oui et encore :stuck_out_tongue: J’ai fait peu de projets en PHP, si ce n’est des projets persos et qqes custumisations de différents CMS et utilisation de qqes frameworks comme symfony par ex. J’ai fait la wotmap en javascript mais, à mon avis le code est carrément améliorable aussi. Je suis plus un bidouilleur qu’un développeur. Ma spécialité c’est plutôt le front et le webdesign. Tout ça c’est du fait que j’ai repris les études à 30 ans pour bosser dans le numérique :slight_smile: Les formations que j’ai suivies, même si je suis arrivé au Master2, n’étaient pas terribles du tout :confused:

@ManUtopiK hélas oui avec BMA on ne peut pas obtenir directement le montant du DU :confused:
Ce sera possible avec l’api GVA et cours de développement.
Un propotype de l’api GVA de Dunitrust est disponible en libre accès ici : https://dev.g1.dunitrust.org/graphiql
Mais attention c’est une version de dev donc elle peut être souvent down, ne vous en servez que pour du test !

J’avais besoin d’étendre un peu les fonctionnalités de la barre et j’ai fini par tout refactorer.

Vous pouvez jeter un œil ici :

https://growdfunding.borispaing.fr/

Nouveautés

  • Nouveaux styles :
  • Encapsulation
  • Quand la date de fin est dépassée, on affiche « Fini »
  • Messages d’erreurs plus clairs et plus précis
  • Résolution du problème du SVG qui n’était pas généré par certains serveurs à cause du <?xml interprété comme <? (tag d’ouverture php)
  • etc.

@Paidge > Je t’envoie une MR quand j’ai vraiment fini tout ce que je veux faire.

Bon, idéalement il faudrait convertir tout ce qui est iframe en Javascript plutôt qu’en PHP, comme l’a mentionné @ManUtopiK, mais je ne sais pas faire pour l’instant, donc soit j’apprends soit quelqu’un d’autre s’en charge. En tous cas c’est maintenant encapsulé, donc la suite devrait être un poil plus facile.

@Moul > D’accord avec l’histoire du nom de domaine. Pourquoi pas installer ça sur g1crowdfunding.monnaie-libre.org ? @poka ? @scanlegentil ?

6 « J'aime »

6 messages ont été scindés en un nouveau sujet : DuniterJS ou DuniterTS?

En fait je crois que j’ai trouvé :

https://g1.data.duniter.fr/user/profile/78ZwwgpgdH5uLZLbThUQH7LKwPgjMunYfLiCfUCySkM8

Qu’intégreras-tu ?

Héhé, enfin réussi à faire un nuage avec les noms Cesium+.

Ça va rapporter des pépètes ça quand le widget sera affiché sur 2-3 sites et que ce sera la bataille pour savoir qui a la plus grosse (taille de police) :smirk:

En janvier c’était @PiNguyen. Merci qui ? Merci Pi :slight_smile:

8 « J'aime »

Salut Boris, la taille de la police dépens quoi ?

Du montant de la contribution.

3 « J'aime »

Super tout ça !
@anon88550267 Tu as mis sur le dépôt gitlab ? J’ai pas l’impression qu’il soit à jour…

D’ailleurs, existe-t-il une lib js pour interroger un nœud duniter ? Ce serait bien une lib isomorphique (fonctionne en browser, node.js, es6)…