[JS Applications] Домашно SPA Applications and App Architecture


7

Условие:

Create a SPA application "Crowd Chat"
­The application must use the following web services:
                 Return all posts.
                 Body: { "user": "USER_NAME",
                              "text": "MESSAGE_TEXT"}
                 Sends a new post.
 
   Моят вариант на домашното за SPA Applications and App Architecture. Използвал съм RequireJS и Sammy.JS, която е сравнително малка библиотека за SPA. Тя позволява лесно навигиране в приложението чрез 'routes'. Извикват се зададени функции при достъпване на определен URL (route) - например #/home, #/about и т.н. Друго голямо нейно предимство е, че използва вградения във всеки браузър history API. Той позволява натискане на back бутона на браузъра, който ни връща в предишния route от SPA-то, а не в предишния уебсайт, както би станало без Сами. Чатът не е перфектен, но върши добра работа и за целите на домашното, мисля, е ок.
 
Демо - ТУК
Source Code - ТУК



Отговори



13

Моят CrowdChat: http://nikolov.cloudvps.bg/CrowdChat

SOURCE CODE

Demo version:

Като външни библиотеки използвам:

  • jQuery
  • Q - за Promises
  • RequireJS
  • Sammy.js

А цялата логика съм я разцелип на отделни части:

/partial-views - chatbox-a и login формата са в отделни .html файлове

/styles.css - взел съм ги от интернет

http-requester.js - за GET/POST заявки с Promises (jQuery + Q)

ui-controller.js - по подадените данни генерира HTML, който го връща на controller.js по-долу

validation-controller.js - проверява за валидни данни (само username)

controller.js - управлява почти цялата логика - запазване/вземане на потребително име от sessionStorage, проверка дали е логнат, зарежда Login и Chatbox формите (като взема данните през http-requester.js и ги праща на ui-controller.js, който генерира HTML-a), update-ва данните, set-ва събития на бутоните и т.н.

main.js - там съм указал routes за sammy.js. Това пренасочване с window.location = '#/login' мисля, че не е правилно и смятам да го пооправя..

Най-новите коментари са най-горе, като view-то се ъпдейтва през 4000 ms, има валидация за username-a и съобщението. Показва последните 200 съобщения, като игнорира тези, които са с празно име/съобщение. Username-a се пази в sessionStorage.


от martin.nikolov (4535 точки)


0
Малко улеснение: няма нужда да се прави Q.defer() обект за обещанието, тъй като '$.ajax' попринцип връща promise. Тоест, getJSON може направо да бъде "return: $.ajax({....}); и всичко е ок. :) Може направо да не се ползва "Q" библиотеката, като така или иначе слагаме jQuery

от Rub (0 точки)

0
Да, но доколкото знам jQuery не поддържа всички стандарти за Promise библиотека и затова ползвам Q.

от martin.nikolov (4535 точки)



3

Ето и един вариант от мен с Twitter Bootstrap, AngularJS и jQuery. През 10 секунди обновявам чата, също когато изпратя съобщение правя рефреш.

Демо

Сорс Код


от dimo.petrof (2887 точки)


0
https://github.com/Siko91/TelerikAcademy--JavaScript-Apps/tree/master/Lesson10%20-%20SPA
Това е моята версия. Като библиотека ползвам само JQuery.
Някой може ли да ми препоръча място където да мога да кача демо безплатно?

от lokiko91 (790 точки)


0
За демо аз използвам директно през GitHub: https://rawgit.com/Siko91/TelerikAcademy--JavaScript-Apps/master/Lesson10%20-%20SPA/index.html
За да го отвориш по този начин избираш -> Raw -> след това както ти е линка raw.githubusercontent.com/... го правиш на rawgit.com/...

от martin.nikolov (4535 точки)

0
Благодаря ти. Тва е яко!

от lokiko91 (790 точки)



2

Привет,

Това е моя вариант. Запазвам nickname-а в LocalStorage, като вече има ли веднъж запазен се ползва, и винаги може да се промени разбира се. Но ако няма не се допуска до чата(поне така трябва да е). Сложил съм един setInterval, който следи за промени в броя на записите и ако има визуализира наново feed-a.

Demo GitHub

Поздрави


от penjurov (1466 точки)


2

Ето моята реализация:

ДЕМО || КОД

Имам два отдлелни файла за двата изгледа - въвеждане на ник и самия чат. Има и два контролера, които се грижат за съответната страница. Постове ги зареждам с темплейт, като този темплейт също е в отделен файл.

Името го запазвам в localStorage, но ми се искаше да намеря как да си го запазя в самата програма. В смисъл в това app, което инициализацията на Sammy ни дава. Видях, че може би нещо като плъгин трябва да се направи - ако някой има повече информация, нека сподели ;)


от lostm1nd (846 точки)


3

Ето и аз да постна веднъж нещо във форума :)

CODE | DEMO

И аз като част от колеги съм използвал bootstrap за "дизайна". При по често обновяване започна да ми дава доста грешки в конзолата за това го оставих на 500ms може би е заради много заявки които се правят, а ако заради нещо друго бих оценил коментар. Не съм правил логин и т.н. SPA-то представлява просто 3 страници нищо особено. Най-новите коментари излизат най-отдоло на чат секцията.

 


от Yasen (529 точки)


0
Нещо не ми даде да чатя.
Едит: Даде ми, явно обновява по-бавно просто.

от cerealBoxx (504 точки)


0
Благодаря за задачата! Нещо подобно ли ще има и на изпита?

от Rocknmather (127 точки)


4

DEMO

CODE

 

Задачата е разделена на 3 части - persisters - работят със заявките към сървъра, ui - вмъква html-a, controller - обработва подадените данни и ги подава на ui. Данните за user-a се пазят в localStorag-a, като има опция за logout. Интерфейса не е нищо особено - просто да се визуализира чата.

Помогна ми видеото на Дончо за бикове и крави от предишна подготовка, като съм ползвал доста неща от нея.




3

Здравейте, 

Source  | DEMO

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

Използвал съм require и sammy, за lazy loading и SPA. Направих username да се запаметява в localStorage и така всеки път, когато се отваря главния URL се пренасочва към chat. Съответно с натискане на Log out в горния десен ъгъл се изчиства localStorage и не може да се достъпи chat-ът, ако не си въвел потребителско име.

Поздрави и успех на всички утре :)


от Nikolay_Radkov (2911 точки)