2018年9月16日 星期日

[Android Studio] Gradle 101 新手入門

Gradle 基本概念

Gradle 是一個 Java 程式語言的「自動化組建工具」,設定檔格式是 Groovy 語言;其他類以的工具還有 Ant 和 Maven ,Ant 和 Maven 的設定檔格式是 XML。

組建(Build) 包含了開發、測試、編譯及部署…等階段。

在 Android App 的開發階段中,Gradle 可以幫我們完成以下的工作:
1. 自動下載第三方程式
2. 管理程式庫間的依頼性

在 Android App 的測試階段中,Gradle 可以幫我們完成以下的工作:
1. 執行測試案例(Test Case)
2. 檢驗程式碼的品質

在 Android App 的編譯及部署階段中,我們有以下的工作要完成:
1. 將 Java 原始碼編譯成 bytecode
2. 建立 Android 應用程式套件,或稱 APK 檔案
3. 傳至 AVD(Android Virtual Device) 或 手機上並執行

如果每個工作都要用指令慢慢輸入或是用滑鼠慢慢點,是很沒有效率的。
Gradle 利用「Task」的概念,把這些工作組合成一個 Task,只要執行 Task,就可以把許多工作一次完成。

Android Studio 3.1.4 使用的是 Gradle 4.4版,我們不用再去下載安裝 Gradle,Android Studio 已經把 Gradle 包在專案(Gradle Wrapper)裏面,我們可以直接使用終端機(Terminal) 來使用 Gradle。

點選左下角的「工具窗格選單」圖示,並選擇「Terminal」
enter image description here

在 Terminal 視窗中輸入以下指令來查看 Gradle 版本

gradlew -v	

enter image description here

也可以透過「Gradle 工作窗格」來檢視可執行的 Task。

點選左下角的「工具窗格選單」圖示,並選擇「Gradle」
enter image description here

就可以看到目前可以執行的 Task
enter image description here

Gradle 設定檔

在 Android Studio 中,Gradle 設定檔分成二個層級:專案(project)層級及模組(module)層級,檔案名稱皆為 build.gradle ,但是存放的位置不同。

假設我們的專案名稱為 Gradle101,存放於 C:\code\ 目錄下
專案層級的 Gradle 設定檔位置: C:\code\Gradle101\build.gradle
模組層級的 Gradle 設定檔位置: C:\code\Gradle101\app\build.gradle

為什麼是 app 目錄呢?因為 Android Studio 預設的模組(module)名稱為 app。

我們可以在 Android Studio IDE 的 Project 工作視窗(快速鍵為 Alt + 1) 來檢視這兩個設定檔。
enter image description here

如何導入第三方套件

請打開模組層級的 Gradle 設定檔,在這個例子中,也就是(C:\code\Gradle101\app\build.gradle)

假設我們的專案想要使用 Joda-Time 這個日期功能套件,我們可以在 maven repository 找到這個套件的資料,目前最新版的 joda-time 版本是 2.10 ,連結如下:
https://mvnrepository.com/artifact/joda-time/joda-time

進入連結頁面後,點擊下面的「Gradle」頁籤,就可以看到 Gradle 相關的設定資料,如果不想看到註解,就把下方的「Include comment with link to declaration」核取方塊取消。
enter image description here

在這裏,我們可以知道,要把 Joda-Time 加入我們的專案,就要把下列設定加到我們的 Gradle 設定檔中。

	compile group: 'joda-time', name: 'joda-time', version: '2.10'

將設定加入 app 層級的 build.gradle 設定檔後,會發現右上角出現「Sync Now」來提示你需要同步套件資料,請點擊「Sync Now」
enter image description here

然左下角會出現 Sync 工作窗格來顯示目前工作狀況;下圖指出 sync 成功,但是有一個警告訊息。
enter image description here

右下角就是警告訊息的內容,主要是因為 complie 這個設定將要被 implementation 和 api 取代,在 2018 年的年底就會被移除。
enter image description here

同步完成後,切換到 Project 工作窗格,並將檢視模由「Android」變更為「Project」,就可以發現,Gradle 已經幫我們下載好 Joda-time 套件了。
enter image description here

如何執行 Task

目前,我們還不需要深入的了解個別 Task 的功能,只需要知道,當我們執行功能列上的[Run] 相關功能時,就是由 Gradle 幫我們去處理這些複雜的工作。

參考資料

1、【認識 Gradle】
2、https://developer.android.com/studio/releases/gradle-plugin
3、https://developer.android.com/studio/build/

2018年9月11日 星期二

[Git] 101 剛好夠用的 Git 知識

Git 是現在最常用的版本控制工具(Version Control System, VCS),功能強大、指令繁多;但是對初學者而言,只需要學會 20% 的指令,就可以應付 80% 的狀況。

學習目標

  1. Git 安裝
  2. Git 基本概念
  3. 本機 Git 常用指令
  4. .gitignore 檔案

2018年9月3日 星期一

[Android Studio] AdMob教學 -- 帳號申請

摘要

1、到AdMob 網站
2、基本資料填寫及身分認證
3、「應用程式資訊」建檔
4、建立「廣告單元」

[Android Studio] AdMob教學 -- 程式碼實作

摘要

1、取得 AdMob「應用程式 ID」 和 「廣告單元 ID」

