라라벨 맥북에 설치하기 (Xe의 차세대 프레임웍)

1. VirtualBox와 Vagrant를 설치한다.

주의사항 1. VitualBox의 경우 맥북인텔의 경우 최신의 버추얼 박스가 amd CPU로 되어 있어 받으면 에러가 난다. 최신의 버추얼박스 amd가 아닌 예전의 Intel버전을 받아야 한다.
주의사항 2. 잘안되서 VirtualBox와 Vagrant를 삭제해야 할 경우 설치파일 안에 uninstaller를 이용하여 깨끗이 삭제하도록 한다.

2. 홈디렉토리에 Code 디렉토리 생성

실행디렉토리 : cd ~
mkdir Code

3. 도메인 추가

sudo vi /etc/hosts
를 이용해 i 누르고 도메인추가
192.168.10.10  homestead.app
: wq 로 저장

4. vagrant 에 라라벨/홈스테드 올리기

실행디렉토리 : cd ~
vagrant box add laravel/homestead

5. 홈스테드 설치

실행디렉토리 : cd ~
git clone https://github.com/laravel/homestead.git Homestead

6. Homestead.yaml 생성

실행디렉토리 : cd ~/Homestead
bash init.sh

7. SSH 키 설정

실행디렉토리 : cd ~
ssh-keygen -t rsa
* 기본설정으로 그냥 엔터를 3번 누른다. (처음 설치경로설정, 암호설정 2회 하지만 다 공백으로 엔터를 누른다.)

8. Vagrantr Box 구동

실행디렉토리 : cd ~/Homestead
vagrant up

(잘못 됐을 경우 두려워 말고! vagrant destroy --force 로 가상머신 삭제)

9. 가상머신 접속

실행디렉토리 : cd ~/Homestead
vagrant ssh
또는 아래와 같이 작성해 놓으면 언제나 들어가기 쉽게 만들 수 있음

10. Bash 별칭 만들기

실행디렉토리 : cd ~
vi .profile
aliases vm="ssh vagrant@127.0.0.1 -p 2222"
:wq
다음과 같이 프로파일을 만들어 두면 터미널 어디서나 vm 만 누르면 가상머신으로 접속한다.


잘못됐을 경우 1번을 잘 살펴보고 모두 삭제하고 다시 해 보는게 좋습니다. 저도 설치하면서 많이 실수를 해서 이렇게 메뉴얼을 적어보았습니다. 어려워 하시는 분들에게 많은 도움이 되었으면 좋겠네요. 그리도 꼭 아래 XE와 영문 라라벨 메뉴얼도 함께 보세요.

xe 라라벨 메뉴얼 : http://xpressengine.github.io/laravel-korean-docs/docs/5.0/homestead/
영문 라라벨 메뉴얼 : http://laravel.com/docs/5.1
xe 라라벨 동영상 강좌 : https://www.xpressengine.com/learn/23061328
라라캐스트 라라벨강좌 : https://laracasts.com/series/laravel-5-fundamentals

미로찾기 프로그램 만들기 (엔트리 이용)

최근에 SW선도학교를 비롯하여 연구학교에서 국산 EPL인 엔트리 프로그램을 많이 이용하려는 움직임이 있다. 이에 맞추어 나도 다른 나라의 프로그램보다 우리나라 프로그램을 이용해야겠다는 생각에 엔트리로 노력하고자 한다. 그 첫번째 프로그램으로 미로찾기 프로그램을 만들어 보았다.

미로게임 만들기

게임 화면

설명 : 풍선이 미로를 통과하는 게임이다. 검은선에 닿으면 다시 처음자리로 돌아간다.

 일단 처음 프로젝트를 시작하면 엔트리 강아지가 나오는데 삭제하고 새로 오브젝트를 추가한다.

기본화면 작업

미로를 통과하는 캐릭터를 고른다 다양하고 재미있는 캐릭터가 많지만 여기서는 미로를 통과하기에 동글동글하여 제일 적합한 풍선으로 선택하였다. 아래 번호 순서에 따라 풍선을 선택하자.

그 다음에 미로를 만들어야 한다.  미로는 배경이 되는 그림이기 때문에 기존에 배경이 되는 그림을 선택한다. 다음 배경에서 가장 처음에 나오는 고대 유적지를 선택한다.

그리고 모양에 모두 지우기를 선택하고 배경만 남긴다.

 

그리기도구에서 페인트를 선택하고 배경색으로 검정색을 선택한후 그리기 화면에 검정색을 칠해준다.

