Технология: ReactJS/Электрон/НовостиAPI

Репозиторий: GitHub

Что было построено

Обратите внимание: этот API не бесплатный, вы можете разрабатывать с его помощью, но в конечном итоге вам придется платить, иначе он перестанет работать. Я этого не осознавал.

Полезные советы

  • не разрабатывайте против живого API, особенно того, который стоит денег — скопируйте ответ и сохраните его как фиктивное значение. NewsAPI бесплатен для разработчиков, но его количество ограничено 500 запросами в день.
  • планируйте свои состояния, например. Алабама, Вашингтон и т. д.

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

Конечный результат

Частичный отказ, тупые проблемы с состоянием.

Первоначальные мысли

У меня в голове есть этот супер четкий образ/идея. У вас есть это новостное приложение, которое прозрачно, поэтому вы видите изображение, затем содержимое под ним (основной заголовок/абзац) и следующий ползунок с настройками (значок шестеренки). Возможно, он будет более «стеклянным» в случае плохо читаемого фона. Но это возможно! Я только что посмотрел, Электрон может делать безрамные окна.

Для чего я это хочу? Способ сказать мне, наступил конец света или нет, утром. Интерфейс просто казался аккуратным, когда я думал об этом.

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

К счастью, у этого NewsAPI есть уровень разработчика с лимитом 500 запросов в день, чего мне достаточно, я просто хочу знать, например, были ли запущены ядерные бомбы? или экономика рухнула и т. д. У меня есть этот TTS-бот, который читает мне новости хакеров по ​​утрам как часть моего будильника, чтобы разбудить меня из мертвых (сна).

Сборка

Это должно быть прямолинейно, единственное, что мне просто нужно включить, например. поставил Electron безрамочным и увидел, что это возможно.

Шаги

  • получить API для NewsAPI
  • построить интерфейс со скользящим переходом / исчезновением (непрозрачность)
  • добавить webworker для самообновления по утрам
  • развернуть в электрон

Похоже, мне нужно поставить атрибут, это круто, я поставлю его внизу всегда на виду. Меня беспокоит, «насколько хорош» NewsAPI, я не знаю, будет ли он так же хорош, как, скажем, NPR или что-то в этом роде, но эй, это начало и его легко использовать/потреблять. После того, как я построю эту штуку, я, вероятно, все равно потеряю интерес, поскольку я не большой новостной наркоман (я прячу голову в песок, как страус).

Отмечу, что немного отвлекаюсь (готовлю), но начиная с 18:26 сегодня немного устал больше, чем обычно, но я это чувствую, я могу производить эти экскременты приложения.

О, чувак, это хорошо, это идеально / как раз то, что я искал. У него есть заголовок, изображение и тело. Я, вероятно, применю персональный фильтр к тому, что наиболее интересно. Пока не совсем уверен, как это сделать, я хочу получить главные заголовки, но, возможно, мне понадобится определенный фильтр / сначала посмотреть определенные вещи или, может быть, по какому-то источнику. В структуре ответа API нет никаких «тегов» или чего-то еще… но источники, которые вы можете сортировать, используя базовое сопоставление/фильтрацию строк с желаемым выходным массивом.

Интерфейс

Итак… к этому моменту я уже осознал одну вещь — это разделение состояния, чтобы небольшой повторный рендеринг в дочернем элементе не влиял на состояние родителя. Родитель вызовет API один раз (или очень малое количество раз), и пользовательский интерфейс изменится без многократного вызова API (это было бы плохо, учитывается ограничение в 500). Вы должны звонить только тогда, когда рабочий вызывает его (на следующее утро) или когда вы нажимаете «Обновить» в интерфейсе.

7:23 PM

Это очень легко сделать, поэтому я собираюсь это сделать. Я выполнил все требования раньше в других проектах. Хитрость в том, будет ли это кусок дерьма, например. управление стилем/анимацией/состоянием.

Я еще не использовал стилизованные компоненты, но этот шаблон атрибута класса BEM CSS здесь не очень хорош… это не очень важно здесь, так как приложение такое простое, но вы знаете, лучшие практики.

500px кажется хорошей шириной (самый маленький Chrome может сжиматься в неотзывчивом режиме). Хм… Я думаю, что 400x500 — интересное разрешение.

У меня очень сильно болит голова, но я собираюсь развернуть это. О да, я полагаю, должен быть читатель, но это должен быть просто беглый взгляд.

20:04 ах да… Мне нужно две статьи, чтобы просмотреть их.

