I have been wanting to create a Qlik Extension for quite a long time. I had this fantastic vision in my head where I could surf the data in 3d as I have always done in my Processing sketches in the past. So I decided to take some time a do it. Using ctrl00 data. (ctrl00 data is the data that is generated by Qlik Engine if you want to add data but don’t have any yourself.)

  1. How do I create an extension? I found some information on Playground. I didn’t really get it there even if there was a ton of information about what to do, templates to use and data to access. I wanted to start small. With some simple code to understand how it was put together and how it get the data inside of it. I looked at some introduction movies on youtube but didn’t really get where to begin.
  2. During the above process I realised that I would need to have a Qlik Engine to develop my extension. Hmm, could I use a server in-house? Or should I go straight to the Cloud server we just launched.
  3. I got restless and downloaded Qlik Sense Desktop. The Desktop version includes an Engine so that should fix it. I also knew that the dev-hub (I once designed together with my design colleagues at Qlik) created templates for extensions. So, downloading QS Desktop should get me started fast and easy. And I could go from there.
  4. Gah. No Parallels on my computer. I need Windows to use QS Desktop, so I had to get Parallels first.  I am on a Mac so I had to go through IT to get a Parallels. Then, I could download it. Some hassle with the Qlik Id since I had three different identities and all were expired. So, renewing my Qlik Id and then the actual download could begin to my shiny new Windows on my Mac.
  5. I started by creating a Qlik Sense app (logging in with my renewed Qlik Id) and loaded some nonsense data just to get started with my extension.
  6. I am lazy, so I generated a couple of visualisations using the insights advisor to have something in there. The insights ”page/mode/modal/situation” doesn’t show the extensions in case you get stuck. The insights is a kind-of toggle. So when you press it again, it goes into a normal view of the sheet. Not so easy to know. Would prefer a close x in the upper right corner. Need to tell my colleagues about that finding one day.
  7. Opened dev-hub and created my first extension from there, ”FirstExtension”. I just created it and never edited it. Just switched back to the sheet to see if it showed up. Inserted the extension from the ”Library” (no title on that panel though) sub-section ”custom objects”. There it was and it showed up on the sheet. Yay! Far from surfing the data in 3d, but still. Kind of yay.
  8. I tried to find the code from outside of Qlik. It had to be somewhere on my disk. I ended up hijacking the code from the Mac side in Visual Studio Code. I searched on the Mac for ”FirstExtension” and found it. Realizing the file structure on the windows side. I started looking at the different files in Visual Studio Code with a comfortable view of the actual code. So what could I do here? What was all this strange code?
  9. I went to the corresponding Qlik Help page  and cut the JS script from there, pasted it in, replacing the old meaningless code. Edited some strings to see effects.
  10. Back in QS app to see the effects of my cool string changes. I was expecting a refreshed extension in my app. Not happening. Trying all kinds of different things. Resizing it. Adding it in a different sheet. Add it next to each other. Try to edit it in Dev-hub to no avail. Remove it from the sheet and add it – still no refreshed extension. Close the app and reopen it. There we go. The extension is refreshed. Phew… Is that the way we want to debug? Hmm.
  11. Made a few changes and it works fine based on the help pages.
  12. Tried to debug in the desktop client… Not so obvious. Realized that I could go via the browser, since the dev-hub obviously was accessed from the browser, the client (with the analysis view and all) would too. So I tried the dev-hub url, but wrote /hub/ instead. And it worked nicely.
  13. Debugging in Chrome worked fine. Refresh is just a page-reload away. Yay!
  14. Since I wouldn’t be using the Qlik Desktop anymore I quit the QS Desktop app. BUT, then it all died in the browser. The engine is running thanks to the running Desktop app. So keeping QS Desktop running is essential.
  15. Onward with the help tutorial. Aha, got to understand how to work with data finally. Demystified the hypercube. Not that hard actually. Thanks Qlik Help! It took me a long time to get there, realising how we interact with the engine  (since I never took the time really).
  16. After concluding the help tutorial I thought that this jQuery thing is not doing it for me. It is hard to understand what is really going on. I never really was a jQuery fan anyway. Hard to extend and build upon. I understand that it is quite possible to do things, but since I don’t know what exactly is going on behind this, I really would wish for something else.
  17. Started looking at Picassojs. Sweet looking charts to use and build upon. But, since I am looking to create my own, this is not my thing. (This was my initial reflection until I revisit this after completed the Qlik Core tutorials. Perhaps we should make that intro page a bit clearer in the future).
  18. So I move on to Qlik Core. This looks good with engine in a docker and all. Awesome.
  19. I wasn’t really getting how to connect to the docker engine, but went through the motions of the introductory tutorials. Super fast ones too. Still not sure how this help me in doing my own extension.
  20. The Hello-visualization helps very much with the chrome around the visualization and context, selections and interactions with it. Supernice to explore and change parameters to see what is what. Fascinating in many perspectives, but I would like to hand-craft my own extension. But I have to admit, it spurs my feeling of knowing more about Picasso.
  21. Looking at Picasso again. Starting to create my own project and explore the Getting started things. Reflecting on the time I spent hacking the extensions from the Help site. Was this time wasted? Probably.
  22. PicassoJS tutorial worked really good. It steps through the creation of a bubble chart from nothing to complete viz including interactions. You get what the different things mean and the logic of where to place them. Good for general understanding of the architecture behind a visualization. Really nice! Some things are still hard to understand. Like how to swap a ’circle’ to ’box’ or any other custom shape I would wish to use.
  23. Went over to NebulaJS. Now we are talking. This looked very promising. With Erik Wetterbergs tutorial this seems highly interesting and doable. If I just could understand that connection to the engine… What did I learn on those help pages? Revisiting those help pages made it clearer again.
  24. Plunged into NebulaJs. Extremely hard to get started since you had to accept the EULA in the same swoop as starting it up from the Terminal. With some highly qualified help from Miralem, I got it running.
  25. Got the different projects generated and took it from there. Awesome way to debug with the cli-tool bringing up a webpage where I can see my extension in context, and debug what I do using chrome dev-tools. Great experience. I got my extension running and the ways I could change and alter it was open and easy to edit.
  26. But, since I am a P5.js person, I wanted to use P5 (Canvas) for my visualisation. Not Picasso (SVG). Introducing p5 in Nebula was a bit awkward but I hacked it in there.
  27. ML5.js is also one of my favorites so I added that in there too. That took some time to figure out how to hack in, but it worked. Extremely hackish and highly disruptive to Nebula, but this is what I wanted. Nebula is not meant to be used like this. But I got it to work. Mission accomplished! No 3d yet though. (I tried it but it seems like WEBGL is not really supported, so that will have to wait.)
  28. Nebula sense
  29. And suddenly I had my extension ready to be uploaded! Whohoo!
  30. Wow. An awesome ride and well spent time to experience what developers might need to do to create an extension these days. Perhaps I was extremely slow at getting it going, but this was my experience.

 

 

NB: This experience will change.

Kommentera