StampToolsКриптовалюта аналитикасына арналған dApp
Криптоплатформаға арналған децентрализацияланған қосымша версткасы. Барлығы 12 бет: интерактивті графиктер, кестелер және ыңғайлы интерфейс.
Күрделі жобаның — криптовалюталарды мониторингілеуге арналған децентрализацияланған қосымшаның версткасын жасау бойынша өтініш түсті.
Децентрализацияланған қосымша (dApp) — бұл сервермен емес, блокчейнмен әдетте браузерлік кеңейтім (көбінесе таңдауға болатын бірнеше нұсқасы) арқылы өзара әрекеттесетін қосымша. Әдеттегі қосымшада бір ғана сервер болса, мұнда серверлер өте көп, ал оларды синхрондау үшін күрделі математикалық есептеулер қолданылады.
Негізгі міндет — пайдаланушы өзінің әмиянын пайдалана отырып авторизациядан өте алатындай және сайт бөлек платформа ретінде емес, дәл осы әмиян үшін интерфейс ретінде қызмет ететіндей етіп жасау болды.
Бірақ бәрі мүлдем бұдан басталған жоқ
Бәрі версткадан басталды
Менің бастапқы міндетім HTML, CSS және JS арқылы әдеттегі верстка жасау болды. Стек бойынша ешқандай талаптар болған жоқ, сондықтан мен мұның бәрін әдеттегідей SCSS-тің орнына PostCSS қолданып жазуды шештім.
Бұл бәрібір де панель (басқару панелі) болғандықтан (ал фреймворк жоқ), дубликаттарды болдырмау және қалай болғанда да шатасып кетпеу үшін Nunjucks қолдандым. Көптеген адамдар бұның не екенін мүлдем білмейтін де шығар, бірақ онсыз бұл жоба нағыз қорқынышты түске айналар еді.
Графиктер үшін Chart.js таңдадым. Бұл деректердің аз көлемі үшін ең қарапайым нұсқа (деректердің жалпы көлемі өте үлкен, бірақ оларды бір уақытта шығару көлемі үлкен емес, сондықтан бұл ешқандай мәселе тудырмайды). Интерактивті навигация және аймақты таңдау үшін noUiSlider қолдандым — бұл тәуелділіктері жоқ, салмағы шамамен 5 кб болатын және жүктелу жылдамдығына іс жүзінде ешқандай әсер етпейтін жүгірткілерге (ползунки) арналған кітапхана. Сондай-ақ, ол мүлдем кез келген түрде көріне алады.
Және анықталғандай — ол Chart.js-пен тамаша интеграцияланады.
Біз негізгі шиеленісті сәтке өтпей тұрып, верстканың кейбір экрандарына көз жүгіртуді ұсынамын
Верстка дайын болған кезде, бәрі мінсіз сияқты көрінді. Бірақ backend-пен интеграция жасау қалды. Қосымша децентрализацияланған болса да, блокчейнді ыңғайлы парсингтеу үшін өз API-і бар. Шын мәнінде, backend-те не болғанын елестете де алмаймын, бірақ ол жерде ғажайып бір нәрсе болғаны анық.
Міне, осы сәтте фронтенд пен backend-ті интеграциялау оңай тапсырма болады деп ойлаған әзірлеуші, шамасы, өз қателігін толық түсінді. Осылайша, бұл интеграциямен мен айналыстым.
Үлкен есеппен алғанда, бір беттен басқа ешқандай мәселе туындаған жоқ — дәл осы бетте
Мұнда 12 дерек шығару орны және жалпы алғанда 24 диаграмма бар. Әрбір ауыстырып-қосқан сайын ескі диаграмманы жойып (unmount), API-ге сұраныс жіберіп, жаңа көріністі есептеп, жаңасын көрсету керек. Ал енді біз мұның бәрін үш рет жасап, төмендегі реттегішке байланыстыру керек екенін еске түсіреміз
Күйді (state) сөзбе-сөз қолмен басқаруға тура келді. Бұл ең күрделі тапсырма емес, бірақ оның жүзеге асырылуы, жұмсартып айтқанда, мұнылы көрінді. Негізінде, мұндай тапсырма үшін рендерингке арналған шағын кітапхана жаза салған оңайырақ болар еді… бірақ ол онсыз да бар ғой.
Иә, осы кезеңде жобаға стратегиялық тұрғыдан React қосылды. Оның үстіне, қазіргі уақытта қолданылып жүргендей емес, өзінің бастапқы мақсаты бойынша — бар DOM-тың ішінде кішкентай бөлшектерді рендерингтеу үшін қолданылды. Дәл осындай архитектурада (тек дұрыс және мұқият ойластырылған нұсқасында) сіз қазір бұны оқып отырған сайт жұмыс істейді.
Енді қолмен басқару мен сұраныстардың орнына бізде тек бір ғана компонент және 3 useState болды, оларға қажет болған жағдайда өнімділікті еш жоғалтпастан тағы 10 ауыстырып-қосқыш қосуға болатын еді, ал олар… көптеген жаңа көрсетілім нұсқаларын қосар еді. Сондай-ақ, бұл бастапқыда мүлдем жоспарланбаған функционалды еш қиындықсыз қосуға мүмкіндік берді. Мысалы, ауысу кезіндегі спиннер (жүктелу белгісі).
Ал бар болғаны 7 күннің ішінде бүкіл жоба толықтай React-қа көшірілді. Жалпы алғанда, жобаның ауқымымен өлсесек, бұл таңғажайып жылдамдық, өйткені әрбір бетте графиктер, API-мен интеграциялар және басқа да күрделі функционалдар болды. Иә, негізінде жобаны бастапқыдан-ақ React-та жазу керек еді — егер менен тек верстканы талап етпегенде, солай болар да еді.
Бірақ мұның бәрі маңызды емес. Енді алда одан да қызықты әрі маңызды міндет тұрды
Әмиянмен интеграциялау
Біріншіден, жоба жаңа ғана TypeScript-ке көшірілген болатын. Сондықтан әдетте тек npm-пакеттерді жасаушылар ғана жасайтын нәрсені істеуге тура келді — TypeScript-ке бұл Unisat-тың не екенін және оның ішінде не бар екенін түсіндіру қажет болды. Сондай-ақ, бұл Unisat құралы, құжаттамадағы ақпаратқа қарамастан, әрдайым бірінші реттен жүктеле бермейді.
Сол себепті, біз алдымен белгілі бір уақыттан кейін әмиянның қолжетімді және жүктелгенін бірнеше рет тексереміз, содан кейін ғана пайдаланушыға авторизацияны ұсынамыз.
Пайдаланушыны бейхабар қалдырмау үшін, react-hot-toast арқылы қалқымалы хабарландырулар қосылды — бұл хабарландыруларға арналған сөзбе-сөз ең үздік кітапхана. Хабарландырулар кез келген жерден шығады және кез келгенде кастомизацияланады, оларды қосымшаның кез келген бөлігінен шақыруға болады — бар болғаны бір жолмен!
- Авторизация сәтті өтті
- Қате
Оған қоса бонус ретінде, тек қолмен ғана емес, сонымен қатар операциялық жүйеде орнатылған тақырыпқа байланысты автоматты түрде ауысатын ашық (светлая) тақырып бар
Және ыңғайлы басқаруы бар БАРЛЫҚ беттерге арналған толық мобильді нұсқасы жасалды. Көптеген элементтер мүлдем толық қайта құрылады. Қысқасы, адаптивті нұсқада іс жүзінде браузердің ішіндегі толыққанды мобильді қосымша шығады.
Қорытынды
Барлық қиындықтарға қарамастан, бұл верстка жағынан да, функционал жағынан да ең керемет жобалардың бірі болды. Көптеген жаңа нәрселерді байқап көрдім және көп нәрсені үйрендім.