CC BY
0ЭОЖ 004.415.2.031
МОБИЛЬД1 ЦОСЫМШАНЫ ЭЗ1РЛЕУ YШIН PHONEGAP(CORDOVA) ПЛАТФОРМАСЫН ПАЙДАЛАНУ
ЖАЦГАЛИ АЙБОЛ АСЫЛБЕК¥ЛЫ
^азакстан инновациялык жэне телекоммуникациялык жYЙелер университетшщ
магистранты
ЖАМАНГАРИН ДУСМАТ САМАТ¥ЛЫ
гылыми жетекшi, PhD, профессор, И. Сэтбаев атындагы ^азак улттык техникалык
зерттеу университетi
ty^h. Цазгргг уацытта мобильдг цосымшаларды ззгрлеу ацпараттыц технологиялар саласындагы мацызды цурамдас болт болып табылады. PhoneGap платформасы (Кордова) эз1рлеушшерге HTML, CSS жэне JavaScript сияцты таныс веб-технологияларды пайдаланып кросс-платформалыц мобильд1 цолданбаларды жасау мYмкiндiгiн беред1. Бул мацалада б1з мобильд1 цосымшаларды эзiрлеу Yшiн PhoneGap (Cordova) платформасын пайдаланудыц негiзгi артыцшылыцтары мен мYмкiндiктерiн царастырып, пайдаланушы орналасцан жерлерт корсетуге, сондай-ац цызметтщ геолокация картасында белгiлердi орнатуга мYмкiндiк беретт клиент-сервер архитектурасы бар мобильдi цосымшаны жасау жолы сипатталган.
Ктттт свздер: Смартфон, мобильдi цосымша, кросс-платформа, Android
Мобильдi курылгылар мен колданбалар нарыгыныц теракты eсуiмен эзiрлеушiлер эртYрлi платформаларда жумыс ютей алатын мобильдi косымшаларды жасау кажеттшпне тап болды. PhoneGap (Кордова) - бул мэселеш шешудi усынатын платформалардыц бiрi. PhoneGap эзiрлеушiлерге кросс-платформалык мобильдi косымшаларды жасау Yшiн веб-технологияларды пайдалануга мYмкiндiк бередi.[1]
PhoneGap (Кордова) пайдаланудыц артыкшылыктары:
Кросс-платформа: PhoneGap-тыц непзп артыкшылыктарыныц бiрi - бiрдей HTML, CSS жэне JavaScript кодын пайдаланып Android, iOS жэне Windows Phone сиякты эртYрлi платформаларда жумыс ютей алатын мобильдi косымшаларды жасау мYмкiндiгi.[2]
Веб-технологияларды пайдалану: эзiрлеушiлер мобильдi косымшаларды жасау Yшiн веб-эзiрлеу туралы бшмдерш пайдалана алады, бул эзiрлеу процесш кол жетiмдi жэне ыцгайлы етедь
курылгы API интерфейстерiне кiру: PhoneGap камера, геолокация, контактшер жэне т.б. сиякты эртYрлi курылгы API интерфейстерше кол жеткiзудi камтамасыз етедi, бул сiзге бай мобильдi косымшаларды жасауга мYмкiндiк бередi.[3]
^ауымдастык жэне колдау: PhoneGap белсендi эзiрлеушiлер кауымдастыгы мен кецейтшген кужаттамага ие, бул эзiрлеу процесiн жецiлдетедi жэне тиiмдiрек етедЦ4] PhoneGap (Кордова) пайдалану шектеулерi:
Эшмдшк: PhoneGap колданбалары веб кeрiнiсiнде жумыс iстейтiндiктен, олар жергiлiктi колданбаларга караганда eнiмдiлiгi темен болуы мYмкiн, эаресе графика жэне анимациялармен жумыс ютегенде.
курылгы мYмкiндiктерiне шектеулi кол жет1мдшк: кейбiр курылгы мYмкiндiктерiне жергiлiктi эзiрлеумен салыстырганда PhoneGap аркылы колжетiмсiз болуы мYмкiн.[5]
Эзiрленiп жаткан косымшаныц клиент-сервер архитектурасы болады, мунда мобильдi курылгы клиент ретшде эрекет етедi. ^олданбаныц келесi логикасы кабылданады: клиент сервердеп деректер коймасына кол жеткiзедi, мэлiметтер базасында сактауга деректердi жiбередi, сонымен катар одан кажеттi деректердi сурайды. Клиент сонымен катар OpenLayers.js ютапханасы аркылы баскару аркылы OpenStreetMap кызметш пайдаланып карта
ОФ "Международный научно-исследовательский центр "Endless Light in Science"
кескшдерш алады. Клиент пен сервер арасындагы езара эрекеттесу JSONP пiшiмiндегi Ajax сураулары аркылы жузеге асырылады, бул клиенттщ сервермен 6ip доменде немесе эртYрлi доменде болуына карамастан деректердi жiберуге жэне алуга мYмкiндiк бередi. Клиент мобильдi курылгы болгандьщтан, доменаралык сураулар непзшен орындалады.
Мэлiметтер корымен жумыс ютеу жэне алынган акпаратты сактау жэне тасымалдау Yшiн ьщгайлы пiшiнге келтсру Yшiн евдеудщ барлык логикасы серверде сипатталган.
^осымшаньщ клиент белiгi PhoneGap платформасын жэне HTML, CSS, JavaScript сиякты технологияларды пайдалана отырып эзiрленген. ^осымшаньщ функционалды белiгiн эзiрлеу Yшiн келесi кiтапханалар кажет болды, олар клиент жагында орналасады:
1) cordova-2.2.0.js - мобильдi курылгыньщ жергiлiктi мYмкiндiктерiмен езара эрекеттесуге мYмкiндiк беретiн ютапхана;
2) OpenLayers.js - Open Street Map (OSM) картасын жасау кызметсмен жумыс iстеуге мYмкiндiк беретiн ютапхана;
3) jquery-1.7.1.min.js - HTML кужатыньщ DOM курылымымен жумыс iстеуге мYмкiндiк беретiн кiтапхана;
^осымшаньщ клиент белшнщ файлдык курылымын 1-суретте керсетiлген.
Г
I- И 1>
ess js markers
U ш
img style.css
Сурет 1. Файлдык курылым
index.html файлы барлык колданба логикасын сипаттайтын негiзгi файл болып табылады.
Css каталогында осы стильдерде колданылатын дизайн стильдерi мен кескiндерi бар.
Js калтасы барлык пайдаланылган сценарийлердщ файлдарын сактайды.
Маркерлер калтасы колданбада пайдалануга болатын маркер белгiшелерiн сактайды. Клиент пен сервер арасындагы езара эрекеттесу Yшiн jQuery кiтапханасын пайдаланатын requestToServer функциясы пайдаланылады. Ол деректердi GET сурауы жэне JSONP деректер пiшiмi аркылы жiбередi, бул бiзге белгiлi бiр курылымы бар деректердi клиенттен серверге ж1беруге мYмкiндiк бередi жэне сурау кросс-домен болуы мYмкiн ^здщ жагдайда бул ете мацызды, ейткенi клиент белш мобильдi курылгыда). jsonp_callback кез келген клиент сурауына жауап ретшде сервер кайтаратын айнымалыньщ идентификаторын керсетедь
Функция 3 параметрдi камтиды:
1) url акпарат жiберiлетiн мекенжайды керсетедц
2) сэттiлiк - сэттi жауапка шакырылатын функция серверден клиент суранысына;
6
index.html
3) myObjects - керсетшген url-ге тасымалдануы тиiс деректер.
¥зак уакыт бойы серверден жауап болмаса немесе жауап дурыс емес п^мде болса, онда бул функцияныц кате белiгi шакырылады.
Мобильдi косымшаны эзiрлеу кезiнде бiз келесi функционалды блоктарды ажырата аламыз:
1) картаны керсету;
2) маркерлердi керсету;
3) жаца маркер куру;
4) пайдаланушыньщ орналаскан жерiн табу.
^осымша бiр интерфейс аркылы баскарылады.
Картамен жумыс iстеу Yшiн алдымен OpenLayers.js кiтапханасына косылуымыз керек. Ол OpenStreetMap картасыныц кызметiмен байланысуга мYмкiндiк бередi.
Кiтапхананы темендегiше косамыз:
< script scr= "./js/Open.Layers.js></script>
Сондай-ак картага 2 баскару элементi косылды:
1) OpenLayers.Control.Navigation сенсорлык экраны бар мобильдi курылгыларда адекватты жумыс iстеуге мYмкiндiк бередц
2) OpenLayers.Control.Zoom тYЙмелердi косуга мYмкiндiк бередi
масштабтау жэне zoomlnId жэне zoomOutId атрибуттары ез функцияларын орындайтын ерiктi блоктарды керсетуге мYмкiндiк береди
Маркерлер картада керсетiлуi Yшiн баска кабат косу керек. OpenLayers.Layer.Markers-ка негурлым функционалды жэне жаксы балама болгандыктан, векторлык кабатты пайдалану туралы шешiм кабылданды. Негiзгi ерекшелiгi - векторлык децгейдщ окигалары Маркерлер кабатыныц окигаларынан ерекшеленедi.
Жаца маркер жасау Yшiн маркер косу, сактау немесе сактаудан бас тарту, сондай-ак картага touchend окигасын косу керек.
Пайдаланушыныц орнын табу Yшiн cordova.js ютапханасын косу керек жэне navigator.geolocation.getCurrentPosition функциясыныц кемегiмен бiз мобильдi курылгыныц орналаскан жерш аламыз.
Багдарлама листингi темендепдей:
function my_position()
{ navigator.geolocation.getCurrentPosition(Get_my_position, geoerror, {maximumAge: 0
timeout: 130000, enableHighAccuracy: false});
}
¥ялы курылгыныц орналасу деректерi сэтп кабылданган жагдайда get_my_position функциясы шакырылады, эйтпесе geo_error функциясы шакырылады.
^осымшаныц сервер белш PHP тiлiнде сипатталган. Бул тш клиенттiк белiктен алынган барлык деректердi ецдеуге жэне оны JSONP пiшiмiнде нэтиженi ж1беруге мYмкiндiк беред^ сонымен катар MySQL дереккорында акпаратты сактауга мYмкiндiк бередi.
Сервердiц функционалды белшнде Yш баскару блогы бар:
1) MySQL деректер корымен жумыс
2) Маркердi сактау
3) ЖYктеу маркерлерi
Connection.php файлында MySQL дереккорын косуга жэне баскаруга арналган непзп параметрлер бар.
Жобаныц функционалдыгы толыгымен тексерiлгеннен кейiн бул колданбаны PhoneGap (Cardova) платформасы аркылы тYрлендiру кажет. Жобаны жасаганнан кейiн cardova ютапханасыныц соцгы нускасын косып, AndroidManifest.xml файлында барлык
ОФ "Международный научно-исследовательский центр "Endless Light in Science"
кажетп атрибуттарды орнату керек. Жобада 6Í3 ендi onCreate эдюш жокка шыгарып, онда непзп болатын HTML бетiн кeрсетуiмiз керек ^здщ жагдайда тек 1 бет index.html бар): @Override
Public void onCreate(Bandle savedInstanceState) {
super.onCreate (savedInstanceState); super.loadUrl("file///android_asset/www/mdexMml");
}
^орытындылай келе, Android операциялык жYЙесiнде жумыс iстейтiн геолокациялык клиент-сервер косымшасын нелден эзiрлеу Yшiн веб-технологияларды калай пайдалану керектiгiне токталдык жэне PhoneGap платформасын колдана отырып мобильды косымша жасау тиiмдiлiгi атап керсетшдь Бул тэсiлдi пайдалана отырып, мобильдi косымшаларды куру ерекшелiктерiн сипаттауга басты назар аударылды
ЦОЛДАНЫЛГАН ЭДЕБИЕТТЕР Т1З1М1
1. Avinash S, Anandkumar P, "To Study and Design a Cross-Platform Mobile Application for Student Information System using PhoneGap Framework", www.ijetae.com (ISSN 2250-2459, ISO 9001:2008 Certified Journal, Volume 3, Issue 9, September 2013).
2. Mahesh Babu, Manoharan, Kumar M.B., "Portability of mobile applications using PhoneGap: A case study", IEEE.
3. Keefe, R.F., Wempe, A.M., Becker, R.M., Zimbelman, E.G., Nagler, E.S., Gilbert, S.L., 2019. Positioning methods and the use of location and activity data in forests. Forests 10. doi: 10.3390/f10050458.
4. Paziewskia, J., Fortunato, M., Mazzoni, A., Odolinskic, R., 2021. An analysis of multi-GNSS observations tracked by recent Android smartphones and smartphone-only relative positioning results, Measurement, https://doi .org/10.1016/j.measurement.2021.109162
5. Warnant, R., Van De Vyvere, L., Warnant, Q., 2018. Positioning with Single and Dual Frequency Smartphones Running Android 7 or Later. In Proceedings of the 31st International Technical Meeting of the Satellite Division of The Institute of Navigation (ION GNSS+ 2018), Miami, FL, USA, 24-28 September 2018; pp. 284-303.
