Angular ашиглан Цаг агаар вэб аппликейшн хөгжүүлсэн нь

Миний хувьд Full Stack хөгжүүлэгчээр ажилладаг ба одоогоор Angular судлан суралцаад удаагүй нэг сарын туршлага хуримтлуулсан байгаа хэдий ч өөрийн бодлыг та бүхэнтэй хуваалцахдаа таатай байна. Энэхүү нийтлэлээр front-end хөгжүүлэлтийн уламжлалт арга барилыг халж шинэ үеийн технологийг ашиглан хэрхэн хялбар, илүү зөв зохион байгуулалтаар аппликейшн хөгжүүлэгдэж буйг харуулахыг зорив.

Цаг уур орчны шинжилгээний газраас (ЦУОШГ) гаргаж буй (API) цаг агаарын 5 хоногийн урьдчилсан мэдээг Angular ашиглан хэрхэн вэбд суурилагдсан цаг агаарын аппликейшн бүтээх талаар нийтлэл маань чиглэгдсэн. Яагаад цаг агаар гэсэн сэдэв сонгож авсан бэ гэвэл:

1. Монгол контент агуулагдсан
2. Өдөр тутамд хэрэглэгдэж болох
3. ЦУОШГ-аас public буюу нийтэд болон хөгжүүлэгчдэд зориулсан API-тай
4. Angular анхан шатны суралцах хүрээнд ашиглагдах ойлголтуудыг илэрхийлэхэд хангалттай агууламжтай

Цаг агаарын аппликейшний live demo-г эндээс харна уу. Мөн аппликейшний source code нь Github дээр тавигдсан болно.

Гарчиг
- Angular гэж юу вэ?
- Хөгжүүлэлт /Mongolia Weather Forecast/
  - Юуг мэдэж байх шаардлагатай вэ?
  - Angular CLI
  - Integrated development environment (IDE)
  - Кодчилол
  - Бонус
- Зөвлөмж
- Ашигласан материалууд

Angular гэж юу вэ?

Angular бол JavaScript фреймворк бөгөөд вэб аппликейшн бүтээхэд зориулагдсан. Өөрөөр зүйрлэн хэлбэл цэрэг дайнд ашиглагдаж буй хамгийн сүүлийн үеийн тийрэлтэд сөнөөгч онгоц гэдэгтэй адил хөгжүүлэгчдэд аппликейшн бүтээхэд зориулсан орчин цагийн технологи, багаж зэвсэг юм.

Гарал, үүсэл түүхийн талаар товчхон судлан үзвэл анх Miško Hevery болон Adam Abrons нар 2009 онд AngularJS буюу Angular 1 хувилбар төслийг хөгжүүлэв. Abrons-ын хувьд энэхүү төслийг орхин гарсан бол Hevery нь Google компанид орон ажлын багийн нөхөдтэй цуг үргэлжлүүлэн 2016 оны 9-р сард хувилбар 2, 2017 оны 3-р сард хувилбар 4 гарган дараагийн 5 дахь хувилбарыг мөн энэ оны 9 эсвэл 10 сард гаргах төлөвлөгөөтэй ажиллаж байна. Яагаад хувилбар 3-г алгасаад 4 рүү шилжин орсон бэ гэвэл тухайн үед Angular-ын үндсэн сангууд болох core, compiler, compiler-cli, http нь адил зарчмаар v2.3.0 гэж дугаарлагдан байтал route сан нь v3.3.0 хувилбар дээр байв. Иймд хөгжүүлэгч баг чаашдын хөгжүүлэлтэнд ямар нэгэн эргэлзээг гаргахгүйн тулд 2-оос шууд 4 рүү шилжижээ.

AngularJS (өөрөөр Angular 1)-ийн эцэг гэж нэрлэгдэх Miško Hevery-гийн YouTube дээр тавигдсан 2014 оны Angular бага хурлын үеэрх илтгэлийг үзэхэд сонирхол илүү татсан сэдвүүд:

• Angular нэрийн үүслийн тухай асуусан асуултны хариулт:

HTML tag-уудыг илэрхийлдэг < > буюу өнцгөн хаалт тэмдэгтээс (angle brackets) гаралтай.

• Google Feedback төслийн кодчилолыг Angular ашиглаж дахин шинээр хөгжүүлэхдээ хэрхэн харьцангуй бага хугацаа болон мөр код орсон талаар:

Тухайн төслийг өмнө 3 хөгжүүлэгч нийлээд 6 сар ажиллан бүтээж байсан 17000 мөр кодыг дахин шинээр Angular ашиглан хөгжүүлэхдээ 3 долоо хоногийн хугацаанд 1500 мөр кодод багтаан дуусгасан.

Хөгжүүлэлт /Mongolia Weather Forecast/

Юуг мэдэж байх шаардлагатай вэ?

• HTML & CSS
• Basic JavaScript
• Programming fundamentals (Functions, conditionals, loop, etc..)

Хөгжүүлэгч бүрийн зайлшгүй мэдэж байх дээр дурьдагдсан технологиуд болон ойлголтуудын талаар энэ нийтлэл маань чиглэгдээгүй. Мөн TypeScript, ECMAScript 2015 (ES6) програмчилалын хэлүүд, JavaScript code-г сервер тал дээр ажиллуулагч орчин болох Node.js технологи үүний сан зохицуулагч болох NPM багаж ашиглалтын талаарх мэдлэгүүд хэрэгтэй. Хэрэв таньд одоогоор эдгээр үндсэн мэдлэг ойлголтууд байхгүй бол судлан сурахыг зөвлөж байна.

Angular CLI

Angular CLI нь project шинээр үүсгэх, тест хийх, файл нэмэх, хөгжүүлэгч орчинд deployment хийх гэх мэт боломжуудыг агуулж эдгээрийг terminal/console орчноос коммандаар ажиллуулагч багаж юм. Одоо бидний сайн мэдэх “Hello, World!” ухагдахуун болох программын анхны алхмыг хийж үзэе.

Хэрэв таны компьютерт Node.js болон NPM суугаагүй бол эндээс суулгана уу. Эдгээр багажуудын хувилбарууд нь дор хаяж node 6.9.x болон npm 3.x.x дээш байх шаардлагатайг анхаарна уу.

Angular CLI-г глобал байдлаар суулгах:

npm install -g @angular/cli

Шинэ project үүсгэж (энэхүү жишээнд weather-mn нэрээр project-оо нэрлэв):

ng new weather-mn

Дээрх коммандууд бүрэн ажиллаж дуусахад багагүй хугацаа шаардах тул тэвчээртэй хүлээх хэрэгтэй. Node модулиуд нь өөр бусад хамааралтай олон модулиудаас бүрдэх ба алдаа мадаггүй ажиллахын тулд тэдгээрийг нэг бүрчлэн татан суулгаж багагүй хугацаа ордог болно.

Тухайн project-ийн директор дотор орж “Hello, World!” программын анхны алхмыг ажиллуулах:

cd weather-mn
ng serve --open

ng serve комманд нь сервер программыг ажиллуулж мөн тухайн project доторх файлуудыг ажиглаж байдаг ба шинэ өөрчлөлт орсон үед автоматаар дахин project-г build хийдэг. Үүний араас байрлаж буй --open флаг нь вэб хөтчийг http://localhost:4200/ хаяг дээр мөн автоматаар нээх болно. Хэрэв таньд тухайн project app works! мессежээр мэндчилж байвал таньд баяр хүргэе! та анхны алхмыг амжилттай гүйцэтгэлээ :)

Integrated development environment (IDE)

Мэдээж хөгжүүлэгчид бидэнд ямар project/кодчилол хөгжүүлэгч программ ашиглаж цаг хэмнэх болон илүү өргөн боломжуудыг хүртэх зэрэг нь чухал зүйлүүд билээ. Angular project хөгжүүлэхэд тохиромжтой программууд бол Visual Studio code, WebStorm, Atom editor, Sublime Text 3 юм. Миний хувьд өмнө Sublime Text 3 программыг түлхүү ашигладаг байсан бол одоо Visual Studio code-г ашиглаж байна. Учир нь бүх үйлдлийн систем дээр ажилладаг ба debug хийх, олон тооны terminal/console ашиглах, алдартай plugin/extension-үүдийг ашиглахад хялбар гэх мэт илүү өргөн боломжуудыг агуулсанд байгаа болно.

Дээрх зураг нь бид өмнө Angular CLI ашиглаж үүсгэсэн project-г Visual Studio code-оор нээж харуулсан байгаа байдал.

Дараагийн цуврал нийтлэлээр доорх сэдвүүдийг үргэлжлүүлэн нийтлэх болно.

  - Кодчилол
  - Бонус
- Зөвлөмж
- Ашигласан материалууд