Session du 16 juillet 2024 à 19h30
Développement Web & Frameworks
Ophose: Framework Web Fullstack
Présentation du framework Web Fullstack: Ophose
00:03:18 :Il regroupe principalement des tutoriels pour démarrer avec, qui sont écrits en anglais et qui seront sûrement écrits en français plus tard, on verra bien.Pour démarrer avec, on peut voir à quoi ressemble la structure d'un projet type d'offoz. Le point VS Code va tout simplement contenir les raccourcis pour VS Code. Le dossier composant va être composé de tous les composants de votre application.
00:05:19 :Si on retourne sur notre première application, on peut voir qu'il y a cette interface. Comment les interfaces avec OFOS sont composées ?Comme on revient sur la base, la base est un objet qui hérite d'OFOS.Base. On peut régler le titre avec cette petite fonction. On peut voir qu'il y a un style qui est retourné.
00:05:50 :Le style va être exclusif aux composants en cours et ensuite le rendu avec la fonction Render va être le contenu du composant en cours.On peut prendre par exemple le wrapper ici qui va être un composant basique et on peut voir que le style pour les écrans de style MD de 1024 pixels, il me semble, va contenir ce style.
00:11:35 :Donc si je retourne ici et que je mets un HA avec un index, par exemple, il faut que j'entende quelque chose, c'est ma faute.Et pour le rendu, il va simplement retourner 10.procs.
00:12:14 :Pour le base, le tag est arbitraire, je peux mettre ensuite 10.procs.children.Et si je retourne 10.procs.children.Ok, c'est ma faute.Donc, on va démarrer par créer le blog en créant un composant que j'ai appelé header.
00:13:35 :Donc, pour se faire, on va retourner un header. Donc comme lien, on va dire que je vais vouloir un lien pour aller au H1.On peut appeler le blog simplement My Blog. Et ensuite, je vais vouloir une navigation qui va contenir tous mes enfants.
00:14:29 :Donc, pour l'importer, j'ai besoin d'un script. Le script, je peux simplement le placer ici. Donc, import script. Et ensuite, entrer l'adresse de Taewin.Et maintenant, si je réactualise ma page, on aura bien Taewin qui se met automatiquement en jeu. Enfin, Taewin qui met automatiquement les composants en jeu.
00:15:19 :Je peux rajouter un C4, un padding, et je peux venir aller l'appeler ici.Donc, on sait, comme on avait vu avant, si je mets base-header, je peux le retourner directement d'ici. En tapant new header, tout simplement.
00:23:00 :On va avoir la même chose de ce côté-là. Ça fera l'affaire. Et on veut aussi un bouton pour lui dire de créer le poste.Voilà. Ok. Parfait.
00:24:32 :Alors, pour ce faire, je vais simplement mettre un watch avec un 10.title et pareil avec un 10.content.Donc, pour afficher des variables live et qu'elles se mettent automatiquement à jour, je peux tout simplement les écrire dans mon rendu du composant.
00:25:23 :Maintenant, si je reviens sur mon titre, je vais créer « Hello » et là, pour le contenu, j'aurai mon contenu par exemple.Donc, on peut voir que je peux automatiquement mettre les variables à jour et les faire suivre très simplement. Alors, ce qu'on va pouvoir faire, c'est que maintenant, quand on clique, on le met à jour en base et qu'on les affiche dans notre page d'index.
00:28:23 :Parfait.Si je reviens dans mon database, je vais avoir mes exports qui ne sont pas effectués.Qu'est-ce qui s'est passé ?Ce n'est pas grave.
00:29:30 :Alors, si je crée mon app en configuration. Désolé, c'est plus direct.C'est bon, ça s'est réglé.C'est un peu bizarre quand même.Pour la base de données, on va simplement prendre MyBlog.
00:30:14 :Est-ce que je vais avoir les mêmes soucis ?Je pense que ça devrait quand même fonctionner.On va voir. Je vais voir si ma base de données s'est créée en local.
00:30:56 :Donc phpMyAdmin.MyBlog.Si, parfait, on a toutes les tables qu'il faut.Ensuite, j'essaie de mettre directement les composants, si on a tous les composants.Ok.
00:31:36 :Qu'est-ce qui se passe ?Ok, ça devrait mieux fonctionner maintenant.Alors, désolé de l'aléa.Pour créer un composant qui va me permettre de récupérer mes blogs, je peux créer un environnement.
00:32:02 :Je vais créer MyBlog.En php, ça va être le point d'entrée pour ce module-là.Celui-ci va retourner une classe anonyme qu'il va hériter d'AuthoseAnv.Pour dire qu'on utilise cet environnement, j'ai besoin de préciser qu'il s'agit de l'environnement MyBlog dans le namespace.
00:32:36 :Voilà.Ensuite, on peut effectuer un test assez simple.Je clique sur la fonction Endpoints pour déclarer des points d'entrée de l'application.Je peux, dans cette fonction, déclarer des points d'entrée.
00:32:51 :Par exemple, écrire un point d'entrée de test qui va retourner une réponse.Avec un mot, par exemple, et le mot.Et si je vais effectuer un test ici et que je tape //api//myblog//testOn peut créer un contrôleur.
00:33:43 :Pour créer des classes qui vont appartenir à ce module-là, il faut les créer dans le dossier src.Ensuite, préciser son namespace de MyBlog.Et ensuite, créer une classe qui aura le même nom que le fichier.
00:34:09 :Donc, MyBlogController.Public, Function, Index.Parfait.Et donc, dans l'index, je veux retourner une réponse.En haut.Qui dit, tout simplement, jour.Maintenant, pour test, je peux dire MyBlogController.
00:34:32 :Et après, la fonction index.Donc, on peut simplement créer des points d'API sur certains modules grâce à cette fonction.Alors, maintenant, comment faire pour dire qu'on veut créer un poste ?
00:34:54 :On peut créer un modèle, que je vais appeler poste, tout simplement.En PHP.Et dans celui-ci, on va préciser du namespace qu'il s'agit de app-model, tout simplement,parce que ce fichier-là se trouve dans le répertoire relatif par rapport au projet, dans app-model.
00:35:19 :Ensuite, je peux créer mon place de poste.Et dedans, lui ajouter un schéma.Donc, protected-schéma.Et ensuite, pour le schéma, il faut dire extension de deux modèles, pardon.
00:35:38 :Ah, on va...C'est pas grave.Alors, on va dire use-ah4-model.Et ensuite, le modèle simplement, qui va normalement le reconnaître.Dans ce modèle, on peut lui préciser tous les attributs qu'on veut, sauf l'ID, parce qu'il sera automatiquement créé.
00:36:20 :Du coup, pour celui-là, ça suffira.Je vais lui rajouter un titre, qui sera un bar chart de 255, ou 264 plutôt, sinon ça fera un peu long.
00:36:35 :Avec un contenu, qui sera simplement du texte.Et avec ça, on veut une date de création.Donc un createdAt, qui sera une date...Voilà, parfait.
00:36:51 :Et donc, pour créer ce modèle et le mettre en base, je vais venir taper phpocl.as4.model et la commande modelize.Je devrais créer un dossier, un fichier, par exemple.
00:37:15 :Voilà, on s'appelle modèle-schéma.conf.Normalement, on devrait...C'est, voilà.Donc, il va transformer ce modèle et le mettre dans le schéma.Ensuite, je peux simplement taper la commande create, qui va venir...
00:37:38 :Donc, si je retourne sur phpMyAdmin...Il va venir créer ma table de postes, simplement, avec les attributs qui correspondent.Donc, admettons que j'ai précisé que je voulais un auteur pour cette table.
00:37:57 :Je peux retourner dans mon poste, ici, et lui rajouter un auteur,qui sera tout simplement mon user, donc une référence vers la table de user, et qui sera obligatoire, donc requis.
00:38:16 :Et si je tape php-model-create...Là, pardon.Oula, non, pardon.Il faut le modéliser d'abord et ensuite le créer, voilà.Je vais avoir ma colonne user qui sera ajoutée.
00:38:35 :Et si je regarde dans le concepteur, je devrais avoir un lien visuel entre l'auteur ainsi que le user.Ensuite, pour venir ajouter mes éléments dans cette table, je peux venir créer le user.
00:39:10 :On va créer un utilisateur factice.Pour l'insérer, on peut tout simplement désactiver...Là, on n'a pas les configurations de l'utilisateur.Bon, c'est pas grave.On va venir créer un utilisateur factice, donc je vais pouvoir taper un username admin, un password de quelconque.
00:39:40 :Les mots de passe sont encryptés par défaut, donc ça ne fonctionnera pas.Un email, ainsi qu'un token qui ne sera pas confirmé.On met confirmé, on va dire 1.
00:39:56 :On peut laisser à nul et on tape stamp.Voilà.Tout ça pour avoir un utilisateur.Parfait.Ensuite, pour créer un nouveau poste, je peux revenir dans mon contrôleur et créer la fonction create.
00:40:26 :Pour cette fonction, je vais avoir besoin de vérifier mes champs.Pour l'instant, on a juste un title, qui va être dans le request, un input qui va correspondre à un title, ainsi que le contenu,qui pareil, lui aussi va correspondre à un input dans ma requête du contenu.
00:40:47 :Parfait.On peut effectuer des vérifications.Je peux dire que s'il n'y a pas de titre ou s'il n'y a pas de contenu, alors je retourne une erreur en JSON.
00:40:59 :Parfait.Et sinon, si tout se passe bien, on peut créer un nouveau poste.Parfait.Je vais l'importer.Donc, je peux créer un nouveau poste.Dans ce poste, je vais lui préciser le titre, ainsi que son contenu.
00:41:19 :Ainsi que son contenu, pour l'utilisateur, vu qu'on a besoin d'un, mais qu'on n'en a pas,on va simplement lui préciser qu'on veut l'utilisateur numéro 1.
00:41:31 :Et pour la date, on n'en a pas besoin, je peux enregistrer et ensuite retourner la date de ce poste, par exemple.J'enregistre et je reviens sur mon create.js qui est ici.
00:41:59 :Maintenant, on peut lui ajouter une fonction, un événement.Je vais dire, par un clic, que je veux récupérer l'événement.On peut lui dire preventDefault, pour annuler le comportement par défaut de cette fonction.
00:42:19 :Ensuite, pour appeler cette fonction, il faut créer un nouveau point.Pour créer ce point, on va appeler thisTemplate.create et la fonction create.Voilà, parfait.Ensuite, je peux venir appeler ce endpoint en tapant le nom de mon module ainsi que le nom de l'endpoint.
00:42:52 :Ensuite, en paramètre, je peux lui préciser que je veux this.title.Je peux simplement mettre ça comme ça, ainsi que le content de cette façon.Une fois que c'est fait, je peux, par exemple, avoir ma réponse.
00:43:10 :Avec cette réponse, je peux créer une alerte, par exemple, avec le R.Il me retournera la date.Parfait.Si je fais là, on va réactualiser.
00:43:32 :Maintenant, si je crée une vidéo et que je mets mon contenu, je clique sur create.Ce n'est pas la colonne user dans le bloc contrôleur, mais bien la colonne auteur.
00:43:55 :Je peux revenir sur ma page.Auteur, parfait.Ici, si je recrée, on aura bien des idées qui s'implémentent.Et si je vais dans la table de poste, on a bien des contenus qui se mettent à jour.
00:44:17 :Maintenant, comment faire si je veux les afficher sur la page d'accueil ?C'était notre problématique de défaut.Je peux retourner une réponse de poste.On va dire que poste est égal à une version BULT.
00:44:36 :BULT, c'est avec l'ORM.Avec celui-ci, je peux simplement le paginer.Le paginate, c'est normal qu'il ne fonctionne pas.Donc, on est obligé d'en faire un peu plus.
00:45:08 :Donc, paginate, on obtient tout simplement.On aura nos postes.Et maintenant, je peux retourner un JSON des postes.Et si je retourne dans mon ENV.PHP, celui-là, on va l'appeler ALL, par exemple.
00:45:30 :Si je vais dans mon API et que je vais dans SLASH ALL,on aura bien tous les postes disponibles avec une version paginée de ceux-ci.
00:45:45 :Si je retourne dans mon index.js, on va vouloir créer des postes à chaque fois.Comment faire ?Je peux taper ici la même fonction qu'avant, donc au ENV, et récupérer tous les postes.
00:46:03 :Et ensuite, avec celui-ci, je vais les stocker dans ma variable de LIVE.Donc, je peux dire DISPONT POST.Il peut être un LIVE par défaut vide.
00:46:17 :Annule.Et une fois que ceux-ci sont là, je peux venir dire que DISPONT POST,on va le set à la valeur de ce qu'on a reçu.
00:46:28 :Alors, maintenant, pour les afficher, rien de plus simple.Je crée un DIN avec DISPONT POST.Et ensuite, on va dire que si la valeur de poste est nulle,on va dire retourner simplement un chargement.
00:46:50 :Et sinon, s'ils sont tous là, on va retourner un poste.rose.On va le map, et pour le poste, on va créer un nouveau poste.Voilà.
00:47:09 :Avec ces valeurs.Ensuite, pour le DIV, hop, hop, hop.Voilà, ok.Parfait.Et maintenant, si je reviens dans ma page d'accueil,on va créer un ELO 3 avec mon contenu 5, par exemple.
00:47:27 :Je vais créer.Et je vais retourner sur la page d'accueil.Alors, username.Est-ce que je me connais de username dans mon ordinateur?Non.Alors, qu'est-ce qui s'est passé?
00:47:47 :Disponse, ok.Oui, d'accord.Je crois que je comprends pourquoi.Ok, donc dans mes postes, on peut créer une fonction.Je vais appeler public for table, par exemple.
00:48:07 :Et ensuite, dans celle-ci, je vais retourner un tableau.Pour ce tableau, je vais donc faire un tableau associatif.Donc, on va prendre les éléments qu'on a besoin en front.
00:48:28 :Donc, dans le front, on a besoin d'un disprop.Voilà, on a besoin de tout ça, entre guillemets.Je vais le coller ici.Donc, pour le titre, je vais dire que je veux list.title.
00:48:44 :Ensuite, pour le contenu, je veux le contenu.Pour la date created at, avec une majuscule, je veux ceci.Et pour l'auteur, pour le user, je veux un nouveau tableau.
00:49:06 :Dans celui-ci, je peux lui dire userName, avec thisUserUserName.Ou en tout cas, thisAutorUserName.Ici, parfait.Donc maintenant, si je supprime ça, on a une fonction for table qui existe dans notre classe poste.
00:49:31 :Pour la préciser dans le contrôleur, je peux, dans le paginate,rajouter une fonction describe.Le sangle, paginate, leur paginate, leur paginate, ok.La fonction describe, voilà.
00:49:55 :Et lui dire, et lui passer le nom de la fonction qui est à l'intérieur du poste.For table, voilà.Maintenant, si je retourne ici, on a bien le tableau décrit de la façon qu'on veut.
00:50:10 :Et on peut voir aussi qu'il a fait automatiquement le lien avec l'entité de useret qu'il est allé chercher son userName simplement en tapant dans le poste,en tapant auteur, donc on va chercher son auteur sur un tableau externe,et ensuite userName.
00:50:30 :Si je retourne ici, on a bien tous nos postes qui s'activent.Et si j'en crée un nouveau, avec geste final ainsi qu'au pause, c'est cool par exemple.
00:50:51 :On a bien l'ID, et hop, je peux afficher ce poste aussi.Donc avec la pagination, il y a forcément des choses que je n'ai pas faites,mais elle prend en compte la gestion des pages,la gestion du nombre de résultats par page avec une limite.
00:51:07 :Il y a des notions comme les CSRF dont je ne suis pas revenu, que je peux montrer aussi.Donc les CSRF, tout simplement, ça va être le Cross-Site Request Scripting,c'est pour éviter que un script, je vais dire des conneries, je suis désolé,c'est simplement pour éviter qu'un script externe puisse interagir avec,
00:51:32 :envoyer des requêtes à votre place, entre guillemets, en gros de gros.Donc par exemple pour le Create, on va dire que c'est un point sensible,donc pour celui-ci, je veux afficher, je veux allouer un CSRF.
00:51:45 :Je ne vais pas le mettre dans le tableau, pardon.Je vais le mettre ici.Est-ce qu'il commence à marcher concrètement ?Donc on va dire que si je suis là, je peux soit accéder à les rows,donc à la requête complète, mais si je rajoute une protection CSRF,si je retourne ici, on verra que le token n'est pas valide,
00:52:11 :tout simplement parce que je ne suis pas passé d'abord par le sitequi a dit que le token était valide et qui lui ensuite va envoyer des requêtesavec le token qu'il a enregistré dans le site.
00:52:26 :Donc ça évite certaines protections.Je pense être revenu sur le plus gros des points.Je suis désolé, la présentation ne s'est pas passée comme prévu,mais je pense avoir montré quand même l'essentiel.
00:52:43 :Il y aura des gros points à corriger là, je suis un peu dessus.Mais sinon, je suis plutôt satisfait de la présentation,donc merci à tous d'avoir été là.
00:52:53 :Et si vous avez des questions, n'hésitez pas, je peux vous répondre.Merci.C'était vachement sympa comme présentation.On voit que tu maîtrises ton sujet, vu comment t'as exécuté tout ça.
00:53:06 :Impeccable.J'essayais de le rattraper, mais franchement, c'est chaud.C'est les joies du direct, c'est normal, t'inquiète pas.Tout le monde en a.Bon, allez.Salut.
00:53:23 :Je pense que t'auras pas beaucoup de monde pour des questions.On était pas beaucoup à cette heure-là.À mon avis, les questions, ça va se faire un peu rare, je pense.
00:53:42 :Pas vite fait.Bon, c'était pas grave.Ah, ouais, j'ai oublié une petite partie.Je voulais présenter quelques créations un peu moins chaotiquesqui ont été faites avec le framework.
00:53:56 :Donc, la dernière en date, ça va être le prochain site de Ophos.Donc, il se trouve que mon locale est un peu simple.Voilà, parfait.
00:54:08 :Donc, ça, c'est un site web qui a été réalisé totalement avec Ophos,qui va regrouper toutes ses fonctionnalités,ainsi que la future documentation de celui-ci,et des tutoriaux qui expliquent le gros du gros du framework,donc comment créer des pages, comment créer son composant,la logique et le fonctionnement d'Ophos derrière,
00:54:32 :ainsi que la version, enfin, comment devenir full-stack avec.Les ressources que je suis en train d'utiliser,les ressources que je suis en train de développer,le système de paiement, tout ça.
00:54:45 :Des blogs, des posts pour m'intéresser à la communauté.Et en plus concret, il y a mon site Portfolio.Donc, là, ça fait vraiment concentrer sur le front-end.
00:54:59 :Il y a très peu de back-end, à part pour changer de langage, tout ça.Donc, là, c'est un exemple.Il y a un site web beaucoup plus complet, qui remonte un peu.
00:55:15 :Simplement un site pour générer de la musique par l'intelligence artificielle,qui a aussi été fait avec Ophos, qui gère un système d'abonnement,qui va comprendre du Python derrière pour générer la musique,qui a une interface assez intuitive,qui permet, tout simplement, avec quelques clics,de générer un son.
Aucune occurrence trouvée pour « ».
