A legjobb HTML, CSS, Javascript gyakorlat: Chrome kiterjesztés

Azok számára, akik éppen befejezték a Codecademy-t.

A programozás tanulásakor az önálló tanulás leghatékonyabb módja egy termék kifejlesztése. Ez a megközelítés sokkal gyorsabb, mint bármely programozási tanfolyam elvégzése a programozási készségek fejlesztése érdekében.

Általában az emberek elkezdenek megtanulni a HTML, CSS és az alapvető Javascript használatával történő programozást a webes programozásban, azonban a kiszolgálóoldali rész elérése előtt nehéz értelmes alkalmazást készíteni.

Tehát mindig igyekeztem így meggyőzni a diákokat,

Szórakoztató lesz, ha elkezdi megtanulni a szerveroldalt és elindít valamilyen alkalmazást. Kérjük, ne add fel.

de sok hallgató leállítja a programozást, míg a HTML és a CSS szakaszban van.

(Lehet, hogy a HTML-el kezdve nem jó ötlet annak ösztönzésére, hogy tanuljanak programozni.)

Egy nap kinyitottam a Chrome böngészőt, hogy elkezdjem a munkát. Aztán rájöttem, hogy valójában a legjobb alkalmazást használtam, amelyet csak HTML, CSS és Javascript segítségével tudsz építeni.

Lendület

Röviden: ha ezt a kiterjesztést telepíti a Chrome-ra, minden egyes új lap megnyitásakor üdvözlő üzenet jelenik meg egy remek kép felett. A letöltések száma már több millió. Ha még nem használta ezt, nagyon ajánlom telepíteni. Lehet, hogy ezt az alkalmazást új fülönként 2-3 másodpercig élheti meg, de erre a kis pillanatra pihenhet.

Próbáljuk meg klónozni ezt az alkalmazást!

1. fázis: Felkészülés a dolgokra

  • HTML
  • CSS
  • Javascript
  • Szép kép: a unsplash-től
  • manifest.json (a Chrome-ból tölthető be)

Az alkalmazás gyors fejlesztése az volt, hogy a jelenre, és nem a jövőre összpontosítottam. Természetesen fontos, hogy legyen egy konkrét terv, amikor nem ez a szólóprojekt. De! Az önmotiváció élettartama nagyon rövid, tehát amikor úgy érzi, hogy valami fejlesztett, jobb, ha gyorsan befejezi. Ha elkezdi gondolkodni olyan más lehetőségektől, amelyek javítják a terméket, soha nem fejezi be a projektet.

Legyen egyszerű.

Egy weboldalt készítünk egy nagy képpel, egy nagy üdvözlő üzenettel és talán a jelenlegi idővel.

Keressen egy képet

Ha ellátogat az Unsplash webhelyre, rengeteg jó licenc nélküli képet talál.

Mivel Norvégiában vagyok, úgy döntöttem, hogy ezt a képet használom.
Köszönöm, Vidar Nordli-Mathisen. (Mindig fontos elismerni tehetségüket.)

Fotó: Vidar Nordli-Mathisen az Unsplash-en

Készítsen egy projektet

Egyszerű Egyszerű Egyszerű

Egy HTML fájl, egy CSS, egy Javascript és egy manifeszt fájl.

Ez minden, amire szükségünk van.

Oké, ez az első verzió.

Ez egy egyszerű weboldal. Most, hogy töltse le a Chrome-ból, hozzá kell adnia a következő manifest.json fájlt.

A „chrome_url_overrides” a legfontosabb tulajdonság ebben az alkalmazásban.

Ugrás a kiterjesztés oldaláraKattintson a „Csomagolás kicsomagolása” gombraKattintson a Kiválasztás gombra a projekt mappájábanAlázatos kiterjesztésünk ...Minden alkalommal, amikor megnyitja az új lapot, megjelenik az egyszerű weboldal.

Most már elkészült az első projektünk.

Csak ezzel a funkcióval használható. Lehet, hogy szerkesztheti a szöveget olyanra, amellyel motiválni kívánja magát, például: „lehetetlen semmi”, „csak csináld”, „mi vagyunk a világ”, valami-valami. Vagy inkább elhelyezi a családi fotót.

De tegyük jobbá ezen.

2. szakasz: Fel kell venni a dolgokat

  • Aktuális idő
  • Névváltoztatás funkció
  • Képváltó funkció

E három új szolgáltatás beillesztése érdekében az alábbiak szerint megváltoztattam a HTML fájlt.

A CSS-t is meg kell változtatni.

Akkor az új oldal olyan lesz, mint az alábbiak.

Ó, azt hittem, hogy lendület :)

A manifest.json frissítése

Most hozzáadunk két funkciót.

Mindenekelőtt hozzáadunk egy bemeneti űrlapot ehhez az alkalmazáshoz, hogy az emberek meg tudják adni a nevüket. Ezt az űrlapot hozzáadjuk a „Hello, Jungwon Seo” üzenethez.

Ez csúnya, javítsuk meg

Új stílus a bemeneti címkéhez.

Oké, sokkal jobb.

Mostantól gondolkodnunk kell ezen információk tárolásának módjáról.

A „cookie” -t fogjuk használni, de nem használhatja a „cookie” -t, ha csak megnyitja a HTML fájlt a Chrome böngészőből. Próbáljon meg tesztelni, miután betöltötte Chrome-kiterjesztésként.

Az előző bejegyzésben helytelen információ volt a tárolási engedélyről. A „süti” használatához nincs szükség „tárolási” engedélyre.

Továbbá, mivel továbbra is szívesebben használom a jQuery-t, tegyük hozzá.

Megpróbáltam hozzáadni a jQuery CDN-t, de…

Ne aggódjon, csak még egy tulajdonságot kell hozzáadnia a manifest.json webhelyhez.

Jó, most készen állunk a kódolásra a script.js fájlban.

Először azt akarom csinálni:

  1. A felhasználók beírása a nevükbe.
  2. Tárolja a sütibe (csak a legnépszerűbb kódot használjuk)
  3. Kihúzza a beviteli űrlapot, és elhalványul az üdvözlő üzenetben.

Ez az első alkalom, hogy úgy gondoljunk, mint egy igazi fejlesztő.

1. eset: Amikor először nyitja meg.
2. eset: Ha a nevét beírása után megnyitja.

El kell döntenünk, hogy mi legyen látható és mi nem.

1. eset:
Idő: aktuális idő
Üdvözlő üzenet: Mi a neve?
Beviteli forma: Látható

2. eset:
Idő: aktuális idő
Üdvözlő üzenet: Hello, !
Beviteli forma: Láthatatlan

És e két eset megkülönböztetésének módja az, ha ellenőrizzük, hogy a süti rendelkezik-e a „felhasználónév” kulccsal.

Az időfrissítési funkcióval az új script.js az alábbiakhoz hasonló lesz.

A név beírása előttA név beírása után

Oké, úgy tűnik, működik.

Természetesen van néhány dolog, amelyet még javítanunk kell, például az átmeneti hatások.

De én megadom neked.

Most mi van még?

Hozzá kell adnunk azt a funkciót, amely lehetővé teszi a felhasználók számára a kép megváltoztatását.

Unsplash API

Könnyen regisztrálhatja alkalmazását, és beszerezhet egy tokent ezen az oldalon.

Az Unsplash API használatához regisztrálnia kell alkalmazását a fejlesztői oldalon.

Az „Új alkalmazás” gombra kattintva regisztrálhatja sajátját.

A demonstrációs termékhez óránként akár 50 kérést is felhasználhat. És ez elég számunkra.

Csak töltse ki az alábbi űrlapot, amennyit csak akar.

Írjon be bármilyen nevet

Ha létrehozza az alkalmazást, akkor megjelenik a „Kulcsok” rész az átirányított webhelyről.

Töröltem ezt az alkalmazást, tehát nincs értelme kipróbálni.

Csak át kell másolnia az „Access Key” -t, és hozzá kell rendelnie az „ACCESS_KEY” javascript változóhoz.

A keresési API-t fogjuk használni.

Itt van a forgatókönyv. Minden embernek különféle érdekei vannak. Tehát előbb fel szeretném kérdezni érdeklődésüket, majd az Unsplash API használatával megkeresem ezt a képet. Ezt követően 12 óránként frissítem a képet (ugyanaz a kulcsszó, más kép).

Tehát az AJAX funkció lesz az alábbiak szerint.

Ezt a funkciót akkor hívják meg, miután beírta az érdeklődését.

Aztán, amint számíthat rá, ismét fejlesztőnek kell lennünk.

1–1. Eset: Nagyon először
1–2. Eset: A név után
2. eset: Miután beírta az érdeklődését
3. eset: 12 órával később.

Oké, döntsünk egyenként.

Az 1–1. Esetben el kell rejtenünk az összes képet. Ezt hagyja ki.

Az 1–2. Esetben csak megmutatja az érdeklődés beviteli formáját.

A 2. esetben hívja az AJAX-t, és mentse el a képinformációkat.

A 3. esetnél állítsuk be a lejárati időt 12 órára, és ha a süti üres, hívjuk újra az AJAX kérést.

Kulcsszó: London

Igen, működik.

3. fázis: Záró érintések

A fotós jóváírása nem kötelező, de miért nem?

Írhatunk még néhány sornyi kódot, és jóváírhatjuk a fotós nevét és oldalát a bal felső sarokban.

Annak érdekében, hogy felhasználjuk a fotós adatait, amikor először ellenőrzi a sütit.

Még egy dolog, mi van, ha valaki meg akarja változtatni érdeklődését?

Tegyük hozzá azt a funkciót, amely lehetővé teszi az emberek számára, hogy újraírják érdeklődésüket.

Mielőtt rákattint a gombra

Nesze. Ha rákattint az „Új érdeklődés kiválasztása” gombra, akkor megnyílik a beviteli űrlap, ahol korábban gépelt.

Miután rákattintott a gombra

4. fázis: Készítse el saját termékét.

Csak azt akarom, hogy megtapasztalja a folyamatot az elejétől a végéig. Ennek ellenére ezt egyedül kell fejlesztenie, hogy valóban elsajátítsa a megtanult készségeket.

Vannak olyan funkciók, amelyeket Ön szerint jó lenne beépíteni, például a véletlenszerű kép kiválasztásának módja. Vagy azt gondolhatja, hogy néhány kódom nem hatékony. Javíthatja ugyanazon termék verzióját egy jobb kóddal.

Sok szerencsét és ne add fel!

A teljes verzió itt található: https://github.com/thejungwon/MyChromeExtension

Ezt a történetet a Figyelemre méltó könyvben teszik közzé, ahol minden nap 10 000 olvasó érkezik, hogy megismerjék azokat az embereket és ötleteket, amelyek meghatározzák az általunk kedvelt termékeket.

Kövesse kiadványunkat, ha további termék- és tervezési történeteket szeretne megtekinteni a Journal csapata által.