2018年11月16日 星期五

〔筆記〕使用vscode達到 php 運行 live-server ,存檔即時變更頁面

今天要來紀錄怎麼使用VSCode達到 php 運行 live-server ,存檔即時變更

因為在撰寫html上,html屬於用戶端(Client-side),作業上都是在客戶端進行不會有server端的問題,所以進行存檔頁面即變更較為簡易,網路上也有很多套件可以用 。

可是在php上,php屬於伺服器端(Server-Side),一變更小則前端頁面變化大則連動到伺服器、資料庫的變動,所以在live-server上的可行性一直以來都是一個問題!

不過現在VScode做到了可以將php的檔案運行live-server,在開發上順暢很多!
也大大縮短了時間,不用在存檔→去頁面按重新整理→在debug了~

現在就來紀錄設定過程。

簡述我的開發環境


- 系統:
MacOS

- 編輯器(IDE):
VSCode - https://code.visualstudio.com/


- 本機伺服器環境(local server environment):
MAMP - https://www.mamp.info/en/


- 瀏覽器(Broswer):
Google Chrome

設定過程


1.首先先安裝好開發要件
VSCode、MAMP、Google Chrome都先下載安裝完畢

2.安裝套件
VSCode裡請安裝" Live-Server "
https://github.com/ritwickdey/vscode-live-server

安裝完成後VSCodec會請你Reload一下,讓套件生效。

瀏覽器方面則需要裝Web Extension,看你用哪種瀏覽器,現在好像只有Chrome和Firefox有而已,筆者是用Chrome瀏覽器來做開發,所以待會也會用Chrome來Demo。

.連結如下 Store Links
Chrome : https://chrome.google.com/webstore/detail/live-server-web-extension/fiegdmejfepffgpnejdinekhfieaogmj/
Firefox : https://addons.mozilla.org/en-US/firefox/addon/live-server-web-extension/


3.環境設定

- VSCode 環境設定-

選到VSCode的設定
Preferences → Settings


選到User Settings → Extensions → Live Server Config 
裡面有一個


Settings: Use Web Ext 
You have to install a browser extension. That will be works for your dynamic pages (like PHP).

這個選項請打勾勾

Settings: live-Server Host 選項
因為我習慣用"localhost"當Domain,所以我是設定"localhost",當然要看你是用什麼server的整合環境,是用"127.0.0.1"還是"localhost"來作調整,因環境而異。


Settings: HostTo switch between localhost or 127.0.0.1 or anything else. Default is 127.0.0.1
localhost


Settings: live-Server port 選項
這個沒有在ui的調整介面裡,在設定檔的json裡設定,那port的部分請調整為走 "5500" 埠號

以上的設定都可以在json檔裡做直接設定,如下

"liveServer.settings.host": "localhost",
"liveServer.settings.port": 5500,
"liveServer.settings.useWebExt": true


- MAMP 環境設定-

我是用Apache,不是Nginx,設定為80port即可

- 瀏覽器 Extension 環境設定-

設定方式如圖所示



運行啟動


先啟動本機Server的服務,開啟MAMP把服務先開啟
再把專案資料夾用VSCode開啟之後,
按下下面的"Go Live",會看到starting... → Θ5500port的轉變
並跳出視窗來,代表成功啟動 Live-server。



然而,當我們點開Live-server所跳出的視窗.php檔,卻會出現下載的提示出來是怎麼回事呢?

不是沒作用,我們要回到用MAMP server所開啟的localhost目錄下,開啟剛剛的專案就可以進行Live-server的功能了,可以看到存檔即變更頁面,非常的方便!




以上就是整個使用VScode開發php,並達到存檔即時變更頁面的設定與注意過程!

這邊要感謝Turking網友大大的指導,得以讓開發變更順利~感謝您^^

--------------------------------------------------------
做圖和寫文很累,如果有分享的需求請載明來源出處,
請勿盜圖與拷貝,尊重著作者~感謝您^^

© 圖為 曾英綺 版權所有,請勿盜圖等相關動作
[ 著作權為 Ying-chi Tzeng 曾英綺 所有,轉載請告知 ]
--------------------------------------------------------


2018年4月20日 星期五

〔架站〕AWS EC2 虛擬主機設定

首先用CLI 去連線
aws 上 Apache的環境為LAMP

