Как построить диаграмму в реальном времени в iOS

1656634226 kak postroit diagrammu v realnom vremeni v ios

автор Нео Игадаро

7COpiP6K1nGgVQicCmI0dFfh-7VUNlBGW7Jj
Фотография Андре Санано на Unsplash

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

В этой статье мы рассмотрим, как создать простую диаграмму в реальном времени в iOS. Диаграмма будет получать данные и обновляться в режиме реального времени на экранах всех, кто сейчас вошел в программу. Мы предполагаем, что это диаграмма, которая отслеживает количество посетителей, использующих веб-сайт. Давайте начнем.

Для контекста вот образец того, что мы будем строить:

paeVVTUrY7xK9gLwZL2xmcLbJhjbIcSpm8dw

Пожалуйста, обратите внимание: чтобы придерживаться этого учебника необходимо иметь базовое понимание Swift и Node.js.

Требования к построению диаграммы реального времени в iOS

Прежде чем мы начнем этот учебник, вы должны иметь следующие требования:

  • MacBook Pro.
  • Xcode установлен на вашем автомобиле.
  • Базовые знания Swift и использование Xcode.
  • Базовые знания JavaScript (Node.js).
  • Node.js и NPM установлены на вашей машине.
  • какапоноги **установлен на вашей машине.
  • Приложение Pusher

Когда вы получите все требования, мы можем приступить.

Подготовка к созданию нашей программы для диаграмм в реальном времени в Xcode

Запустите Xcode на Mac и создайте новый проект (назовите его как угодно). Следуйте инструкциям мастера новой программы и создайте новую Одностраничное приложение. После создания проекта закройте Xcode и запустите программу терминала.

В терминале, cd в корневый каталог программы. Затем запустите команду pod init. Это создаст a Podfile. Обновите содержимое Podfile в содержимое ниже (замените PROJECT_NAME с названием вашего проекта):

platform :ios, '9.0'target 'PROJECT_NAME' do  use_frameworks!    pod 'Charts', '~> 3.0.2'  pod 'PusherSwift', '~> 4.1.0'  pod 'Alamofire', '~> 4.4.0'end

Сохраните файл Podfile, затем перейдите к терминалу и выполните команду: pod install.

Выполнение этой команды установит все пакеты сторонних разработчиков, которые нужны для создания нашей программы диаграмм iOS в реальном времени.

Первый пакет, который он установит – Charts, пакет для создания красивых диаграмм на iOS. Второй пакет – Pusher swift SDK. Последний пакет – Alamofire, пакет для выполнения HTTP-запросов на iOS.

После завершения установки откройте **.xcworkspace** файл в корневом каталоге проекта. Это должно запустить Xcode. Теперь мы готовы приступить к созданию программы для iOS.

Создание наших представлений диаграмм в реальном времени в Xcode

Для начала мы создадим необходимые представления, необходимые для нашей программы для диаграмм в реальном времени. Откройте Главная. файл, и давайте начнем проектировать наше представление.

Сначала создайте прямоугольный вид от края к краю в верхней части контроллера просмотра на раскадровке. В этом представлении добавьте кнопку и название «Имитировать посещение». Далее создайте другое представление, которое также прямоугольник, охватывающий от конца первого представления выше к нижней части экрана. В этом представлении мы будем воспроизводить диаграмму в реальном времени.

Когда вы закончите создавать представление, у вас должно получиться что-то вроде того, что показано на рисунке ниже.

huuI0xR6kxUoSTaWfQCKN4NddLbtIkv8G5C6

В текущем состоянии просмотры ничего не делают. Давайте подключим некоторые функции к программе просмотра диаграмм iOS.

Добавляем базовую функциональность в нашу программу диаграмм iOS

Как было сказано ранее, просмотры и кнопки нашей программы не связаны с нашими ViewController давайте же это исправим.

В Xcode, когда раскадровка все еще открыта, нажмите кнопку «Показать вспомогательный редактор» в правом верхнем углу страницы, чтобы разделить просмотр на раскадровку и код. Теперь один раз нажмите кнопку, которую вы создали, и удерживайте ее ctrl, нажмите и перетащите ссылку на редактор кода. Затем создайте @IBaction как показано на изображениях ниже:

qREVxZDqIVLbvbXVMEVNpFnVfrWtMGNBRoKz
-xNvKpDLIWBBQnEvmE4gWWFzOiCy0Raw9eAJ

Когда ссылка будет создана, вы увидите что-то вроде редактора кода:

@IBAction func simulateButtonPressed(_ sender: Any) {}

Прекрасно! Теперь, когда вы создали первую ссылку, нам нужно создать еще одну ссылку на диаграмму.

В раскадровке щелкните представление и на вкладке «Проверка идентичности» убедитесь, что представление подключено к LineChartView как показано ниже.

8cXCATmAKj7FvkFjOAeRvzBh0qxhjU76cNuN

