H5P Content type written in Angular?

Submitted by kenianbei on Fri, 09/01/2017 - 18:14
Forums: 
Developers

My university is looking at contributing some language learning centric  H5P content types, and I'm curious about the feasibility of writing the content type in AngularJS, and then integrating that code into the H5P library. I've only done a little work with the H5P library so far, so it's difficult to judge how easy it would be to write the full app in Angular and then integrate.. Has anyone else had experience with integrating any JS framework into H5P, particularly Angular, Vue, or Polymer?

serettig's picture

serettig

Sun, 09/03/2017 - 19:12

Hi,

I'm working on integrating a content type written in Ractive into H5P and I can say that it works quite well in general. However, making use of h5p ui widgets from H5P.JoubelUI to have consistency and extending H5P.Question has lead me to abandon parts of the already existing code in favour of the "native" h5p code. So it certainly is possible to use external js frameworks in h5p, but if you want to make use of the already existing resources provided by Joubel, you probably won't use it for everything - but you could of course. I have used Angular for another project and I would recommend considering a less heavyweight framework for a h5p content type. Of course, I don't know what you are planning to do, but I reckon that many of Angular's capabilities are an overkill or not needed and one of the less complex frameworks is just as suited.

Sebastian

wilsonsantosnet...

Wed, 02/10/2021 - 15:16

Hi everone ,

I need consume the Componentes h5p in the angular web site, but i dont undestendig what is the minimal dependences for this.  

1-) What are minimal dependencies to Front-End?

2-) What are minimal dependencies to Back-End?

3-) I need one back-end?

4-) How to geting the dependencies of the front-end, thre is some package in npm? 

5-) I Can write one back-End in other langague for example .net core

6-) I can use thes backend with SAAS in https://h5p.org like this https://wilson1.h5p.com

7-) in this sample https://github.com/wilsonsantosnet/h5ppoc/blob/master/hp5.htm how I can getting the result of the question?

I think that one simple sample of code in one file html that use the basic dependencies to consume h5p content can be help many peoples, like me

 

serettig's picture

serettig

Thu, 02/11/2021 - 08:03

Hi,

1) JavaScript and support for iframes: you can use any technology that runs in a browser. 
2) A custom server running H5P... The official H5P library uses PHP. There are other language variants written by the community, which are at various stages of development.
3) If you only want to display content, you can use h5p-standalone by Tunapanda, which doesn't require a backend. All other h5p implementation need a backend.
4) Not per se. I've seen some wrappers for h5p-standalone on NPM, but this will obviously only work if you don't need a fully fledged H5P. You'll have to either look at how the Drupal, WordPress or Moodle H5P plugin loads the client or you can try out the webcomponent we are currently working on for the NodeJS part (pull request branch at https://github.com/Lumieducation/H5P-Nodejs-library/tree/refactor/monore...). It simplifies client development a lot, but works best with our NodeJS library and it would be a lot of pain to get it working with the PHP version. You can still see how to initialize the H5P editor and player in a SPA application by looking at it, though. This is not really trivial, as all official H5P applications use server-side rendering! The h5p-webcomponents package will be published in NPM soon.
5) Yes, we've done so with h5p-nodejs-library (https://github.com/lumieducation/h5p-nodejs-library), which will soon be renamed to @lumieducation/h5p-server. But let me stress this that this is a lot of work that requires several hundreds of hours of work. Getting the basic functionality of the player to work is quite simple, but the editor is much more complex. If you really need a custom backend, use our NodeJS version.
6) You can try getting it to work with LTI or by embedding from there. The core team will have to answer this in more detail, as I've never used h5p.com
7) You need to look for it in the xAPI statement. Check out the specification here: https://github.com/adlnet/xAPI-Spec

It's impossible to put this into a single file, as H5P is pretty complex. Your best starting point on understanding how to use H5P on the client might be our webcomponents. They consist of only a few files and will work in Angular as well.

Sebastian