新北市教育局程式應用研發社群工作坊-Angular 2 進階(1060712~0714)

日期:106年7月12日~7月14日

地點:新北市教研中心

公文與計畫:


課程主題:Angular 2 進階

講師:林士立老師

【課程內容】:

開發環境與工具:

安裝開發環境與工具

  • 安裝開發工具 (WebStorm)
  • 安裝 Git
  • 安裝 Chrome 擴充功能:Angular Augury

更新 Node.js, npm, Angular CLI

Node.js 重新安裝即可

npm i -g npm

npm unstall -g @angular/cli

npm i -g @angular/cli

實作操作指令:

練習專案檔下載:ng-demo-routing

  • 下載解壓縮後,請至專案資料夾中,下達下列指令:
    • npm install => 重建 node_modules 

ng new ng-demo-routing --routing

npm start

ng build --prod

ng g c intro/group1

ng g c intro/group2

ng g c navbar

ng g c home

ng g c page-not-found

ng g c intro/intro

ng g m intro --routing


實作延遲載入及預先載入:

練習專案檔下載:ng-demo-routing (同上).

  • 下載解壓縮後,請至專案資料夾中,下達下列指令:
    • npm install => 重建 node_modules 

ng g m m2 --routing

installing module
create src\app\m2\m2-routing.module.ts
create src\app\m2\m2.module.ts
WARNING Module is generated but not provided, it must be provided to be used

ng g c m2/demo1

installing component
create src\app\m2\demo1\demo1.component.css
create src\app\m2\demo1\demo1.component.html
create src\app\m2\demo1\demo1.component.spec.ts
create src\app\m2\demo1\demo1.component.ts
update src\app\m2\m2.module.ts

ng g c m2

installing component
create src\app\m2\m2.component.css
create src\app\m2\m2.component.html
create src\app\m2\m2.component.spec.ts
create src\app\m2\m2.component.ts
update src\app\m2\m2.module.ts


Module 功能介紹

Feature Module => 功能

  • Lazy Loading Module
  • Pre Loading Module

Core Module

Share Module


Angular Form 實作練習:

練習專案檔下載:ng-demo-forms

  • 下載解壓縮後,請至專案資料夾中,下達下列指令:
    • npm install => 重建 node_modules

ng new ng-demo-forms --routing

npm start

ng g c reactive


WebStorm 操作指令:

  • Ctrl + Alt + o:移除未用的指令行
  • Ctrl + Shift + 上下方向鍵:程式碼上下移,若為陣列元素,為自動調整 “," (逗號)。

Todo 專案前、後端程式整合實作

後端程式安裝:

安裝 XAMPP 及 Composer

範例檔下載:ng2-php-todo-demo (註:已將原 vendor 及 node_modules 資料夾刪除)

cd todo-php

composer install => 重建 vendor 資料夾

將 todo-php\app 設為 Apache 首頁路徑

設定 todo-php\.env => 連線至 MySQL 資料庫的組態設定

.\vendor\bin\phinx migrate => 建立測試資料表

使用 http://localhost 測試網站系統

  • adminer.php => MySQL 線上管理程式
  • todos.php => 顯示測試資料表內容

前端 Todo 專案建立實作:

練習專案檔下載:ng-demo-todo

  • 下載解壓縮後,請至專案資料夾中,下達下列指令:
    • npm install => 重建 node_modules

ng new ng-demo-todo --routing

npm start

ng g s todo

app.component.ts