2、建立一個最簡單的 android 專案

3、修改 build.gradle 設定

4、修改 AndroidManifests.xml 設定

5、在 layout/activity_main.xml 中新增一個 廣告元件

6、在 MainActivity.java 中,初始化,並設定廣告

2017年12月12日 星期二

Laravel 102: 使用 master layout 的靜態頁


相關檔案:


  1. resources/views/layouts/main.blade.php
  2. resources/view/welcome.blade.php
  3. routes/web.php



步驟:

1、建立 master layout view

在 resoluces/views/layouts/ 下,建立 master layout 檔案,檔名為 main.blade.php,其內容如下:


<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Myhomestead</title>
</head>
<body>
  @yield('content')
</body>
</html>

2、建立靜態頁面的 view

在 resoluces/views/ 下,建立 welcome.blade.php,其內容如下:


@extends('layouts.main')

@section('content')

<h1>Welcome to Homestead</h1>

<p>
Homestead Rocks!
</p>

@endsection

3、修改路由

修改 routes/web.php,加入以下內容

Route::get('/', function () {
    return view('welcome');
});


4、檢視頁面

在網址列中輸入:myhomestead.com/welcome


Laravel 101: 新增一個最簡單的靜態頁面

這個例子只用到最簡單的 blade template 和 路由,並沒有用到 controller。

相關檔案:

resources/views/hello.blade.php
routes/web.php

步驟:

1、建立 html 的內容

新增 resource/views/hello.blade.php,並加入以下內容


<h1>Hello, world!</h1>

2、指定相關的路由

修改 routes/web.php,加入以下內容

Route::get('/', function () {
    return view('hello');
});

3、檢視頁面

假設網域名稱是 myhomestead.com,則在網址列中輸入:myhomestead.com/hello ,即可看到最簡單的靜態頁面。

建立 Laravel 開發環境 -- 以 Homestead 為例

目的


在 Win7 本機上建立 Laravel Homestead 開發環境,專案目錄為 myhomestead ,放置在 使用者目錄下的 code 目錄下,ip 位址為 192.168.10.10,網站名稱為  myhomestead.com 



相關軟體版本

  1. Win7 Professional
  2. Git 2.15.1
  3. VirtualBox 5.2
  4. vagrant 2.0.1
  5. Ubuntu 16.04.3 LTS
  6. Laravel 5.5



Win7 本機 -- 軟體安裝


安裝 git bash

請至  https://git-for-windows.github.io/  下載 window 安裝檔後依預設值安裝。

注意!!之後的指令操作,均以在 git bash 下操作為例

安裝 VitrualBox

請至 https://www.virtualbox.org/ 下載 window 安裝檔後依預設值安裝。


安裝 vagrant

請至 https://www.vagrantup.com/ 下載 window 安裝檔後依預設值安裝。

安裝 Homestead  


vagrant box add laravel/homestead


這會安裝 Homestead 影像檔到  ~\.vagrant.d\boxes\laravel-VAGRANTSLASH-homestead\5.0.1\virtualbox
安裝 Homestead

在家目錄下執行

git clone http://github.com/laravel/homestead.git Homestead

這會在家目錄下產生 Homestead 目錄

然後在 Homestead 目錄中,請執行


bash init.sh

這會產生 Homestead.yaml 這個設定檔。



建立本機工作目錄

在 Win7 的使用者目錄中建立一個名為 code 的目錄


cd ~

mkdir code



設定 Homestead.yaml

將 Win7 本機的 code 目錄對映到虛擬的 Ubuntu 上,並指定 Ubuntu 上的目錄為網站的根目錄

設定 Homestead.yaml  將其中 folders 及 sites 的部份,改為以下


folders:

    - map:  ~/code

      to: /home/vagrant/code

sites:

    - map: myhomestead.com

      to: /home/vagrant/code/myhomestead/public



並將 authorize 及 keys 的部份刪除或註解。

修改 hosts 檔

以「搜尋」或「所有程式」方式找到 Notepad 筆記本的圖案,然後在圖案上按滑鼠右鍵,選擇「以系統管理員方式開啟」。


開啟後,再用檔案總管找到 hosts 檔案( C:\Windows\System32\drivers\etc\hosts ),把這個檔案拖進已經開啟的 Notepad 中,編輯內容,將


192.168.10.10  myhomestead


加入到檔案的最後一行,然後存檔即可。

實際操作 Homestead 虛擬機器


在 使用者目錄/Homestead 下,可以執行

# 啟動虛擬機器
vagrant up
# 停止虛擬機器
vagrant halt
# 刪除虛擬機器影像檔
vagrant destory


在任何的目錄下,均可以執行

vagrant box list



# 如果有更改 Homestead.yaml 檔的設定,請務必執行

vagrant reload --provision


Ubuntu 虛擬機器 -- 安裝設定

接下來的設定,均是以在 git bash 下,執行 ssh  vagrant@192.168.10.10 ,遠端連線至 Ubuntu 上來執行。

安裝 laravel installer

執行以下指令

composer global require "laravel/installer"

這會把 laravel 這個工具程式安裝到 ~/.composer/vendor/bin/ 下

安裝 laravel project

執行以下指令

cd ~/code

~/.composer/vendor/bin/laravel new myhomestead

這樣就會安裝好 Laravel 的基本架構了