Hello World project for Quips
Generally, you should be familiar with the following basic scripting elements we use in all apps:
The list below contains all libraries and frameworks loaded and used in the app.
We recommend you have at least 2 browser windows open: one displaying this tutorial, and the other displaying the project development page. Like this, you can look at both and switch from one to another..
This lab should not take you more than 10 minutes to finish.
Now, let's get started.
This step will create a new blank project in your MyProjects list. We will use this project to create our app.
You will be redirected to the project page of your new project. The default name of the project is "NewProject". The project will also appear in the list of your projects under My Projects.
Make sure to be registered and signed-in in order to see the My Projects tab at the right in the upper navigation bar.
This step consists of changeing the name of the project and understanding the main properties and set-up of a project.
The project contains sections:
All changes, additions, deletions made are syncronised in real time with the Quips server and saved. Jo need to look for a save button.
Your project will have a new name. When reloading the page, the new name will show. In My Projects, the new name will also show.
Be sure to have internet connection when working on a project, otherwise all your changes will not save.
Be sure to be signed-in to work on your project.
The Bootstrap button is highlighted in blue.
Make sure to be signed-in and to be under your project in My Projects, otherwise the buttons will be disabled.
This step consists of entering content in JADE styled as as big heading.
bootstrap has so-called Jumbotrons which styles boxes for introduction messages. Jumbotron is the name of a class, so in JADE this will simply be written as a dot (.) after the HTML heading h1.
We will write the JADE code directly in the online code editor.
JADE has a very picky syntax, especially with respect to spaces. Make sure you have no unnessecary leading or lagging spaces.
In the HTML Preview, a bootstrap styles jumbotron box should show "Hello World" in big and bold.
If the project did not render, check the console box for errors. If there are syntax errors in your Jade code, they will be mentioned in the console as errors.
Now that you wrote all the code and did all the setup, you need to generate the HTML, meaning the Jade needs to be rendered (compiled). That is done one the server.
The rendered HTML is displayed in the HTML Preview box. If the app is bigger than the box, there will be scrollbars. Open in a new window if needed.
Make sure you have internet connection.
Be patient. The rendering may take some time, up to 10 seconds, depending on the size of your code and the speed of your internet connection. A spinning wheel is displayed to indicate that the app is loading.A spinning wheel is displayed to indicate that the app is loading.
Rendering errors are displayed in the console. Look at the Jade documentation and our blog to know more about common errors.