MoodleMobile2客製化

要客製化MoodleMobile2的圖片、風格顏色、及預設網站很容易，只要俢改一些參數內容，然後重新編

修改 config.xml

• <widget>後面的id，這個是最重要的，以邊是把網址倒過來寫，然後再加上app的名稱，這個id是需要唯一值，在上架的時後，也是會檢查這個id，如果相同是不能上架的，目前是修改成「tw.edu.welearn.moodlemobile」，後面的版本最好不要修改，這樣之後官方有更新時，就依官方的版本走，比較不會有問題

• <name>這個參數就是app安裝好後，所看到的文字，這邊使用「一起魔課」

• <description>只是說明，修改成「WeLearn Moodle Mobile official app」

• <author>這部份目前沒有做修改

原始內容

<widget xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0" id="com.moodle.moodlemobile" version="3.4.0">
  <name>Moodle Mobile</name>
  <description>
        Moodle Mobile official app
    </description>
  <author href="http://moodle.com" email="[e-mail]">
        Moodle Mobile team
    </author>

修改內容

<widget xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0" id="tw.edu.welearn.moodlemobile" version="3.4.0">
  <name>一起魔課</name>
  <description>
        WeLearn Moodle Mobile official app
    </description>
  <author href="http://moodle.com" email="[e-mail]">
        Moodle Mobile team
    </author>

修改 www/config.json

• app_id：此id需要和config.xml設定值相同

• languages：預設值為「en」，修改成「zh-tw」

• demo_sites：這部分請清空…改為「""」

• siteurl：此設定值為app進入後主要連線的網址，目前設定成「https://welearn.edu.tw」

原始內容

{
    "app_id" : "com.moodle.moodlemobile",
    "appname": "Moodle Mobile",
    "desktopappname": "Moodle Desktop",
    "versioncode" : "2021",
    "versionname" : "3.4.0",
    "cache_expiration_time" : 300000,
    "default_lang" : "en",
    "languages": {"ar": "عربي", "bg": "Български", "ca": "Català", "cs": "Čeština", "da": "Dansk", "de": "Deutsch", "de-du": "Deutsch - Du", "el": "Ελληνικά", "en": "English", "es": "Español", "es-mx": "Español - México", "eu": "Euskara", "fa": "فارسی", "fi": "Suomi", "fr" : "Français", "he" : "עברית", "hu": "magyar", "it": "Italiano", "ja": "日本語", "lt" : "Lietuvių", "mr": "मराठी", "nl": "Nederlands", "pl": "Polski", "pt-br": "Português - Brasil", "pt": "Português - Portugal", "ro": "Română", "ru": "Русский", "sr-cr": "Српски", "sr-lt": "Srpski", "sv": "Svenska", "tr" : "Türkçe", "uk" : "Українська", "zh-cn" : "简体中文", "zh-tw" : "正體中文"},
    "wsservice" : "moodle_mobile_app",
    "wsextservice" : "local_mobile",
    "demo_sites": {"student": {"url": "https://school.demo.moodle.net", "username": "student", "password": "moodle"}, "teacher": {"url": "https://school.demo.moodle.net", "username": "teacher", "password": "moodle"}},
    "gcmpn": "694767596569",
    "customurlscheme": "moodlemobile",
    "siteurl": "",
    "multisitesdisplay": "select",
    "skipssoconfirmation": "false",
    "forcedefaultlanguage": "false",
    "privacypolicy": "https://moodle.org/mod/page/view.php?id=8148"
}

修改內容

