Приключението наречено Frontend JavaScript

След като видяхме през какви задачи са преминали участницие в Core Java курса, е време да проследим и по-интересните задачи и моменти в Frontend JavaScript курса!

Нашите лектори-Радо Георгиев и Иво Бъчваров преминаха заедно с участниците едно интересно приключение в света на JavaScript-а, за което разказват тук:

Rado&Ivo

  • РадоРадо и Иво са възпитаници ан ФМИ (Факултет по Математика и Информатика), като Радо е почти-завършил Компютърни науки, а Иво учи Информатика.

  • РадоРадо има 3-годишен преподавателски опит във ФМИ с курсовете по "Съвременно Уеб Програмиране" и "Функционално Програмиране", а Иво е с 5 години опит в уеб, като е от победителите на HackFMI 2 и е един от хората, които пишат по системата Diaphanum.

В началото на Frontend JavaScript

JavaScript is Weird

Започнахме от ground zero за JavaScript - идеята да го научим като език за програмиране извън контекста на уеб приложенията.

Първите седмици се занимавахме с решаване на прости и изолирани задачи, които правят ясно дефинирани неща, като наблегнахме на функционалното програмиране с JavaScript, защото той поддържа нужните инструменти за това.

Използвахме главно Node, за да стартираме и тестваме JavaScript кода.

Интересното е, че забранихме на хората да пишат for-цикли за решаване на задачите ;) (има [].forEach, което приема функция за обхождане на всеки елемент)

След това преминахме на Обектно-Ориентираното програмиране в JavaScript, което освен в името, няма почти нищо общо със стандартните OOP модели.

Говорихме си за public и private променливи, как да крием неща от глобалния scope чрез анонимни функции, които извикват себе си веднага и за модел за наследяване в JavaScript.

Приложение за мачовете от световното първенство - първата по-интересна задача

След като се запознахме добре с нещата в JavaScript, преминахме към създаване на уеб приложениея и запознаване с jQuery.

Направихме приложение, което да показва кои мачове от световното ще се играят днес, а когато започнат - да следи прогреса и резултата на мачовете!

За целта използвахме отвореното API с данни за мачовете - http://worldcup.sfg.io/

Това беше и първата групова работа за курса.

Може да видите двата Screenshot-a от решението на Деян Янакиев (на снимката по-долу) и Боян Дончев: Деян-screenshot боян-screenshot

Кодът се намира в GitHub - https://github.com/Boiannn/World-Cup.

jQuery AJAX приложения

Следващата сръпка бе да се запознаем в по-голяма дълбочина с AJAX приложенията и как работи HTTP.

Като задача, дадохме възможност на хората да напишат потребителски интерфейс за checkin системата, която тестваме в новата зала на Хак България.

Знаейки MAC адресите на курсистите и сканирайки мрежата на всеки 20 минути, може да водим статистика кой и кога посещава курсовете при нас.

Деян Янакиев направи най-впечатляващия UI за това (по, който има още работа), използвайки API достъпа до Checkins и chart.js библиотеката: Check-in system

Canvas, Web Sockets, Single & Multiplayer игри

Следващото ниво беше, да се запознаем с HTML 5 API-то и да направим realtime-multiplayer 2D игри, използвайки готов Socket-Server, написан от нас на NodeJS.

За да направим Canvas упражненията качествени, на гости ни беше Никола Димитров, който освен, че е Game Guru, показа и своята игра, в която действието се развива по книгата "Под Игото", с която е участвал на миналогодишния Imagine Cup.

Кодът за играта се намира тук - https://github.com/NikolaDimitroff/thralldom

Разбира се, започнахме с класически Snake, който е много добро упражнение за всеки човек, независимо от платформата - ако го накараш да работи и кода ти не е станал на спагети, значи се справяш добре :)

Здравка Чавдарова (на снимката по-долу) направи една от първите реализации, в които има и допълнителна конфигурация към играта - https://github.com/zdrav4e/Frontend-JavaScript-1/tree/master/week5

Realtime - Multiplayer игрите, върху които работиха курсистите бяха - Класически Snake, Класически Pong и Multiplayer Paint (Условията може да намерите тук - https://github.com/HackBulgaria/Frontend-JavaScript-1/tree/master/week6.

Антоан Ангелов (на снимката по-долу) направи впечатляващо решение на Multiplayer Snake-a, което може да разцъкате ето тук - http://development.hackbulgaria.com/Multiplayer-Snake/ !

Трябват ви двама :)

Кодът за играта му се намира тук!

photo-of-games

Деян, Здравка, Анто

А това са хората, които ние искаме да ви покажем, защото те се справят много добре с поставените задачи, че и даже излизат извън тях!

Деян Янакиев:

Деян Янакиев

Антоан Ангелов:

Антоан Ангелов

И разбира се, Здравка Чавдарова (по средата):

Здравка Чавдарова

Какво предстои?

Тъй като курсът е към привършване, и се запознахме със силния инструментариум на Promises, RequireJS и BackboneJS, на курсистите им предстои да довършват и рефакторират стар код, използвайки последните 3 много силни JavaScript инструментa!

Ще довършим всичко, което хората са започнали и ще направим галерия от работещи приложения!

Предстои ни и една финална (и единствена) лекция, с която ще обобщим всичко, с което сме се борили по време на Frontend JavaScript курсът.

Тя ще бъде направена от РадоРадо, като може да очаквате запис от нея ;) (Следете ни във Facebook, за да разберете това)



comments powered by Disqus