What you'll learn
-
Everything you need to know to build end to end, fully responsive Qlik Sense Web Mashups
-
Front End Web Development, covering HTML, CSS, Java Script and DOM Manipulation
-
Intermediate Java Script concepts including Callbacks, Promises and Higher Order Functions
-
How to build re-usable Mashup templates
-
The Qlik Sense APIs and all the key concepts for building mashups using both the Capability APIs and EnigmaJS
-
Popular Java Script libraries including JQuery, RequireJS, Webpack & Bootstrap
-
PicassoJS charting library and how to load data from Qlik Hypercubes
Want a breakdown of what the course covers?
The Essentials
-
What should I expect?
All course material is available immediately and for life, so learn at your own pace. We have broken down the material into 8 weeks of 3-5 hours of content which you can use as a guide, to pace you through the course.
-
Who is this course for?
Anyone with an interest in front end web development and Qlik Sense web mashups.
-
What do I need to take this course?
A Windows OS computer and access to the internet.
-
How many projects do we build?
We build a total of 8 projects: from java script websites through to web mashups using Enigma JS and the Capability APIs.
-
Which version of the software is this course recorded with?
This course uses both February 2019 and June 2019 versions. Don't worry if you have a later version!
Course curriculum
-
1
Welcome to the Qlik Sense Mashup Bootcamp
-
About you
-
Join our Slack Channel
-
Welcome to the Qlik Sense Mashup Bootcamp
FREE PREVIEW -
An Introduction to Qlik Sense Mashups
FREE PREVIEW -
Environment Setup
-
-
3
Introduction to HTML
-
Section Links
-
An Introduction to HTML
-
A Note on Documentation
-
JS Bin Intro & Writing Some HTML
-
Project Wireframe
-
Starting our Project & HTML Lists
-
Introducing DIVs
-
Feature List Section
-
Forms & Finishing our HTML Content
-
Download HTML Content
-
-
4
Introduction to CSS
-
Section Links
-
Introduction to CSS
-
Adding CSS to our Project
-
CSS Positioning
-
CSS Positioning: Exercise Files
-
EXERCISE & SOLUTION: CSS Positioning
-
SOLUTION WITH FLEX: CSS Positioning
-
The Cascade, Inheritance & Specificity
-
The Box Model
-
Box Model: Download Starter Files
-
The Box Model in Practice
-
-
5
FlexBox & Bootstrap
-
Section Links
-
Download Files (or skip if continuing from previous section)
-
An Introduction to FlexBox
-
Creating a FlexBox Header
-
An Introduction to Bootstrap
-
Converting our Header to Bootstrap
-
Introducing Font Awesome
-
Hero Image Download
-
Our Website's Hero Image Section
-
EXERCISE: Style our Feature List Section
-
SOLUTION: Style our Feature List Section
-
Completing our iFruit Website
-
Code Refactoring and Finishing Touches
-
Download Complete iFruit Project
-
-
7
An Introduction to Java Script
-
Introduction to Java Script
-
Java Script in the Console
-
Number and String Methods
-
Assignment & Comparison Expressions
-
Java Script Functions
-
EXERCISE: Dog Age Calculator
-
EXERCISE: Reverse My Number
-
Discussing the Java Script Exercises
-
-
8
Control Flow & Arrays
-
Introduction to Control Flow
-
IF / ELSE & SWITCH Statements
-
EXERCISE: Which Prize
-
EXERCISE & SOLUTION: Which Prize?
-
EXERCISE: Weekend Finder
-
EXERCISE & SOLUTION: Weekend Finder
-
Java Script Loops
-
EXERCISE: Count to 21
-
EXERCISE & SOLUTION: Count to 21
-
Arrays in Java Script
-
Revisit our Count to 21 Challenge - Create an Array
-
EXERCISE: Print Sentence
-
EXERCISE & SOLUTION: Print Sentence
-
-
9
The Document Object Model
-
Introduction to the DOM
-
Download Project Files
-
Accessing the DOM & Manipulating Elements
-
DOM Event Listeners
-
Generating Random Colours
-
Selecting a Random RGB Colour
-
Creating our Refresh Function
-
Finishing our Project
-
Download Finished Project
-
-
10
Week 3: Intermediate Java Script & JQuery
-
Project Introduction: Recipe Selector
FREE PREVIEW -
Project Introduction: Dashboard with Night Mode
-
-
11
Intermediate Java Script
-
Higher Order Functions
-
Objects & Constructor Functions
-
Download Project Files
-
Exploring our Recipe Object
-
Creating a Drop Down List
-
'THIS' Keyword
-
Rendering Recipe Data
-
Finishing our Project
-
Refactoring our Code
-
Download Finished Code
-
-
12
JQuery
-
An Introduction to JQuery
-
Minification & Loading the Library
-
Changing CSS with JQuery
-
Changing Elements with JQuery
-
Adding Classes
-
Converting our Recipe Project to JQuery
-
Download Finished Project
-
-
13
Dashboard with Nightmode Project
-
Download Starter Files
-
Starting our Project
-
CSS RECAP EXERCISE: Style our Nav Bar
-
CSS RECAP SOLUTION: Style our Nav Bar
-
Building our Sidebar
-
JQuery Sidebar Toggle
-
CSS Variables & Night Mode Toggle
-
Responsive Design
-
Bootstrap Tooltip
-
-
15
Require JS
-
An Introduction to Require JS
-
The Require Function
-
Require JS Config
-
Loading JQuery
-
Shim Config & Loading Bootstrap
-
The Define Function
-
Asynchronous Module Definition (AMD)
-
Require JS Quiz
-
-
16
An Introduction to Qlik Sense
-
Download Dataset: Highest Grossing Films
-
The Hub, Dev Hub & Anatomy of an App
-
Qlik Script & Manipulating Fields
-
The Associative Engine
-
Master Items & Creating Expressions
-
Set Analysis
-
Set Analysis Challenge
-
Building a Dashboard
-
-
17
The Qlik Sense Mashup Editor
-
Single Configurator
-
iFrames
-
An Introduction to the Capability APIs
-
Capability API Documentation
-
The Mashup Editor & Loading Objects
-
The Hidden Qlik Sense Developer Menu
-
Creating our First Mashup
-
-
19
Project Requirements & Starter Files
-
Download Starter Code
-
Section Links
-
Reviewing our Dashboard Code
-
Resources for Dashboard Design
-
-
20
Part 1: Building a Mashup Template
-
Converting to a Require JS Project
-
Loading the Capability APIs
-
Improving our Config with Variables
-
Conditional (Ternary) Operators
-
Reviewing Docs & Loading CSS
-
An Introduction to Lists
-
Making Selections
-
Revisiting Code Structure & Global Scope
-
SWITCH: Redo, Undo & Clear
-
Bootstrap Modals
-
Creating Bookmarks
-
Finishing our Bookmarks
-
Some Code Cleanup
-
-
21
Part 2: Building a Mashup Template
-
Current Selections
-
Array Prototype Reduce
-
Total Number of Selections
-
Search Bar
-
JQuery UI Autocomplete
-
Finishing Search Functionality
-
Recap on Tooltips
-
Bootstrap Grid & Placeholders
-
Finishing our Mashup Template
-
Download Finished Code
-
-
22
Week 6: HyperCubes & the Visualisation API
-
23
Asynchronous Java Script
-
Callbacks & Asynchronous Java Script
-
An Introduction to Promises
-
-
24
Introduction to HyperCubes
-
Introduction to Hypercubes
-
TEMP QVF Download (If needed)
-
CreateCube Method & Rendering Data
-
Building a Table
-
Additional Hypercube Properties
-
Map Function & Second Measure
-
Adding Selections
-
-
25
Google Play Analytics Mashup
-
Creating our App & Loading Data
-
Starting our Mashup
-
Building Filters
-
Adding Selections
-
The Visualisation API
-
Creating KPIs
-
Adding Charts
-
*NEW* Saving our Bookmarks
-
*NEW* Filter State Colouring + Code Refactor
-
-
27
An Introduction to PicassoJS
-
Documentation
-
Data for Our First Picasso JS Chart
-
Our First Chart
-
Chart Brushing
-
Interactions
-
A Note on Hyperscript
-
Tooltips
-
Re-sizing & Finishing Touches
-
-
28
PicassoJS & Mashups
-
Qlik Sense Version Update: April 2019
-
Download Starter Files
-
Starting our Avocado Analysis Mashup
-
Our Starter Charts
-
Bar Chart: Layering Components
-
Range Brushing
-
-
29
Picasso Q & Working with Data
-
Callbacks Method & Hypercubes
-
Picasso Q Plugin
-
Making Selections
-
Chart Linking with Promises
-
Cleanup HyperCubes
-
Async Await Syntax
-
Line Chart Exercise
-
Trends Tab
-
EXERCISE: Complete Pie Chart
-
Discussing Websockets & Multi-Page Mashups
-
Download Complete Project
-
-
31
An Introduction to EnigmaJS
-
The Engine API Explorer
-
An Introduction to Enigma JS
-
Client Side Enigma JS: Accessing the Engine
-
Loading a HyperCube
-
Section Links
-
A Note on QDT Components
-
-
32
Kickstarter Mashup & Webpack
-
Environment Set-up
-
NodeJS v Node Package Manager
-
Java Script Runtime Link
-
What is Webpack?
-
Download Starter Files
-
Starting our Project with Webpack
-
Installing Babel
-
Loading Enigma and Accessing the Engine
-
Java Script Classes & Creating a Session Object
-
-
33
Finishing our Kickstarter Mashup
-
Line Chart Download
-
Building our PicassoJS Chart
-
Patch Properties
-
Theming our Chart
-
Starting our KPI Objects
-
Finishing our KPI Objects
-
Regular Expressions: MDN Web Docs
-
Trend Chart Download
-
Trend Chart
-
Finishing our Mashup
-
-
34
Course Feedback
-
Course Feedback
-
Course Discussion
-
Your instructor
Lead Instructor
Luke Reilly