JINSI YA KUTENGENEZA BOT KWA KUTUMIA HTML CSS AND JAVASCRIPT
.webp)
Jinsi ya Kutengeneza Bot la HTML, CSS, na JavaScript kwa Ajili ya Kuanza
Katika dunia ya mtandao, bots zinatumika kwa makusudi mbalimbali, kutoka kwa huduma za kiotomatiki hadi kwenye urahisi wa kufanya majukumu ya kila siku. Katika makala hii, tutakuonyesha jinsi ya kutengeneza bot rahisi kwa kutumia HTML, CSS, na JavaScript. Tutakwenda hatua kwa hatua na kuelezea kila tag na kazi yake ili uweze kuelewa vizuri. Karibu!
1. HTML (Muundo wa Tovuti)
HTML (HyperText Markup Language) ndiyo lugha kuu ya kuunda muundo wa tovuti. Hapa, tutaanza na HTML ili kuweka muundo wa msingi wa bot yetu.
<!DOCTYPE html>
<html lang="sw">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bot Yangu</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="chatbot">
<div id="chatbox"></div>
<input type="text" id="userInput" placeholder="Andika hapa...">
<button onclick="sendMessage()">Tuma</button>
</div>
<script src="script.js"></script>
</body>
</html>
Maelezo ya Tags:
<!DOCTYPE html>: Inatambulisha aina ya dokumenti kuwa HTML5.
<html>: Inaanzisha ukurasa wa HTML.
<head>: Inashikilia metatags, kiunganishi cha stylesheet, na kichwa cha ukurasa.
<meta charset="UTF-8">: Inahakikisha maandishi yanaonyeshwa kwa kutumia seti ya herufi ya Unicode (UTF-8).
<meta name="viewport" content="width=device-width, initial-scale=1.0">: Inahakikisha ukurasa unajibu vizuri kwenye vifaa vyote.
<title>: Kichwa cha ukurasa kinachoonyeshwa kwenye kivinjari.
<link rel="stylesheet" href="style.css">: Inahusisha stylesheet kutoka kwa faili la CSS.
<body>: Inashikilia maudhui yote ya ukurasa wa tovuti.
<div id="chatbot">: Inatengeneza sehemu ya bot, ambayo ina sehemu ya kuonyesha mazungumzo na sehemu ya kuandika ujumbe.
<input type="text" id="userInput" placeholder="Andika hapa...">: Hii ni sehemu ya mtumiaji kuandika ujumbe.
<button onclick="sendMessage()">Tuma</button>: Kitufe cha kutuma ujumbe.
<script src="script.js"></script>: Inahusisha faili la JavaScript ambalo litatumika kusimamia utendaji wa bot.
2. CSS (Muonekano wa Tovuti)
CSS inatumika kuboresha muonekano wa tovuti yako. Hapa tutaleta mtindo wa bot yetu ili iweze kuonekana vizuri.
body {
font-family: Arial, sans-serif;
background-color: #f4f4f9;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
#chatbot {
width: 300px;
background-color: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
#chatbox {
width: 100%;
height: 200px;
overflow-y: scroll;
margin-bottom: 10px;
padding: 10px;
background-color: #ececec;
border-radius: 4px;
}
#userInput {
width: 75%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
margin-right: 5px;
}
button {
padding: 10px 15px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
button:hover {
background-color: #45a049;
}
Maelezo ya CSS:
body: Tunapanga mwili wa ukurasa ili bot iwe katikati ya skrini.
#chatbot: Hii ni sanduku linalozunguka sehemu yote ya bot.
#chatbox: Sehemu ya kuonyesha mazungumzo ya bot.
#userInput: Inafanya kazi kama kisanduku cha kuandika ujumbe.
button: Kinachoweza kubofya na kutoa mtindo wa rangi.
3. JavaScript (Utendaji wa Bot)
JavaScript itasimamia majukumu ya bot yako, kama vile kutuma ujumbe na kuonyesha majibu.
function sendMessage() {
var userInput = document.getElementById('userInput').value;
var chatbox = document.getElementById('chatbox');
// Onyesha ujumbe wa mtumiaji
chatbox.innerHTML += "<div>User: " + userInput + "</div>";
// Futa maandishi kwenye kisanduku cha kuandika
document.getElementById('userInput').value = '';
// Majibu ya bot
setTimeout(function() {
chatbox.innerHTML += "<div>Bot: Habari! Jinsi gani?</div>";
chatbox.scrollTop = chatbox.scrollHeight; // Endelea kupakia mazungumzo mapya
}, 1000);
}
Maelezo ya JavaScript:
sendMessage(): Hii ni kazi inayoitwa wakati mtumiaji anapobofya kitufe cha kutuma. Inapata maandishi kutoka kwa input, inaonyesha kwenye chatbox, na kisha inajibu na ujumbe wa bot.
setTimeout(): Inachelewa kidogo kabla ya bot kutoa majibu.
---
Kumbuka! Hii ni bot rahisi, lakini inatoa msingi mzuri wa kuelewa jinsi HTML, CSS, na JavaScript zinavyoshirikiana. Kwa kujua haya, unaweza kujenga bots zaidi za kipevu na zenye utendaji.
Ikiwa umependa makala hii, tafadhali shiriki na wenzako ili na wao waonyeshe jinsi ya kutengeneza bots za kipevu. Tafadhali tembelea NASSIRCEO kwa zaidi ya mada za teknolojia!