Web application

Интэрнэт, интранэтийн орчинд
web browser эсвэл Client ашиглан
ажиллах боломжтой програм
хангамжийг Web application гэдэг.

Анхны хуудас хийгдэж байсан тэр үеээс хойш вэб гэдэг зүйл хүний өдөр тутмын хэрэглээ болтлоо хөгжжээ. Энэ хугацаанд олон үе шат, олон шинэ дэвшилтэт хэлбэрүүд үүссэн байна.

Вэбийн хувьсал

1. Дээр өгүүлсэнчлэн анхны вэб маш энгийн тэкст мэдээлэл агуулсан зүгээр л нэг хуудас байсанаас Static вэб гэх ангилалыг тодорхойлох болсон байна. Сайтыг эзэмшигч програмист өөрийн мэдээллээ html хэлээр хэлбэржүүлээд хатуу зоочихно. Солих болохоороо дахин хэлбэрт оруулаад солино. Тухайн үед ийм вэбтэй компани бол хамгийн чанга гаруудад тооцогддог байсан байж таараа. Анхны сайтууд ийм л байсан. Одоо ч ийм болхи сайтууд олон бий.

2. Үүний дараа HTML форматад оруулж чаддаг хэдэн програмистын залхуу нь хүрсэн үү эсвэл ажлаа дийлмээргүй болсон уу мэдээний хэсгийг нь энгийн хүн ойлгоод тэкст зураг оруулаад засаад байх боломж бий болгосоноор хоёр дахь хувьсал эхлэх нь тэрээ. Үүнийг хүмүүс ихэвчлэн хагас динамик сайт гээд ярьдаг. Зарим хэсэгт нь статик мэдээлэлтэй. Зарим хэсгийг нь энгийн хүн өөрчилж дөнгөхөөр хийнэ. Энийг сайтар харвал энгийн хүмүүсийг энэ ертөнцөд татан оруулж ажиллах боломж олгосон үнэхээр хувьсал байжээ.

3. За тэгээд хүний хүсэл хязгааргүй юм хойно дахиад л хялбарчилахаар шийдэвээ. Энэ удаа сайтын бүхий л газарт энгийн хүмүүсийн (сайт эзэмшигч) гар хүрч, хүссэнээрээ янзалдаг болгож орхив. Ямар ямар мэню байхав, хаана нь зураг оруулахав гээд л дураараа дургиж болно. Нэг өглөө улаан байсан сайт маргааш нь ягаан болоод нөгөөдөр нь шинэ жилийн стилтэй болж болно. Энэ үед бодвол нөгөө айхавтар доткоом бүүм нь явагдсан байх. Төрөл бүрийн санаа сэдээд л ирээдүй гэдэг чинь гэрэлтэж харагдаад л байсан биз.

4. Динамик вэбтэй зэрэгцээд төрсөн боловч цөөхөн тооны потенциалтай хэрэглэгчидэд л хэрэг болдог утгаараа ялгарч эхлэсэн Web application гэх үеэл нь чимээгүйхэн хөгжиж л байж.

Дараагийн хувьсалыг AJAX авчирсан. Энэ бол саяханы түүх боловч web application-ы хөгжлийг асар хүчтэй түлхэж өгсөн юм. Технологийн хувьд ч хэрэглээний хувьд ч Маш олон шинэ давуу талууд болон боломж нээсэн болохоор нь веб 2.0 буюу вебийн хөгжлийн шинэ эрин эхэллээ хэмээн тоймчид дуу алдаж байв.

Өмнө өгүүлсэн зөвхөн админ нь мэдээлэл оруулаад хүмүүс уншдаг байсан загварыг хэн нэг ухаантан өөрчлөхөөр шийдэн: -Ерөөсөө хэрэглэгчид нь өөрсдөө мэдээллээ оруулчдаг байвал яасан юм бэ гэсэн асуулт өөртөө тавьсан үеээс эхлээд та энэ бичлэгийг уншиж байгаа энэ үе хүртэл асар их зүйлс өөрчлөгджээ.

