Teknologi: ReactJS/Electron/NewsAPI

Repo: GitHub

Apa yang dibangun

Harap diperhatikan: API ini tidak gratis, Anda dapat mengembangkannya tetapi pada akhirnya Anda harus membayar atau API akan berhenti berfungsi. Saya tidak menyadarinya.

Kiat yang berguna

  • jangan mengembangkan API langsung, terutama yang membutuhkan biaya — salin respons dan simpan sebagai nilai tiruan. NewsAPI gratis untuk pengembang tetapi dibatasi hingga 500 permintaan/hari.
  • rencanakan negara bagian Anda, misalnya. Alabama, Washington, dll…

Harap diperhatikan: kebetulan artikel pertama dalam berita hari ini yang menjadi headline utama memuat Trump di dalamnya, saya tidak memilih itu.

Hasil akhir

Kegagalan sebagian, masalah negara bodoh.

Pikiran awal

Saya memiliki gambaran/ide yang sangat rapi di kepala saya. Anda memiliki aplikasi berita yang transparan, sehingga Anda melihat gambar, lalu konten di bawahnya (judul/paragraf dasar) dan penggeser berikutnya dengan pengaturan (ikon roda gigi). Mungkin akan lebih “seperti kaca” jika latar belakangnya sulit dibaca. Tapi itu mungkin! Saya baru saja mencarinya, Electron dapat membuat jendela tanpa bingkai.

Untuk apa aku menginginkan ini? Sebuah cara untuk memberitahuku apakah dunia berakhir atau tidak di pagi hari. Antarmukanya tampak rapi ketika saya memikirkannya.

Berikut sketsa konsepnya. Ini adalah hal yang sederhana untuk dibuat, jika Anda dapat membangun antarmuka/menggunakan API/membuat pekerja web latar belakang sehingga disegarkan pada waktu tertentu.

Untungnya NewsAPI ini memiliki tingkat pengembang dengan batas permintaan 500 per hari dan itu jumlah yang banyak bagi saya, saya hanya ingin tahu seperti “apakah nuklir diluncurkan?” atau “apakah perekonomian runtuh”, dll… Saya memiliki bot TTS yang membaca Berita Peretas ini di pagi hari sebagai bagian dari alarm untuk membangunkan saya dari kematian (tidur).

Membangun

Ini harusnya mudah, satu-satunya hal adalah saya hanya perlu "menghidupkannya" misalnya. mengatur Electron menjadi tanpa bingkai dan saya melihat bahwa itu mungkin.

Langkah

  • dapatkan API untuk NewsAPI
  • membangun antarmuka dengan transisi geser/fade(opacity)
  • tambahkan pekerja web untuk memperbarui diri di pagi hari
  • diterapkan di Electron

Sepertinya saya perlu memasang atribut, keren, saya letakkan di bagian bawah selalu terlihat. Saya prihatin dengan "seberapa bagus" NewsAPI, saya tidak tahu apakah itu sebagus NPR atau semacamnya, tapi hei ini adalah permulaan dan mudah digunakan/dikonsumsi. Setelah saya membuat benda ini, saya mungkin akan kehilangan minat karena saya bukan pecandu berita yang hebat (saya mengubur kepala saya di pasir seperti burung unta).

Saya perhatikan saya sedikit terganggu (memasak) tetapi mulai pukul 18:26 hari ini sedikit lebih lelah dari biasanya, tetapi saya merasakannya, saya dapat menghasilkan kotoran dari sebuah aplikasi.

Ya ampun ini bagus, ini sempurna/hanya yang saya cari. Ia memiliki judul, gambar, dan isi. Saya mungkin akan menerapkan filter pribadi selain hal-hal yang paling menarik. Belum yakin bagaimana caranya, saya ingin menarik berita utama teratas tetapi mungkin menginginkan filter khusus/melihat hal-hal tertentu terlebih dahulu atau mungkin dari sumber tertentu. Dari struktur respons API tidak ada semacam "tag" atau semacamnya... tetapi sumber yang dapat Anda urutkan berdasarkan pencocokan/pemfilteran string dasar dengan keluaran array yang diinginkan.

Antarmuka

Jadi… satu hal yang saya sadari saat ini adalah pemisahan negara sehingga sedikit rendering ulang pada anak tidak mempengaruhi keadaan orang tua. Induk akan memanggil API satu kali (atau beberapa kali) dan UI akan berubah tanpa memanggil API beberapa kali (itu buruk, dihitung dalam batas 500). Anda hanya boleh menelepon ketika pekerja memanggilnya (keesokan paginya) atau Anda menekan segarkan pada antarmuka.

7:23 PM

Ini sangat mudah dibuat, jadi saya akan menyelesaikannya. Saya telah melakukan semua persyaratan sebelumnya di proyek lain. Triknya adalah apakah itu akan menjadi omong kosong misalnya. gaya/animasi/manajemen status.

Saya belum menggunakan komponen yang ditata tetapi pola atribut kelas BEM CSS di sini tidak terlalu bagus… ini tidak terlalu penting di sini karena aplikasinya sangat sederhana tetapi tahukah Anda, praktik terbaik.

500px sepertinya lebarnya bagus (Chrome terkecil dapat diringkas dalam mode non-responsif). Hmm… Menurut saya 400x500 adalah resolusi yang menarik.

Saya sangat pusing karena sakit kepala, tetapi saya akan menerapkan ini. Oh iya, menurutku seharusnya ada pembacanya, tapi ini seharusnya hanya sekilas saja.

20:04 oh ya… Saya memerlukan dua artikel untuk membacanya.

Catatan tambahan… Saya tidak ingin pre-loader per gambar, semuanya harus siap. Saya punya serat jadi saya tidak khawatir. Saya hanya akan menampilkan pemintal pusat, lalu semuanya akan muncul/siap (render antarmuka slide). Ini “bodoh” karena saya mungkin tidak mengklik 20 gambar tersebut… tapi ehh… EHHH…. EHHHHH. Inilah saya yang mencoba membuat batu menyerap darah. Oh ya, aku juga akan menggunakan Roboto saja.

Hebat sekali… terjebak dalam loop useEffect saat menggunakan API… mungkin ada seratus permintaan di sana LOL boom! Tentu saja saya bisa menggunakan tiruan atau mengatur API saya sendiri, tapi hei. Terkadang Anda harus terbakar.

20:33 oke, langsung saja

20:58 hmm saya sadar, membuat penggeser tidaklah "sangat mudah" karena Anda harus melakukan pra-render pada slide lainnya dan kemudian melakukan perulangan yang menghancurkan/mengumpankan dirinya sendiri. Kita lihat saja sejauh mana saya bisa mencapai hal itu. PlainJS Saya bisa melakukannya dengan baik, itu bagian manajemen status reaksi… Saya tidak tahu mungkin mudah, kita lihat saja nanti.

21:18 Masalah bodoh saat mengimpor font, saya sudah melakukannya beberapa kali sebelumnya.

Saya khawatir ini tidak akan terlihat seperti yang saya bayangkan, tampilan seperti “kaca/transparan”. Saya bukan seorang desainer.

21:44 Aduh, aku terbakar… apakah hari ini adalah saatnya? Saya terus berpikir, saya akan tertawa jika saya mati saja, sungguh menyedihkan, evolusi mengatakan tidak. Sakit kepala ini disertai rasa sakit di belakang mata kanan, sialan… tapi aku tidak bisa tidur nyenyak beberapa hari terakhir ini karena kesalahanku sendiri. Saya juga telah menatap monitor seperti 24/7. Pengen ikut PTO, tapi aneh… karena udah WFH.

Mengeluarkan lagu itu untuk melewati ini. Saya menginginkan hal ini, sederhana saja. Saya menginginkannya untuk besok pagi, puji kopi saya. “Tiongkok berada di depan sementara diam-diam mengembangkan roket ICBM” *sip* sepertinya oh itu bagus, slide berita berikutnya. Penafian: itu hanya lelucon.

21:56 melanjutkan

Saya pikir minimal saya harus merender 3 (satu di kiri/satu di kanan) tergantung ke arah mana Anda pergi. Maka Anda memerlukan array cycler untuk mengelola status/mencapai akhir dari awal.

10:18 PM

Menariknya, fungsi apa yang akan mengembalikan angka sebelum dan sesudahnya sehubungan dengan batas-batas array. Ini adalah saat ketika saya harus membuka JSFiddle atau kotak pasir JS dan menulis fungsi di sampingnya. Saya harus memasang penjaga untuk barang-barang kosong… tapi ini adalah API publik “tidak akan pernah kosong” ha… ha… Ini tidak akan bersih, saya kehabisan waktu dan saya harus menyelesaikan prototipe ini.

Mungkin ada cara yang lebih sederhana/bersih untuk melakukan ini, saya juga tidak menguji semua kondisi, hanya awal, tengah, akhir.

Saya mungkin mendapatkan angin kedua yang merupakan hal buruk… karena saya perlu tidur nyenyak hari ini (tidak gratis).

Ooh kesalahan kecil array di atas harus dimulai dari 0. Hampir sub-array ini akan digunakan untuk menarik objek yang cocok dari array objek yang akan dirender. Jadi sekarang saya hanya mengambil fungsi itu dan memasukkannya ke dalam aplikasi saya.

Apa pria **** ini… set… NEGARA…!!! ha ha

Pembaruan cepat, ini pada dasarnya menciptakan kembali sesuatu yang sudah ada… Saya bisa saja menggunakan slick carousel atau semacamnya. Ya… Saya tidak tahu, tidak yakin mengapa saya tidak segera menyadarinya (pandangan ke depan yang buruk). Memang benar saya tidak benar-benar mencoba membuang carousel di sini. Ya, penggeser saya akan lebih jelek. Ini sebagian besar adalah estetika (kekurangan) yang saya cari, saya memiliki benda “hologram kaca seperti 3D” dalam pikiran saya tetapi sayangnya… Saya dibatasi oleh teknologi pada zaman saya (menggambar figur tongkat dalam warna hitam/putih).

11:04 PM

Ooh… yang juga jelek adalah react state updatenya… hmm. Saya mungkin berpura-pura dengan css… DOM akan benar-benar hilang setelah digeser/dipudar kembali setelah pembaruan.

Ha coba lihat, di dom inspektur ada undo/forward, menarik.

Ya ampun keadaan ini super F'd haha, apa yang terjadi, bagaimana bisa bergeser ke bawah.

Oh salah satu terjemahan saya adalah Y dan bukan X ha.

23:37 oh tidak, aku kehilangan wujudnya, padat atau cair?! Mengharapkan akhir dari array tetapi mendapatkan -1 Begitu, itulah gunanya pengujian. Oh tidak, itu karena saya menghapus pengembalian/nilai yang ditimpa di getNextArticleIndex

Ooh… merupakan ide yang buruk untuk menggunakan “toggle” dari “kelas yang sama” melalui setState karena ketika Anda mencoba untuk bergerak ke kiri lagi, render tidak dipanggil karena status secara teknis tidak berubah…

12:58 AM

Itu sangat buruk, catu daya saya benar-benar merusak tempat tidur. Untung saja saya mempunyai desktop lain sehingga saya dapat menyambungkan catu daya dari desktop tersebut, output wattnya hampir sama, hanya saja agak besar untuk casingnya. Beruntungnya saya tidak kehilangan data.

Jadi saat ini saya sedang menghadapi masalah keadaan/konflik bodoh di mana 3 slide (array) harus diperbarui tetapi kelas "slide-kiri" juga diterapkan padanya, sehingga slide baru dipindahkan ke kiri… buruk, bermasalah… ini adalah hal lain yang belum saya kuasai adalah memisahkan status UI dari status logika.

Satu hal positifnya adalah semua tab saya hilang begitu saja. Karena aplikasi pengelola tab ekstensi chrome yang saya rencanakan (untuk dikaitkan dengan aplikasi lintas platform) belum selesai… yah, kertas kosong.

Saat ini mencoba untuk menolak kondisi render tertentu, anti-pola tetapi saya pernah melihatnya dilakukan sebelumnya. Tapi menurut saya itu dengan komponen berbasis kelas hmm…

Baiklah, saya harus melupakan hal ini, saya dapat menelusuri artikel-artikelnya… Saya hanya tidak memiliki slide yang bagus… Saya harus menyelesaikan masalah bentrokan negara bagian itu.

Bagian Elektron

Karena saya kehabisan waktu, saya hanya akan menginstal Electron, lalu mencuri file main.js dari aplikasi lintas platform saya dan itu akan berhasil. Itu hanya memetakan ke folder build dari React, saya mungkin harus mengubah jalurnya sedikit. Inilah yang Anda dapatkan karena tidak merencanakan.

Saya suka bagaimana ketika Anda putus asa, Anda membuang semua kemewahan dan membangun sesuatu.

Jadi ya, yang harus saya lakukan hanyalah menjalankan:

$npm init

$npm install electron --save-dev

$npm install electron-packager --save-dev

init menentukan nama aplikasi Electron.

Buat file main.js

Saya akan membuat kode reactjs saat ini sehingga saya dapat menyuntikkannya ke dalam build Electron. Ini adalah contoh dari aplikasi lintas platform bagaimana ia mengikat/memetakan ke versi statis reactjs dari Electron.

