Mit appInventor ортасы. Пайдаланушы интерфейсі.docx

**Пән: Сервистік бағдарламалар мен жабдықтарды басқару** MIT App Inventor : - **MIT** --- Массачусетс технологиялық институты (Massachusetts Institute of Technology), әлемге танымал ғылыми-зерттеу университеті. - **App** --- \"Application\" сөзінің қысқартылуы, яғни \"қосымша\" де...

**Пән: Сервистік бағдарламалар мен жабдықтарды басқару** MIT App Inventor : - **MIT** --- Массачусетс технологиялық институты (Massachusetts Institute of Technology), әлемге танымал ғылыми-зерттеу университеті. - **App** --- \"Application\" сөзінің қысқартылуы, яғни \"қосымша\" деген мағынаны білдіреді. - **Inventor** --- \"жасаушы\" немесе \"өнертапқыш\" деген мағынада. **MIT AppInventor ортасы. Пайдаланушы интерфейсі.** MITAppInventor (http://ai2.appinventor.mit.edu/) -- жасаған визуалды бағдарламалау ортасы, ол пайдаланушыларға Android және iOS қосымшаларында ешқандай бағдарламалау тәжірибесінсіз жасауға мүмкіндік береді. Бұл құрал жасөспірімдер мен жаңа бастағандар үшін өте қолайлы, себебі интерфейсінде блоктар түрінде кодтау қолданылады, яғни код жазудың орнына, пайдаланушылар дайын блоктарды біріктіреді. Android платформасына арналған қосымшалардың визуалды әзірлеудің таптырмас құралы. MIT AppInventor жұмыс істеу үшін Google немесе GoogleApps аккаунты болу қажет, ал бағдарламаларды құру бағдарламалау кодының блоктарын пайдаланумен визуалды режимде жүзеге асырылады. MIT AppInventor кіргеннен кейін пайдаланушы оның жобалары шығатын парақты көреді. Барлық жасалған жобалар **Менің жобаларым** деген папка ішінде сақталады. **Кеңес:** AppInventor ортасында қайта жасалатын қосымша бұл жаңа жоба (мәзір Жобалар --Жаңа жобаны бастау). «Жобаны жою» батырмасын басу -- жасалған жобаны жояды. Әзірлеу терезесінен жобалар тізіміне көшу «Жобалар /Менің жобаларым» сілтемесі бойынша жүзеге асады. AppInventor мобильді қосымшасын әзірлеу 2 сатыдан тұрады. Бірінші саты - «Бұл қандай түрде болады» пайдаланушы интерфейсін жобалау, екіншісі - «Олар қалай жұмыс істейтін болады» қосымшасының бағдарламалау компоненті. *1.1* *сурет. AppInventor* *құрастырушысы* AppInventor құрастырушысы-- қосымшаның интерфейсі («сырт келбеті») жасалатын режим. Бұл режимді қосымшаның әр түрлі компоненттерін таңдау мен орналастыру үшін қолданады: қосымшаны іске қосқан кезде сіздің құрылғыңыздың экранында бейнеленетін батырмалар, мәтіндік жолақтар, суреттер және т.б. Жобаның дизайнын әзірлеуге арналған интерфейс келесідей негізгі элементтерден тұрады: **Палитра** болашақтағы қосымшаның компоненттерінің жинақтарынан (топтарынан) тұрады. **Компоненттер** деген батырма - суреттер, мәтін, мәтін жазуға арналған алаңдар, күндер осы батырмада жинақталған. Сіздің Android - құрылғыңыздың әр түрлі датчиктеріне қосылуға арналған интерфейстер секілді қосымшаның функционалды элементтерін атайтын болсақ: акселерометр, GPS, дерекқор және т.б. Кейбір компоненттер графикалық дизайнның бөлшектері болып табылады. Мысалы: батырмалар, ал кейбіреулері құрылғының экранынан көрінбейді, мысалы, таймер, сенсорлар немесе видеоплейер. **Қарау** -- сіздің қосымшаңыздың экраны. Нақтырақ айтсақ, экрандардың бірі. Қосымшада әр түрлі істер бір мезгілде атқарыла беретін бірнеше экран қолдануға болады. Мысалы, бірінші экранда сізде қосымшаға нұсқаулық, ал екіншісінде, яғни, қосымша-- оның функционалды бөлігі. **Компоненттер** -- мұнда сіз өз жобаңызда пайдаланып жүрген компоененттер тізімі орналасқан. **Кеңес:** *Компоненттерге атаулар берген кезде келесі ережені ұстану керек*  *«Компонент* *аты»=«Компонент* *атауы» +* *ол қосымшада атқаратын* *«Әрекет* */Функция»:* *Артқа батырмасы,* *Ары қарай батырмасы,* *Сурет Фон және т.б.* *Компоненттерге осылайша атау беру олардың әрекеттері немесе оқиғалары үшін бағдарламалау кезінде тез бағыт табуға көмектеседі.* **Қасиеттер** -- экранның осы бөлігінде сіздің қосымшаңыздың компоненттерінің қасиеттері орнатылады, мысалы: түсі, қаріп өлшемі, суреттер мен дыбыстар көздері, жазбалар, бастапқы мағынасы және т.б.. **Медиа** -- пайдаланылатын медиафайлдар тізімі (суреттер, видео-, аудио-роликтер және т.б.) **Кеңес:** *Мобильді қосымша* *--* *бұл оған фильмдер немесе аудио жазбалардың үлкен жинақтары енгізілгендегі жағдай емес.* *Қосымшаға үлкен графикалық және дыбыстық файлдарды кіріктіруге құштарлық ол ұзақ уақыт бойы жүктелетіндігіне ғана емес, сонымен қатар мобильді құрылғының жадынан көп орын алады.* **Қосымшалардың экрандары** Қосымшаның жобасы бірнеше экраннан тұруы мүмкін. «Screen» экранымен жұмыс істеу үшін әзірлемелер терезесінде экранды қосу батырмалары бар-- «Экран қосу» және экранды жою-- «Экранды жою». Қосымшаны іске қосу әрдайым бастапқы экраннан басталады, оның дизайны басқа экрандарға көшу үшін компоненттер жинағынан тұруы мүмкін. **Кеңес:** *MIT AppInventor* *ортасында* *экрандар саны* *10* *аспауы керек. 11 экран* *жасалған кезде жол берілетін экрандар санынан асып кеткендігі туралы ескерту шығады.*  *1.2-сурет. AppInventor* *блоктарының редакторы* Блоктар редакторы сіз таңдаған компоненттер пайдаланушының әртүрлі әрекеттеріне қалай реакция беретіні көрінетін сіздің құрылғыңыз бен оның компоненттерін бағдарламалау үшін пайдаланылады. «Блоктар» режимінде блоктардың үш тобы пайдаланылады: 1. Қосымшаларды жасаған кезде пайдаланылатын Блоктардың негізгі топтары: 1. **Кіріктірілген блоктар** 1. **Сіздің қосымшаңыздың компоненттеріне арналған әрекеттер/оқиғалар блоктары** **(Screen 1** **тобы)**. Нақты қосымша компоненттерінің әрекеттерін тапсырады. Қажетті компонентті бөліп ерекшелеген кезде, оған қол жетімді блоктар бейнеленеді (1.3-сур). *1.3-сурет.* *Сіздің қосымшаңыздың* *компоненттеріне арналған блоктар* Блоктардан тұратын құрылымдар **Қарау** жолында жиналады. **2-сабақ** **AppInventor-дағы блок түрлері** AppInventor-да бағдарламалау үдерісі Scratch-қа ұқсас. Блоктарды бір-бірімен қосу үшін дөңестер (кілт, шығыс) мен ойықтар (құлып, кіріс) қолданылады.  *2.1-сурет.* *Блок қосылатын жерлер* **Блоктарды** **көлденеңінен қосу** Блоктың оң және сол жағындағы кірістер мен шығыстар оларды дерек алмасу мақсатында қосу үшін қолданылады. Блоктағы кірістердің санына қарап оның неше параметр қабылдай алатынын (қосылатын блок санын) көре аламыз, ал шығыс саны оның басқа блокқа неше параметр бере алатынын көрсетеді. 2.2-суреттегі ортадағы блок екі параметр қабылдап, бір параметр береді. *2.2-сурет.* *Блоктар арасында дерек жіберу* Егер блоктың сол жақ жоғарғы бұрышында тегершік (шестеренка) белгісі тұрса (2-суреттегі ортадағы блок), кіріс параметрлер санын өзгертуге болады дегенді білдіреді. Белгіні басып панельді ашып, онда опция блоктарын нысаналы блокқа көшіруге немесе одан шығаруға болады. Көлденең кірістер мен шығыстардың болу/болмауына қарай блоктарды мынадай түрлерге ажыратады: 1. **Бітеу** (кірісі де, шығысы да жоқ); 2. **Тек оқуға арналған** (тек шығысы бар) -- ондағы деректерді тек оқуға болатын блок; 3. **Тек жазуға арналған** (тек кірісі бар) -- деректерді жазуға ғана болатын блок; 4. **Оқу мен жазуға арналған** (кірісі де, шығысы да бар) -- деректерді оқуға және жазуға болады. Бұл блоктардың кейбіреулері адаптерлер немесе түрлендіргіш бола алады. Олар деректі қабылдап, олармен белгілі бір әрекет жасап, сосын әрі қарай жібереді.  *2.3-сурет.* *Деректермен жұмыс істеу мүмкіндіктеріне қарай блок түрлері* Кей кездері болмаса, блоктар арасындағы деректер алмасу көбіне оңнан солға қарай жүзеге асады: сол жақтағы блок оған сол жақтан келіп қосылатын блоктар деректерді қабылдайды. Суретте екі параметрді қабылдайтын **additemstolist** блогы көрсетілген-- **list** (тізім) және **item** (опция). Бұл блок опция мәтінін қабылдап алады және оны тізімге қосады. Шығысты, оған тізімді біріктіру үшін қосқан ақылға қонымдырақ болар еді, алайда ол жоқ, сол себепті мұндай блоктар жұмысын келесідей қабылдаған жөн: олар шығыс деректерін алады, ал деректер алмасу бойынша әрекеттер солардың ішінде жүзеге асады. Блоктарды дұрыстар жалғастыру үшін блок күтетін параметр түрінің оған берілетін параметр түрімен (аргумент) сәйкес келуі қажет. Егер блок санды алуды күтетін болса, ал оған жолды қайтаратын блокты жалғаса, онда қосылыс жүзеге аспайды. Бір жағдайларда түрлердің түрленуі автоматты түрде жүргізіледі, ал басқа жағдайларда оны нақты блок-адаптер көмегімен орындау керек. Мысалы, түрдің автоматты түрленуі тізім блогына **index** кірісіне қарай саннан басталатын мәтіннің блогын қосу кезінде жүзеге асырылады. Осының арқасында, мысалы, бір сөзбен бөлгішті пайдаланбай --ақ бірден екі параметрді беруге болады, мысалы, осылай:12Бұл жол Мұндай жазба 12 индексімен тізім элементіне «Бұл жол» мәтінін беру қажеттігін нұсқауы мүмкін. Мәтінді индекстен бөлу үшін сан болып табылмайтын жолдың басынан белгі нөмірін табу керек, ал содан кейін осы позициядан жол соңына дейін жолды таңдау қажет. Компонент блогын тікелей пайда болатын хабарламаның суреті блогына қосу мүмкін емес, себебі біріншісі объектіні қайтарады, ал екіншісі жолды қабылдайды. Яғни, объектіні жолдық түрге келтіру қажет. Бұл үшін компонент блогы хабарламаға объектінің жолдық көрінісін беретін тізім жасау блогымен қосылады (2.4-сур.). *2.4-сур.* *"Объект"* *түрінің* *"жол"* *түріне түрленуі* Бұл жағдайда тізім блогы тізім жасау үшін емес, түрді түрлендіргіш ретінде қолданылады. **Блоктарды** **тігінен қосу** Блоктың асты мен үстінде орналасқан кірістер мен шығыстар блоктардың бірінен кейін бірі жүру тәртібін, тиісінше олардың орындалу тәртібін белгілеу үшін қолданылады. Олар жоғарыдан төмен қарай орындалады: алдымен ең үстіңгі блок, содан кейін оның астындағы орындалады, осы ретпен жалғаса береді. Асты-үстінде орналасқан шығыстар мен кірістердің болу-болмауына қарай блоктардың мынадай түрлері ажыратылады: 1. **Оқшау** (кірісі де, шығысы да жоқ) -- жеке өзі қолданылады; 2. **Бастапқы** (тек шығысы бар) -- тізбекті бастайды; 3. **Аралық** (кірісі де, шығысы да бар) -- тізбектің кез келген жерінде қолданылады; 4. **Соңғы** (тек кірісі бар) -- тізбекті аяқтайды.  *4.5-сурет.* *Тізбекте қолдану мүмкіндігіне қарай блок түрлері* Ішінде басқа да блоктар болатын блок контейнер деп аталады. Сонымен, блоктарды көлденеңінен қосу әдісі олардың арасында дерек алмасу үшін, ал тігінен қосу әдісі осы деректермен орындалатын әрекеттердің ретін белгілеу үшін қолданылады, мысалы: 1. ауыспалыны белгілеу және оны іске қосу; 2. оның мәнін басқа мәнмен салыстыру; 3. ауыспалының мәнін ол бойынша тізімнің элементін алуға арналған индекс ретінде қолдану; 4. диалогте тізімнен таңдап алынған элементті көрсету. AppInventor-дағы барлық блоктар компоненттер блогы және біртұтас (built-in) блок болып бөлінеді. Компоненттер блогы экранда көрінетін компоненттердің (виджеттердің) оқиғаларымен және қасиеттерімен -- батырмалармен, мәтін өрістерімен, жалаушалармен, тізімдермен және т.б., сонымен қатар көрінбейтін компоненттермен -- сенсорлармен, деректер қоймасымен, медиа компоненттермен де жұмыс істеуге арналған. Біртұтас блоктар қосымшаның ішкі ретін (логикасын) құру үшін, әртүрлі мәндерді телу операцияларын орындау, басқару, салыстыру, түрлендіру және т.б. үшін пайдаланылады. AppInventor-да блоктар топтарға бөлінген, олардың әрқайсысының өз түсі бар. Бұл ол блок жұмыс істейтін деректердің түрін және оның әрекеттерінің сипатын анықтауға мүмкіндік береді, мысалы, қызыл түсті блоктар мәтінмен жұмыс істесе, күлгін блоктар рәсімдерге немесе хабарламаны шығаруға қатысты үдерістерге жауап береді. Блоктың нақты қандай әрекет атқаратынын ондағы жазуға қарап білуге болады. **«Блоктар» режімінің функциялары** «Блоктар» режімінде жұмыс істегенде көбіне төмендегі функциялар қолданылады: 1. **Блокты түру/жазу** «Блокты түру» функциясы бағдарламалық кодтары көп қосымша жасаған кезде экрандағы орынды оңтайландыру үшін қолданылады. «Блокты түру» функциясы орындалғанда, блоктардың конструкциясы төмендегідей түрде болады:  Блокты жазу үшін конструкцияны тіртуірдің оң жақ батырмасымен нұқып, «**Блокты жазу**» мәзірін таңдау қажет. Басқа да функциялар: 1. **Комментарий қосу**. Кез келген бағдарлама жазған кезде блоктарға комментарий жазу өте пайдалы. Осы конструкцияға телінген әрекеттер мен оқиғаларға түсініктеме беру үшін комментарий қалдыруға болады. 2. **Блокты сөндіру/ қосу**. Бағдарламаны тексерген кезде белгілі бір блок дұрыс қолданылғанына күмәнданған жағдайда оны жоймас үшін осы функция қолданылады. Блокты себетке тастамас бұрын, оны уақытша сөндіріп қоюға болады. 3. **Блокты жою**. 4. **Орындау**. Бұл функция кодтың кез келген бөлігін іске қосуға мүмкіндік береді. Бағдарламаны тексерген кезде қолданылады. Бұл функцияны қосқан жағдайда эмуляторға қосулы болу керек. 5. **Блоктарды көшірмелеу**. Блоктарды көшірмелеу үшін қалқымалы мәзірді қолдануға болады. Ол үшін блоктың тиісті конструкциясына тінтуірдің оң жақ батырмасымен нұқып, «Көшірме жасау» функциясын таңдау қажет. 6. **Барлық блоктарды немесе біреуін рюкзакқа салу** (көшірмелеу). **3-сабақ** **Қосымшаны құрылғыға жүктеу және орнату** Қосымша MIT AppInventor бұлт ортасында әзірленеді. Тестілеу мен ретке келтіру мобильді құрылғыда жүзеге асады. Әзірлеу үшін жеке компьютер немесе ноутбук пайдалану ұсынылады, ал ретке келтіру мен тестілеу үшін -- оны сіздің құрылғыңызға орнату үшін өзіңіз жасаған мобильді қосымшаның QR кодын оқуға мүмкіндік беретін алдын ала орнатылған **MIT AppInventor** **Companion** қосымшасы бар мобильді құрылғы қажет . Қосымшаны құрылғыға жүктеу тәсілдері: 1. **Шығыс кодта** **(кеңейтімі** **.aia** **болатын файл)**.aia форматындағы шығыс код қосымшаны редакциялауға мүмкіндік береді. Шығыс код жобаның парағынан мәзір Жобалар / таңдалған жобаларды (.aia) Менің компьютеріме экспорттау арқылы генерацияланады. 1. **Орындалатын файл түрінде** **(кеңейтімі** **.apk** **болатын файл)**.apk қосымшасының файлы AppInventor-ға Құру -- Қосымша (.apk компьютерге сақтау) мәзірі арқылы генерацияланады..apk файлы құрылғыда жұмыс істейтін орындалатын қосымша болып табылады. 1. **Қосымшаның** **QR-коды түрінде** Мәзір Құру-- Қосымшалар пәрменінің көмегімен генерацияланады (.apk жүктеу үшін QR код жасау). QR кодын оқу және қосымшаны мобильді құрылғыға орнату үшін GooglePlay-дан мобильді құрылғыға **MIT AI2 CompanionApp** қосымшасын орнату қажет. Сіздің қосымшаларыңызды.apk мобильді құрылғыға орнату кезінде **белгісіз дереккөздерден қосымшаларды орнатуға рұқсат беру** қажет (Бапталым-- Қосымшалар-- Белгісіз дереккөздер) **Егер** **Android** **ОЖ және** **Wi-Fi** **қосылған мобильді құрылғыңыз болса:** 1. Мобильді құрылғыда GooglePlay дүкенінен MIT AI2 CompanionApp қосымшасын жүктеп, орнату қажет; 2. Сіз жұмыс істейтін компьютер және мобильді құрылғыны ғаламторға қол жетімділігі бар желіге қосу керек, мысалы, Wi-Fi арқылы; 3. Компьютерде тестілеу керек болған жобаны ашып, мәзірден **Көмекші--AI** **Көмекшісі** дегенді таңдау қажет**.** 1. Компьютер экранында сіздің қосымшаңыздың QR коды пайда болады 1. Мобильді құрылғыда MIT AI2 Companion іске қосып, Scan QR code басу қажет. Бірнеше секундтардан кейін қосымша сіздің құрылғыңызда пайда болады. **Егер де** **Android** **ОЖ бар құрылғы болмаса ше?** 1. **AppInventorSetupSoftware** арнайы бағдарламалық жасақтаманы жүктеп, орнату керек; 2. **aiStarter** жүктеу керек**.** Егер келесідей түрдегі терезе бейнеленсе**,** aiStarter дұрыс іске қосылатын болады: 1. MIT AppInventor жобаның терезесіне көшіп, **Қосылу-- Эмулятор** мәзірін таңдау қажет. **Егер сіз** **USB** **кәбілін пайдаланатын болсаңыз** 1. Құрылғыны USB пайдалану үшін дайындау (USB бойынша ретке келтіргішті қосу). Android құрылғысында мәзір **Жүйе бапталымы** **--** **Әзірлеушілер үшін**, және мәзірдің **USB** **Ретке келтіру** тармағын қосу керек**.** Көптеген Android 3.2 немесе одан жоғары жұмыс істейтін құрылдғыларда **Бапталым** **--** **Қосымшалар--Әзірлеме** опцияларын таңдау керек . Android 4.0 және одан жаңаларында бұл **Бапталым** **--** **Әзірлеушілерге арналған функциялар** болып табылады. Android 4.2 және одан жоғарыларында, үнсіздік бойынша әзірлеушілерге арналған Функция жасырын тұрады. Бұл функцияны қосу үшін, мәзірде **Бапталым** **--** **Телефон** **жайлы** өтіңіз және жинақтау нөмірін жеті рет басыңыз. Ары қарай **Әзірлеушілерге арналған** мәзірін табу үшін алдыңғы экранға қайта оралу қажет, соның ішінде «USB Debugging». 2. Мобильді құрылғыны компьютерге қосу. Android құрылғыны USB кәбілінің көмегімен компьютерге қосып, құрылғының «медиа құрылғы» емес, «есте сақтау құрылғысы» ретінде қосылатынына көз жеткізу қажет. Android 4.2.2 және одан жоғарыларында, мобильді құрылғыны компьютерге алғаш қосқан кезде «USB-ретке келтіруіне рұқсат беру» хабарламасы бар экран пайда болады, оны компьютерге қосу үшін «ОК» батырмасын басыңыз. 3. Қосылысты тексеріңіз. Сіздің компьютер мобильді құрылғыға қосылып тұрғанына көз жеткізу керек. 4. Сіздің компьютеріңізде сақталатын .APK файлды мобильді құрылғыдағы папкаға көшіріп алу. **.apk файлын мобильді құрылғыға жүктеу** Орнатуға арналған жүктелген қосымшаның .apk файлы Download каталогында мобильді құрылғыда сақталады. Оған «файлдық менеджер» қосымшасының көмегімен қол жеткізуге болады. Бір қосымшаның әр түрлі OS Andriod нұсқалары үшін әр түрлі нұсқаларда қайта жазыла алады. Жаңа қосымша ескісінің орнына жазыла алады, немесе модификацияланған атаумен жаңа нұсқа түрінде Download каталогында жүйелі түрде қосымшаның ескі нұсқаларын жойып тұру ұсынылады. **Қосымша** **компоненттері**  *3.1-сур. Қосымша компоненттерінің тізбесі* Қосымша компоненттері «Дизайн» режиміне орналастырылған. Барлық компоненттер бірнеше топқа бөлінген. 1. **Пайдаланушы интерфейсіне** батырма, мәтін, жалауша, жазба мен қосымшаға пайдаланушымен өзара әрекет етуге мүмкіндік беретін басқа компоненттер кіреді. 2. **Орналасу** -- экранды макеттеу үшін жауап беретін компоненттер, олар пайдаланушының интерфейс компоненттерін көлденеңінен, тігінен немесе кесте ұяшықтарына орналастыруға мүмкіндік береді. MIT AppInventor ортасында белгілі бір компоненттер арасында интервалдар беруге мүмкіндік беретін форматтау жоқ, сондықтан макет пен тапсырма арақашықтығы және кеңістік үшін элементтер арасында белгілі бір берілген қасиеттері бар топ компоненттерін, мысалы, биіктігін немесе енін орналастыру тобының компоненттері пайдаланылады. 3. **Медиа** -- қосымшада әртүрлі медиақұралдарды: құрылғыны, микрофондарды, құлаққаптарды, камераны, дыбыстар мен аудифайлдарды және басқаларды іске қосуға мүмкіндік беретін компоненттер. 4. **Сурет салу және анимация** -- қосымшада сурет салуға және анимациялар жасауға мүмкіндік беретін компоненттер тобы. 5. **Қойма** -- қосымша ішінде мәндер беруге және қосымшаның қандай да болмасын деректерін сыртқы құрылғыда сақтауға мүмкіндік беретін компоненттер. 6. **Сенсорлар** -- қосымшада әртүрлі сенсорлар мен мобильді құрылғы қадағаларынан алынған деректерді пайдалануға мүмкіндік беретін көрінбейтін компоненттер тобы. 7. **Қарым-қатынас** -- әлеуметтік желілермен байланысты қамтамасыз ететін компоненттер. Ақпарат бөісуге, құрылғы байланыстарына қолжетімдік алуға және т.с.с. мүмкіндік беретіндер. 8. **Арналар** -- қосымшадан қандай да болмасын сыртқы әрекетті: мобильді құрылғыдағы басқа қосымшаны, камераны іске қосуға, интернет желісінде іздеуге немесе веб-парақ ашуға мүмкіндік беретін компоненттер. 9. **LEGO MINDSTORMS** -- Bluetooth LEGO MINDSTORMS NXT мен EV3 басқаруды қамтамасыз ететін компоненттер. **Экран рұқсаты** MIT AppInventor ортасында жұмыс істеу барысында экранның штаттық рұқсаты 320х480 пиксель. Онымен қосымша құру әрбір компоненттің қалыбы мен мөлшерін экран рұқсатымен байланыстыруды талап етеді. Әртүрлі мобильді құрылғылардың экран рұқсаттары әртүрлі. Смартфон мен жеті дюймдік планшеттегі қосымшалар түрі әртүрлі, және планшетте барлық компоненттер 1,5 есеге ірі болуы мүмкін. Әртүрлі экрандар үшін қосымшалар әзірлеу барысында кейбір компонеттердің қасиеттерін берудің ең үздік тәсілі экран мөлшерінің пайыздарында болып табылады.