ዝርዝር ሁኔታ:

ናኖ 33 IoT + EC/pH/ORP + WebAPK: 8 ደረጃዎች
ናኖ 33 IoT + EC/pH/ORP + WebAPK: 8 ደረጃዎች

ቪዲዮ: ናኖ 33 IoT + EC/pH/ORP + WebAPK: 8 ደረጃዎች

ቪዲዮ: ናኖ 33 IoT + EC/pH/ORP + WebAPK: 8 ደረጃዎች
ቪዲዮ: Nano Technology 2024, ሀምሌ
Anonim
ናኖ 33 IoT + EC/pH/ORP + WebAPK
ናኖ 33 IoT + EC/pH/ORP + WebAPK

በደራሲው ተጨማሪ ይከተሉ

ከ TICK Stack እና NoCAN Platform ጋር EC/pH/ORP ውሂብ ያከማቹ እና ግራፍ ያድርጉ
ከ TICK Stack እና NoCAN Platform ጋር EC/pH/ORP ውሂብ ያከማቹ እና ግራፍ ያድርጉ
ከ TICK Stack እና NoCAN Platform ጋር EC/pH/ORP ውሂብ ያከማቹ እና ግራፍ ያድርጉ
ከ TICK Stack እና NoCAN Platform ጋር EC/pH/ORP ውሂብ ያከማቹ እና ግራፍ ያድርጉ
ከአይቦርድ ጋር የ IoT ገንዳ ክትትል
ከአይቦርድ ጋር የ IoT ገንዳ ክትትል
ከአይቦርድ ጋር የ IoT ገንዳ ክትትል
ከአይቦርድ ጋር የ IoT ገንዳ ክትትል
IoT Hydroponics - የ IBM ዋትሰን ለ PH እና EC መለኪያዎች በመጠቀም
IoT Hydroponics - የ IBM ዋትሰን ለ PH እና EC መለኪያዎች በመጠቀም
IoT Hydroponics - የ IBM ዋትሰን ለ PH እና EC መለኪያዎች በመጠቀም
IoT Hydroponics - የ IBM ዋትሰን ለ PH እና EC መለኪያዎች በመጠቀም

ስለ: በአርዲኖ ወይም በ Raspberry Pi ፕሮጀክት ላይ ፒኤች ፣ ኦርፒ ፣ ኤሲ ወይም ጨዋማነትን የመለካት ችሎታ ይጨምሩ። ተጨማሪ ስለ ufire »

EC ፣ pH ፣ ORP እና የሙቀት መጠንን የሚለካ መሣሪያ። የመዋኛ ገንዳ ወይም የሃይድሮፖኒክ ቅንብርን ለመቆጣጠር ሊያገለግል ይችላል። በብሉቱዝ ዝቅተኛ ኢነርጂ በኩል ይገናኛል እና ድር ብሉቱዝን በመጠቀም መረጃውን በድረ -ገጽ ላይ ያሳያል። እና ለመዝናናት ፣ ይህንን ከድር ሊጭኑት ወደሚችሉ ተራማጅ የድር መተግበሪያ እንለውጠዋለን።

ደረጃ 1 - እነዚህ ሁሉ ውሎች ምንድናቸው?

