Жеке әрекеттерді тіркеу журналын жасаңыз: 6 қадам

2024 Автор: John Day | [email protected]. Соңғы өзгертілген: 2024-01-30 10:22

Менің Лондоннан келген досым Пол бір бақылау тақтасында өзінің тамағын, белсенділігін және орналасқан жерін бақылаудың жолын тапқысы келді. Дәл сол кезде ол бақылау тақтасына деректерді жіберетін қарапайым веб -форма құру туралы идеямен келді. Ол веб -форма мен бақылау тақтасын веб -бетке қойып, өз әрекеттерін жолда тіркеп отыратын. Осы жерден әрекетті тіркеуші құрылды! Бұл оқулықтағы код - бұл Пауыл, түсінің өзгеруін, бақылау тақтасын баптауды және сленгті қоспағанда (ағылшын тілінен американдық аударма мен жасаған).

Бұл жоба үшін біз мыналарды қолданамыз:

• CodePen
• Бастапқы күй
• Netlify

Біз жеке белсенділікті қадағалаушы жасаймыз, бірақ осы нұсқаулық пен кодқа сүйене отырып, сіз оны веб -формаға және қалаған нәрсеге арналған трекерге айналдыра аласыз! Бастайық!

1 -қадам: CodePen

CodePen - бұл даму ортасы. Бұл сіздің кодты браузерге жазуға және оның нәтижелерін көруге мүмкіндік береді. Бізде HTML, CSS және JavaScript-те ашылмалы мәзірлер, мәтін ұялары мен геолокациясы бар веб-форма жасау үшін код бар. Сіз кодты жеке жасай алмайтын жалғыз шартпен ақысыз тіркеле аласыз, біз оны кейінірек қарастырамыз.

Алдымен CodePen -ге тіркеліңіз. Сіз мұны жасағаннан кейін, менің жобамды бұрыннан жасалған барлық кодпен бөлуге болады. Бұл сіздің жеке бақылау тақтасында кодтың көшірмесін жасайды. Сіз сол жақта HTML, ортасында CSS және оң жақта JavaScript көресіз. Егер сіз осының бәрін білетін болсаңыз, қалғандарын оқуды ұмытып, қалағаныңызша өзгертулер енгізіңіз! Егер сіз бұл тілдерді жаңадан білетін болсаңыз, төменде сіз жасай алатын өзгерістерге қатысты бірнеше ұсыныстарым бар.

HTML

Бұл код бөлігі барлық ашылмалы мәзірлер мен ұяшықтар үшін формат болып табылады. Дәл осы жерде сіз ашылмалы мәзірлерде бақылайтын және тізімдей алатын нәрселердің түрін өзгерте аласыз. Жаттығулар ашылмалы мәзірінде сіз әрекет түрлерін өзгерте аласыз (қазіргі уақытта салмақ, жүгіру, йога және кардио). Пішімге сәйкес тізімге бірдеңе қосуға немесе басқа опцияларды қосуға болады. Ет түріне, кофенің мөлшері мен түріне және сыраның мөлшеріне де қатысты. Қалаусыз мәтін жолағында толтырғыш сөздерді өзгертуге болады (қазіргі уақытта чипс, шоколад және т.б.). Дәл салмақ (фунт), жаттығу (минут) және сыра (абв %) үшін де осылай жасауға болады.

Сіз сондай-ақ осы контурды қолдана аласыз және тақырыптарды, ашылмалы опцияларды және толтырғыштарды өзгерте аласыз, бұл сізге кез келген трекер түрін жасау үшін.

CSS

Бұл код бөлігі фон түсін, мәтін туралауын және баған туралауын орнатады. Егер сіз фонды қызғылт -қызғылт түстен жағымды нәрсеге өзгерткіңіз келсе, түс түсінің дұрыс мәнін табу үшін интернеттегі түс таңдау құралын пайдаланыңыз. Мәтінді немесе бағандарды оңға, солға немесе ортасына туралауға болады.

JavaScript

Бұл код бөлігі геолокация және жіберу батырмасымен жұмыс істейді. Мұнда көп нәрсе жоқ, мен өзгертуді ұсынамын.

Экспорттау

Барлығын өз қалауыңыз бойынша орнатқаннан кейін, төменгі оң жақтағы экспорттау түймесін басып,.zip ретінде экспорттауды таңдаңыз. Бұл кодты ZIP файлына жүктейді және сіз оны жүктеу қалтасынан көресіз.

2 -қадам: бастапқы күй

Бастапқы күй бізге бақыланатын әрекеттің реттелген бақылау тақтасын құруға мүмкіндік береді. Сіз 14 күндік ақысыз сынақ нұсқасына жазыла аласыз. Содан кейін электрондық пошта мекен -жайы бар студенттерге жеке жоспар үшін айына $ 9.99 тегін.

Сіз кіргеннен немесе тіркелгеннен кейін шелп сөресіне өтіңіз және ағындық шелек жасау түймесін (+бұлт) басу арқылы жаңа деректер ағыны шелегін жасаңыз. Сіз атауды қалағаныңызша өңдей аласыз немесе оны кейін өзгерте аласыз, мен жеке белсенділікті бақылауды таңдадым. Егер сіз Light Theme ұяшығына құсбелгі қойсаңыз, бақылау тақтасына ақ фон бересіз. «Аяқта» түймесін басыңыз, сонда сіздің ағындық шелек жасалады.

HTML кодына (API Endpoint & iframe ендіру) енгізу үшін бізге кейінірек шелек параметрлерінен ақпарат қажет болады.

3 -қадам: Visual Studio коды

Мен CodePen тегін нұсқасын қолданатындықтан, менің барлық кодым ашық. Осы себепті, мен API соңғы нүктелерін және iframe кодын енгізгім келмейді, себебі бастапқы күйге кіру кілттерін құпия сақтау қажет. Visual Studio Code коды CodePen -ден жүктелген zip файлынан жергілікті түрде өңдеуге мүмкіндік береді. Сіз соңғы нұсқаны өз веб -сайтынан ақысыз жүктей аласыз.

Код файлдарын ашыңыз және сол қалтаны Visual Studio Code ішінде ашыңыз. Осыдан кейін сіз HTML кодын өңдей аласыз. Файлдың жоғарғы жағында сіз «ЕНГІЗУ API ШЕШТЕРІН ОСЫНДА» көресіз. Бастапқы күйде жасаған шелекке өту арқылы API соңғы нүктесін таба аласыз, параметрлерді нұқыңыз және Деректер қойындысында сіз API соңғы нүктесін көресіз. Оны HTML кодына көшіріп, қойыңыз. HTML кодының төменгі жағында сіз «ОСЫНДА ЕНГІЗІЛГЕН БӨЛІСТІКТІ КІРУ» дегенді көресіз. Бастапқы күйдегі шелекке тағы да өтіңіз, параметрлер мен Ортақтасу қойындысына өтіңіз. Жалпыға ортақ пайдалану жолағын нұқыңыз, сонда сіз ендіру арқылы бөлісуді көресіз. Орналастыру өрісіндегі URL мекенжайын ғана көшіріңіз (ол «https://iot.app.initialstate.com/embed/#/tiles/xxxxxx» сияқты болады). Мұны тырнақшаға қойыңыз. Файлды сақтаңыз, біз веб -бетті құруға дайынбыз.

4 -қадам: Netlify

Netlify-бұл веб-жобаны құруға, орналастыруға және басқаруға мүмкіндік беретін біртұтас платформа. Сіз ақысыз тіркеле аласыз, осылай жасаңыз. Тіркелгеннен кейін, сіздің негізгі бетіңізде «Git -ке қосылусыз жаңа сайтты қолданғыңыз келе ме? Қалталық сайтыңызды осы жерге сүйреп апарыңыз» деген жазуды көресіз. Жаңартылған CodePen файл қалтасын сол жерге апарып тастаңыз, сол жерден ол сіздің кодты орналастырады және жаңа веб -бетке сілтеме жасайды. Сілтемені басыңыз, сонда сіз өзіңіздің веб -формаңыз бен бақылау тақтасын көресіз.

Плиткалардың пайда болуы үшін сізге кейбір деректерді жіберу қажет. Сондықтан веб -форманы толтырып, жіберуді басыңыз. Мұны істегеннен кейін бастапқы күйдің бақылау тақтасына өтіңіз. Осы жерден біз плиткалардың түрлерін өзгерте аламыз, плиткалардың өлшемін өзгерте аламыз, орналасуды жылжыта аламыз, деректердің түстерін көзге жағымды етіп реттей аламыз және эмодзилерге картаға нақты уақыттағы өрнектерді қосамыз. Бақылау тақтасының ендіру өлшеміне сәйкес келуі үшін сізде екі нұсқа бар: тақтайшаларыңызды кодқа ендіру өлшеміне сәйкестендіру немесе реттеу.

5 -қадам: бақылау тақтасын баптаңыз

Өлшеуіш графиктер

Мен бақылау тақтасында өлшегіштердің екі түрін қолдандым: арка және сұйық. Плитканың түрін өзгерту үшін плитканы тінтуірдің оң жақ түймесімен нұқып, Плитканы өңдеу пәрменін таңдаңыз. Бұл Tile конфигураторын ашады. Сыра өлшемі үшін мен плитка түрі ретінде өлшегіш диаграмманы, ал өлшеуіш стилі ретінде сұйықтықты таңдадым. Мен тақырыпты, сигнал пернесінің түсін және минималды/максималды мәндерді өзгерттім. Weight & Beer ABV үшін мен арка өлшегіш стилін қолдандым.

Эмодзи картасы

Мен жаттығу түрі мен ет түрін нақты уақыттағы өрнектер арқылы эмодзилерге салыстырдым, осылайша ашылмалы тізімнен қай элементті таңдағаныма байланысты белгілі бір эмодзи пайда болады. Сіз мен қолданған кодты фотосуреттерден көре аласыз. Осы веб -сайттан басқару+пәрмен+бос орын немесе Windows жүйесінде пернелер тіркесімін басу арқылы Mac -де эмодзилерді қосуға болады.

Эмодзиді веб -формада жіберіңіз

Қоқыс сияқты нәрселер үшін мен эмодзилерді тікелей бақылау тақтасына жібергенді ұнатамын. Мен эмодзиді көшіріп, веб -формадағы мәтін ұясына қоямын және жіберу түймесін басамын, содан кейін эмодзи менің бақылау тақтасында көрсетіледі!

Мінсіз бақылау тақтасын баптау үшін көп ойнау қажет және опциялар шексіз.

Фондық сурет

Деректерге жеке тұлға немесе контекст беру үшін бақылау тақтасына фондық сурет қосуға болады.

6 -қадам: Қорытынды

Пауыл мұны белсенділікті бақылаушы ретінде құрған кезде, оны кейбір аз өзгерістермен қалай қолдануға болатыны туралы басқа идеялар ұсынды:

• Town Tracker ішіндегі ең жақсы кофе/сыра/мейрамхана
• Менің достарым немесе балаларым қазір қайда және олар не істеп жатыр? Бақылаушы
• Интерактивті гольф картасы - ұпайлар мен курстарды бақылаушы
• Парапланмен ұшатын ұшқыш - (Полдың хоббиі маған қарағанда жақсы)

Енді сіз кез келген нәрсені және бәрін бақылай аласыз. Бұл код сіз жасағыңыз келетін кез келген веб -формаға арналған қабықты қамтамасыз етеді. Сондықтан ойнап, шығармашылықпен айналысыңыз және маған не алғаныңызды көрсетіңіз! Әрине, Пауылға оны жасауға көмектескені үшін қошемет!