የግል እንቅስቃሴ ምዝግብ ማስታወሻ ይገንቡ 6 ደረጃዎች

2024 ደራሲ ደራሲ: John Day | [email protected]. ለመጨረሻ ጊዜ የተሻሻለው: 2024-01-30 07:29

የለንደኑ ጓደኛዬ ፖል በአንድ ዳሽቦርድ ውስጥ ምግቡን ፣ እንቅስቃሴውን እና ቦታውን የሚከታተልበትን መንገድ መፈለግ ፈለገ። ያኔ ውሂብን ወደ ዳሽቦርድ የሚልክ ቀለል ያለ የድር ቅጽ ለመፍጠር ሀሳቡን ያወጣው እሱ ነው። እሱ ሁለቱንም የድር ቅጽ እና ዳሽቦርድ በድረ -ገጽ ውስጥ ያስቀምጥ እና እንቅስቃሴዎቹን በጉዞ ላይ ያስገባል። ከዚያ የእንቅስቃሴ ምዝግብ ማስታወሻ ተፈጥሯል! በዚህ የመማሪያ ክፍል ውስጥ ያለው ኮድ ሁሉም ጳውሎስ ነው ፣ በቀለም ፣ በዳሽቦርድ ማበጀት እና በንግግር (በእኔ የተከናወነው ከእንግሊዝ ወደ አሜሪካ ትርጉም)።

ለዚህ ፕሮጀክት እኛ እንጠቀማለን-

• CodePen
• የመነሻ ግዛት
• Netlify

እኛ የግል የእንቅስቃሴ መከታተያ እንፈጥራለን ፣ ግን ይህንን መማሪያ እና ኮድ በመከተል ይህንን ወደ ድር ቅጽ እና መፈለጊያ ለሚፈልጉት ሁሉ ማድረግ ይችላሉ! እንጀምር!

ደረጃ 1: CodePen

CodePen የልማት አካባቢ ነው። በሚሄዱበት ጊዜ የእርስዎን ኮድ በአሳሽ ውስጥ እንዲጽፉ እና ውጤቱን እንዲያዩ ያስችልዎታል። በኤችቲኤምኤል ፣ በሲኤስኤስ እና በጃቫስክሪፕት ውስጥ ተቆልቋዮች ፣ የጽሑፍ ሳጥኖች እና ጂኦግራፊያዊ አቀማመጥ ያለው የድር ቅጽ ለመፍጠር ኮድ አለን። በኋላ የምንመለከተውን ኮድዎን የግል ማድረግ ባለመቻሉ በነጻ መመዝገብ ይችላሉ።

በመጀመሪያ ለ CodePen ይመዝገቡ። አንዴ ይህን ካደረጉ ቀደም ሲል በተፈጠረው ኮድ ሁሉ የእኔን ፕሮጀክት ማጠንከር ይችላሉ። ይህ በእራስዎ ዳሽቦርድ ውስጥ የኮዱን ቅጂ ይፈጥራል። በግራ በኩል ኤችቲኤምኤል ፣ በማዕከሉ ውስጥ ሲኤስኤስ ፣ እና በቀኝ በኩል ጃቫስክሪፕት ያያሉ። በእነዚህ ሁሉ ውስጥ ኤክስፐርት ከሆኑ ቀሪውን ማንበብዎን እና እንደወደዱት ለውጦችን ያድርጉ! ለእነዚህ ቋንቋዎች አዲስ ከሆኑ ፣ በቀላሉ ሊያደርጓቸው በሚችሏቸው ለውጦች ላይ ከዚህ በታች አንዳንድ ጥቆማዎች አሉኝ።

ኤችቲኤምኤል

ይህ የኮድ ቁራጭ ለሁሉም ተቆልቋዮች እና ሳጥኖች ቅርጸት ነው። በተቆልቋዮቹ ውስጥ የሚከታተሏቸውን እና የዘረዘሯቸውን ነገሮች ዓይነት መለወጥ የሚችሉት እዚህ ነው። በአካል ብቃት እንቅስቃሴ ተቆልቋይ ውስጥ የእንቅስቃሴ ዓይነቶችን (በአሁኑ ጊዜ ክብደት ፣ ሩጫ ፣ ዮጋ እና ካርዲዮ) መለወጥ ይችላሉ። ቅርጸቱን ተከትሎ በዝርዝሩ ውስጥ የሆነ ነገር ማከል ወይም ተጨማሪ አማራጮችን ማከል ይችላሉ። ተመሳሳይ ነገሮች የስጋ ዓይነት ፣ የቡና መጠን እና ዓይነት እና የቢራ መጠን ናቸው። በጁንክ የጽሑፍ ሳጥን ውስጥ የቦታ ያዥ ቃላትን (በአሁኑ ጊዜ ቺፕስ ፣ ቸኮሌት ፣ ወዘተ) መለወጥ ይችላሉ። ለክብደት (ፓውንድ) ፣ የአካል ብቃት እንቅስቃሴ (ደቂቃዎች) እና ቢራ (abv %) ተመሳሳይ ነገር ሊደረግ ይችላል።

እንዲሁም ይህንን ድር ቅጽ ማንኛውንም ዓይነት መከታተያ ለማድረግ ይህንን ረቂቅ መጠቀም እና ርዕሶቹን ፣ ተቆልቋይ አማራጮችን እና ቦታ ያዥዎችን ሙሉ በሙሉ መለወጥ ይችላሉ።

ሲ.ኤስ.ኤስ

ይህ የኮድ ቁራጭ የጀርባውን ቀለም ፣ የጽሑፍ አሰላለፍን እና የአምድ አሰላለፍን ያዘጋጃል። ከማቅለሽለሽ ሮዝ ወደ ይበልጥ አስደሳች ወደሆነ ነገር መለወጥ ከፈለጉ ትክክለኛውን የቀለም ዋጋ ለማግኘት የመስመር ላይ ቀለም መራጭ ይጠቀሙ። ጽሑፉን ወይም ዓምዶችን በቀኝ ፣ በግራ ወይም በማዕከል ማስተካከል ይችላሉ።

ጃቫስክሪፕት

ይህ የኮድ ቁራጭ የጂኦግራፊያዊ አቀማመጥ ቁልፍን እና የማስረከቢያ ቁልፍን ይሠራል። እዚህ ብዙ የለም ለመለወጥ እመክራለሁ።

ወደ ውጭ ላክ

አንዴ ሁሉም ነገር ወደ እርስዎ ፍላጎት ከተዋቀረ ፣ ከታች በስተቀኝ ያለውን ወደውጪ መላኪያ ቁልፍን ጠቅ ያድርጉ እና እንደ.zip ወደ ውጭ መላክን ይምረጡ። ይህ ኮዱን ወደ ዚፕ ፋይል ያውርዳል እና በእርስዎ ውርዶች አቃፊ ውስጥ ያዩታል።

ደረጃ 2 የመጀመሪያ ሁኔታ

የመነሻ ሁኔታ እኛ የምንከታተለውን እንቅስቃሴ ብጁ ዳሽቦርድ እንድንፈጥር ይፈቅድልናል። ለ 14 ቀናት ነፃ የሙከራ ጊዜ መመዝገብ ይችላሉ። ከዚያ በኋላ ለኤዲ ኢሜል አድራሻ ላላቸው ተማሪዎች ወይም ለግለሰብ ዕቅድ በወር $ 9.99።

አንዴ ከገቡ ወይም ከተመዘገቡ ወደ ባልዲ መደርደሪያዎ ይሂዱ እና የፍሰት ዥረት ባልዲ ቁልፍን (+ደመና) ጠቅ በማድረግ አዲስ የውሂብ ዥረት ባልዲ ይፍጠሩ። በሚፈልጉት ነገር ላይ ስሙን ማርትዕ ወይም በኋላ መለወጥ ይችላሉ ፣ እኔ የግል እንቅስቃሴ መከታተያ መርጫለሁ። የብርሃን ገጽታ ሳጥኑን ምልክት ካደረጉ ፣ ዳሽቦርዱን ነጭ ዳራ ይሰጡታል። ጠቅ ያድርጉ እና የዥረት ባልዲዎ ይፈጠራል።

ወደ የኤችቲኤምኤል ኮድ (የኤፒአይ መጨረሻ ነጥብ እና iframe መክተቻ) ውስጥ ለመግባት ከባልዲ ቅንብሮች በኋላ መረጃ እንፈልጋለን።

ደረጃ 3 የእይታ ስቱዲዮ ኮድ

የ CodePen ን ነፃ ስሪት ስለምጠቀም ሁሉም የእኔ ኮድ ይፋዊ ነው። በዚህ ምክንያት ፣ የመጀመርያው የመዳረሻ ቁልፎችዎን የግል አድርገው መያዝ ስለሚኖርብዎት የኤፒአይ መጨረሻዎቼን እና iframe ኮዱን ውስጥ ማስገባት አልፈልግም። የእይታ ስቱዲዮ ኮድ ከኮዴፔን ካወረድኩት ዚፕ ፋይል በአከባቢ ኮዴን እንድስተካከል ያስችለኛል። የቅርብ ጊዜውን ስሪት ከድር ጣቢያቸው በነፃ ማውረድ ይችላሉ።

የኮድ ፋይሎችዎን ይንቀሉ እና ያንን አቃፊ በእይታ ስቱዲዮ ኮድ ውስጥ ይክፈቱ። ከዚህ ሆነው የኤችቲኤምኤል ኮድ ማርትዕ ይችላሉ። በፋይሉ አናት ላይ “እዚህ ያስገቡ ኤፒአይ እዚህ ያስገባሉ” የሚለውን ያያሉ። በመነሻ ሁኔታ ላይ ወደፈጠሩት ባልዲ በመሄድ የኤፒአይ ማብቂያ ነጥቡን ማግኘት ይችላሉ ፣ ቅንብሮችን ጠቅ ያድርጉ እና በውሂብ ትር ስር የኤፒአይ መጨረሻ ነጥብን ያያሉ። ይህንን ወደ HTML ኮድ ይቅዱ እና ይለጥፉ። ከታች የኤችቲኤምኤል ኮድ “እዚህ ይግቡ SHARE እዚህ” የሚለውን ያያሉ። እንደገና በመነሻ ሁኔታ ውስጥ ወደ ባልዲዎ ይሂዱ ፣ ወደ ቅንብሮች እና የማጋሪያ ትር ይሂዱ። በአደባባይ ያጋሩ የሚለውን ሳጥን ጠቅ ያድርጉ እና ያጋሩ በ Embed ያያሉ። በተካተተው የማጋሪያ ሳጥን ውስጥ ዩአርኤሉን ብቻ ይቅዱ (እንደ «https://iot.app.initialstate.com/embed/#/tiles/xxxxxx» ያለ ነገር ይመስላል)። ያንን በጥቅስ ምልክቶች ውስጥ ይለጥፉ። ፋይሉን ያስቀምጡ እና የእኛን ድረ -ገጽ ለመፍጠር ዝግጁ ነን።

ደረጃ 4 ፦ Netlify

Netlify የድር ፕሮጄክትን ለመገንባት ፣ ለማሰማራት እና ለማስተዳደር የሚያስችል ሁሉን-በአንድ መድረክ ነው። በነጻ መመዝገብ ይችላሉ ስለዚህ ያንን ያድርጉ። አንዴ ከተመዘገቡ በዋናው ገጽዎ ላይ “ከ Git ጋር ሳይገናኙ አዲስ ጣቢያ ማሰማራት ይፈልጋሉ? የአቃፊ ጣቢያዎን ይጎትቱ እና እዚህ ይጣሉ” የሚል ሳጥን ታያለህ። ስለዚህ የዘመነውን የ CodePen ፋይል አቃፊዎን ወደዚያ ይጎትቱትና ይጥሉት። ከዚያ ኮድዎን ያሰማራል እና ወደ አዲሱ የድር ገጽዎ አገናኝ ይፈጥራል። አገናኙን ጠቅ ያድርጉ እና የድር ቅጽዎን እና ዳሽቦርድዎን ያያሉ።

ሰቆችዎ እንዲታዩ አንዳንድ ውሂብ ማስገባት አለብዎት። ስለዚህ የድር ቅጽዎን ይሙሉ እና አስገባን ይምቱ። አንዴ ይህን ካደረጉ ወደ የመጀመሪያ ግዛት ዳሽቦርድዎ ይግቡ። ከዚህ ሆነው የሰድር ዓይነቶችን መለወጥ ፣ ሰቆች መጠኑን መለወጥ ፣ አቀማመጥን ማንቀሳቀስ ፣ ለዓይኖች የበለጠ አስደሳች እንዲሆን የውሂብ ቀለሞችን ማስተካከል እና ወደ ኢሞጂዎች ካርታ አንዳንድ የእውነተኛ ጊዜ መግለጫዎችን ማከል እንችላለን። ዳሽቦርድዎ ከተከተተው መጠን ጋር እንዲስማማ ለማድረግ ሁለት አማራጮች አሉዎት -ኮዶች ውስጥ የመገጣጠም መጠንን እንዲገጣጠም ወይም እንዲያስተካክሉ የእርስዎን ሰቆች ያስተካክሉ።

ደረጃ 5 ዳሽቦርድዎን ያብጁ

የመለኪያ ግራፎች

በእኔ ዳሽቦርድ ውስጥ ሁለት ዓይነት መለኪያዎችን እጠቀም ነበር - ቅስት እና ፈሳሽ። የሰድር ዓይነትን ለመለወጥ በሰድር ላይ በቀኝ ጠቅ ያድርጉ እና ይምረጡ ሰድር አርትዕ። ይህ የሰድር አወቃቀሩን ይከፍታል። ለቢራ መጠን እኔ የመለኪያ ገበታን እንደ የሰድር ዓይነት እና ፈሳሽ እንደ የመለኪያ ዘይቤ መርጫለሁ። እኔ ርዕሱን ፣ የምልክት ቁልፍ ቀለሙን እና ዝቅተኛ/ከፍተኛ እሴቶችን እንዲሁ ቀይሬያለሁ። ለክብደት እና ቢራ ABV እኔ የቅስት መለኪያ ዘይቤን እጠቀም ነበር።

ወደ ስሜት ገላጭ ምስሎች ካርታ

የእውነተኛ ጊዜ መግለጫዎችን በመጠቀም የአካል ብቃት እንቅስቃሴውን ዓይነት እና የስጋ ዓይነትን ወደ ስሜት ገላጭ ምስሎች ካርታ ሰጥቻለሁ ስለዚህ ከተቆልቋይ ዝርዝሩ ውስጥ የትኛውን ንጥል እንደመረጥኩ አንድ የተወሰነ ስሜት ገላጭ ምስል ይታያል። በፎቶዎቹ ውስጥ የተጠቀምኩበትን ኮድ ማየት ይችላሉ። በዚህ ድር ጣቢያ ላይ የቁጥጥር+ትዕዛዝ+የቦታ አሞሌን ወይም በዊንዶውስ ላይ በማክ ላይ ኢሞጂዎችን ማከል ይችላሉ።

ኢሞጂዎችን በድር ቅጽ ይላኩ

እንደ ጁንክ ላሉት ነገሮች ስሜት ገላጭ አዶዎችን በቀጥታ ወደ ዳሽቦርድዬ መላክ እወዳለሁ። ኢሞጂውን በድር ቅጽ የጽሑፍ ሳጥን ውስጥ ቀድቼ እለጥፈዋለሁ እና አስገባን ጠቅ ያድርጉ ከዚያ ኢሞጂው በእኔ ዳሽቦርድ ውስጥ ይታያል!

ትክክለኛውን ዳሽቦርድ ለማበጀት ብዙ መጫወት ይጠይቃል እና አማራጮቹ ማለቂያ የሌላቸው ናቸው።

የበስተጀርባ ምስል

ተጨማሪ ስብዕና ወይም አውድ እንዲሰጥዎት ዳሽቦርድዎ ላይ የዳራ ምስል ማከል ይችላሉ።

ደረጃ 6 መደምደሚያ

ጳውሎስ ይህንን እንደ የእንቅስቃሴ መከታተያ ሲገነባ ፣ ይህ ከአንዳንድ ጥቃቅን ለውጦች ጋር እንዴት ጥቅም ላይ ሊውል እንደሚችል ሌሎች ሀሳቦችን አቅርቧል-

• በከተማ መከታተያ ውስጥ ምርጥ ቡና/ቢራ/ምግብ ቤት
• ጓደኞቼ ወይም ልጆቼ አሁን የት አሉ እና ምን እያደረጉ ነው? መከታተያ
• በይነተገናኝ የጎልፍ ውጤት ካርድ - ውጤቶች እና ኮርሶች መከታተያ
• Paragliding Flight Flight Logger - (ጳውሎስ ከእኔ ይልቅ በጣም ቀዝቃዛ የትርፍ ጊዜ ማሳለፊያዎች አሉት)

አሁን ማንኛውንም ነገር እና ሁሉንም ነገር መከታተል ይችላሉ። ይህ ኮድ መፍጠር ለሚፈልጉት ለማንኛውም የድር ቅጽ ዓይነት ቅርፊቱን ይሰጣል። ስለዚህ ዙሪያውን ይጫወቱ እና ፈጠራን ያግኙ እና ያገኙትን ያሳዩኝ! እና በግልጽ ፣ ጳውሎስ ይህንን በመረዳቱ ደስ ይለዋል!