이제 길을 만들어야 한다. 길은 사각형 툴을 이용해 만들 것이다.  사각형툴을 선택하고 색을 흰색 또는 투명한 색을 선택한다.(주의 원래 투명을 선택해야 하지만 저장을 하면 다시 흰색으로 돌아가는 경우가 있어 현재 색 선택은 큰 상관이 없다.) 그리고 출발위치와 도착위치를 잘 생각하며 미로를 만들어 준다.

 다음 페인트툴을 선택하자 색은 흰색 위에 빨간 사선이 그어진 투명색을 선택하자 그리고 길이 있는 곳에 클릭을 해준 후 저장하기를 누른다.

이제 기본 그리기 환경을 모두 마쳤다. 이어서 코딩작업에 들어가 보자. 지금까지 따라오느라 많이 힘들었던 친구들은 잠시 쉬는 시간을 가져도 좋을 것 같다. ^^

블럭코딩의 실제

풍선 캐릭터를 먼저 선택하고 코딩에 들어가자. 시작하기를 누르면 항상 처음에 위치에 갈 수 있도록 x,y위치로 이동하기 블럭을 이용하여 x좌표와 y좌표값을 넣어준다.

시작하기를 누를 때 풍선이 움직이는 블럭 코딩을 만들어 보자. 일단 기본적으로 시작하기 버튼 클릭 블럭을 준비한 후 '흐름' 에 있는 '무한 반복' 블럭 안에 '만일 ~이라면' 블럭을 4개를 준비한다. 그 후 '판단' 에 있는 'q키가 눌러져 있는가?' 블럭 4개를 각각 '만일 ~이라면' 블럭 안에 잘 넣어준다. 그 후  'q'키 부분을 클릭하여 아래 그림과 같은 방향키를 눌러준다.

각각의 화살표 키가 눌러졌는지 판단한 후 좌표를 이동시켜야 한다. 아래와 같이 '움직임'에 'x좌표를 ~만큼 바꾸기'와 'y좌표를 ~만큼 바꾸기'를 조건블럭안에 넣어준다. 그리고 숫자를 알맞게 넣어준다.

그리고 실행해본다.

이 프로그램은 아이템, 그리고 다양한 지도를 만들 수 있어 아이들이 많이 응용할 수 있는 여지가 있습니다. 가르치는 선생님들에게 조금이나마 도움이 되기를 바라며 이만 마칩니다. ^^

라즈베리파이2에 우분투 MATE를 이용해 윈도우X 설정하기

우분투MATE를 쓰는 이유
X윈도우, 사운드카드, LibreOffice가 설치되어있음(라즈베리 파이를 데스크탑 컴퓨터로 쓰는 사람에게 좋은 선택)
기본적으로 해야 할 작업 - 용량늘리기, 한글설정, 크롬설치
기타 할 작업 - 앱인벤터 설치

1. 다음 사이트에서 파일을 다운 받는다.
https://sourceforge.net/projects/ubuntu-mate/files/15.04/armhf/
2. Ubuntu-MATE-15.04-RaspberryPi2-2015-03-14.zip 파일을 압축을 푼다.
3. 압축폴더 안에 2015-03-14-ubuntumate-vivid.img.gz 파일을 압출을 풀어준다.
4. 2015-03-14-ubuntumate-vivid.img 준비된 것을 확인한다.

<SD카드 image 작업>
1. win32Disk Imager 관리자권한으로 실행한다.
(실행시 에러가 뜰 수도 있다. 혹시 Ndrive같은 웹하드를 이용하는 경우 외부저장장치로 인식해서 보이는 에러일수도 있기 때문에 종료하도록 한다. 에러가 없으면 계속 gogo)
2. 2015-03-14-ubuntumate-vivid.img 파일을 폴더에서 선택하고 Write 버튼을 누른다.
3. sucess하면 라즈베리파이에 micro sd 카드를 삽입한다.

<MATE 우분투에서 용량 늘리기 작업>
1. pwd : ubuntu 로 로긴
2. ctrl+alt+T 단축키를 활용해 터미널을 띄운다.
3. df -h를 하면 공간이 얼마 없다는 것을 볼 수 있다.
4. sudo fdisk /dev/mmcblk0
5. d(엔터) 2(엔터) (파티션 지우기)
6. n(엔터) p(엔터) 2(엔터) 엔터, 엔터
7. w(엔터)
8. sudo shutdown -r now 로 재부팅
9. sudo resize2fs /dev/mmcblk0p2


<한글사용작업>
1. system->look and feel->language support 체크
2. 한글 install
3. apply system-wide

sudo apt-get install ibus

<계속 작업중>




root로 접속할 때 다음과 같은 에러가 날경우 처치법
cp /etc/skel/.profile ~/.profile

네트워크 서비스 탐색 에러
/etc/default/avahi-daemon 파일을 열어서 AVAHI_DAEMON_DETECT_LOCAL 값을 1에서 0으로