官方教程:
http://docs.aws.amazon.com/zh_cn/AWSEC2/latest/UserGuide/install-LAMP.html
輸入指令
ssh -i ~/.ssh/MyKeyPair.pem ec2-user@35.166.xx.xx
會連線到aws ubutu 虛擬機上

因為太久沒有作更新了 所以執行 sudo yum update

跑完更新後 找到路徑
/etc/httpd/conf

編輯httpd.conf檔 因為httpd.conf檔為唯讀檔 所以輸入指令的時候記得要家sudo

[ec2-user@ip-xxx-xxx-xx-172 conf]$ sudo vi httpd.conf
 找到 # Use name-based virtual hosting.這一行

#
# VirtualHost example:
# Almost any Apache directive may go into a VirtualHost container.
# The first VirtualHost section is used for requests without a known
# server name.
#
#<VirtualHost *:80>
#    ServerAdmin webmaster@dummy-host.example.com
#    DocumentRoot /www/docs/dummy-host.example.com
#    ServerName dummy-host.example.com
#    ErrorLog logs/dummy-host.example.com-error_log
#    CustomLog logs/dummy-host.example.com-access_log common
#</VirtualHost>


在aws的路徑下要設為

<VirtualHost *:80>
    DocumentRoot /var/www/html/
    ServerName www.tzeng17.com
    ServerAlias www.tzeng17.com
</VirtualHost>

<VirtualHost *:80>
    DocumentRoot /var/www/html/game/GivemeFind/
    ServerName givemefind.tzeng17.com
    ServerAlias givemefind.tzeng17.com
</VirtualHost>

設定完後記得要重啟Apache的服務
$ sudo service httpd restart

系統會跑

[ec2-user@ip-xxx-xx-xx-172 conf]$ sudo service httpd restart

Stopping httpd:                                            [  OK  ]
Starting httpd:                                            [  OK  ]
[ec2-user@ip-xxx-xx-xx-172 conf]$

再連上自己設定的子網域上確認看看有沒有成功囉~


2017年10月31日 星期二

〔筆記〕React Native Android使用 react-native-maps 套件錯誤修正心得 step by step #airbnb


繼上一篇 React Native iOS使用 react-native-maps 套件錯誤修正心得
成功在 iOS 上串好Google Maps SDK for iOS之後......