Веб ийнхүү хөгжлийн замаараа явж байхад Desktop application-ууд эдийн засгийн утгаараа ч тэр технологийн утгаараа ч тэр, чинээндээ тултал хөгжөөд байжээ. Веб 2.0-ын эрин эхлэснээр хэрэглээний програмын зах зээлд хүчтэй доргилт үүсэж эхлэх нь тэр. Учир нь desktop компьютэр дээр л ажиллахаар хийгдсэн олон хэрэгсэлүүд Online-д шилжиж шинэ онцгой төрлийн өрсөлдөгчид бий болж эхлэсэн.

Надтай хамгийн ойрын жишээ татвал: Манай цаг бүртгэлийн desktop application – одоо Web application болчихоод хэрэглэгдэж байна. Ажилчид өөрийн нэвтрэх эрхээр цагаа хянадаг, интернэтэд холбоотой бол олон салбар нэгжүүд нэг програмаар цагаа бүртгүүлж, санхүү нягтлангууд нэг газраас нэгдсэн тайлан гаргаад авах боломжтой гэх мэт өмнө байгаагүй олон давуу талууд бий болоод байна. Цааш нь улам илүү олон боломжоор хүчирхэгжүүлэхээр төлөвлөн ажиллана.

Хэдийгээр Web application-ууд Desktop application-ы зах зээлд хүчтэй цохилт хийж байгаа ч бүрэн утгаараа өрсөлдөгч болж дууссан уу гэвэл үгүй. Энэ хоёр хамтран ашиглагдах боломж бүхий хэд хэдэн боломж байгаагийн нэг нь RIA's.

Rich Internet Applications

RIA's бол зурагт үзүүлсэнчлэн Web application, Desktop application, Communication technologies-дээр тулгуурлан гарч ирсэн шинэ тоглогч юм. Web болон Desktop application гэдэг бол тодорхой. Харин
Communication Technologies гэж юу вэ?
Web service-үүд бол аль хэдийнээ бий болоод ашиглагддаг байсан, програмчилж болдог мэдээлэл түгээх арга хэлбэр юм. Энгийнээр бол ямар нэгэн хүсэлт (SOAP)-ийн хариуд XML/JSON гэх мэт форматаар хариу өгдөг систем (server) юм.

RIA бол ийм service-тэй ажиллах боломж олгодог, өөр дээрээ бүх өгөгдөлөө хадгалаад байдаггүй Application software юм. Үүний жишээ бол бидний дээр өгүүлсэн цаг бүртгэлийн програм юм. Хурууны хээ уншигч төхөөрөмжид тааруулан хийсэн RIA маань бүртгэсэн өгөгдөлөө сэрвэртээ илгээдэг тэндээс шинэ ажилтаны мэдээллийг өөрөө татан авдаг гэх мэт ид шидтэй бяцхан програм бий.

Ийнхүү шинэ боломж бололцоо олгох Техник технологийн дэвшилийг ашиглан бушуухан хөгжицгөөе!

Web application-ы сонгодог жишээнүүд:

• Google spreadsheet
• www.zimdesk.com
• www.meebo.com
• ...
  

Холбоотой бичлэгүүд

• SaaS and Passion
• AJAX алхам алхамаар
  

SaaS and Passion for All

Hosted application-ууд сүүлийн үед маш өргөн хэрэглэгддэг болох шинжтэй байна. Хүн бүр л интернэтэд тулгуурласан энэхүү үйлчилгээг ярьж, компаниуд аль хэдийнээ туршилтын хувилбаруудыг бүрэн тогтвортой хувилбар болгон шилжүүлээд эхэлсэнээрээ 2006 онд хамгийн их яригдсан зүйлсийн нэгээр SaaS буюу Software as a Service гэгдэх энэ үг тодрох нь дамжиггүй ээ. Сайн, саар олон талтай хэдий ч ямарч байсан өөрийн гэсэн ашигтай хэлбэр бүхий шинэ софтвейр архитектур юм. Энэ архитектурын хүрээнд хэрэглээнд нэвтэрсэн олон хэрэгсэл онлайнд бийгээс дурдвал: Google docs & Spreadsheets, 37-н сигнаалийн Basecamp, Salesforce.com гэх мэт мөн бидний сайн мэдэх Yahoo, MSN, Google-ын имайлын үйлчилгээг дурдах нь илүүдэхгүй бизээ. Өөрөөр хэлбэл манайханы тодорхойлох гэж оролдсон энд бас энд дурдсан зүйлүүд бол зөвхөн нэгээхэн хэсэг нь л юм. Зургийг арай холоос хараад хэлбэл SaaS бол нилээд том зураглалд хамаарах ойлголтоо.

Web 2.0 гэх ухагдахуун алдаршиж AJAX болон өгөгдөл синхрончлогдон, илүү үр дүнтэй дамжих болсонтой холбогдон хүчтэй яригдаж SaaS гэдэг нэрийг хүртэл олсон энэ архитектурыг хэрэглэгч болон хөгжүүлэгч талаас нь сайн ба муу талуудыг нь дараах байдлаар харьцууллаа.

Хэрэглэгч талаас авч үзвэл:

Сайн тал:

- Өөрийн програмыг ямарч компьютер дээрээс хандан авч хэрэглэх боломжтой.

- Суулгах тохируулах шаардлагагүй.

- Хяналт удирдлага хийх зардалгүй болно. Өөрөөр хэлбэл хэрэглэгчийн талд Administrator-уудад зориулсан зардал үгүй болноо гэсэн үг.

- Броузер бүхий ямар ч комьютер дээр ажиллах бололцоотой.

Сөрөг тал:

- Хувийн нууцлалын чанартай зүйлс таны удирдлагаас гадна байх болно. Сэтгэлд чинь жоохон дарамттай байж мэднэ. Гэхдээ бүх SaaS-ын үйлчилгээнд ийм байдаг гэвэл худлаа.

- Offline үед ажил чинь зогсоно.

Хөгжүүлэгч талаас нь авч үзвэл:

Сайн тал:

- Үйлдлийн системд зориулан хийдэг байсан процедур тэр чигээрээ алга болно. Зөвхөн броузэрт зориулна.

- Засвар үйлчилгээ хийх, шинэ хувилбар гаргахад бүх хэрэглэгчид нэг дор зэрэг хүрнэ. Maintenance хийхэд олон хэрэглэгчтэй зууралдахгүй.

- Хулгайд алдахгүй.

Сөрөг тал:

- Тог цахилгааны байнгын зардал болон өгөгдлийн багтаамжын (storage) их нөөц шаардлагатай, мөн bandwidth их байхыг шаардана. Програмаа байнга хянаж түшиж байх хэрэгтэй гэдэг утгаараа тасралтгүй, найдвартай ажиллаж байх шаардлага гарч ирнэ.

- Потенциалны administration хэрэгтэйн дээр дэд бүтэцийн нэмэлт нөхцөл гарч ирнэ. Сүлжээ тасрахгүй байх гэх мэт.

- Ямар нэг жижиг доголдол гарахад нэг дор бүх хэрэглэгчидээ сандаргах аюултай. Систем хэсэг хугацаанд бүрэн доголдсон тэр үед конэц филма болох эрсдэл өндөр.

Сөрөг талуудаас айгаад, эсвэл хэрэглэгчид итгэхгүй байх гээд бариад авахад хэцүү санагдчихсан уу? Шийдэх гээд үзвэл яасийн бэ? Ямарч архитектурт сул тал болон давуу тал байсаар ирсэн бөгөөд сул талууд байгаа нь л танд бусадтай өрсөлдөх боломжыг олгодог байж мэдэх юм шүү.

1. Интернэтийн холболтоос хамаарах хүчин зүйлээс айх нь үнэндээ утгагүй юм. Газар хөдлөлт болон давагдашгүй хүчин зүйл тохиолдох нь аюултай юу гэвэл аюултай. Гэхдээ ашигтай загварыг ашиглахгүй байх шалтгаан болж чадахгүй. Тэр ч бүү хэл Газарзүйн хувьд тархсан байдлаар SaaS-ыг зохион байгуулж болох бөгөөд харин ч таны байгаа орчинд ийм эрсдэл үүсэхэд таны өгөгдөл дэлхийн хаа нэг аюулгүй газарт хадгалагдан үлдэхээр зохион байгуулах бүрэн бололцоотой.