EC/pH/ORP/የሙቀት መጠን በጣም የተለመዱ የውሃ ጥራት መለኪያዎች ናቸው። የኤሌክትሪክ ምዘና (ኢ.ሲ.) በሃይድሮፖኒክስ ውስጥ የተመጣጠነ ምግብን መፍትሄ ፣ የውሃው አሲድ ምን ያህል አሲዳማ/መሰረታዊ እንደሆነ ፣ እና ኦርፒ የውሃው እራሱን የመበከል ችሎታን ለመወሰን ይረዳል።

  • ብሉቱዝ ዝቅተኛ ኢነርጂ መረጃን በቀላሉ ለመላክ እና ለመቀበል ገመድ አልባ ፕሮቶኮል ነው። በዚህ ፕሮጀክት ውስጥ ጥቅም ላይ የዋለው የአርዱዲኖ ቦርድ ናኖ 33 IoT ሲሆን ከ WiFi እና BLE በይነገጾች ጋር ይመጣል።
  • ድር ብሉቱዝ አንድ ድረ -ገጽ በቀጥታ ከ BLE መሣሪያ ጋር እንዲገናኝ በ Google Chrome አሳሽ (እና ኦፔራ) ውስጥ የተተገበሩ የኤፒአይዎች ስብስብ ነው።
  • ተራማጅ የድር መተግበሪያዎች በመሠረቱ እንደ መደበኛ መተግበሪያዎች የሚሰሩ የድር ገጾች ናቸው። Android እና iPhone በተለየ መንገድ ይይ handleቸዋል ፣ እና እነሱ በዴስክቶፖች ላይ የተለያዩ ናቸው ፣ ስለዚህ ለተወሰኑ ዝርዝሮች ትንሽ ማንበብ ያስፈልግዎታል።

ደረጃ 2 - ሃርድዌር

ሃርድዌር
ሃርድዌር
ሃርድዌር
ሃርድዌር

ሃርድዌሩን ከመሰብሰባችን በፊት አንድ የሚያስተካክለው ነገር አለ። የ uFire ISE ዳሳሽ መሣሪያዎች ከተመሳሳይ የ I2C አድራሻ ጋር ይመጣሉ እና እኛ ሁለት እየተጠቀምን ነው ፣ ስለሆነም አንድ ሰው መለወጥ አለበት። ለዚህ ፕሮጀክት ፣ ከአይኤስኢ ቦርዶች አንዱን እንመርጣለን እና ኦርፒን ለመለካት እንጠቀምበታለን። እዚህ ያሉትን ደረጃዎች በመከተል አድራሻውን ወደ 0x3e ይለውጡ።

አሁን አድራሻው ተቀይሯል ፣ ሃርድዌርን አንድ ላይ ማድረጉ ቀላል ነው። ሁሉም የአነፍናፊ መሣሪያዎች የ Qwiic አገናኝ ስርዓትን ይጠቀማሉ ስለዚህ ሁሉንም በአንድ ሰንሰለት ውስጥ አንድ ላይ ያገናኙ። አንዱን ዳሳሾች ከናኖ 33 ጋር ለማገናኘት አንድ Qwiic to Male wire ያስፈልግዎታል። ጥቁር ከናኖው GND ፣ ከቀይ ወደ +3.3V ወይም +5V ፒን ፣ ሰማያዊ ወደ ኤስዲኤ ፒን A4 ፣ እና ቢጫ በ A5 ላይ ካለው የ SCL ፒን ጋር ያገናኙ።

ለዚህ ፕሮጀክት የሙቀት መረጃው ከ EC ዳሳሽ እንደሚመጣ ይጠብቃል ፣ ስለዚህ የሙቀት ዳሳሽ ከ EC ቦርድ ጋር ማያያዝዎን ያረጋግጡ። ሁሉም ሰሌዳዎች ምንም እንኳን የሙቀት መጠኑን የመለካት ችሎታ አላቸው። የኢሲ ፣ ፒኤች እና የኦርፒ ምርመራዎችን ከተገቢው ዳሳሾች ጋር ማያያዝዎን አይርሱ። እነሱ በቀላሉ ከ BNC አያያorsች ጋር ተያይዘዋል።

መከለያ ካለዎት ይህንን ሁሉ ወደ ውስጥ ማስገባት ጥሩ ሀሳብ ነው ፣ በተለይም ውሃ መሳተፉን ከግምት ውስጥ ማስገባት።

ደረጃ 3 - ሶፍትዌሩ

የዚህ የሶፍትዌር ክፍል በሁለት ዋና ዋና ክፍሎች ተከፍሏል - በናኖ 33 ላይ ያለው firmware ፣ እና ድረ -ገጹ።

