Создание приложения Imgur с помощью NativeScript

 var topmost = frame.topmost(); 

Создайте переменные для хранения данных фотографии из Imgur api, текущей страницы и фотографий, отображаемых в данный момент.

 var unfiltered_photos = []; //photo data from imgur api var page; //the current page var photos = []; //the photos that are currently displayed 

Далее функция pageLoaded .

 function pageLoaded(args){ page = args.object; var topic_id = page.navigationContext.id; //get the ID that was passed by the main page. var spinner = page.getViewById('spinner'); spinner.busy = true; //fetch the photo data from the imgur api based on the selected topic api.get('https://api.imgur.com/3/topics/' + topic_id + '/viral/1').then(function(json){ unfiltered_photos = json.data; photos = getPhotos(unfiltered_photos); page.bindingContext = { photos: photos } spinner.busy = false; }); } 

Опять же, ничего нового здесь, кроме получения идентификатора, переданного главной страницей:

 var topic_id = page.navigationContext.id; 

id используется в качестве части URL-адреса для выполнения запроса. Внутри функции присвойте ответ, содержащий массив данных фотографии, на unfiltered_photos . Затем передайте это функции getPhotos , основной целью которой является фильтрация фотографий. Вы увидите, как это работает более подробно позже. Наконец, свяжите это с текущей страницей.

 api.get('https://api.imgur.com/3/topics/' + topic_id + '/viral/1').then(function(json){ unfiltered_photos = json.data; photos = getPhotos(unfiltered_photos); page.bindingContext = { photos: photos } spinner.busy = false; }); 

Функция backToTopics используется для возврата на предыдущую страницу (главную страницу).

 function backToTopics(){ topmost.goBack(); } 

pickRandomItems вызывается каждый раз, когда пользователь нажимает кнопку выбора случайных элементов из данных текущей фотографии. Он вызывает функцию getPhotos чтобы получить случайные данные фотографии, выбранные из текущего набора результатов, и устанавливает их на текущей странице.

 function pickRandomItems(){ photos = getPhotos(unfiltered_photos); page.bindingContext = { photos: photos } } 

Функция getPhotos принимает необработанные данные о фотографии, полученные из Imgur API, а затем отклоняет все элементы с типом «альбома». Если вы заходили на веб-сайт Imgur раньше, вы могли видеть, что есть коллекция фотографий, называемая альбомами. Вам нужны только отдельные фотографии, поэтому исключите те, которые используют функцию reject в lodash. Затем выберите случайное число, используемое в качестве начального индекса для выбора предметов для показа.

 function getPhotos(unfiltered_photos){ //the number of photos to show in the list at a time var photos_to_show = 5; //reject all albums var filtered_photos = _.reject(unfiltered_photos, function(photo){ return photo.is_album; }); //pick random number var random = _.random(0, filtered_photos.length - photos_to_show - 1); //use the random number as a starting index for extracting the items to show var photos = _.slice(filtered_photos, random, random + photos_to_show); return photos; } 

Функция viewImage переходит на страницу, которая показывает фотографию, выбранную пользователем. NativeScript не поддерживает отображение анимированных (gif) изображений с использованием компонента Image . На Github есть открытый вопрос об этом ограничении. Если вы читаете эту статью позже, она может быть решена. На данный момент текущим решением является использование веб-представления, которое будет отображать изображение.

Перейдите на страницу, которая использует веб-представление, только передав URL-адрес изображения на следующую страницу.

 function viewImage(args){ var link = photos[args.index].link; topmost.navigate({ moduleName: 'views/image/image', context: { url: link } }); } 

Выставляем все функции:

 exports.pageLoaded = pageLoaded; exports.backToTopics = backToTopics; exports.pickRandomItems = pickRandomItems; exports.viewImage = viewImage; 

Таблица стилей темы

Ранее вы задали класс photo для компонента Image и этот стиль устанавливает ширину и высоту фотографии. Это пункты назначения, о которых я упоминал ранее. Вам необходимо указать размеры, потому что это разрушит макет, если он не указан.

 .photo-container { padding: 20; } .photo { width: 250; height: 250; } 

Страница изображения

Страница изображения отображает изображение в веб-представлении, и вы уже должны знать детали ( подсказка : проверьте предыдущие две страницы приложения). Разница лишь в том, что вам не нужно создавать файл image.css, так как эта страница не нуждается в стилизации.

XML страницы изображения

Добавьте следующее в файл image.xml :

 <Page loaded="pageLoaded"> <Page.actionBar> <ActionBar title="imgurclone"> <NavigationButton text="Back" android.systemIcon="ic_menu_back" tap="backToTopic"/> </ActionBar> </Page.actionBar> <StackLayout> <WebView src="{{ imageUrl }}" /> </StackLayout> </Page> 

Взломать код Включите заголовок, содержащий кнопку, которая позволяет пользователю вернуться на страницу темы.

 <Page.actionBar> <ActionBar title="imgurclone"> <NavigationButton text="Back" android.systemIcon="ic_menu_back" tap="backToTopic"/> </ActionBar> </Page.actionBar> 

Затем добавьте компонент WebView и укажите src в качестве URL- WebView изображения.

 <StackLayout> <WebView src="{{ imageUrl }}" /> </StackLayout> 

Страница изображения JavaScript

Файл JavaScript для страницы изображения содержит код для получения URL-адреса изображения и возврата на страницу темы.

 var frame = require('ui/frame'); var topmost = frame.topmost(); function pageLoaded(args){ //get image url passed from the previous page var page = args.object; var url = page.navigationContext.url; page.bindingContext = { imageUrl: url } } //go back to the topic page function backToTopic(){ topmost.goBack(); } //expose the functions exports.pageLoaded = pageLoaded; exports.backToTopic = backToTopic; 

API

Создайте lib / api.js , который является пользовательской библиотекой для отправки запросов к Imgur API. Это использует функцию fetch встроенную в NativeScript. Он принимает URL-адрес, по которому вы хотите сделать запрос, в качестве первого аргумента и объект, содержащий параметры для передачи в запрос, в качестве второго. Такие параметры, как заголовок, тело запроса и метод запроса. Для запроса Imgur API не требуется создавать приложение на Imgur, я показываю его в демонстрационных целях.

Метод fetch возвращает обещание, поэтому включите метод then и передайте функцию, которая вызовет метод json в ответе для получения объекта JavaScript. Это снова возвращает обещание, поэтому подключите другой метод then для сбора данных ответа.

Примечание . Результатом метода fetch является обещание, и поэтому вызов api.get ранее соединяется с другим методом then для получения фактических данных.

 exports.get = function(url){ return fetch( url, { 'headers': {'Authorization': 'Client-ID xxxxxxxxxxx'} } ).then(function(response){ return response.json(); }).then(function(json){ return json; }); } 

Запуск проекта

Чтобы запустить приложение на устройстве, используйте команду tns run за которой следует имя платформы:

 tns run android 

Если вы хотите проверить изменения, вы можете использовать команду tns livesync . Это обновляет приложение в устройстве каждый раз, когда вы нажимаете сохранить.

 tns livesync android --watch 

Вывод

Это оно! Из этого урока вы узнали, как работать с NativeScript, создавая приложение, которое взаимодействует с imgur API для получения фотоданных. Вы использовали такие компоненты, как изображение и веб-просмотр, а также способ запуска приложения на устройстве.