2. Мэдээллээ хамгаалах шаардлагатай зүйлс бизнэст бишгүй олон бий. Энэ нь өөрийн үнэт мэдээллээ жишээ нь дансны дугаар зэргээ хэн нэгний сэрвэрт хадгалуулахад нэг л итгэх аргагүй гол харлам санагдах тохиолдол гарах нь мэдээж. Энэ тохиолдолд та үйлчилгээ үзүүлэгчид итгэх, байгуулсан гэрээ зэрэгт найдахаас өөр аргагүй. Гэхдээ тэд ихэвчлэн таны мэдээллийг амь шигээ хайрлах хүмүүс. Учир нь ийм эвгүй зүйл хийгээд баригдсан тохиолдолд юм уу эсвэл хэн нэг хакер таны мэдээллийг тэднээс салгачихсан тохиолдолд тэдний үйлчилгээ зах зээл дээр нэр хүнд нь навс унах хэмжээнд очно. Маш жижигхээн шалтгаан ч ийм нөхцөлийг үүсгэж болзошгүй тул тэд байдгаараа хичээх болно.

3. Сэрвэр зогсох үед бүх зүйл салхинд хийснэ гэж айж байна уу? Дээр өгүүлсэн газарзүйн хувьд мэдээллийг тархаан байрлуулах бололцоо бүрэн бий үед нэг сэрвэр унахад нөөцөндөх сэрвэр нь шууд ажиллах бололцоотой үйлчилгээ үзүүлэгчийг нь сонгох хэрэгтэй. Үйлчилгээ үзүүлэх гэж буй бол тийм боломж бий болгох хэрэгтэй. Ганц сэрвэрт найдаа л суужийдаг ч гэж юу байхав дээ.

4. Хэрэглэгч талд бус SaaS үйлчилгээ үзүүлэгч талд байнгын administrator ажиллуулах зардал гарна. Энэ тогтмол зардлаас болоод SaaS-ын prepaid үйлчилгээ бий болсон гэж ойлгоход болох байх. Энэ бол нэмэлт зардал. Гэхдээ хэрэглэгчид маш хямд тусах, танд маш өндөр ашиг авчрах хувилбар юм. Зардлын хувьд Үйлчилгээ үзүүлэгч та аль болох олон хэрэглэгчтэй байх, хэрэглэгч та аль болох олон хэрэглэгчтэйг нь сонгох хэрэгтэй л гэсэн үг.

Хэрэглээний програмын бүх загварт SaaS model тохирохгүй. Жишээ нь server-т маш их resource иддэг 3D Game-үүд, нүсэр тооцоолол хийдэг Autocad гэх мэтийг энэ архитектураар онлайнд босгох гэж оролдох хэрэггүй байх.

SaaS бол 30 гаруй жилийн тэртээх анхны терминал (одоо бол броузэр) төхөөрөмж маягтай архитектур гэж үзэж болох бөгөөд энэ нь магадгүй бид комьютерийн шинжлэх ухааны бүхэл бүтэн нэг тойргийг туулжээ гэж ойлгогдохоор байгаа юм.

Дараагийн тойрогт энэ архитектурт тохирох шинэ бүтээлүүд хэн түрүүлж хийхийг хүлээгээд зах зээл дээр бэлэн байж байна. Зөвхөн олоод, судлаад, бүтээгдэхүүн болгоод, үйлчилгээг гаргаад ирэх жижигхээн passion бидэнд хэрэгтэй байгаа тул оч үсэргэх зорилгоор орчуулан, нэмж сийрүүлэн бичлээ.

AJAX алхам алхамаар

Тэнэгүүдэд зориулсан AJAX номноос харж байгаад [энэ] жишээг хийж үзлээ. Ямарч гэсэн Google-ийн нэгэн гоё үйлчилгээг дөхүүлж хийж чадсандаа баяртай байна. Кодыг нь энд дарж татаж авна уу. Apache, PHP байхад та ажлуулаад үзэж дөнгөнө байх. Энэ кодыг сайжруулаад Веб сайтаа чимээрэй залуусаа...

AJAX алхам алхамаар

Programer-ууд наашаа. Энэ удаа ердөө амархан. HTML-ын iFrame tag ашиглаад энэ жишээг хийж үзье. Дараах 2 файлыг ажиглаарай. Зарчим нь бол нэг хуудсан дээр hidden iframe байх бөгөөд ямар нэгэн [html – tag -ын] event дээр ажиллах javascript function нь дээрх iframe-ын дотор program бүхий хуудсаа [2 дах файлыг] дуудан top.frames["hiddenFrame"].location = "GetData.php?id=" + sId; ажиллах бөгөөд уг хуудас [GetData.php] ажиллаж дуусаад

divCustomerInfo -ын innertext дээр мөн javascript function ашиглан утга хэвлэж байгаа юм. Энэ бүхний үр дүнд хуудас page refresh хийлгүй javascript event дээр баазаас өгөгдөл шүүн харуулж чадах юм. Энэ жишээг ажиллуулж үзэхийн тулд 2 дах файл дээр байгаа query-ы дагуу MySQL дээр бааз үүсгээрэй. Энэ жишээ AJ буюу XML-гүй жишээ, мөн үнэхээр амархан бөгөөд AJAX-ын анхны алхамд чинь амжилт хүсье.

File 1. index.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>

<head>

<title>Hidden IFrame Example 1</title>

<script type="text/javascript">

function requestCustomerInfo() {

var sId = document.getElementById("txtCustomerId").value;

top.frames["hiddenFrame"].location = "GetData.php?id=" + sId;

}

function displayCustomerInfo(sText) {

var divCustomerInfo = document.getElementById("divCustomerInfo");

divCustomerInfo.innerHTML = sText;

}

</script>

</head>

<body>

<p>Enter customer ID number to retrieve information:</p>

<p>Customer ID: <input type="text" id="txtCustomerId" value="" /></p>

<p><input type="button" value="Get Customer Info" onClick="requestCustomerInfo()" /></p>

<div id="divCustomerInfo"></div>

<iframe src="about:blank" name="hiddenFrame" width="0" height="0" frameborder="0"></iframe>

<!- энэ хэсэг бол iframe юм. Энэ хүрээн дотор GetData.php file дуудагдаж буй юм.-->

</body>

</html>

File 2 GetData.php

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>

<head>

<title>Get Data</title>

<?php

//customer ID

$sID = $_GET["id"];

//variable to hold customer info

$sInfo = "";

//database information MySQL

$sDBServer = "localhost";

$sDBName = "dbname";

$sDBUsername = "root";

$sDBPassword = "";

//create the SQL query string

$sQuery = "Select * from Customers where CustomerId=".$sID;

//make the database connection

$oLink = mysql_connect($sDBServer,$sDBUsername,$sDBPassword);

@mysql_select_db($sDBName) or $sInfo = "Unable to open database";

if($sInfo == '') {

if($oResult = mysql_query($sQuery) and mysql_num_rows($oResult) > 0) {

$aValues = mysql_fetch_array($oResult,MYSQL_ASSOC);

$sInfo = "<img src='../a/images/".$aValues['photo']."' /><br />".

$aValues['Name']."<br />".$aValues['Address']."<br />".

$aValues['City']."<br />".$aValues['State']."<br />".

$aValues['Zip']."<br /><br />Phone: ".$aValues['Phone']."<br />".

"<a href=\"mailto:".$aValues['E-mail']."\">".$aValues['E-mail']."</a>";

} else {

$sInfo = "Customer with ID $sID doesn't exist.";

}

}

mysql_close($oLink);

?>

<script type="text/javascript">

window.onload = function () {

var divInfoToReturn = document.getElementById("divInfoToReturn");

parent.displayCustomerInfo(divInfoToReturn.innerHTML);

};

</script>

</head>

<body>

<div id="divInfoToReturn"><?php echo $sInfo ?></div>

</body>

</html>

Professional Ajax
byNicholas C. Zakas, Jeremy McPeakandJoe Fawcett
Wrox Press 2006
ISBN:0471777781

AJAX: Дараа үеийн веб