Примечание… Мне не нужен предварительный загрузчик для каждого изображения, все они должны быть готовы. У меня есть клетчатка, поэтому я не беспокоюсь. У меня просто появится центральный счетчик, затем все они появятся / будут готовы (рендеринг интерфейса слайда). Это «глупо», так как я могу даже не щелкнуть по 20 изображениям… но эх… ЭХХХ…. ЭХХХХ. Это я пытаюсь заставить камень впитывать кровь. О да, я тоже собираюсь использовать Roboto.

Это было здорово… застрял в цикле useEffect при использовании API… наверное, сотня запросов прямо сейчас LOL бум! Конечно, я мог бы использовать макеты или установить свой собственный API, но эй. Иногда нужно обжечься.

20:33 хорошо, приступим к делу

20:58 хм, до меня дошло, что сделать слайдер не «очень просто», так как вам нужно предварительно отрендерить другие слайды, а затем выполнить цикл, который уничтожает/подпитывает сам себя. Посмотрим, как далеко я продвинусь с этим. PlainJS Я мог бы сделать это нормально, это часть управления состоянием реакции… Я не знаю, может быть, это легко, мы увидим.

21:18 Глупая проблема с импортом шрифта, уже несколько раз сталкивался с этим.

Я обеспокоен тем, что это не будет выглядеть так, как я себе это представляю, как «стекло/прозрачно». Я не очень дизайнер.

21:44 Уф, я обожглась… сегодня тот самый день? Я продолжаю думать, я бы посмеялся, если бы просто умер, как жалко, эволюция говорит нет. Эта головная боль с болью за правым глазом, блин… но я просто плохо спал последние пару дней по своей вине. Также я смотрю на мониторы 24/7. Хочу взять ПТО, но как то странно… так как уже ВФХ.

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

21:56 продолжение

Я думаю, что как минимум я должен сделать 3 (один слева/один справа) в зависимости от того, в каком направлении вы идете. Затем вам нужен циклировщик массива для управления состоянием/начала с концами.

10:18 PM

Интересно, что это за функция, которая будет возвращать число до и после него относительно границ массива. Это время, когда я должен использовать JSFiddle или какую-нибудь JS-песочницу и написать функцию на стороне. Я должен поставить защиту для пустых вещей… но это публичный API, «он никогда не будет пустым», ха… ха… Это не будет чистым, у меня мало времени, и я должен закончить этот прототип.

Вероятно, есть какой-то более простой/чистый способ сделать это, я также не проверял все условия, просто начало, середина, конец.

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

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

Что это за **** человек… поставил… ГОСУДАРСТВО!!! ха-ха

Быстрое обновление, это, по сути, повторное изобретение чего-то, что уже существует… Я мог бы просто использовать гладкую карусель или что-то в этом роде. Ага… Не знаю, не знаю, почему я сразу этого не понял (плохая предусмотрительность). Конечно, я на самом деле не пытался просто свалить сюда карусель. Да, мой слайдер будет хреновее. Это в основном эстетика (отсутствие), которую я преследовал, у меня в голове была эта «3D-подобная стеклянная голограмма», но, увы… я ограничен технологиями своего времени (рисование фигурок из палочек в черно-белом цвете).

11:04 PM

Ох… что еще неприятно, так это обновление состояния реакции… хм. Возможно, я притворяюсь с помощью css… DOM на самом деле исчезнет после скольжения/исчезновения обратно после обновлений.

Ха, посмотри, в инспекторе дома есть откат/вперед, интересно.

О, чувак, это состояние просто супер, лол, что происходит, как оно вообще смещается вниз.

О, один из моих переводов был Y, а не X ha.

23:37 о нет, я теряю состояние, я твердый или жидкий?! Ожидание конца массива, но получение -1 Понятно, для этого и нужно тестирование. О нет, это потому, что я убрал перезапись возвратов/значений в getNextArticleIndex

Ох… это была плохая идея использовать «переключение» «того же класса» через setState, так как когда вы снова пытаетесь переместиться влево, рендеринг не вызывается, так как состояние технически не изменилось…

12:58 AM

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

Итак, прямо сейчас я борюсь с глупой проблемой состояния/конфликта, когда 3 слайда (массив) должны обновляться, но также применять к ним класс «slide-left», поэтому новые слайды перемещаются влево… это плохо, проблематично… это еще одна вещь, в которой я еще не силен, - это отделение состояний пользовательского интерфейса от логических состояний.

Единственный положительный момент в том, что все мои вкладки просто сдулись. Поскольку это приложение диспетчера вкладок расширений Chrome, которое я планировал (связать с кросс-платформенным приложением), еще не закончено… ну, чистый лист.

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