참고사이트 ----------------------------------------------------------------
https://wiki.ubuntu.com/ARM/RaspberryPi
http://www.raspberrypi.org/forums/viewtopic.php?f=56&t=100553
<우분투MATE 다운>
https://ubuntu-mate.community/t/ubuntu-mate-15-04-for-raspberry-pi-2/517
<파티션재설정>
http://elinux.org/RPi_Resize_Flash_Partitions
-----------------------------------------------------------------------------

스크래치 - 변수 설명 (1) ...만보기

기억창고 변수 
프로그래밍을 할 때 기억하고자 하는 숫자나 글자등을 기억하는 장소가 필요하다. 이러한 숫자나 글자를 기억하는 장소를 컴퓨터에서 변수라고 부른다. 그럼 변수가 어떤 곳에 쓰이는지 실제로 스크래치 프로그램을 활용해서 알아보자.

만보기 만들기

화면 구성은 다음과 같다.

버튼은 저장소에서 스프라이트 선택을 이용하여 버튼그림을 찾았다.

   

버튼글씨의 한글은 스크래치2.0에서 TEXT로 한글이 지원되지 않아 포토샵을 활용 했다. 하지만 아이들과 할 때 변하게 마우스로 그림그리기도구에서 붓을 이용해 글씨를 쓰라고 하는 것이  훨씬 간편하고 시간도 절약될 것이다.

버튼스프라이트를 클릭하여 다음과 같이 파란색 테두리를 갖도록 한다. 이것을 포커스를 준다고 하는데 포커스를 줘야 우측 화면에 코딩이 가능하다.

이벤트에서 <이 스프라이트를 클릭했을 때> 라는 블럭을  우측 프로그램 화면으로 드래그해준다.

블럭팔렛트에서 데이터를 클릭하고 <변수만들기>를 만보기라고 적는다.

<만보기를 1만큼 바꾸기>라는 블럭을 옆으로 옮겨서 <이 스프라이트를 클릭했을 때라는 블럭과 결합시킨다.

이로써 변수를 이용한 1단계 만보기가 완성되었다.

엔트리 프로그램에 대해 살펴보자.

엔트리 프로그램은 아이들을 위한 프로그램 교육도구이다. 미국에서 만든 스크래치 프로그램과 비교할 수 있는데 처음 엔트리가 나왔을 때는 이것을 가지고 교육을 할 수 있을까 걱정이 되는 부분이 있었다. 버그도 많았고 교육에 활용하기에 안되는 부분이 많아 답답했다. 비교가 되는 스크래치는 매우 잘 만들어진 프로그램이어서 새롭게 한국형 소프트교육 프로그램을 만들어서 실용적인 단계의 위치에 갖다 놓는다데 오랜 기간이 걸리지 않을까? 스크래치처럼 만들 수 있을까? 회의적인 입장이었다. 하지만 최근에 다시 들어가서 조금 만져보게 되었는데 생각보다 많은 부분에 신경이 쓴 부분도 보였다. 예전에 쓸 수 있을까란 걱정을 했다면 이제는 쓸만하다라는 긍정적인 입장으로 돌아서게 되었다.

프로그램을 자유롭게 만져보고 싶은 욕구를 가진 아이들에게 아직 구현이 안된 기능이 있고 버그가 있는 상태에서는 그건 안되는거야. 라고 말을 해야 할 때가 생긴다. 하지만 그런 말을 해주기란 어렵다. 메뉴얼대로만 하면 되면 문제가 없겠지만 그렇게만 하라고 하면 프로그램 얼마나 딱딱하고 재미없을까? 하지만 이제는 엔트리 프로그램이 예전보다 버그도 많이 고쳐지고 디자인도 깔끔해졌다. 아이들에게 소개하기도 편안한 느낌이 들었다.

두 번째는 스크래치의 단점을 보강해서 이건 더 낫다 라고 생각되는 부분이 생겼다. 스크래치의 경우 긴 블럭의 경우 잘 보이지 않아서 스크립트창으로 옮겨야지만 보이는 점이 있었다. 

하지만 엔트리의 경우  이렇게 블럭내용이 길어서 안보이는 경우에

마우스를 글씨가 잘린부분의 위치로 옮겨주면 아래 그림과 같이 나타난다.

   또, 아래와 같이 안보이는 블럭이 있을 때 빨간 동그라미 위치에 있는 사각형에 가면 블럭이 보이는 길이를 조정할 수 있다는 점이다. 이렇게 다양하게 프로그램의 편의를 위해서 신경써준 점이 돋보인다.

세 번째로 선생님들을 위한 12차시의 메뉴얼이 상세하게 제시되어 있다. 아이들을 가르치는데 적절한 자료로 선생님들의 부담을 덜어줄 것으로 보인다.

네 번째는 한국의 프로그램도구라 한글지원이 잘 된다. 현재 스크래치 2.0은 블럭이 한글로 되어있지만 그리기를 할 때라든지 부분적으로 번역이 안된 부분이 보인다. 엔트리는 한글 지원이 잘되고 문제가 있으면 바로 지원을 받을 수 있다는 것이 장점이 될 것이다.

