TwitchTV Status App veidošana

Pagājušajā nedēļā es pievērsos pēdējiem starpposma priekšgala projektiem, kas ietvēra TwitchTv lietotnes izveidi, izmantojot Twitch API, lai parādītu Twitch Streamers komplekta statusu.

Šie bija šī projekta lietotāju stāsti:

  1. Lietotāji var redzēt, vai Free Code Camp pašlaik straumē vietnē Twitch.tv.
  2. Lietotāji var noklikšķināt uz statusa izvades un tikt nosūtīti tieši uz Free Code Camp Twitch.tv kanālu.
  3. Ja pašreiz straumē Twitch straumētājs, lietotāji var redzēt papildu informāciju par to, ko viņi straumē.
  4. Ja straumētājs ir aizvēris savu Twitch kontu (vai konts nekad nav bijis), lietotāji redzēs viettura paziņojumu.

Dizains

Manas lietotnes dizains ir diezgan līdzīgs projekta aprakstā dotajam lietotnes paraugam.

Vienīgā būtiskā atšķirība ir meklēšanas ievade lapas augšdaļā, kuru es ievietoju piektajam lietotāja stāstam (vairāk par to zemāk).

Es izmantoju skeletu, lai palīdzētu ar pamata stilu un atsaucību, tāpēc galddatorā un mobilajā ierīcē viss izskatās labi.

Profila attēliem tagu vietā izmantoju fona attēlus . Tas ir tāpēc, ka, vienkārši nosakot fona izmēru, lai tas pārklātu, tas ļauj attēlam mērogot atbilstoši tā konteinera lielumam neatkarīgi no izmēriem.

To es uzzināju, strādājot pie Random Quote Generator projekta, un bija patīkami to šeit atkal izmantot.

Domas process

Pirmkārt, es izveidoju Twitch Streamers masīvu un izmantoju for ciklu, lai atkārtotu masīvu un veiktu secīgus AJAX pieprasījumus, lai es varētu iegūt katra straumētāja datus.

var twitchStreamers = ["dreamhackcs", "skyzhar", "freecodecamp", "faceittv", "comster404", "brunofin", "terakilobyte", "robotcaleb", "sheevergaming", "esl_sc2", "ogamingsc2", "jacksofamerica"];
...
for (var i = 0; i < twitchStreamers.length; i++) { ajax();}
...
function ajax () { $.ajax({ url: "//api.twitch.tv/kraken/streams/" + twitchStreamers[i] + "?callback=?", dataType: "jsonp", data: { format: "json" },
 success: function (data) { fetchData(data); },
 error: function () { console.log("unable to access json"); } }); }

Ja AJAX pieprasījums ir veiksmīgs, tas izsauc citu funkciju fetchData (), kas vienkārši ienes nepieciešamos datus no JSON izejas, piemēram, katra kanāla lietotājvārdu, statusu, URL un attēla attēlu, un izsauc funkciju updateHTML (), kas vienkārši ņem datus un atjaunina DOM.

function fetchData (data) {
 if (data.stream === null) { url = data._links.channel.substr(38); updateOfflineUsers(); }
 else if (data.status == 422 || data.status == 404) { status = data.message; updateHTML(".unavailable"); }
 else { if (data.stream.channel.logo !== null) { picture = 'url("' + data.stream.channel.logo + '")'; }
 else { picture = 'url("//cdn.rawgit.com/ayoisaiah/freeCodeCamp/master/twitch/images/placeholder-2.jpg")'; } url = data._links.channel.substr(38); status = "" + data.stream.channel.display_name + "" + " is currently streaming " + data.stream.game; updateHTML(".online"); } }

Bezsaistes straumētājiem bija papildu solis. Man bija jāveic vēl viens API izsaukums, izmantojot //api.twitch.tv/kraken/channels/, lai iegūtu katra kanāla datus, jo pirmais zvans (izmantojot //api.twitch.tv/kraken/streams/) nesniedza informāciju par bezsaistes straumētāji, izņemot to, ka viņi tajā brīdī nebija aktīvi.

function updateOfflineUsers () { //If users are offline, make new ajax request to find user info $.ajax({ url: "//api.twitch.tv/kraken/channels/" + url, dataType: "jsonp", data: {format: "json"}, success: function (json) { status = "Channel " + "'" + json.display_name + "'" + " is currently offline"; if (json.logo !== null) { picture = 'url("' + json.logo + '")'; } else { picture = 'url("//cdn.rawgit.com/ayoisaiah/freeCodeCamp/master/twitch/images/placeholder-2.jpg")'; } updateHTML(".offline"); } }); }

Kad es tos atradu, četri lietotāju stāsti tika pabeigti, un es biju gatavs doties. Šajā brīdī es atzīmēju projektu kā pabeigtu, bet drīz pēc tam es domāju, ka būtu ļoti forši nedaudz paplašināt lietotnes funkcionalitāti.

Tas bija tad, kad es pievienoju piekto lietotāja stāstu:

  • Lietotāji var meklēt TwitchTv Streamers un apskatīt, vai tie ir tiešsaistē vai nav.

Tāpēc es izveidoju meklēšanas funkciju, kas ņem lietotāja ievadi un izmanto to, lai veiktu API izsaukumu:

function search () { $(".online, .offline, .unavailable").empty(); showAll(); var searchQuery = $(".search-twitch").val(); var user = searchQuery.replace(/[^A-Z0-9_]/ig, ""); $.ajax({ url: "//api.twitch.tv/kraken/streams/" + user, dataType: "jsonp", data: { format: "json" },
 success: function (data) { fetchData(data); } }); }

Es izmantoju mazliet regulāras izteiksmes, lai noņemtu īpašās rakstzīmes un atstarpes no lietotāju vaicājuma, atstājot tikai ciparus, burtus un pasvītrojumus. Es domāju, ka tas ir svarīgi, jo Twitch lietotājvārdos nepieļauj īpašas rakstzīmes (piemēram, $, & utt.) Vai atstarpes, tāpēc bija nepieciešams tās filtrēt.

It also helps so that if a user searches for something like “free code camp” (separating whole words with spaces) instead of “freecodecamp”, it still returns the expected relevant result.

So that was pretty much it for this project. You can view the final version on Codepen.

Key Takeaway

Even as I write this blog post, several ways to improve the user experience on my app continue to pop into my head so my key takeaway from this project is:

Software is never finished. It is a process and it is always evolving.

What’s next

Right now, I’m pushing hard to finish the Intermediate Algorithm Scripting section on FCC in the next couple of days so that I can quickly move on to the Advanced Algorithm section.

Mans (īstermiņa) mērķis joprojām ir pretendēt uz front-end sertifikātu līdz maija beigām, un, ja viss izdosies, man līdz tam vajadzētu to iegūt. Novēli man veiksmi.

Ja vēlaties sazināties ar mani vai sazināties ar mani, varat mani atrast vietnē Twitter vai nosūtīt pa e-pastu. Šī ieraksta versija tika publicēta manā personīgajā emuārā.