Using Terminal IDE
In Android systems, Terminal IDE is installed through
Google’s play store. After installation, when you launch the application, there
are 6 button; Terminal IDE, Keyboard, Install System, options, shutdown and
Help. First get acquitted with the help system. Most of the information you
need you will find it here. I recommend reading the vim section since you will
be spending much time in the vim editor and being acquitted with vim commands
is essential.
STEP 1: Click on Terminal IDE
When you click on the Terminal IDE button, you will see a
console or the terminal, which will look likes, the below:
Terminal++@105.54.187:~$
By default, terminal IDE comes with 4 terminals. These can
be accessed by swiping through the windows. You will notice a black pop-up
showing the terminal you are on, one through four.
Step 2: Creating and running HTML
(a)
Creating the directory
Swipe to terminal 1. After the dollar sign ($), type:
$cd ~/sdcard/
It will simply change from the current directory to the
sdcard storage. cd is a command to change the working directory. Next, we
create a folder where you will store you html code:
$mkdir /progs/
$cd ~/sdcard/progs/
mkdir is a make directory command. In this case, it creates
a folder in your sdcard called progs. cd changes the working directory to
progs. Make sure that at this point you are using Terminal IDE’s Keyboard. If
not, click the back key, select the Keyboard, and set it to Terminal IDE. To go
back simply hit the Terminal IDE button. If the keyboard does not appear in the
terminal, tap the screen, it should appear. Your terminal should show as below:
:~/sdcard/progs$
This is your working directory. You can get the full path of
the directory by typing:
$pwd
pwd is a simple Linux command to print the working directory.
(b)
Creating the files
The next part is to create 3 files: index.html, style.css,
and script.js. To achieve this, we begin with the first file by typing the
following command on terminal after the dollar sign ($):
$vim index.html
After you press enter, the screen should clear and you
should see the vim editor. Press I key (as in India). The status bar at the
bottom should now displays (-- INSERT --) in yellow, if not try going through
the steps again.
Now you are ready to
type your html code. Type the code as below:
<!DOCTYPE html>
<html lang=en>
<head>
<link href=”style.css” rel=”stylesheet” >
</head>
<title>Test page</title>
<body>
<h1>This is a simple page</h1>
<script src=”script.js” type=”text/javascript”></script>
</body>
</html>
To save click on the escape button (ESC), then press the
colon key (:) then w key, and q key and press enter.
To type the CSS code, on the terminal type:
$vim style.css
It will open a blank file in vim. press I key (the status
bar should now show ---INSERT). Type the code below:
body {
background-color:blue;
}
To save click on the escape button (ESC), then press the
colon key (:) then w key, and q key and press enter.
Now we write the final file, on the terminal, type:
$vim script.js
On the vim editor, type:
Function myFunction () {
alert(“Javascript is working”);
}
myFunction();
(c)
Running on a browser
To run the html on a browser, open Google chrome. On the
navigation bar, type:
file://sdcard/sdcard/index.html
You should see the output displayed on the browser window.
The above is just a simple version, you can create more
complex code with Terminal IDE.