對!要來做Android了.....Orz
雖然Android本身就有Google的血統,但是也不是那麼好一次就成功的....(嗚嗚TAT

那我們就從官方文檔Android的地方開始說好了....

react-native-maps/docs/installation.md


上次創好專案後,應該會有一個ios 和一個Android的資料夾

現在的環境是

  • 已經run過 "react-native link react-native-maps"了~
  • 使用Genymotion模擬器來測試

在回到官方文檔
-----------------------------------------------
Android 
Step1.
This step is not necessary if you ran "react-native link react-native-maps"
〔如果有執行過link套件的話就不用設定〕

Step2.
This step is not necessary if you ran "react-native link react-native-maps"



想必大家心裡一定跟我想的一樣,哇~這麼爽都不用做直接略過就好了XD
(謎之音:痛苦的還在後頭呢....

Step3.和Step4.看起來都很簡單

Step3. 叫你去Google Maps AP 申請 " for Android " 的金鑰「傳送門」,記得要把API啟動Enable喔!!

打開 android\app\src\main\AndroidManifest.xml 

Copy <mata-data .... />貼在<application>這裡面</application>
然後把你的金鑰貼在android:value裡

-----------------------------------------
<meta-data
  android:name="com.google.android.geo.API_KEY"
  android:value="Your Google maps API Key Here"/>
-----------------------------------------



Step4.確定一些Google Play Services服務安裝了沒

因為我是用Genymotion模擬器去跑的,所以這邊就不講實體機的方法了

好啦~因為我也是第一次用Genymotion去跑安卓程式XD
就衝吧!!
run  react-native run-android

cil也很乖的報"BUILD SUCCESSFUL"
但是看到畫面.....痾......說好的谷哥呢......Orz

就跟人生一樣......事情當然不會那麼順利啦.....
有鑑於iOS卡了四天比較有經驗一點,這次錯誤卡一天而已...就慢慢設定吧...

首先可以參考官方的Troubleshooting


------------------------------------------
問題之一:無法顯示地圖

因為Genymotion模擬器本身沒有安裝Google App相關的設定,所以要手動去下載安裝進來
下載GAPPS選擇Platform x86 → Android 看你 → Variant nano

下載好了直接解壓縮後拖拉進模擬器安裝,接著按照指示步驟完成就好了~
好了之後Genymotion 側邊的GAPP ICON會打綠勾勾,代表OK囉~

------------------------------------------
問題之二:無法連結Genymotion模擬器

在執行react-native run-android常常會報確認模擬器是否啟動了
"Make sure you have an Android emulator running or a device connected and have
set up your Android development environment"
這邊的話還是要回到Genymotion的設定裡

Settings → ADB → 選擇 Use custom Android SDK tools
→Browse 路徑是 /Users/你的用戶名/Library/Android/sdk


------------------------------------------
問題之三:開啟地圖會出現紅邊(Red Border)

根據Troubleshooting裡美國大大們的解法

Step1
android目錄裡 打開settings.gradle貼上,
//------------
include ':react-native-maps'
project(':react-native-maps').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-maps/lib/android')
//------------

Step2 (關鍵!!)
-編輯 MainApplication.java
資料夾路徑/專案名稱/android/app/src/main/java/com/專案名稱/MainApplication.java

要import進來MapsPackage
import com.facebook.react.ReactApplication;上方加入

import com.facebook.react.ReactApplication; //<--加入這排

然後

@Override

    protected List<ReactPackage> getPackages() {

      return Arrays.<ReactPackage>asList(

        new MainReactPackage(),

        new MapsPackage() //<--加入這排

      );

    }

都好了之後,重新執行react-native run-android 看看,本人是可以正常顯示了~~


-------------------------------------------

這篇就到此結束囉~

還有很多不足的地方,可以多多去看官方Issues裡面有很多的解決方法,
希望大家開發順利~^^


© 圖為 曾英綺 版權所有,請勿盜圖等相關動作

[ 著作權為 Ying-chi Tzeng 曾英綺 所有,轉載請告知 ]

-------------------------------------------
參考資料:

.React Native設定Android開發環境 - macOS與Windows
http://eddychang.me/blog/javascript/95-react-native-android-macos-windows.html

.Map can not show on Android #684
https://github.com/airbnb/react-native-maps/issues/684

.[教學] React Native for Android - 1: 基礎
-------------------------------------------

2017年10月25日 星期三

〔筆記〕React Native iOS使用 react-native-maps 套件錯誤修正心得step by step #airbnb

因為最近在做新專案,需要用到React Native來開發,
專案需要串Google Maps API for iOS & Android ,
在開發上遇到一些問題寫在這邊筆記一下!

預設大家會已經會建一個新的React Native的 APP了

(官方都有教學一步一步做很簡單)附上連結↓
https://facebook.github.io/react-native/docs/getting-started.html

在這邊我使用的是「Building Projects with Native Code」的教學


地圖使用的是RN官方推薦的第三方套件:react-native-maps

STEP.1 創一個新的專案 (如果有已經有專案者可忽略)

react-native init ProjectName  #創建一個專案
cd ProjectName  #進入專案目錄裡
yarn add react-native-maps  #安裝react-native-maps package



〈做到這邊資料架構大概長成這樣,專案部分馬賽克...敬請見諒....Orz〉


STEP.2 設定iOS的專案

1.先確定環境
這邊很重要!(因為我就是在這裡出錯的XD

首先先確定你裝 Cocoapods 這個管理套件了沒 ←(沒有的請先安裝)

2.進到iOS目錄裡執行pod init

cd ios
pod init


pod安裝完了cli看起來沒事,但其實多出一個檔案 [Podfile]




3.打開並編輯Podfile檔(把裡面的Code覆蓋貼上)

# -------------以下開始複製-------------------

# Podfile content
source 'https://github.com/CocoaPods/Specs.git'

platform :ios, '9.0'

target 'ProjectName' do
    pod 'yoga', :path => '../node_modules/react-native/ReactCommon/yoga'
    pod 'React', path: '../node_modules/react-native', :subspecs => [ 
    'Core',
    'RCTActionSheet',
    'RCTAnimation',
    'RCTGeolocation',
    'RCTImage',
    'RCTLinkingIOS',
    'RCTNetwork',
    'RCTSettings',
    'RCTText',
    'RCTVibration',
    'RCTWebSocket',
    'BatchedBridge'
    ] 
 
    pod 'GoogleMaps'  # <- remove this line if you do not want to support GoogleMaps on iOS
    pod 'react-native-maps', path: '../node_modules/react-native-maps/'
    pod 'react-native-google-maps', path: '../node_modules/react-native-maps/'  # <- if you need GoogleMaps support on iOS
 
end
post_install do |installer|
    installer.pods_project.targets.each do |target|
        if target.name == "react-native-google-maps"
            target.build_configurations.each do |config|
                config.build_settings['CLANG_ENABLE_MODULES'] = 'No'
            end
        end
    end
end

# ---------------停-------------------

存檔(等等會講官方的文檔錯在哪裡....

4.安裝Podfile
在一樣目錄底下下指令

pod install


〈Podfile安裝好會長這樣〉
〈ios資料夾裡會多一個Pods的資料夾〉

5.設定Xcode相關變數

開啟 "ProjectName.xcworkspace"
特別注意,副檔名是「.xcworkspace」的檔喔!(重要

找到 Build Settings > Header Search Path 後雙擊欄位增加

$(SRCROOT)/../node_modules/react-native-maps/lib/ios/AirMap

然後把 non-recursive  改成 recursive


6.啟動Google Map SDK for iOS 的API金鑰

Google Console 選擇 Google Map SDK for iOS 啟動金鑰,這邊就不多闡述了。(懶得打XD

啟動之後複製你的金鑰,打開編輯AppDelegate.m
按照圖的位置加上

@import GoogleMaps;



[GMSServices provideAPIKey:@"YOUR_KEY"];

這兩排指令

好啦~存檔後差不多就設定完了
cli 下 react-native run-ios

他就會一直跑,喝個水、去上個廁所吧~身體健康也要顧一下XD


回來之後,他也跑完了當然不會那麼順利就Success啦....報錯了...

-------------------------------------------

報錯一:

Command failed: /usr/libexec/PlistBuddy -c Print:CFBundleIdentifier build/Build/Products/Debug-iphonesimulator/CallCar_ver_RN.app/Info.plist Print: Entry, ":CFBundleIdentifier", Does Not Exist
解決:

可以參考這一篇
[Master Task] Print: Entry, ":CFBundleIdentifier", Does Not Exist #14423

-------------------------------------------

報錯二:

Apple Mach-O Linker Error Group



解決:

先下 react-native unlink react-native-maps 一次
再下 react-native link react-native-maps 讓他重新連結套件

手動打開 ProjectName.xcworkspace 把 "General"裡面的相關設定調好後,
Generic iOS Device > Run看看



-------------------------------------------

好吧~到這邊我已經卡關四天了.....
希望用血淚換來的經驗可以幫助到大家順利開發TAT

© 圖為 曾英綺 版權所有,請勿盜圖等相關動作
[ 著作權為 Ying-chi Tzeng 曾英綺 所有,轉載請告知 ]


-------------------------------------------
參考資料:

.airbnb/react-native-maps

https://github.com/airbnb/react-native-maps

.react-native-maps/docs/installation.md
https://github.com/airbnb/react-native-maps/blob/master/docs/installation.md

.[Master Task] Print: Entry, ":CFBundleIdentifier", Does Not Exist #14423
https://github.com/facebook/react-native/issues/14423

.anhtuank7c/maps-example:
https://github.com/anhtuank7c/maps-example

.React Native Google Map with react-native-maps
https://codeburst.io/react-native-google-map-with-react-native-maps-572e3d3eee14

.React Native
https://facebook.github.io/react-native/
-------------------------------------------

2017年10月19日 星期四

〔練習〕使用create-react-app來建一個新的react專案

先進入想要建立專案的路徑位置

建立一個新專案指令為 KingdeMacBook-Pro:~ king$ create-react-app <資料夾名稱>

建好之後進入此資料夾

用yarn start 開始實作專案 當開始時 他會跑一個 localhost:8080給你 輸入網址就是你的專案了


〔筆記〕使用vscode達到 php 運行 live-server ,存檔即時變更頁面

今天要來紀錄怎麼使用VSCode達到 php 運行 live-server ,存檔即時變更 因為在撰寫html上,html屬於用戶端(Client-side),作業上都是在客戶端進行不會有server端的問題,所以進行存檔頁面即變更較為簡易,網路上也有很多套件可以用 。 ...