መሠረታዊው ፍሰት ይህ ነው-

  • ድረ -ገጹ በ BLE በኩል ከናኖ ጋር ይገናኛል
  • ድረ-ገጹ መረጃ ለመጠየቅ ወይም እርምጃዎችን ለመውሰድ በጽሑፍ ላይ የተመሠረቱ ትዕዛዞችን ይልካል
  • ናኖ እነዚህን ትዕዛዞች ያዳምጣል ፣ ያስፈጽማል እና መረጃ ይመልሳል
  • ድረ -ገፁ ምላሾቹን ይቀበላል እና በይነገጹን በዚህ መሠረት ያዘምናል

ይህ ቅንብር እንደ መለኪያ መውሰድ ወይም ዳሳሾችን መለካት ያሉ እርስዎ የሚጠብቋቸውን ሁሉንም አስፈላጊ ተግባራት እንዲያከናውን ለድረ -ገጹ ይፈቅዳል።

ደረጃ 4 - የ BLE አገልግሎቶች እና ባህሪዎች

ለመማር ከመጀመሪያዎቹ ነገሮች አንዱ BLE እንዴት እንደሚሰራ መሰረታዊ ነገሮች ናቸው።

ብዙ ተመሳሳይነቶች አሉ ፣ ስለዚህ መጽሐፍ እንምረጥ። አንድ አገልግሎት መጽሐፍ ይሆናል ፣ እና ገጸ -ባህሪያቱ ገጾች ይሆናሉ። በዚህ “BLE መጽሐፍ” ውስጥ ፣ ገጾቹ ገጹ የሚናገረውን መለወጥ መቻል እና ሲከሰት ማሳወቂያ መቀበልን የመሳሰሉ ጥቂት መጽሐፍ ያልሆኑ ንብረቶች አሏቸው።

BLE መሣሪያ የፈለገውን ያህል አገልግሎቶችን ሊያደርግ ይችላል። አንዳንዶች አስቀድመው የተገለጹ እና እንደ Tx Power ያሉ በተለምዶ ጥቅም ላይ የዋሉ መረጃዎችን መደበኛ ለማድረግ ወይም ግንኙነትን ለማጣት እንደ ኢንሱሊን ወይም Oxል ኦክስሜሜትሪ ላሉት የተወሰኑ ነገሮች ደረጃ ለመስጠት እንደ መንገድ ያገለግላሉ። እንዲሁም አንድ ማድረግ እና በእሱ የፈለጉትን ማድረግ ይችላሉ። እነሱ በሶፍትዌር ውስጥ የተገለጹ እና በ UUID ተለይተዋል። UUID ን እዚህ ማድረግ ይችላሉ።

ለዚህ መሣሪያ firmware ውስጥ አንድ አገልግሎት አለ ፣ እሱም እንደሚከተለው ይገለጻል

BLEService uFire_Service ("4805d2d0-af9f-42c1-b950-eae78304c408");

እና ሁለት ባህሪዎች

BLEStringCharacteristic tx_Characteristic ("50fa7d80-440a-44d2-967a-ec7731ec736a" ፣ BLENotify ፣ 20);

BLEStringCharacteristic rx_Characteristic ("50fa7d80-440b-44d2-967b-ec7731ec736b" ፣ BLEWrite ፣ 20);

Tx_Characteristic መሣሪያዎቹ መረጃውን የሚላኩበት ፣ እንደ EC መለኪያዎች ያሉ ፣ ድረ -ገጹ እንዲታይበት ይሆናል። Rx_Characteristic ለመተግበር ከድረ -ገጹ ትዕዛዞችን የሚቀበልበት ነው።

