Developing content type

Submitted by PteeHinn on Wed, 01/17/2018 - 09:56

Forums:

Hello,

I'm a complete newbie to h5p and I have hardly any experience with front end-frameworks at all. While playing a little bit with h5p I faced some problems, which are probably easily solved by the forum experts.

So, first I tried to do the hello-world tutorial https://h5p.org/tutorial-greeting-card and uploaded the .h5p package (https://h5p.org/node/add/h5p-content)

It turned out that the tutorial does not work and that the expected file structure is different than described in the tutorial. (E.g. it expects a h5p.json - file) I found a description of the file structure here on the h5p-pages and made the hello-world-example fly. My first question is now, what represents the current state in h5p - the tutorial or the process running on the server?

Secondly, I played a little bit with the hello-world-example, stuff like renaming variables and increasing minor versions. Until now I failed to make the server upload a new version. To my present understanding changing the version in two places should do the job: 1. in h5p.json where the library is referenced and 2. in the library itself. I allways get an error message that the the library with the correct version is missing. As I understood increasing the version is essencial if the code shall be updated. So, what would do the trick?

Thanks for your help!

serettig

Wed, 01/17/2018 - 12:27

Permalink

Hi PteeHinn,Here are a few

Hi PteeHinn,

Here are a few tips that might help you getting started:

It's best if you work with Drupal as CMS to develop for H5P. It's also advisable to work with a machine that you have full control over and is in your local network. (I have a Bitnami Virtual Machine with Drupal 7 for this. It can be accessed from all computers in my LAN and I don't pollute my development computer with the XAMPP stack + settings.)
You should enable the options "Enable H5P development mode" and "Enable library development directory (For programmers only)" in the H5P settings of Drupal. You can then develop your library in the directory sites/default/files/h5p/development and you don't need to worry about bumping the version numbers. It will always reload the files from the disk (as long as you press Ctrl+F5 to reload in the browser, too.)
If you put your content type library into the development folder it should show up as a new possible option if you create a new content item in Drupal.
I disable the H5P content type hub. That way you don't accidentally download libraries from the H5P server.
Just to be sure, I delete the content of the libraries folder under sites/default/files/h5p/development to make sure that all the libraries used come from the develpment folder.
I never edit the h5p.json file myself. Instead, I develop the library (library.json and probably semantics.json + JSS / CSS files) and create test content the same way the user will later create content. You can still package your library together with content by 'downloading' the h5p content file from the test server like a user would do it (or like you can from h5p.org). The h5p.json file is automatically created for you then.
You'll have to manage (download) dependencies yourself. The best way to do this is to use the h5p CLI, but sometimes you'll have to clone git repositories from Github as not all h5p libraries can be downloaded through the CLI for some reason.
You can start off by cloning and modifying the h5p-boilerplate code instead of the tutorial. The catch is that you might also have to get acquainted with NPM and Webpack for this.

Sebastian

BV52

Thu, 01/18/2018 - 03:03

Permalink

Hi Sebastian,Well written I

Hi Sebastian,

Well written I couldn't have put it better myself, I've even picked up a thing or two :-) Thank you

-BV52

otacke

Wed, 01/17/2018 - 13:02

Permalink

I have a YouTube channel

I have a YouTube channel containing some videos about H5P, and I wondered if some H5P coding tutorials could be useful. Guess I should give it a try. But don't expect something as magnificent as Daniel Shiffman's Coding Train at http://thecodingtrain.com :-)