Baris pengemas elektron di package.json berasal dari di sini.

Oh dan di reactjs package.json Anda perlu menentukan entri “homepage” menjadi “.” saja

Hah… kali ini tidak berhasil katanya Not allowed to load local resource: hmm. Nvm Saya memiliki folder bersarang di dalam reactjs tidak seperti cross-platform-app.

Ya ampun, aku sangat dekat! Tapi saya tidak bisa memindahkan jendelanya haha… tapi itu mungkin saja.

Teksnya perlu diperbaiki, sulit dibaca meski “keren”.

Ya ampun, saya kehilangan panah hover/show… mungkin terkait dengan kelas webkit yang saya terapkan.

Saya pikir ini baik-baik saja untuk saat ini, namun agak jelek… Anda cenderung menyeret gambarnya, bukan tubuhnya…

Jadi saya hanya akan mengikat acara penyegaran untuk menarik dari API dan menarik semua artikel. Tidak ada gambar yang dimuat sebelumnya, tidak ada transisi, itu menyebalkan… tapi saya bisa menggunakannya nanti hari ini.

Masih keren. Saya senang ini bisa dilakukan dengan jendela tanpa bingkai/transparan. Saya akan menyelesaikan ini dan kemudian merekam video pendek baru… tapi sebagian besar akan berfungsi sama tetapi tidak menggunakan data lokal yang disimpan.

Oh iya, ada juga kondisi error dimana artikelnya tidak ada gambarnya ya. Saya akan menambahkan pemeriksaan gambar dasar untuk saat ini, itu yang paling penting selain konten atau judul itu sendiri. Mencoba memasukkan setInterval auto clicker dasar tetapi statusnya salah lagi ugh.

Saya akan mengemasnya dengan sangat cepat, jadi saya menjalankannya di .exe

Pembaruan 16/05/2020

Saya menghabiskan banyak waktu untuk membuat slider berfungsi di ReactJS. Saya masih belum memahaminya, ini yang paling dekat. Ketika saya menerapkan kode ini ke penggeser berita sebenarnya… itu bermasalah, menurut saya karena foto harus dimuat/dirender saat dicat ulang vs. div sederhana dengan huruf di tengah pada contoh kotak pasir di atas . Jadi… ketika seseorang yang memeriksa kode saya awalnya berpikir/berasumsi bahwa saya hanya menggeser seluruh slide. Saya akan melakukan itu. Saya akan merender semua 20 slide atau apa pun dalam satu baris di mana Anda hanya melihat satu cuplikan pada satu waktu dan kemudian status reaksi diperbarui saat Anda mengeklik kiri/kanan dengan menggeser baris ke kiri/kanan.

Itu idenya…. kita akan lihat apakah itu berhasil. Saya dengan cepat kehilangan minat terhadap hal ini, maksud saya pengelolaan negara adalah sesuatu yang harus saya hilangkan. Dan saya rasa saya kurang mahir dalam ReactJS saat ini karena saya bisa membangunnya di plainJS tetapi manajemen status di ReactJS tidak sesuai dengan maksud saya.

Ya, saya tidak ingin dirender ulang, cukup geser… pindah.

Ya, ini sangat jelek… penggeser harusnya berjalan tanpa batas dan tidak ada habisnya. Tetapi jika saya mengacak array, saya akan kembali mengalami masalah tabrakan antara status geser dan status array. Ini sebenarnya hanya menambah/mengurangi persentase terjemahan yang diterapkan pada setiap slide, seharusnya ke wadah induk global tetapi berfungsi dengan baik. Pokoknya itu seharusnya otomatis/berjalan di latar belakang jadi secara pribadi tidak masalah bagi saya/tidak mengganggu saya jika itu dimulai lagi sampai menyegarkan diri.

Wow setInterval sangat kacau jika dibiarkan berjalan cukup lama. Saya hanya akan menggunakan pekerja web seperti yang saya buat sebelumnya.

Saya tidak memperhitungkan geseran override manual sehingga Anda dapat memiliki waktu tepi pengatur waktu pada 8 detik dan Anda hanya bergerak maju sehingga alih-alih menunggu 10 detik lagi sebelum meluncur ke depan, itu akan meluncur ke depan dalam 2 detik.

Ha ha ha…. Saya tidak tahu lagi apa yang terjadi. Variabel status yang saya tetapkan masih kosong baik saya mengaksesnya secara global atau meneruskannya sebagai parameter. Saya kira itu adalah pekerja web saya yang membuat penyegaran komponen atau semacamnya… Saya tidak tahu.