ይህ ፕሮጀክት የ ArduinoBLE ቤተ -መጽሐፍትን ይጠቀማል። ከተመለከቱ ፣ አንድን ባህሪ ለማወጅ የተለየ አንድ ባልና ሚስት እንዳሉ ያያሉ። ይህ ፕሮጀክት የ BLEStringCharacteristic ን ይጠቀማል ምክንያቱም እኛ ከ String ዓይነት ጋር ስለምንገናኝ እና እሱ በጣም ቀላል ነው ፣ ግን እርስዎ ደግሞ ከሌሎች ጥቂት ሰዎች መካከል BLECharCharacteristic ወይም BLEByteCharacteristic ን መምረጥ ይችላሉ።

በተጨማሪም ፣ ባህሪውን ሊሰጡ የሚችሉ አንዳንድ ባህሪዎች አሉ። tx_Characteristic BLENotify እንደ አማራጭ አለው። ያ ማለት የእኛ ድረ ገጽ ዋጋው ሲቀየር ማሳወቂያ ይቀበላል ማለት ነው። rx_Characteristic የእኛ ድረ -ገጽ እንዲያስተካክለው የሚፈቅድ BLEWrite አለው። ሌሎችም አሉ።

ከዚያ ይህንን ሁሉ አንድ ላይ ለማያያዝ ትንሽ የኮድ-ሙጫ አለ-

BLE.setLocalName ("uFire BLE");

BLE.setAdvertisedService (uFire_Service); uFire_Service.addCharacteristic (tx_Characteristic); uFire_Service.addCharacteristic (rx_Characteristic); BLE.addService (uFire_Service); rx_Characteristic.setEventHandler (BLEWritten, rxCallback); BLE. ማስታወቂያ ();

እሱ ራሱ ብዙ ወይም ያነሰ ገላጭ ነው ፣ ግን ጥቂት ነጥቦችን እንንካ።

rx_Characteristic.setEventHandler (BLEWritten, rxCallback);

ስለተቀየረው እሴት ማሳወቂያ የሚጠቀሙበት ቦታ ነው። ዋጋው ሲቀየር መስመሩ ተግባሩን rxCallback እንዲፈጽም ለክፍሉ ይነግረዋል።

BLE. ማስታወቂያ ();

ነገሩ ሁሉ የሚጀምረው እሱ ነው። አንድ BLE መሣሪያ በየጊዜው እዚያ የሚገኝ እና ከእሱ ጋር ለመገናኘት የሚገኝ መሆኑን የሚገልጽ ትንሽ መረጃን ይልካል። ያለ እሱ ፣ የማይታይ ይሆናል።

ደረጃ 5 የጽሑፍ ትዕዛዞች

ቀደም ሲል እንደተጠቀሰው ፣ ይህ መሣሪያ በቀላል የጽሑፍ ትዕዛዞች በኩል ከድረ -ገጹ ጋር ይነጋገራል። ጠንክሮ ሥራው ቀድሞውኑ ስለተሠራ ሁሉም ነገር ለመተግበር ቀላል ነው። የ uFire ዳሳሾች ትዕዛዞችን ለመላክ እና ለመቀበል ከ JSON እና MsgPack ላይ የተመሠረተ ቤተ -መጽሐፍት ይዘው ይመጣሉ። በሰነድ ገጾቻቸው ላይ ስለ EC እና ISE ትዕዛዞች የበለጠ ማንበብ ይችላሉ።

ይህ ፕሮጀክት JSON ን ይጠቀማል ምክንያቱም አብሮ መስራት እና ሊነበብ ከሚችል የ MsgPack ቅርጸት በተቃራኒ ሁለትዮሽ ነው።

ሁሉም እንዴት እርስ በእርሱ እንደሚገናኝ የሚያሳይ ምሳሌ እነሆ-

  • ድረ -ገፁ ኤሲ (ወይም በተለይ ለ rx_Cheracteristic ባህርይ EC ን በመጻፍ) EC ን ለመለካት መሣሪያውን ይጠይቃል።
  • መሣሪያው ትዕዛዙን ይቀበላል እና ያስፈጽማል። ከዚያ ወደ tx_Characteristic ባህርይ በመፃፍ የ JSON ቅርጸት የ {"ec": 1.24} ምላሽ ይልካል።
  • ድረ -ገጹ መረጃውን ተቀብሎ ያሳየዋል

ደረጃ 6 - ድረ -ገጹ

የዚህ ፕሮጀክት ድረ-ገጽ Vue.js ን ለግንባሩ መጨረሻ ይጠቀማል። ምንም የኋላ ማስቀመጫ አያስፈልግም። በተጨማሪም ፣ ነገሮችን ትንሽ ቀለል ለማድረግ ፣ ምንም የግንባታ ስርዓት ጥቅም ላይ አይውልም። እሱ ወደ ተለመዱት አቃፊዎች ተከፋፍሏል ፣ js ለጃቫስክሪፕት ፣ ሲኤስኤስ ለሲኤስኤስ ፣ ለአዶዎች ንብረቶች። የእሱ html ክፍል ምንም የተለየ አይደለም። Bulma.io ን ለቅጥጥ ይጠቀማል እና የተጠቃሚ በይነገጽን ይፈጥራል። በክፍል ውስጥ ብዙ ያስተውላሉ። እሱ ሁሉንም css እና አዶዎችን እያከለ ነው ፣ ግን በተለይ አንድ መስመርን ይጨምራል።

ያ ሁሉንም የ PWA ነገሮች እንዲከሰቱ የሚያደርገውን የእኛን የ manifest.json ፋይል በመጫን ላይ ነው። ይህ ድረ -ገጽ ወደ መተግበሪያ ሊለወጥ እንደሚችል ለስልክችን የሚነግረን አንዳንድ መረጃን ያስታውቃል።

ጃቫስክሪፕት አብዛኛዎቹ አስደሳች ነገሮች የሚከሰቱበት ነው። ወደ ፋይሎች ተከፋፍሏል ፣ app.js ከሁሉም የ UI ተዛማጅ ተለዋዋጮች እና ከሌሎች ጥቂት ነገሮች ጋር አብሮ የሚሄድ የ Vue ድረ-ገጽ የማግኘት መሰረታዊ ነገሮችን ይ containsል። ble.js የብሉቱዝ ነገሮች አሉት።

ደረጃ 7 ጃቫስክሪፕት እና ድር ብሉቱዝ

በመጀመሪያ ፣ ይህ በ Chrome እና በኦፔራ ላይ ብቻ ይሠራል። ሌሎች አሳሾች ይህንን እንዲደግፉ እመኛለሁ ፣ ግን በማንኛውም ምክንያት እነሱ አይደግፉም። App.js ን ይመልከቱ እና በእኛ firmware ውስጥ የተጠቀምናቸውን እነዚያ ተመሳሳይ UUIDs ያያሉ። አንድ ለ uFire አገልግሎት ፣ እና አንዱ ለ tx እና rx ባህሪዎች።

አሁን በ ble.js ውስጥ ከተመለከቱ የግንኙነት () እና የግንኙነት () ተግባሮችን ያያሉ።

የግንኙነት () ተግባሩ በይነገጹን በማመሳሰል ለማቆየት አንዳንድ አመክንዮዎችን ይ containsል ፣ ነገር ግን በባህሪያቱ ላይ መረጃን ለመላክ እና ለመቀበል አብዛኛውን ጊዜ ነገሮችን እያዋቀረ ነው።

ከድር ብሉቱዝ ጋር በሚገናኙበት ጊዜ አንዳንድ ልዩነቶች አሉ። ግንኙነቱ እንደ አንድ አዝራርን መታ ማድረግ በሆነ የአካላዊ ተጠቃሚ መስተጋብር መጀመር አለበት። ለምሳሌ ድረ -ገጹ ሲጫን በፕሮግራም ማገናኘት አይችሉም።

ግንኙነት ለመጀመር ኮዱ እንደዚህ ይመስላል

this.device = navigator.bluetooth.requestDevice ({

ማጣሪያዎች: [{namePrefix: "uFire"}], optionalServices: [this.serviceUuid]});

ማጣሪያዎች: እና አማራጭ የአገልግሎቶች ክፍል እያንዳንዱን የ BLE መሣሪያ እዚያ እንዳያዩ ያስፈልጋል። የማጣሪያው ክፍል ብቻ ጥሩ ይሆናል ብለው ያስባሉ ፣ ግን እርስዎም እንዲሁ አማራጭ አገልግሎቶች ክፍል ያስፈልግዎታል።

ከላይ ያለው ኮድ የግንኙነት መገናኛን ያሳያል። የ Chrome በይነገጽ አካል ነው እና ሊቀየር አይችልም። ተጠቃሚው ከዝርዝሩ ውስጥ ይመርጣል። ምንም እንኳን መተግበሪያው የሚገናኝበት አንድ መሣሪያ ብቻ ቢኖርም ፣ በደህንነት ስጋቶች ምክንያት ተጠቃሚው አሁንም በዚህ የምርጫ መገናኛ ውስጥ ማለፍ አለበት።

ቀሪው ኮዱ አገልግሎቱን እና ባህሪያቱን ማቀናበር ነው። እንደ የጽኑዌር ማሳወቂያ መልሶ መደወያ የመሰለ የመልሶ መደወያ የዕለት ተዕለት እንቅስቃሴ እንደምናዘጋጅ ልብ ይበሉ።

service = server.getPrimaryService ን ይጠብቁ (ይህ.serviceUuid);

ባህርይ = አገልግሎት ይጠብቁ.getCharacteristic (this.txUuid); ባህሪን ይጠብቁ። ይጀምሩ ማሳወቂያዎች (); ባሕርይ.

በ tx ባህርይ ላይ አዲስ መረጃ በተገኘ ቁጥር ይህ። ዋጋ_ዘመን አሁን ይጠራል።

ከሚያደርጋቸው የመጨረሻ ነገሮች አንዱ መረጃውን በየ 5 ሰከንዶች ለማዘመን ሰዓት ቆጣሪ ማዘጋጀት ነው።

value_update () አዲስ የ JSON መረጃ እስኪመጣ የሚጠብቅ እና በይነገጹን በእሱ የሚያዘምነው ረጅም ተግባር ብቻ ነው።

ec.js ፣ ph.js እና orp.js መረጃን ለማምጣት እና መሣሪያዎቹን ለማስተካከል ትዕዛዞችን የሚልኩ ብዙ ትናንሽ ተግባራትን ይዘዋል።

ይህንን ለመሞከር የድር ብሉቱዝን ለመጠቀም በኤችቲቲፒኤስ ላይ መቅረብ እንዳለበት ማስታወስ ያስፈልግዎታል። ለአካባቢያዊ የኤችቲቲፒኤስ አገልጋይ ከብዙ አማራጮች አንዱ አገልጋይ-https ነው። Firmware በተሰቀለ ፣ ሁሉም ነገር ተገናኝቶ ፣ እና ድረ -ገጹ እየቀረበ ፣ ሁሉም ነገር ሲሰራ ማየት መቻል አለብዎት።

ደረጃ 8 የ PWA ክፍል

የ PWA ክፍል
የ PWA ክፍል

ድረ -ገጹን ወደ ትክክለኛ መተግበሪያ ለመቀየር ጥቂት ደረጃዎች አሉ። ተራማጅ የድር መተግበሪያዎች ይህ ፕሮጀክት ከሚጠቀምባቸው በላይ ብዙ ሊያደርጉ ይችላሉ።

  • የድር ገጽ መጫኛ
  • አንዴ ከተጫነ ከመስመር ውጭ መድረስ ይቻላል
  • በመደበኛ መልክ በሚታይ የመተግበሪያ አዶ ተጀምሮ እንደ መደበኛ መተግበሪያ ይሠራል

ለመጀመር ፣ ብዙ ፋይሎችን ማፍለቅ አለብን። የመጀመሪያው የ manifest.json ፋይል ነው። ከመካከላቸው አንዱ በመሆን የመተግበሪያ አንጸባራቂ ጄኔሬተር ይህንን የሚያደርጉልዎት በጣት የሚቆጠሩ ጣቢያዎች አሉ።

ሊገነዘቧቸው የሚገቡ ሁለት ነገሮች

  • የትግበራ ወሰን አስፈላጊ ነው። ይህንን ድረ-ገጽ ufire.co/uFire-BLE/ ላይ አስቀምጫለሁ። ያ ማለት የእኔ የማመልከቻ ወሰን /uFire-BLE /ነው።
  • የመነሻ ዩአርኤል እንዲሁ አስፈላጊ ነው። የመሠረቱ ጎራ አስቀድሞ የታሰበው ወደ እርስዎ የተወሰነ የድር ገጽ የሚወስደው መንገድ ነው። ስለዚህ ይህንን በ ufire.co/uFire-BLE/ ላይ ስላስቀመጥኩ ፣ የመነሻ ዩአርኤል/uFire-BLE/ደግሞ ነው።
  • የማሳያ ሁናቴ መተግበሪያው እንዴት እንደሚታይ ይወስናል ፣ Standalone ያለ ማንኛውም የ Chrome አዝራሮች ወይም በይነገጽ መደበኛ መተግበሪያ ሆኖ እንዲታይ ያደርገዋል።

በ json ፋይል ያበቃል። በድረ -ገጹ ሥር ፣ ልክ ከ index.html ጋር መቀመጥ አለበት።

የሚያስፈልግዎት ቀጣዩ ነገር የአገልግሎት ሠራተኛ ነው። እንደገና ፣ ብዙ ሊሠሩ ይችላሉ ፣ ግን ይህ ፕሮጀክት ይህንን መተግበሪያ ከመስመር ውጭ እንዲደርስ ለማድረግ መሸጎጫውን ብቻ ይጠቀማል። የአገልግሎቱ ሠራተኛ አተገባበር በአብዛኛው የቦይለር ሰሌዳ ነው። ይህ ፕሮጀክት የጉግል ምሳሌን ተጠቅሞ የተሸጎጡ ፋይሎችን ዝርዝር ለውጧል። ከጎራዎ ውጭ ፋይሎችን መሸጎጥ አይችሉም።

ወደ FavIcon Generator ይሂዱ እና አንዳንድ አዶዎችን ያድርጉ።

የመጨረሻው ነገር በ Vue mounted () ተግባር ውስጥ የተወሰነ ኮድ ማከል ነው።

ተሰቅሏል: ተግባር () {ከሆነ ((በአገልግሎት አሰሳ ውስጥ 'serviceWorker') {navigator.serviceWorker.register ('service-worker.js'); }}

ይህ ሠራተኛውን በአሳሹ ይመዘግባል።

ሁሉም ነገር እየሰራ መሆኑን ማረጋገጥ ይችላሉ ፣ እና ካልሆነ ፣ ምናልባት Lighthouse ን በመጠቀም ለምን ጣቢያውን ይተነትናል እና ሁሉንም ዓይነት ነገሮች ይነግርዎታል።

ሁሉም ነገር ከሰራ ፣ ወደ ድር ገጹ ሲሄዱ ፣ በብቅ -ባይ ሰንደቅ ለመጫን ይፈልጉ እንደሆነ Chrome ይጠይቃል። በሞባይል Chrome ላይ ከሆኑ በ ufire.co/uFire-BLE/ ላይ በተግባር ማየት ይችላሉ። በዴስክቶፕ ላይ ከሆኑ እሱን ለመጫን የምናሌ ንጥል ማግኘት ይችላሉ።