물론 아직 엔트리가 베타이고 모든점이 완비된 것은 아니다. 하지만 지금까지 엔트리가 보여준 노력을 살펴보면 앞으로 전망을 밝을 것으로 보인다. 앞으로 조금 더 다듬는다면 내년에는 아니 후년에는 스크래치와 대등한 대결을 펼칠 수 있지 않을까 내심 기대해본다.

플립러닝이란?

플립러닝(Flipped learning)은 거꾸로 뒤집은 교육과정이란 뜻으로 전통적인 수업 방식인 교과서를 바탕으로 한 강의 중심 수업 후 숙제 확인 방식이었다면 플립러닝은 학생들이 수업 내용을 미리 동영상을 통해 학습하고, 수업 때는 그 내용을 토대로 토론을 하거나 과제 수행 활동 중심으로 교육하는 것을 말한다고 한다.

이것은 이전에 없었던 새로운 이야기가 아니다. 블랜디러닝 이라고 온오프라인 교육이란 말이 있어왔다. 하지만 예전에는 여러가지 제약으로 적용이 어려웠다. 다음은 예전에 플립러닝이 적용하기 어려웠던 이유이다.

1. 동영상 제작의 어려움
동영상을 만드는데 카메라 구입 및 사용법 알아야 한다. 고급 동영상 편집 소프트웨어 프로그램 사용법 알아야 한다. 컴퓨터도 사양이 무척 좋아야 한다. 아니면 정말 동영상 편집은 나의 인내력 테스트의 장이 될 것이다.

2. 동영상을 올릴 장소 찾는데 어려움
예전에 동영상을 올리고 방송하기 위해서 스트리밍서버를 구입하거나 서비스를 해주는 호스팅 업체를 구했어야 했다. 간단히 말해 동영상을 올릴 장소를 구하기도 쉽지 않고 돈도 많이 들었으며 여러가지 전문지식이 필요하였다.

3. 동영상을 보기위한 번거로움
컴퓨터가 있는 곳으로 전원을 켜서 윈도우를 켠후 웹브라우져를 켜서 사이트에 접속. 로그인을 하고 수업을 찾아서 본다. 사실 이 과정이 그렇게 만만하지 않다. 사이트 접속 중에도 여러가지 문제가 발생하고 가끔 인터넷 속도가 느려서 인내하고 볼만한 수준이 못되는 경우가 종종 있었다.

그렇다면 지금은 무엇이 나아졌을까?

1. 쉽게 만드는 동영상
현재 수업동영상을 제작하는데 아이패드, 또는 다른 스마트패드 만 있어도 수업동영상을 만들 수 있다. 수업 영상을 찍는 것 부터 시작해서 간단한 편집도 가능하고 그래서 올리기만 하면 된다.

2. 동영상을 올리는 곳은?
현재 유투브에 핸드폰 인증만 하면 수업동영상 정도는 무리없이 올릴 정도의 공간을 준다. 물론 다른 누군가가 볼 수 있다는 부끄러움은 감수해야 한다.

3. 동영상을 보기 위한 번거로움
이제는 누구나 와이파이만 된다면 핸드폰으로 쉽게 영상을 볼 수 있다 그만큼 접근성이 편해졌다는 말이다. 꼭 컴퓨터 TV 앞이 아니어도 된다.

플립러닝이 다시 주목되는 3가지 대표적인 이유이다. 어떻게 보면 모든것이 준비된 참으로 복받은 시대인 것 같다. 이 후 강좌는 쉽게 동영상 강의를 만드는 실제적인 방법을 올리려고 한다. 다만 내가 현재 동영상 강좌를 만드는 것은 여러가지 방법중 하나일 뿐이니 또 다른 방법도 찾아보고 자신이 수업동영상을 만드는데 최적의 방법을 찾는 것은 여러분들의 몫이라 생각한다. 수업동영상을 만드는 더 좋은 방법을 공유하고 좋은 수업이 많이 만들어 졌으면 좋겠다.

교육용 프로그래밍 사이트 정리

스크래치 - http://scratch.mit.edu


프로그래밍교육이 자기도학습으로 가능한 사이트
http://www.codecademy.com 난이도 상
http://code.org 난이도 하, 흥미 상
http://www.codecademy.com 난이도 중, 흥미 최상

최근 웹상에서 프로그래밍 교육을 할 수 있는 사이트들이 늘어나고 있다. 세계 각국에서 프로그래밍 교육의 중요성을 이야기 하고 있으며 하나의 큰 이슈가 되고 있기 때문이다. 그 바람이 우리나라에서도 천천히 불고 있다. 하지만 프로그래머들의 처우 개선이 안되어서야 아이들에게 교육하고자 시키고자 하는 마음도 커지지 않을 듯하다.