{
    "app_id" : "tw.edu.welearn.moodlemobile",
    "appname": "Moodle Mobile",
    "desktopappname": "Moodle Desktop",
    "versioncode" : "2021",
    "versionname" : "3.4.0",
    "cache_expiration_time" : 300000,
    "default_lang" : "zh-tw",
    "languages": {"ar": "عربي", "bg": "Български", "ca": "Català", "cs": "Čeština", "da": "Dansk", "de": "Deutsch", "de-du": "Deutsch - Du", "el": "Ελληνικά", "en": "English", "es": "Español", "es-mx": "Español - México", "eu": "Euskara", "fa": "فارسی", "fi": "Suomi", "fr" : "Français", "he" : "עברית", "hu": "magyar", "it": "Italiano", "ja": "日本語", "lt" : "Lietuvių", "mr": "मराठी", "nl": "Nederlands", "pl": "Polski", "pt-br": "Português - Brasil", "pt": "Português - Portugal", "ro": "Română", "ru": "Русский", "sr-cr": "Српски", "sr-lt": "Srpski", "sv": "Svenska", "tr" : "Türkçe", "uk" : "Українська", "zh-cn" : "简体中文", "zh-tw" : "正體中文"},
    "wsservice" : "moodle_mobile_app",
    "wsextservice" : "local_mobile",
    "demo_sites": "",
    "gcmpn": "694767596569",
    "customurlscheme": "moodlemobile",
    "siteurl": "https://welearn.edu.tw",
    "multisitesdisplay": "select",
    "skipssoconfirmation": "false",
    "forcedefaultlanguage": "false",
    "privacypolicy": "https://moodle.org/mod/page/view.php?id=8148"
}

修改scss/app.scss

修改此檔為改變app底色，原本為橘色，修改成與一起魔課相同為藍色

在$yellow-dark;這行下方加入$blue2的設定

$yellow:          #fbad1a; // Accent (never text).
$yellow-light:    mix($yellow, white, 20%);
$yellow-dark:     mix($yellow, black, 40%);

$blue2:          #1899df; // Accent (never text).
$blue2-light:    lighten($blue2, 10%);

修改$mm-color後方的變數為$blue2，還有下方兩行的色碼，為啟動畫面的背景顏色，會搭配「www/img/logo_white.png 」顯示

$mm-color:          $blue2;
$mm-color-init-screen:          #1273e7;
$mm-color-init-screen-alt:      #168ae2;

更換圖檔

• www/img/logo_white.png ：當app切換畫面時，有時後會出現Moodle的圖案

• www/img/logo.png ：在登入畫面時，上方的logo圖

• resources/splash.png ：app完整關閉不能在背景執行，剛啟動時會出現的畫面 (2732X2732)

• resource/iso/icon.png ：安裝在iOS行動裝置上的icon圖 (1024x1024)

• resource/android/icon.png ：安裝在Android行動裝置上的icon圖 (1024x1024)

執行ionic resource

圖檔都更新好後，請執行「ionic resource」，將會自動產生不同size的圖檔，請確認過程是否有錯，果有錯請先檢查圖檔的size是否正確。

allen-mba:WelearnMM2 allen$ ionic resources
Ionic icon and splash screen resources generator
 uploading android/icon.png...
 uploading ios/icon.png...
 uploading splash.png...
ios/icon.png (1024x1024) upload complete
splash.png (2732x2732) upload complete
android/icon.png (1024x1024) upload complete
 generating icon android drawable-xxxhdpi-icon.png (192x192)...
 generating icon android drawable-xxhdpi-icon.png (144x144)...
 generating icon android drawable-xhdpi-icon.png (96x96)...
icon android drawable-xhdpi-icon.png (96x96) generated
 generating icon android drawable-hdpi-icon.png (72x72)...
icon android drawable-xxxhdpi-icon.png (192x192) generated
 generating icon android drawable-mdpi-icon.png (48x48)...
icon android drawable-xxhdpi-icon.png (144x144) generated
 generating icon android drawable-ldpi-icon.png (36x36)...
icon android drawable-ldpi-icon.png (36x36) generated
 generating icon ios [e-mail] (87x87)...
icon android drawable-mdpi-icon.png (48x48) generated
 generating icon ios [e-mail] (58x58)...
icon android drawable-hdpi-icon.png (72x72) generated
 generating icon ios icon-small.png (29x29)...
icon ios icon-small.png (29x29) generated
 generating icon ios [e-mail] (167x167)...
icon ios [e-mail] (58x58) generated
 generating icon ios [e-mail] (152x152)...
icon ios [e-mail] (87x87) generated
 generating icon ios icon-76.png (76x76)...
icon ios icon-76.png (76x76) generated
icon ios [e-mail] (144x144) generated
icon ios icon-72.png (72x72) generated
 generating icon ios [e-mail] (180x180)...