Что ж, мне придется пройти мимо этого, я могу просмотреть статьи… У меня просто нет красивых слайдов… Мне нужно решить проблему с конфликтом состояний.

Электронная часть

Поскольку у меня нет времени, я просто установлю Electron, затем украду файл main.js из своего кросс-платформенного приложения, и он должен работать. Он просто сопоставляется с папкой сборки из React, мне, вероятно, придется немного изменить путь. Это то, что вы получаете за то, что не планируете.

Мне нравится, как, когда вы впадаете в отчаяние, вы просто избавляетесь от всей роскоши и что-то строите.

Итак, все, что мне нужно было сделать, это запустить:

$npm init

$npm install electron --save-dev

$npm install electron-packager --save-dev

init указывает имя приложения Electron.

Создайте файл main.js

Я собираюсь собрать текущий код reactjs, чтобы я мог внедрить его в сборку Electron. Это — пример из кроссплатформенного приложения, как оно привязывается/сопоставляется со статической сборкой reactjs от Electron.

Строки электрон-упаковщика в package.json происходят отсюда.

Да, и в reactjs package.json вам нужно указать, что запись “homepage” будет просто “.”

Ха… в этот раз не получилось, говорит Not allowed to load local resource: хм. Nvm У меня была вложенная папка внутри reactjs в отличие от cross-platform-app.

ОМГ, я так близко! Но я не могу переместить окно, лол… хотя это возможно.

Над текстом нужно будет поработать, его трудно читать, несмотря на то, что он «крутой».

О, дерьмо, я потерял стрелки при наведении/показе… вероятно, связанные с тем классом webkit, который я применил.

Я думаю, что пока это нормально, хотя это немного некрасиво… вы склонны перетаскивать изображение, а не тело…

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

Тем не менее, это круто, я рад, что это возможно безрамочное/прозрачное окно. Я закончу это, а затем запишу новое короткое видео ... но оно будет работать так же, но не будет использовать сохраненные локальные данные.

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

Я просто упакую это очень быстро, поэтому я запускаю его с .exe

Обновление от 16.05.2020

Ну, я потратил много времени на то, чтобы ползунок работал в ReactJS. Я до сих пор еще не совсем понял, это самое близкое. Когда я применил этот код к фактическому слайдеру новостей… это было проблематично, я думаю, потому что фотографии должны загружаться/отрисовываться по мере того, как они перекрашиваются, а не простой div с буквой посередине в примере с песочницей выше. . Итак… как кто-то, кто проверял мой код, сначала подумал/предположил, что я просто перемещаю весь слайд. Я сделаю это. Я буду отображать все 20 слайдов или что-то еще в ряду, где вы видите только один фрагмент за раз, а затем состояние реакции обновляется, когда вы нажимаете влево/вправо, сдвигая строку влево/вправо.

Это все-таки идея.... посмотрим, сработает ли. Я быстро теряю к этому интерес, я имею в виду, что управление состоянием — это то, чем я должен заниматься. И я предполагаю, что в настоящее время я плохо разбираюсь в ReactJS, поэтому я могу просто построить его в обычном JS, но управление состоянием в ReactJS не совпадает с моими намерениями.

Да, я не хочу, чтобы он перерисовывался, просто скользите… подвиньтесь.

Да, это очень некрасиво… ползунок должен быть бесконечным и не иметь концов. Но если бы я перетасовал массив, я бы снова столкнулся с проблемой коллизии между скользящим состоянием и состоянием массива. Это буквально просто увеличение/уменьшение процента перевода, применяемого к каждому слайду, это должно было быть для глобального родительского контейнера, но это работает нормально. В любом случае, он должен быть автоматическим / работать в фоновом режиме, поэтому лично для меня это нормально / меня не беспокоит, если он начинается сначала, пока не обновится самостоятельно.

Вау, setInterval очень облажался, если оставить его работать достаточно долго. Я просто буду использовать веб-воркер, как я сделал его раньше.

Я не учитывал скольжение вручную, поэтому вы можете иметь крайний случай таймера на 8 секунд, и вы просто двигаетесь вперед, поэтому вместо ожидания еще 10 секунд перед скольжением вперед он будет скользить вперед через 2 секунды.

Хахаха…. Я больше не знаю, что происходит. Установленная мной переменная состояния по-прежнему пуста, независимо от того, обращаюсь ли я к ней глобально или передаю ее в качестве параметра. Я предполагаю, что это мой веб-воркер обновляет компонент или что-то в этом роде… Я не знаю.