Дээхнэ үед AJAX-ын талаар блогдоо цухас дурдаад өнгөрсөн билээ. Энэ технологийн талаар (зарим тохиолдолд технологи биш технологуудын нэгдэл гэж тодорхойлоод байгаа юм. Би технологи гээд "залхуурчъя".) нухацтайхан судлаад ямар нэгэн үр дүнтэй юм хийж үзье гэж бодоод л явсан юм. Тэгээд өчигдөр Professional Ajax гэх (WROX)-ийн номыг олж уншаад юу ч гэсэн эхний ээлжийн мэдээлэл бичиж болмоор санагдав. За ингээд эхлэе.
AJAX бол технологи биш. Харин Asynchronous Javascript and XML гэсэн үг юм. Уламжлалт аргаар бүтээгдсэн веб сайтууд нь refresh based байсан бол AJAX бидэнд нэг хуудсан дээр олон үйлдэлийг refresh хийхгүйгээр нэг дор хэрэглэх боломжыг олгох болно.
Хэрэв та Web application developer бол энэ технологоос тойрч гарахгүй бөгөөд харин ч таны сонирхолыг маш их татах болно. Учир нь энэ технологи нь таны мэддэг Javascript, DOM, XML, CSS, XSLT зэргийн нийлбэр юм билээ. Товчхондоо бол энд Interface талын мэдлэг хэрэг болно.
Дараах зурагт анхаарлаа хандуулна уу.


AJAX-ашиглан хийсэн хамгийн сайн жишээнүүдэд Yahoo Beta Mail, GMail - хоёр зайлшгүй орно. Энэ хоёрыг ашиглаж үзэхэд мэйл шалгах хугацаа маш богино болсон бөгөөд хамгийн гол нь веб хуудас яг л хэрэглээний програм шиг амархан эвтэйхэн User Friendly болчиж. Одоо AJAX-үнэхээр дараа үеийн вебийн эхлэлийг авчирсан гэдэг нь маш олон жишээнээс харагдаж байна. Microsoft, Google, Yahoo, Sun, Adobe зэрэг аваргууд аль хэдийнээ шинэ өрсөлдөөнд бэлтгээд уралдаан зарласан мэт л шинэ бүтээгдэхүүнүүдээ хийж байна. Тун удахгүй Advanced Javascript and XML ч гэж нэрлээд буй энэ нэгдэлд зориулсан олон олон хүчирхэг Framework-ууд бүтээгдэхүүнүүд зах зээлийг орвонгоор нь эргүүлнэ.
AJAX зөвхөн Interface талд гарч буй дэвшил мэт боловч ямарч Business Logic хэрэгсэл голохгүй гэдэг утгаараа маш хүчирхэг болгож буй юм. Өөрөөр хэлбэл Java -тай, PHP ч өрсөлдөх боломжтой харагдаж байгаа.
AJAX - ын бүрэлдэхүүнд:
- Javascrip - AJAX Engine Scripting language
- XML - Data exchane format
- DOM (document object model)
- XSLT - xHTML дээрх XML (CSS хэрэглэж)
- CSS, XHTML, HTML
- XMLHttp протокол
Гол давуу тал
- Хамгийн бага траффик (хуудсаа нэг дуудаад аваад ирсэн бол бусад тохиололд сервэр лүү илгээх хүлээн авах мэдээлэл нь маш бага XML data л байх болно)
- Click and wait -аас зайлсхийсэн
- HTML хуудасны шаардлагагүй элментүүдийг дахин дахин дуудахгүй.
- ... гэх мэт орчуулах нь битгий хэл уншиж барамгүй олон давуу тал дурджээ.

Эцэст нь:
Энэ хүртэл уншсанд талархая. Та мэдээж web developer бололтой. Дээр дурдсан ном хэрэгтэй бол CHM хэлбэрээр нь надаас авч болно шүү гээд бичлэгээ дуусгая бичих гэж мунгинасаар байтал бүүр өлсчихлөө байна...

Аан бас болоогүй бэлдсэн линк-үүдээ байрлуулая.
AJAX-ын тухай
www.ajaxian.com
www.adaptivepath.com/publications/essays/archives/000385.php
www.ajaxlessons.com
http://developer.mozilla.org/en/docs/AJAX:Getting_Started

Ашиглан хийсэн:
http://www.google.com/webhp?complete=1&hl=en
... эндээс хайгаад үзчих...

Амжилт хүсье.