icon ios [e-mail] (167x167) generated
 generating icon ios [e-mail] (120x120)...
icon ios [e-mail] (152x152) generated
 generating icon ios icon-60.png (60x60)...
icon ios [e-mail] (180x180) generated
 generating icon ios [e-mail] (100x100)...
icon ios [e-mail] (120x120) generated
 generating icon ios icon-50.png (50x50)...
icon ios icon-60.png (60x60) generated
icon ios [e-mail] (120x120) generated
 generating icon ios [e-mail] (80x80)...
icon ios icon-50.png (50x50) generated
 generating icon ios icon-40.png (40x40)...
icon ios [e-mail] (100x100) generated
 generating icon ios [e-mail] (114x114)...
icon ios [e-mail] (80x80) generated
 generating icon ios icon.png (57x57)...
icon ios icon-40.png (40x40) generated
 generating splash ios Default~iphone.png (320x480)...
icon ios [e-mail] (114x114) generated
 generating splash ios Default@2x~iphone.png (640x960)...
icon ios icon.png (57x57) generated
 generating splash ios Default-Portrait~ipad.png (768x1024)...
splash ios Default~iphone.png (320x480) generated
 generating splash ios Default-Portrait@~ipadpro.png (2048x2732)...
splash ios Default@2x~iphone.png (640x960) generated
 generating splash ios Default-Portrait@2x~ipad.png (1536x2048)...
splash ios Default-Portrait~ipad.png (768x1024) generated
 generating splash ios Default-Landscape~ipad.png (1024x768)...
splash ios Default-Portrait@~ipadpro.png (2048x2732) generated
 generating splash ios Default-Landscape@~ipadpro.png (2732x2048)...
splash ios Default-Landscape~ipad.png (1024x768) generated
 generating splash ios Default-Landscape@2x~ipad.png (2048x1536)...
splash ios Default-Portrait@2x~ipad.png (1536x2048) generated
 generating splash ios Default-Landscape-736h.png (2208x1242)...
splash ios Default-Landscape@~ipadpro.png (2732x2048) generated
 generating splash ios Default-736h.png (1242x2208)...
splash ios Default-Landscape@2x~ipad.png (2048x1536) generated
 generating splash ios Default-667h.png (750x1334)...
splash ios Default-Landscape-736h.png (2208x1242) generated
 generating splash ios Default-568h@2x~iphone.png (640x1136)...
splash ios Default-736h.png (1242x2208) generated
 generating splash android drawable-port-xxxhdpi-screen.png (1280x1920)...
splash ios Default-667h.png (750x1334) generated
 generating splash android drawable-port-xxhdpi-screen.png (960x1600)...
splash ios Default-568h@2x~iphone.png (640x1136) generated
 generating splash android drawable-port-xhdpi-screen.png (720x1280)...
splash android drawable-port-xhdpi-screen.png (720x1280) generated
 generating splash android drawable-port-hdpi-screen.png (480x800)...
splash android drawable-port-xxhdpi-screen.png (960x1600) generated
splash android drawable-port-mdpi-screen.png (320x480) generated
 generating splash android drawable-port-ldpi-screen.png (240x320)...
splash android drawable-port-xxxhdpi-screen.png (1280x1920) generated
 generating splash android drawable-land-xxxhdpi-screen.png (1920x1280)...
splash android drawable-port-ldpi-screen.png (240x320) generated
 generating splash android drawable-land-xxhdpi-screen.png (1600x960)...
splash android drawable-port-hdpi-screen.png (480x800) generated
 generating splash android drawable-land-xhdpi-screen.png (1280x720)...
splash android drawable-land-xxxhdpi-screen.png (1920x1280) generated
 generating splash android drawable-land-hdpi-screen.png (800x480)...
splash android drawable-land-xxhdpi-screen.png (1600x960) generated
 generating splash android drawable-land-mdpi-screen.png (480x320)...
splash android drawable-land-xhdpi-screen.png (1280x720) generated
 generating splash android drawable-land-ldpi-screen.png (320x240)...
splash android drawable-land-hdpi-screen.png (800x480) generated
splash android drawable-land-ldpi-screen.png (320x240) generated
splash android drawable-land-mdpi-screen.png (480x320) generated