import { Component, OnInit } from '@angular/core';
import { TodoService } from './todo.service';
@Component({
 selector: 'app-root',
 templateUrl: './app.component.html',
 styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
 title = 'app';
todos = []; // {id: 1, title: '...', content: '...'}
constructor(private todoService: TodoService) {}
ngOnInit(): void {
 this.todoService.getlist().subscribe(res => this.todos = res.data);
}
addTodo() {
 let newTodo = {
   title: this.title,
   content: this.title,
 }
 // this.todos.push(newTodo);
 this.todoService.add(newTodo).subscribe(
 // success
   res => {
     newTodo['id'] = res.data.id;
     this.todos.push(newTodo)
   }
 // error
 // complete
 )
 }
}

todo.service.ts

import { Injectable } from '@angular/core';
import { Http, Headers, RequestOptions, Response } from '@angular/http';
import 'rxjs/add/operator/map'
@Injectable()
export class TodoService {
headers = new Headers({'Content-Type': 'application/json'});
 options = new RequestOptions({headers: this.headers});
constructor(private http: Http) { }
add(todo) {
 return this.http.post(
   'http://localhost/todos.php?op=addTodo',
   todo,
   this.options
 ).map((res: Response) => res.json());
}
getlist() {
 return this.http.get(
   'http://localhost/todos.php'
   ).map((res: Response) => res.json());
 }
}

 app.component.html

Title:
<input type="text" [(ngModel)]="title">
<button (click)="addTodo()">Submit</button>
<hr />
<ul>
 <li *ngFor="let todo of todos">
   {{ todo.id }} - {{ todo.title }}
 </li>
</ul>

【學習資源】:


Angular 線上讀書會

投影片:Angular 2 新手急救站

投影片:Angular 2 開發實戰:進階開發篇 – RxJS 新手入門


【網路資源】

仁愛國小研習:Scratch 2 程式設計(1060711)

日期:106年7月11日

主題:Scratch 2 程式設計

講師:邱昭士


運算思維與程式設計

視覺化程式語言_handson_20160606 – 台北市立大學盧東華教授


Scratch 2 離線版安裝

如何在 Scratch 2.0 角色造型上輸入中文字:

參考網址:http://wdpsestea.blogspot.tw/2017/05/scratch2.html (scratch2背景輸入中文 | 陳國全夢幻天地 Blog)

Scratch2不管是win或是linux下都無法輸入中文字,經過新北市烜誠(三多國小)和清賢(復興國小)老師的努力,終於可以輸入中文了。烜誠老師還把積木文字放大,更適合國小學生使用。感謝烜誠和清賢老師的努力。

安裝方法:


範例教學

基礎範例 1:貓先逆時針走一圈,叫出蝙蝠,貓隱藏,蝙蝠出現,不斷地逆時針飛。

  • 貓-角色1-程式

貓-角色1

貓-角色1-程式

  • 蝙輻 Bat1-程式

Bat1

Bat1-程式

基礎範例 2:貓先逆時針走一圈,再叫出蝙蝠,當蝙蝠出現後,即以較快的速度追上貓,貓被追到後叫了一聲,並說 SOS! 2秒,程式結束。

練習一1Scratch練習1-2


Scratch2練習一_角色1程式Scratch2練習一_Bat1程式


Scratch練習1-3 Scratch練習1-4

基礎範例 3:以上面的範例為基礎,於叫出蝙蝠出來後,切換背景。

迷宮:(迷宮圖可改置於舞台上)

Scratch2_迷宮_畫面1 Scratch2_迷宮_畫面2 Scratch2_迷宮_畫面3 Scratch2_迷宮_程式設計1 Scratch2_迷宮_程式設計2 Scratch2_迷宮_程式設計3 Scratch2_迷宮_程式設計4

  • BMI計算器

Scratch2_BMI_畫面 Scratch2_BMI_程式設計1 Scratch2_BMI_程式設計2

教學參考網站:

補充教材:

新北市教育局程式應用研發社群工作坊-KendoUI(1060710-0711)

日期:106年7月10-7日11日

地點:教研中心電腦教室

講師:三重區正義國小詹博文老師


課程講義:KENDOUI程式設計研習

範例網頁下載:kendo_web_20170711

範例網頁實作:http://webnas.bhes.ntpc.edu.tw/chiubor/kendo_web/

KendoUI課程錄影,明德高中許明福老師提供:


課程內容:

表單實作練習

<form>
<h1>公告管理</h1>
<hr/>
<label>公告人:</label>
<input id="lab_man" />

<label>發佈單位:</label>
<select name="organization">
<option value="o1">教務處</option>
<option value="o2">學務處</option>
<option value="o3">總務處</option>
<option value="o4">輔導室</option>
</select><br/>

<label>隱密性:</label>
<input type="radio" name="secur" value="p">公開</input>
<input type="radio" name="secur" value="s">限會員</input><br/>

<label>公告啟起日:</label>
<input id="start_date">

<label>公告結束日:</label>
<input id="end_date" /><br/>

<label>公告主題:</label>
<input id="txt_title" /><br/>

<label>公告內容:</label>
<textarea id="txt_context" cols="80" rows="5"></textarea><br/>
<hr/>
<input type="submit" value="新增" />
</form>

 


kendoUI_upload元件+PHP存檔範例

學習資源:

仁愛國小研習:Kodu 3D遊戲設計(1060710)

日期:106年7月10日

主題:Kodu 3D遊戲設計

地點:蘆洲區仁愛國小

講師:邱昭士

Kodu Game Lab 官方網站:https://www.kodugamelab.com/

Kodu 3D立體遊戲設計_學習程式的好工具 (呂聰賢)

 

  • Configure Kodu Game Lab – 設定Kodu螢幕解析度、檔案儲存的資料夾
  • Kodu Game Lab – 執行Kodu

Kodu 12種工具應用說明

 

教學範例:(以呂聰賢老師教材為例)

  1. kodu吃蘋果
  2. kodu自動巡航
  3. 賽車遊戲
  4. 迷宮歷險
  5. 超級瑪琍歐
  6. 搭船悠遊去
  7. 跳躍闖關
  8. 瞬間移動
  9. 擂台挑戰

進階範例:

 

 

學習資源:

106年新北市行動學習學校國小組北區第三次月例會(1060707)

日期:106年7月7日(五)

地點:新北市米倉國小

國小組(北區)行動學習學校:

  • 白雲國小、崇德國小、瑞芳國小、米倉國小、碧華國小、長坑國小、中港國小、麗林國小、明志國小、 義學國小

公文及會議流程:

米倉國小分享:

北區各校-經驗交流分享:

長坑國小:1060707長坑國小行動學習分享

碧華國小:

義學國小:1060707義學國小行動學習分享


行動學習知能研習

主題:體驗AR/VR在數位說故事上的可能

投影片:1060707行動學習學校國小組北區教師集中培訓_淺談VR、AR創新應用

虛擬實境Virtual Reality, VR

擴增實境Augmented Reality, AR

混合實境Mixed Reality,MR(AR+MR)

另類應用

zSpace

活動照片: