|
Appery io-da Ionic, Server kodi va EventSource api bilan mobil chat ilovasini qanday yaratish mumkin
|
| Sana | 01.12.2023 | | Hajmi | 0,8 Mb. | | #109309 |
Bog'liq 1701164188 (1)
Muhammad Al-Xorazmiy nomidagi
Toshkent axborot texnologiyalari universiteti
3-amaliy ish
Mavzu: Text Messaging App
Talaba:Qo`narov Shohrux
Tekshirdi: Alimova Fotima
TATU - 2023
Appery.io-da Ionic, Server kodi va EventSource API bilan mobil chat ilovasini qanday yaratish mumkin
E'lon qilingan: 2015 yil 7 dekabrMuallif: Appery.io jamoasiFayl ostida: AngularJS , API , Ionic , Server kodi , Qo'llanmalar
Appery.io platformasi mobil ilovangizni tezda yaratishga yordam beradigan ko'plab vizual vositalar bilan birga keladi . Vizual vositalardan tashqariga chiqishingiz va ilovangizni kod bilan sozlashingiz kerak bo'lgan holatlar borligini tushunamiz. Appery.io-da buni qilishning bir qancha usullari mavjud.
Ilovada (mijoz) istalgan maxsus JavaScript kodini yozishingiz mumkin. Siz har qanday uchinchi tomon kutubxonalarini ham qo'shishingiz mumkin.
Appery.io Server Code yordamida siz JavaScript-dan foydalanib serverda har qanday maxsus mantiqni ishlab chiqishingiz mumkin. Ushbu mantiq REST API orqali avtomatik ravishda ochiladi. Bu tezda maxsus API yaratishga o'xshaydi.
Ushbu qo'llanmada biz sizga chat mobil ilovasini yaratish uchun vizual vositalarni maxsus kod bilan qanday birlashtirishni ko'rsatamiz. Xususan, server tomonidan yuborilgan voqealarni qabul qilish va oddiy chat ilovasini yaratish uchun EventSource API dan qanday foydalanishni o‘rganasiz . Ilova Ionic Framework- ga asoslanadi va shuningdek, Server Code skriptidan foydalanadi. Ilova quyidagicha ko'rinadi:
Chat ilovasi
Siz ilova interfeysidan boshlaysiz. Sahifani oching index.
Asosiy indeks (shablon) sahifasi
ng-initQiymatli atribut qo'shing init().
O'ting Project -> Modelsva quyidagi modellarni yarating:
message(Ob'ekt turi)
Unga authorva body String turi parametrlarini qo'shing.
messages(massiv turi)
user(Ob'ekt turi)
Unga nameString turi parametrini qo'shing.
Yorliqga o'ting Scopeva turdagi o'zgaruvchini userqo'shing user:
O'zgaruvchilar doirasini sozlash
Keyin sahifa nomini Screen1 sahifaga o'zgartiring NamePrompt.
FormUshbu sahifaga komponent qo'shing va ichiga Inputva komponentlarni joylashtiring . Sahifa quyidagicha ko'rinishi kerak:ButtonForm
NamePrompt sahifasini yaratish
InputEndi chat foydalanuvchi nomini kiritadigan komponentni o'rnatamiz .
Kirish komponentini sozlash
Xususiyatlarda maydonni toping Placeholderva uni "Ismingiz nima?" ga o'rnating.
Yangi atribut nomini kiriting ng-modelva user.nameqiymat sifatida qo'shing.
Keyingi qadam tugmani sozlash bo'lib Chat, u ga o'tadi ChatPage.
UI komponentlarini qamrov o'zgaruvchilari bilan bog'lash
Quyidagi AngularJS atributlarini qo'shing va ularning qiymatlarini quyidagicha o'rnating:
ng-disabled =!user.name.
ng-click = Direktiv (uni bo'sh qoldiring)
navigate-to = ChatPage.
Endi siz qurishga tayyorsiz ChatPage. ChatPageQuyidagi skrinshotdagi kabi ko'rinishda loyihalashtiring . OutlineSahifa qaysi konteynerlardan foydalanishini ko'rsatadi . Ushbu sahifa xabarlarni yuborish uchun ishlatiladi.
ChatPage sahifasini yaratish
Elementni tanlang Page(non bo'laklari yoki kontur ko'rinishi orqali) va Headerva Textxususiyat qiymatlarini belgilang:
Headerkabi {{message.body}}.
Textkabi {{message.author}}.
ListEndi siz Item uchun funksiyani sozlashingiz kerak , shuning uchun uni tanlang va quyidagi parametrlarni o'rnating:
Heading textXususiyat qiymatini sifatida {{message.author}} va Text xususiyatni sifatida qo'shing {{message.body}}.
Yangi AngularJS atributini qo'shish orqali tahrirlashni tugating: ng-repeatqiymati bilan message in messages.
Komponentning ichida Gridbizda Inputva Buttonkomponentlar mavjud. Ushbu komponentlar chat xabarlarini yozish va yuborish uchun ishlatiladi:
Chat xabarlarini kiritish va yuborish uchun UI komponentlari
Sizga quyidagi atributlar va ularning qiymatlari kerak bo'ladi:
ng-model ga o'rnating message.body.
ng-submit ga o'rnating sendMessage().
PlaceholderMulk sifatida qo'shing Enter text.
Tugmani tanlang, ng-click qiymati bilan atribut qo'shing sendMessage().
Moslashtirish uchun tugma yorlig'ini o'zgartiramiz. Mulkni tanlang Textva uni o'rnating Send. Siz ham o'zgartirishingiz mumkin Icon; biz tanladik Envelop.
Tugma foydalanuvchi interfeysini sozlash
Endi tabga o'ting Scope -> Variables:
Tur va turdagi o'zgaruvchilar messagesnomlarini kiriting .messagesmessagemessage
Keling, Databaseasboblar paneliga o'tamiz. Ma'lumotlar bazasini yarating chatva to'plam qo'shing messages.
Ustunlar qo'shing author (string type)va body (string type).
Keyin ma'lumotlar bazasini ilovaga bog'lashingiz kerak. Ilova yaratuvchisiga qayting va ni tanlang , ma'lumotlar bazasi va yig'ish uchun xizmatni Create new -> Database Servicestanlang . Xizmatni ilovaga import qilish uchun bosing.chatCreatemessages
Oxirgi narsa - skript yaratish Server Code. Yorliqga o'ting Server Codeva yangi chatskript yarating va ushbu kodni qo'shing:
var answerBody = {},
requestParams = {},
MASTER_KEY = 'e4-xxx-xxx-xxxx-xxx90',
sarlavhalar = Apperyio.request.headers,
lastEventId = sarlavhalar['Last-Event-ID'] || request.get('oxirgi voqea-id'),
xabarlar,
xabar,
isoDate;
agar (lastEventId) {
var lastEventDate = new Date(parseInt(lastEventId));
var lastEventDateText = lastEventDate.toISOString();
xabarlar = Collection.query('ma'lumotlar bazasi_id', 'xabarlar', {
"mezonlar": {
'_createdAt': {
'$gt': {
'$date': lastEventDateText
}
}
},
'sort': '_createdAt'
}, MASTER_KEY);
xabar = xabarlar[0];
constructSSE(Date.now(), JSON.stringify(xabarlar));
}
boshqa {
constructSSE(Date.now(), '');
}
funktsiyasi constructSSE (id, tana) {
var data = 'id: ' + id + '\n';
ma'lumotlar += 'ma'lumotlar: ' + tana + '\n\n';
Apperyio.response.success(ma'lumotlar, "matn/voqea oqimi");
}
MASTER_KEYva qiymatlarini database_idhaqiqiy qiymatlar bilan almashtirishingiz kerak.
MASTER_KEY = 'e4-xxx-xxx-xxxx-xxx90',
xabarlar = Collection.query('ma'lumotlar bazasi_id', 'xabarlar', {
Ushbu ma'lumotni Ma'lumotlar bazasi sozlamalarida topishingiz mumkin:
ga qayting ChatPage, yorliqni oching Scopeva Functionquyidagi funksiyalarni qo‘shadigan yorliqga o‘ting:
init, bosing Editva kod qo'shing:
agar (!! window.EventSource) {
var source = new EventSource('https://api.appery.io/rest/1/code/xxxx/exec');
source.addEventListener('xabar', funktsiya(e) {
agar (e.ma'lumotlar) {
$scope.$apply(function() {
Array.prototype.push.apply($scope.messages, JSON.parse(e.data));
});
}
}, noto'g'ri);
source.addEventListener ('ochiq', funktsiya (e) {
console.log('ulanish:ochiq');
}, noto'g'ri);
source.addEventListener('xato', funksiya(e) {
agar (e.readyState == EventSource.CLOSED) {
console.log('ulanish:yopiq');
}
}, noto'g'ri);
}
sendMessage, bosing Editva kod qo'shing:
var requestData = {};
requestData = (funksiya mapping8072($scope){
var requestData = {};
requestData.data = Apperyio.EntityAPI('chat_messages_create_service.request.body', aniqlanmagan, rost);
var message_scope = $scope.message;
requestData.data.author = $scope.user.name;
requestData.data.body = message_scope.body;
so'rov ma'lumotlarini qaytarish;
})($scope);
Apperyio.get("chat_messages_create_service")(requestData).then(
funktsiya (muvaffaqiyat){
},
funktsiya (xato){
},
funktsiya (xabar berish){
});
$scope.message.body = '';
Skriptingizni ulash uchun yorlig'iga o'ting Server Code, yorliqni toping REST informationva Service URLyuqoridagi koddan nusxa ko'chiring va almashtiring:
Barcha o'zgarishlarni saqlang.
Endi App Builder-ga qayting va Testilovani brauzerda ishga tushirish uchun bosing.
Tugallangan ilovani ishga tushirish:
Chat ilovas
|
| |