Теперь, когда представление подключено к классу представления, повторите то, что мы делали раньше, чтобы связать кнопку. Только на этот раз вместо создания @IBAction мы создадим @IBOutlet. Изображения показаны ниже:

ryie0CqwHghtuz3m68Rp-3NFRbwWeumv4-kT
AEUIIpDFJsNUkZQG7aOZ4FPZmj8fMuziPfHZ

Когда ссылка будет создана, вы увидите что-то вроде редактора кода:

@IBOutlet weak var chartView: LineChartView!

Наконец, в верхней части ViewController , импортируйте пакет Charts. Вы можете добавить код ниже прямо под import UIKit в ViewController.

import Charts

Теперь, когда мы связали оба элемента с нашим кодом, каждый раз, когда Имитация визитов нажата кнопку, simulateButtonPressed будет вызвана функция.

Добавление функциональных возможностей в режиме реального времени в наше приложение для диаграмм iOS

Последней частью головоломки будет отображение диаграммы и ее обновление в реальном времени на всех просматривающих диаграмму устройствах.

Чтобы добиться этого, мы сделаем следующее:

  • Создайте функцию, которая обновляет нашу диаграмму в зависимости от чисел.
  • Сделайте нашу кнопку запроса вызовом серверной части, которая, в свою очередь, будет отправлять смоделированные данные в Pusher.
  • Создайте функцию, которая прослушивает события от Pusher и, когда их получает, запускает функцию диаграммы обновления, которую мы создали раньше.

Создайте функцию триггера, чтобы обновить нашу диаграмму

Давайте создадим функцию, которая обновляет нашу диаграмму в зависимости от приведенных ей чисел. Откройте ViewController, и в нем объявить право собственности класса в соответствии с объявлением класса. Мы будем использовать это свойство для отслеживания посетителей:

var visitors: [Double] = []

Далее мы добавим функцию, которая будет выполнять фактическое обновление до просмотра диаграммы:

private func updateChart() {    var chartEntry = [ChartDataEntry]()
    for i in 0..<visitors.count {        let value = ChartDataEntry(x: Double(i), y: visitors[i])        chartEntry.append(value)    }        let line = LineChartDataSet(values: chartEntry, label: "Visitor")    line.colors = [UIColor.green]
    let data = LineChartData()    data.addDataSet(line)
    chartView.data = data    chartView.chartDescription?.text = "Visitors Count"}

В коде выше мы объявляем chartEntry где мы будем хранить все данные нашей диаграммы. Затем перебираем доступные visitors и для каждого из них мы добавляем новый ChartDataEntry(x: Double(i), y: visitors[i]) что указывает на диаграмме положения X и Y.

Мы устанавливаем цвет, в котором отображается линейная диаграмма. Мы создаем LineChartData и добавьте line содержащий наши точки данных. Наконец-то мы добавляем данные к chartView и установите описание просмотра диаграммы.

Сделайте нашу имитационную кнопку вызова конечной точки

Следующее, что нам нужно сделать, это заставить нашу кнопку запроса запускать бэкенд, который, в свою очередь, будет посылать смоделированные данные в Pusher.

Для этого нам нужно еще раз обновить просмотр контроллера. В ViewController импортируйте пакет Alamofire прямо под пакет Charts:

import Alamofire

Теперь замените simulateButtonPressed функцию с кодом ниже:

@IBAction func simulateButtonPressed(_ sender: Any) {    Alamofire.request(" method: .post).validate().responseJSON { (response) in        switch response.result {        case .success(_):           _ = "Successful"        case .failure(let error):           print(error)        }    }}

В следующем коде мы используем Alamofire для отправки запроса POST, на который есть локальный веб-сервер (вскоре мы создадим этот сервер). В реальной программе это обычно указывает реальный веб-сервер.

Эта конечная точка не принимает никаких параметров, чтобы сделать учебник простым. Нам тоже не нужно ничего делать с ответом. Нам просто нужно, чтобы запрос POST посылался каждый раз, когда нажимается кнопка имитации посещений.

Подключите функциональность в реальном времени с помощью Pusher

Чтобы все это работало, мы создадим функцию, которая будет прослушивать события от Pusher, и когда они будут получены, мы сохраним значение в visitors затем запустите функцию диаграммы обновления, которую мы создали ранее.

Для этого откройте ViewController и импортировать PusherSwift SDK под пакетом Alamofire в верхней части:

import PusherSwift

Далее мы объявим свойство класса для экземпляра Pusher. Мы можем сделать это прямо под visitors строка декларации:

var pusher: Pusher!

Тогда после объявления свойства нам нужно добавить функцию ниже класса, чтобы она могла слушать события:

private func listenForChartUpdates() {    pusher = Pusher(        key: "PUSHER_KEY",         options: PusherClientOptions(            host: .cluster("PUSHER_CLUSTER")        )    )    let channel = pusher.subscribe("visitorsCount")    channel.bind(eventName: "addNumber", callback: { (data: Any?) -> Void in       if let data = data as? [String: AnyObject] {           let count = data["count"] as! Double           self.visitors.append(count)           self.updateChart()       }    })    pusher.connect()}

В вышеприведенном коде мы создаем экземпляр Pusher и передаем наш ключ и кластер (вы можете получить свой ключ и кластер из информационной панели программы Pusher). Тогда мы подписываемся на visitorsChannel и привязать к названию события addNumber на этом канале.

Когда событие запускается, мы запускаем логику в обратном вызове, которая просто добавляет количество visitors а затем звонит updateChart функция, обновляющая фактический график в реальном времени.

Наконец-то звоним pusher.connect() который образует связь с Pusher.

В viewDidLoad просто добавьте вызов к listenForChartUpdates метод:

override func viewDidLoad() {    super.viewDidLoad()    // ...stuff        listenForChartUpdates()}

Это все! Мы создали нашу программу в Xcode и готовы к тестированию. Однако для проверки нам нужно создать серверную часть, которую мы присылаем POST запрос, когда нажата кнопка. Для создания этого бэкенда мы будем использовать Node.js. Давайте сделаем это сейчас.

Создание серверной службы для нашей программы диаграмм iOS в реальном времени

Чтобы начать, создайте каталог для веб-приложения и создайте несколько новых файлов в каталоге:

Файл: index.js

// -------------------------------------------------------// Require Node dependencies// -------------------------------------------------------
let Pusher     = require('pusher');let express    = require('express');let bodyParser = require('body-parser');let app        = express();
// Instantiate Pusherlet pusher     = new Pusher(require('./config.js'));
// -------------------------------------------------------// Load express middlewares// -------------------------------------------------------
app.use(bodyParser.json());app.use(bodyParser.urlencoded({ extended: false }));
// -------------------------------------------------------// Simulate multiple changes to the visitor count value,// this way the chart will always update with different// values.// -------------------------------------------------------
app.post('/simulate', (req, res, next) => {    var loopCount = 0;    let sendToPusher = setInterval(function(){    let count = Math.floor((Math.random() * (100 - 1)) + 1)    pusher.trigger('visitorsCount', 'addNumber', {count:count})    loopCount++;    if (loopCount === 20) {        clearInterval(sendToPusher);    }    }, 2000);    res.json({success: 200})})
// Handle indexapp.get('/', (req, res) => {    res.json("It works!");});
// Handle 404'sapp.use((req, res, next) => {    let err = new Error('Not Found');    err.status = 404;    next(err);});
// -------------------------------------------------------// Serve application// -------------------------------------------------------
app.listen(4000, function(){    console.log('App listening on port 4000!')});

Вышеприведенный файл является простой программой Express, написанной на JavaScript. Мы создаем экземпляры всех необходимых пакетов и настраиваем pusher с помощью конфигурационного файла, который мы вскоре создадим. Затем создаем маршрут /simulate и в этом маршруте мы запускаем addNumber событие в visitorCount канал. Это тот же самый канал и событие, которые прослушивает программа.

Чтобы сделать это немного легче, мы используем setInterval чтобы отправлять случайное количество посетителей на сервер Pusher каждые 2000 миллисекунд. После повторения 20 раз цикл останавливается. Этого должно быть достаточно для тестирования нашей программы.

Создайте следующий файл config.js:

module.exports = {    appId: 'PUSHER_APP_ID',    key: 'PUSHER_APP_KEY',    secret: 'PUSHER_APP_SECRET',    cluster: 'PUSHER_APP_CLUSTER',};

В этом файле мы просто объявляем зависимость.

Теперь откройте терминал и cd в корень каталога веб-приложений. Выполните следующие команды, чтобы установить зависимости NPM, и запустите программу соответственно:

$ npm install$ node index.js

После завершения установки и готовности программы вы увидите следующие результаты.

gTvq-SQMzsRUv7V3-pRpPCI86EImjbY-fB8Z

Тестирование программы

После того, как у вас запущен веб-сервер локального узла, вам нужно будет внести некоторые изменения, чтобы ваше приложение могло общаться с локальным веб-сервером. В info.plist файл, внесите следующие изменения:

kVCEsKQ9oIKlWITzxNKQ8hOSBxc16eA60bkA

Благодаря этому изменению вы можете создать и запустить свою программу, и она будет общаться непосредственно с вашим локальным веб-приложением.

Вывод

Эта статья показала вам, как объединить Pusher и пакет Charts для создания программы диаграмм iOS в реальном времени. Есть много других типов диаграмм, которые можно создать с помощью пакета, но для краткости мы выбрали самый простой. Вы можете изучить другие типы диаграмм и даже передавать несколько точек данных по запросу.

Эта публикация впервые появилась в блоге Pusher.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *