8 - A to Z Ultimate Guide (2019) - I QISM bilan haqiqiy dunyo uchun chiroyli veb-dastur yarating

Boshqa chirkin darslar loyihalari yo'q! Xayoliy brendlar misollari endi yo'q!

Bugun men sizga qanday qilib Adobe XD, Angular & Firebase-dan foydalanib, dizayndan tortib to ishlab chiqishgacha bo'lgan haqiqiy dunyo uchun chiroyli ob-havo dasturini qanday yaratishni ko'rsatmoqchiman!

Nima uchun?

Men odamlarni ishlab chiqarishga tayyor bo'lmagan narsalarni o'rgatish uchun fonning qizil va asosiy xunuk UI CSS-dan foydalanadigan ishlab chiqaruvchilardan charchadim va bezovtalanaman va Behance va Dribble-da minglab chiroyli, ammo amalda yaroqsiz dizayn loyihalarini ko'rganimda, dizaynerlar hech qachon vaqtlarini olmaydilar. odamlar ulardan foyda olishlari uchun ushbu ilovalarni yaratish va o'rnatish uchun qo'shimcha qadam qo'yib, ularni har qanday usulda foydali qiling.

1 kishi +1 butun loyiha +1 blog post + yaqinda video dars bo'lishi mumkin :)

️ Barcha qo'ng'iroqlar va hushtaklar bilan zaryadlangan

  • Eng so'nggi va eng yaxshi versiyasiga asoslangan Angular
  • Firebase autentifikatsiyasi va Firestore (AngularFire Lite-dan foydalanib)
  • Server tomoni ko‘rsatildi (SEO)
  • 100/100 Lighthouse PWA balli
  • Zamonaviy CSS: Grid Layout & Flex Box
  • Mobil samimiy va to'liq javob beradi
  • 2 rejim: Qorong'u rejim va yorug'lik rejimi
  • Chiroyli Minimalistik dizayn
  • Eslatma: Ushbu qo'llanma ushbu dasturni qanday yaratish va yuqorida sanab o'tilgan xususiyatlarning uzoq ro'yxatini asta-sekinlik bilan to'ldirishni o'z ichiga oladigan seriyalarning bir qismidir va agar siz yangi darslik paydo bo'lganida sizni xabardor qilishimni istasangiz, bu erda mening xabarnomamga yozilishingiz mumkin.

️O'quv qo'llanma qism:

1-qadam: Dizayn

Men Adobe XD-ning so'nggi versiyasida ob-havo dasturini ishlab chiqdim. Dizayn faylini bu erdan yuklab olishingiz mumkin, shunda siz turli xil qatlamlarning yakuniy dizaynni yaratish uchun qanday qilib bir-biriga yopishganligini ko'rishingiz mumkin.

A. Brendlash

Men ushbu brend dizayn orqali asosiy qadriyatlarni aks ettirishini xohlardim va siz uning qichqirayotganini ko'rishingiz mumkin: Minimalistik, sodda, toza va foydalanish oson!

  • Ranglar:

Bu yangi zamonaviy ko'rinishga ega bo'lish uchun 2 ta to'yingan asosiy ranglar

  • Matnlar:

Bu erda faqat "Sans Serif" aktsiyadorlik shriftlari mavjud emas, shuning uchun maksimal ishlash uchun CDN har qanday shriftlarini yuklashimiz shart emas.

  • Logotip:

Logotiplar raketa fani emas! ammo logotip dizaynerlari sizni ishontirishga harakat qilishadi! lekin aslida ular asosan o'zlari yaratgan marosim va mijozni gipnoz qilish uchun ishlab chiqargan film uchun pul to'laydilar.

Bir daqiqa o'ylab ko'ring, 35 dollarga mo'ljallangan Nike logotipi (tasdiq belgisi shakli), Pepsi (eski uchta rangli to'lqinlar logotipini 2008 yilda aylantirish kompaniyaga 1 000 000 dollarga tushdi, bu bir million dollarga teng!)

Qanday bo'lmasin bu erda logotip men oddiy M shaklini yaratdim, u markaning asosiy tangasini ishlatib, ikkita kesishgan kartochkalar yordamida pastga tushirilgan. Oddiy, samarali va eng muhimi 0 $ turadi

B. UI / UX

Ilova asosan yumshoq soyali kartalardan foydalanadi, chunki u suzuvchi qog'ozlar edi. UI bilan bezovta qilmaslik uchun faqat eng muhim ma'lumotlar oldindan namoyish qilinadi va suyuq animatsiyalar UX bo'limida qo'shimcha fikrlarni beradi.

  • Yorug'lik rejimi (asl qiymati)

Qorong'u rejim

  • piktogramma:

foydalanuvchi ob-havo sharoitlarini bir qarashda aytib berishi kerak, shuning uchun men veb-sayt dizayni bilan yaxshi ishlashi uchun noldan boshlab maxsus piktogramlarni yaratdim va bu paketning birinchi versiyasi.

  • rasmlar:

Biz foydalanuvchini iloji boricha taxmin qilish harakatini kamaytirishni xohlaymiz, lekin shu bilan birga bo'sh joyni deyarli hamma narsani yoqimli vizual tasvir bilan to'ldiramiz.

Men yaratgan rasmlar foydalanuvchiga biron bir xatni o'qimasdan tanlangan shaharni aniqlashga yordam berishi kerak, chunki odamlar hozirgi paytda dangasa!

Shaharlar tasvirlari uchun men vizual ravishda boy shahar tafsilotlari sahifasi uchun to'yingan rang palitrasi bilan gradient yorqin dizayn uslubiga murojaat qildim.

Foydalanuvchilar tanlagan har bir shahar uchun rasmni tayyorlash jarayonida men qanday aqldan ozganingizni bilaman. Shubhasiz, bu aqlga sig'maydigan ish, chunki dunyoning 195 ta mamlakati bor, ammo men hozirgacha 4 ta rasm bilan boshladim va 191 yil davomida qolgan qismini yillar davomida loyihalashtirishda davom etdim.

  1. Tunisia illyustratsiyasi:

2. Qatar illyustratsiyasi:

3. Yaponiya rasmlari:

4. Frantsiya illyustratsiyasi:

va to'liq rasmlar loyihasini ko'rish uchun bu erni bosing va mening Behance profilimda ko'ring.

2-qadam: Rivojlanish

Bu erda ko'rsatmalarning aksariyati dastlabki qadamlarning ko'pini tashlab yuborishdi va siz hamma narsani bilasiz deb taxmin qilishadi va keyin sizni taassurot qilish uchun natijani ko'rsatishadi va boshqa hech narsa bo'lmaydi.

Ammo, men ushbu qo'llanmani bajarishga qodir bo'lganlarning barchasini, hatto yangi boshlanuvchilarni ham darsni juda uzoq qilmasdan turib amalga oshirishga va nodejlar va burchakli CLI-ni o'rnatish bilan boshlang'ichni yaratishga harakat qilaman.

bu erdan rasmiy veb-saytdan nodejs-ni o'rnating va OS-da buyruq satrini oching va Angular CLI va typcript-ni dunyo bo'ylab quyidagi satrlardan foydalanib o'rnating:

npm i -g yozuvi
npm i -g @ burchak / krem

shundan so'ng, faqat burchakli CLI-dan foydalanib Ilovani yaratish uchun quyidagi buyruqni bajaring va marshrutlash bayrog'ini qo'shishni unutmang, bu esa dasturni joylashtirish va marshrutlash uchun yaxshi boshlang'ich nuqtani yaratadi.

ng yangi Minimus - ishlov berish

CLI sizning loyihaviy fayllaringizni yaratishni tugatgandan va NPMga kerak bo'lgan barcha bog'liqliklarni o'rnatgandan so'ng, ishlab chiqish serverini ishga tushiramiz va quyidagi buyruq yordamida brauzerda o'z dasturimizni ochamiz (-o bayroq yangi brauzer yorlig'ini avtomatik ravishda avtomatik ravishda ochish uchun). to'g'ri URL manzilini ko'rsatib)

ng xizmat -o

A. andozalar va uslublar

Ammo boshlashdan oldin siz ushbu qo'llanmaning to'liq tarkibiga ega ekanligingizga ishonch hosil qilishni xohlaysiz, shuning uchun shunchaki nusxa ko'chirmang, kodni o'qing, so'ngra muharriringiz va brauzeringizni yonma-yon oching va hamma narsani o'zingiz yozing, chunki bu o'rganishning yagona usuli. Men ushbu ilovani yaratish uchun hamma narsani o'zim kiritdim va siz ham shunday qilishingiz kerak, shunda siz hamma narsani tugatishni boshlaysiz.

Endi biz dasturning asosiy o'rnatilishini tugatgan va endi HTML va CSS-ni yozishni boshlagan loyihaga qaytamiz. Shunday qilib, o'zingizning sevimli matn tahrirlovchisida o'z loyihangizni oching va darhol Woooxda sho'ng'ishga ruxsat bering!

  • App komponenti

biz dasturiy ta'minotning asosiy tarkibiy qismidan o'zimizning navbar tarkibiy qismimiz sifatida foydalanamiz va foydalanuvchi tizimga kirgan yoki kirmaganligimizga qarab uni shartli ravishda yashirmoqchimiz (Biz ikkinchi qismda Angularfire Lite yordamida autentifikatsiyani amalga oshiramiz) .

Bu erda men burchak materiallari kutubxonasidan ba'zi qismlardan foydalanish haqida o'yladim, lekin Angularfire Lite singari haqiqatan ham zarur bo'lmasa, har qanday uchinchi tomon kutubxonasidan qochib, ishlab chiqarish dasturini iloji boricha engilroq qilishga qaror qildim.

Avvalambor, birinchi navbatda app.component.hml ochiladi va CLI tomonidan avtomatik ravishda yaratilgan HTML-ni o'chirib tashlaymiz va HTML-ni quyidagicha ko'rinishga olib kelamiz:

Bonus maslahati (ixtiyoriy):

Agar siz HTML-ni tezroq kiritish usuli sifatida Emmet (muharrir plaginlari) dan foydalanmoqchi bo'lsangiz, men odatda murojaat qiladigan plaginning cheat varag'iga murojaat qilishingiz mumkin.

SVG piktogramma

Bu erda svg piktogramma va logotipni olish uchun Github profilimda yaratgan ro'yxatlar ro'yxati, ularni ishlatishingiz mumkin (bu erda nusxalash va joylashtirishga ruxsat berilgan):

  • gamburger belgisi
  • logotipi
  • ob-havo sharoiti belgilari
  • ikonka yorug'ligini qo'shing
  • karta illyustratsiyasi qo'shing

- Ildiz tarkibiy qismini stilizatsiya qilish

Bizning CSS-ni qandaydir css-ga o'zgartirish vaqti keldi, shunchaki quyidagi css-ni ko'rib chiqing va erishilgan natijani ko'rib chiqing, so'ngra oldingisiga o'ting va o'zingizning css-ni yozing, chunki u aynan bir xil bo'lishi shart emas.

"Ilhomlanib yozmang, chunki hamma san'atkordir"

CSS tushunchasi:

  • Tartib:
displey: panjara;
panjara-shablon-ustunlar: avtomatik;
panjara-shablon-qatorlar: 0,5fr avtomatik;

Bu erda men asosan CSS panjara sxemasidan foydalanmoqdaman, sahifani ajratish uchun satr satrida bitta kichik satr va ikkinchi darajali satrda bizning sahifamizning asosiy tarkibiy qismi bo'lgan yo'riqnoma chiqishi mavjud. Bu haqda kichik diagrammada o'ylang:

  • sidenav
.side-menu__conatiner {
lavozim: sobit;
chap: 0;
tepa: 0}

sidenav konteynerni ko'rish maydonining yuqori chap tomoniga joylashtiradi

.side-menu__container :: oldin {...}

yon paneli ichkariga kirganda, fonni ko'k rang bilan bo'yash uchun ishlatilgan

iroda o'zgarishi: shaffoflik;

to'liq fon shaffofligi o'zgarishi to'g'risida brauzerni oldindan xabardor qilish uchun foydalaniladi, shuning uchun yanada yaxshi ishlash ko'rsatkichiga erishish uchun bu erda o'qishingiz mumkin.

.slide-menyu {o'zgartirish: translateX (-103%); }

bu yon menyuni ko'rish portidan chiqarib yuborishi kerak va biz gamburger menyusini bosganimizda, o'zgartirilgan css xususiyatini qayta tiklaydigan va ko'rinishni chap tomondagi menyudan slaydni tugatadigan "slayd-menyu" faol sinfini qo'shishimiz kerak:

.slide-menyu-faol {o'zgartirish: yo'q; }
  • rejimini almashtirish

Men yashirmoqchi bo'lgan kichik bir foydalanuvchi interfeysi hiyla-nayrangi bu mavzuni o'zgartirish tugmasi. Asosan men standart tasdiqlash oynasining tashqi ko'rinishi css xususiyatini kirishning odatiy stylingini to'liq olib tashlash uchun hech kimga o'rnatmayman (bu displeydan farq qiladi: elementni to'liq yashirmagan) va keyin men almashtirish tugmasi fonida ikkita xil sinfdan foydalanganman. va doirani rangini va o'rnini o'rnini o'zgartirish uchun tarkibiy qismda saqlanayotgan nolClass yo'riqnomasidan foydalanib, tarkibiy qismda saqlanadigan ngClass direktivasidan foydalanib, css sinflarini osongina almashtirishga imkon beradi.

  • Uy komponenti

bu uy tarkibiy qismidir, unda biz foydalanuvchining sevimli shaharlarining turli ob-havo kartalarini ko'rsatamiz va u erdan u o'zining uy sahifasiga yangi shahar qo'shish uchun shaharni qo'shish tarkibiy qismiga yo'naltiradigan shahar qo'shish kartasini bosishi mumkin.

avval ushbu buyruq yordamida CLI yordamida ushbu komponentni yaratishimiz kerak:

ng g c uy

HTML-belgilashda hozirda konteyner va ikkita boshqa tarkibiy qismdan boshqa hech narsa yo'q, lekin biz darslikning kelgusi qismlarida foydalanuvchilarning sevimli shaharlariga qarab kartalarni faol ravishda qo'shamiz:

  • Ob-havo kartasi komponenti

Bu erda ob-havo sharoiti va o'zgarishlarni tekshirish uchun ngSwitch ko'rsatmasi qo'llaniladi

va endi ba'zi bir komponentaning CSS uslubiga murojaat qilamiz:

DarkMode

CSS-da siz aksariyat UI elementlari uchun ikkita sinf qo'shganimni ko'rishingiz mumkin va buning sababi biz qorong'u mavzu uchun -dark suffiksi bilan qo'shimcha css sinflarini qo'shmoqchimiz, shuning uchun ularni ngClass ko'rsatmalariga asoslangan holda yana almashtirishimiz mumkin. Mavzuni almashtirish tugmasi holati.

  • Karta komponentini qo'shing

Bu erda men qo'shimcha UI elementi singari shartli qorong'u rejimi ngClass direktivasiga ega bo'lgan div kartasini qo'shdim va karta bosilganda foydalanuvchi qo'shiladigan shahar sahifasiga o'tish uchun Angular router routerLink atributini qo'shdim.

CSS nuqtai nazaridan bu erda hech qanday murakkab narsa yo'q, chunki asosiy kartada o'z tarkibini teng ravishda joylashtirish uchun 2 qatorni yaratish uchun belbog'li tartib qo'llaniladi. Shuningdek, kartaga engil tomchi soyani qo'shish uchun box-shadow xususiyatini qo'shishni unutmang.

  • Tafsilotlar komponenti

Bu erda ob-havo ma'lumotlarini olish uchun ob-havo xizmatini kiritdim (bundan keyinroq) va har kuni nomini, harorati va ob-havo holatini alohida ommabop o'zgaruvchiga o'rnatib, uni shablonda ko'rishim mumkin:

Shubhasiz, ob-havo xizmatidan olingan ma'lumotlarni filtrlash va o'zgartirish juda ko'p, shuning uchun keyingi qismida ba'zi mantiqlarni xizmatga o'tkazish mumkin.

Iltimos, xotira tushishining oldini olish uchun komponentning ngOnDestroy hayot aylanish kancasida har bir obunani bekor qilishni unutmang.

Tafsilotlar komponentida HTML-ni juda uzoq vaqt yaratgan juda ko'p svglar bor, shuning uchun bu erda to'liq tarkibiy shablon, shu jumladan svg ikonkalari mavjud, shuning uchun uni bu erga kiritish shart emas.

CSS bilan men hozircha qorong'i rejimlarni modellashtirish usulini kuzatdim:

B. Xizmatlar

biz API ob-havo ma'lumotlarini ma'lum bir tarkibiy qismdan olish mantiqini aniqlamoqchimiz va uni butun dastur davomida foydalanishimiz mumkin bo'lgan alohida xizmatga o'tkazmoqchimiz va yana CLI-dan foydalanib xizmat yaratish uchun qisqa qo'l formatidan foydalanmoqchimiz.

  • Ob-havo xizmati
ng g s ob-havo

ushbu xizmat ob-havo ma'lumotlarini olish uchun OpenomachMap API-dan foydalanadi va oxirida tarkibiy qismlarga ma'lumot berishdan oldin ba'zi o'zgarishlar kiritadi. API bizga maksimal va minimal harorat haqida ma'lumot bermaydi va bepul reja bizga faqat 5 kun / 3 soatlik prognoz ma'lumotlariga kirishni cheklaydi, shuning uchun men 3 soatlik harorat oralig'idan o'tib, taxminiy ma'lumotni oldim. maksimal va minimal qiymat.

va mana bu erda Weather.service.ts kodi mavjud:

ko'rib turganingizdek, barcha funktsiyalar biz unga obuna bo'lgan har qanday tarkibiy qismga o'zgartirilgan ma'lumotlarni uzatish uchun foydalanadigan mavzuni qaytaradi. Ushbu bepul ob-havo API-si yutadi va men bu xunuk REST API-ni yanada chiroyli GraphQL-ga qanday o'zgartirish kerakligi haqida ko'rsatma yarataman.

Turli xil xizmat funktsiyalari tezda bajariladi:

- get WeatherState: hozirgi ob-havo holati, masalan bulutli - aniq…

- getCurrentTemp: joriy harorat raqami

- getMinTemp: minimal harorat (3 soatlik interval asosida)

- getMinTemp: minimal harorat (3 soatlik interval asosida)

- getCurrentHum: hozirgi namlik qiymati (raqam)

- getCurrentWind: joriy shamol tezligi (raqam)

- getForecast: 5 kunlik ob-havo ma'lumotlarini olish

- getCityomachByName: satr sifatida taqdim etilgan shahar nomi API-sidan ob-havo ma'lumotlarini qaytaring

- getCitiesomachsByNames: massiv sifatida taqdim etilgan shahar nomlari API-sidan ob-havo ma'lumotlarini qaytaradi

  • UI xizmati

bu kichik interfeys bo'lib, biz foydalanuvchiga UI holatini baham ko'rish uchun tanlangan mavzular rejimi (qorong'u yoki ochiq) kabi keng foydalanamiz.

C. Yo‘nalish

Biz CLI-da o'z dasturimizni yaratishda marshrutlash modulini yaratdik, ammo burchakka turli xil yo'nalishlar (URLlar) va ular bilan bog'liq komponentlar (sahifalar) nima ekanligini tushuntirish uchun routing.module.ts-ga ba'zi o'zgartirishlar kiritishimiz kerak.

Xulosa

Minimus Weather App-ni yaratishda ushbu birinchi qismda juda yaxshi muvaffaqiyatga erishdik, biz dizaynerlik ishlarining ko'p qismini markalashdan UI va UX qarorlarigacha oldik, ko'p HTML va CSS-ni yozdik va uni chiroyli ko'rinishga keltirdik.

Jonli namoyish (V2): https://minimus-weather.web.app

Github Repo: https://github.com/hamedbaatour/Minimus

Vazifalarimiz ro'yxatiga ko'ra, biz hozirgacha nimalar qilganmiz:

  • Eng so'nggi va eng yaxshi versiyasiga asoslangan Angular
  • Zamonaviy CSS: Grid Layout & Flex Box
  • 2 rejim: Qorong'u rejim va yorug'lik rejimi
  • Chiroyli Minimalistik dizayn

ushbu seriyaning keyingi qismlari qolgan funktsiyalar ustida ishlaydi, shuning uchun mening shaxsiy elektron pochta ro'yxatimga obuna bo'lish orqali II qismni o'tkazib yubormaslikka ishonch hosil qiling:

  • bu erda mening xabarnomamga yozilish.

shuningdek, meni twitter @hamedbaatour-da kuzatib borishingiz mumkin, bu erda men jabhada ishlanmalar haqida tweet qilaman.

millionlab marotaba qaysi kurslarni tavsiya qilishimni so'rashganida ... bu erda eng yaxshi kurslar, sizning maqsadingizga qarab investitsiya qilishni maslahat beraman:

Burchak ustasi bo'ling

Butun burchakli ekotizim bilan tanishish uchun eng yaxshi kurs, chunki siz butun ilovani yaratishda mashhur kutubxonalardan foydalanasiz (NgRx-dan foydalangan holda davlat boshqaruvi ham kiradi):

Burchakli (to'liq dastur) burchakli material, Angularfire va NgRx. Reyting: ️️️️️

Arzon bo'lishni bas qiling! Tezroq ko'nikmalarni o'rganing

Internetda tarqalgan tarkibni qidirishga vaqtni isrof qilmang va arzon bo'lishni bas qiling! Siz google-da va YouTube-da darslarni qidirib topib, pulingizni tejaysiz va yaxshi foyda ko'rasiz deb o'ylaysiz, ammo ishoning, vaqtingizni behuda sarflab, yuqori narxni to'laysiz!

Men sizga haqiqatan ham tajribasiz bo'lgan sohalarda Wes Bos tomonidan eng mashhur kurslardan birini taklif qilishni maslahat beraman. Hech narsa zamonaviy va puxta o'ylangan kursni tashkil etmaydi. Bu erda siz e'tiborga olishingiz kerak bo'lgan uning eng ko'p sotiladigan kurslarining ro'yxati

ES6 hamma uchun: zamonaviy JS ko'nikmalarini egallash

Reyting: ️️️️️

Yangi boshlanuvchilar uchun reaktsiya: Real vaqt dasturlarini yaratish

Reyting: ️️️️️

Kengaytirilgan reaktsiya: to'liq stack Advanced React, GraphQL, Node.js

Reyting: ️️️️️

Node.js yordamida dasturlar va API-larni yaratishni o'rganing

Reyting: ️️️️️

Ushbu darslikning II qismini o'qishni davom eting!

Minimus-ga qolgan xususiyatlarni qo'shishda davom etadigan ushbu darslik davomiyligini ko'rib chiqing:

  • Mobil samimiy va to'liq javob beradi
  • WTwitter API integratsiyasi
  • Firebase autentifikatsiyasi va Firestore
  • Igh 100/100 Lighthouse PWA balli
  • va yana ko'p narsalar ...