2. Intro to Glitch
This course is structured to use the Glitch platform. Glitch is a web platform that provides you with a free JavaScript-based web server for your projects.
You should get acquainted with Glitch as soon as possible and create an account and a project where you will code all the exercises and final project.
Sign up
- Start by signing up on Glitch.com so that you can save your work. Go to glitch.com and click "Sign up" (Figure 1). You have various options for creating an account from existing social networks and I recommend you use the one you are most used to (Figure 2).
- Create a new project (Figure 3). After you sign up and login into Glitch, you should create a project (Figure 3): make sure you choose the
hellp-webpage
template.
Creating a new project will take you to the editor of Glitch (Figure 4).
Rename your project. Glitch assigns a random name to your project. To make it easier to locate, you should change it by clicking the name in the top left, and then entering a new one (Figure 5). Use your name to make it easy to identify who the project belongs to.
Learn to get back to your project after you sign out
You should also learn how to get back to your project after you log out. Imagine you have finished for the day and log out; on the following day you should be able to get back to the project easily:
- Log out (Figure 6). You will be taken to Glitch's main page.
- Log in again (Figure 7).
- Locate your project (Figure 8).
- Click on the project's name to edit. You are now back at the editor.
Glitch editor
The Glitch editor is a simple file editor.
- You can see a list of files on the left
- Clicking a file will open it in the file editor to the right
- There is also an "Assets" folder for putting media files
Learn the structure of the course website
The chapters and examples about A-Frame are also hosted on Glitch.com and it's important that you understand how things are structured.
The address of course website is, of course, https://aframe-course.glitch.me/index.html. The course is structured into various chapters that you can browser on the left side (Figure 10).
Modify an example
Each chapter has a number of examples that you can copy and modify. To do that, you need to create a new file in your own project and then copy and paste the contents of the example. The following example is similar to the ones that appear throught the various chapters. Notice the source
link at the top. If you click there, you will open a new tab with the source code for that example.
Let's copy the source code of the following example and edit that so that is displays the cube with an image you will upload:
- Go to your project and create a new file (Figure 11). To keep your project organized, you should name your files so that they will end up inside folders. In Figure 11, I named the file
examples/0010-intro-01.html
– this will create a new file inside the folderexamples
. It is important also to add the file extension to the file name (.html
).
- Go to the example you wish to copy, and click on the
Source
link to open a new tab with the source code (Figure 12)
- Go back to the empty file you just created and paste the source code.
View the results
- Click on the "Show -> In a New Window" button at the top of the Glitch Editor (Figure 13).
- This will open the default page
index.html
(Figure 14):
- You will need to edit the address in the address bar of your browser and write the full address (Figure 15).
After you enter the address you will see the results (Figure 16).
Change the image on the cube
Look for an image in your computer and upload to the Assets
in Glitch by following these steps:
In your Glitch project, go to the Assets folder and drag and drop an image file from your computer (Figure 17).
- After you have uploaded the image click on it (Figure 18).
- Copy the URL of the image (Figure 19).
- In your Glitch project, locate the file you have just added and paste the URL you have just copied into the
src
attribute (Figure 20).
- Reload the preview tab and you should see the cube with a new texture.