În ultimele două săptămâni, am lucrat la un proiect personal numit The Global Upvote. Global Upvote agregă poveștile votate de top de pe web, rezumate și actualizate la fiecare șaizeci de secunde.

Acest articol se concentrează asupra modului în care am reușit să implementez The Global Upvote pentru aspiranți la dezvoltatori. Am scris un articol separat despre procesul de proiectare din spatele acestui lucru. Aceste două povești pot părea complet separate. Dar procesul de proiectare și dezvoltare a fost profund legat în viața reală.

Rețineți că am scris un articol suror despre cum să proiectați acest site de știri Progressive Web App aici.

Găsirea datelor

În design, există un concept de conținut mai întâi. Conținutul-primul design spune că trebuie să proiectezi în jurul conținutului. Pentru ca eu să fac asta, trebuia să mă asigur că pot obține datele corecte. Înainte de a începe o lucrare front-end reală, am lucrat cu API-ul Reddit și serverul meu Node.

Știam că există două părți de conținut pe care doream să le captur de la Reddit:

  1. Primele postări ale r / WorldNews pentru titlurile lor
  2. Comentariul unui utilizator de robot care a rezumat povestea
Cum sa codati un site web de stiri pentru aplicatii
Aceste obiecte erau date dulci, dulci de Reddit.

Din fericire, a existat un excelent Node wrapper pentru API numit Snoowrap. A fost ușor de utilizat și m-a avut obținerea de conținut imediat.

Un lucru important pe care l-am învățat în acest proiect a fost gestionarea cererilor. În trecut, îmi folosisem serverul Node ca solicitant API de fiecare dată când un utilizator îmi vizita aplicația. Dar am avut o epifanie evidentă.

Aș putea să mă țin de cantitatea mică de date (povești) de pe serverul meu și să le actualizez o dată pe minut cu un simplu setInterval. Acest lucru a încetat să creeze riscul de a abuza de limitele mele Reddit API și de a scurta timpul de încărcare a povestirii, deoarece nu ar trebui să fac ping API Reddit de fiecare dată.

Păstrarea progresivă

Vrei să știi secretul ieftin și murdar despre crearea unei aplicații web progresive în React? Doar folosiți Creați-React-App. Contribuitorii la acest proiect au făcut o treabă minunată de a adăuga lucrători de service pentru încărcări aproape instantanee și un fișier manifest pentru meta date, și de a optimiza gruparea Webpack cât mai bine. În trecut, a trebuit să fac multă muncă pentru PWA (Progresive aplicații web) și chiar am scris un tutorial pe perfecționarea lor.

Aceasta a fost prima dată când am lucrat la un mod offline pentru Chrome și Firefox pentru a face lucruri cum ar fi citirea articolelor înainte ca computerul meu să se conecteze la wifi.

Prima jumătate a fost să fac lucruri ori de câte ori conexiune internet schimbat folosind ascultătorii de evenimente. În acest fel, o nouă conexiune la internet ar putea declanșa preluarea de povești, iar o conexiune pierdută ar putea notifica utilizatorul că este offline.

A doua jumătate a modului offline salvează povești noi pe dispozitivul utilizatorului de fiecare dată când au fost preluate. Aceasta a fost prima dată când folosesc LocalStorage, și am fost plăcut surprins de cât de ușor a fost.

Cum sa codati un site web de stiri pentru aplicatii

Un ultim pic din PWA pentru a fi realizat a fost îmbunătățirea indicelui de viteză perceptual. Puteți vedea această valoare centrată pe utilizator deschizând Chrome DevTools și executând un audit. Pentru a îmbunătăți acest scor, am creat schelete care să apară când starea aplicației mele era aducând.

Conectarea unui plugin

Am hotărât că doresc ca utilizatorul să poată salva experiența ca noua filă pentru Chrome și Firefox. Browserele acceptă în mod nativ setarea unei pagini de pornire. Dar acest lucru nu vă oferă controlul barei URL imediat. Acesta a fost un detaliu important, deoarece un utilizator nu dorește să facă clic pe bara URL de fiecare dată când deschide o filă nouă.

1611305648 114 Cum sa codati un site web de stiri pentru aplicatii

M-am temut că sunt pe cale să mă scufund în profunzimea dezvoltării extensiei browserului. Acest lucru era ceva cu care nu eram familiarizat în afară de un verificator de rețea pentru a-mi ajuta abilitățile vizuale. Încă o dată, această soluție a ajuns să mi se predea pe un platou de argint. Google include o extensie similară în descărcări eșantion. Am lucrat în cel mai scurt timp cu Extensie globală fila Upvote. Nici măcar nu au fost necesare modificări pentru trimiterea în magazinul Firefox!

Rezultatul final

Din punct de vedere al dezvoltării, am iubit toate diferitele soluții pentru care aș putea pune împreună Global Upvote. Aceste soluții îmi spun că comunitatea web devine mai bună la lucrul împreună pentru a face experiența de dezvoltare mai puțin frustrantă. În urma auditului Chrome DevTools, anterior Google Lighthouse Extension a devenit, de asemenea, cel mai ușor care a fost vreodată.

1611305648 766 Cum sa codati un site web de stiri pentru aplicatii

Tot codul sursă a fost deschisă în cazul în care doriți să săpați sau să faceți ca acesta să funcționeze pentru dvs.

Mai multe lucruri rapide de remarcat:

  • Unde sunt fișierele CSS ?!
    Nu sunt. eu folosesc Componente stilizate pentru a atașa stiluri direct la componenta lor!

    Consultați această discuție pe care am susținut-o la IBM despre motivul pentru care CSS-in-JS este extrem de bun: https://vimeo.com/230614037

  • Unde este codul sursă pentru extensia de filă?
    Verificați-o în repo separat pentru Fila Global Upvote.
  • Cum încep să rulez local?
    Consultați documentația pentru Creați-React-App dacă nu ai făcut-o deja.
    Mult wow. De asemenea, aveți nevoie de un fișier numit keys.json în directorul rădăcină cu informațiile dvs. pentru Snoowrap. Ar trebui să arate astfel:
{
  "userAgent": "random-term",
  "clientId": "FromYourRedditAPISettings",
  "clientSecret": "FromYourRedditAPISettings",
  "username": "YourRedditUsername",
  "password": "YourRedditPassword"
}

Sper că ți-a plăcut scrierea acestui caz!

Din nou, am scris un articol suror despre cum să proiectăm acest site de știri Progressive Web App aici.

Pentru informații suplimentare: nu ezitați să mă contactați prin comentarii, e-mail sau @seejamescode. Lucrez în ATX pentru IBM Design și iubesc întotdeauna conversația cu comunitatea de design web. Lăsați orice întrebări pe care le aveți și voi încerca să vă răspund!