raspberry pi_Google的Raspberry Pi和Coder,适合初学者和儿童

raspberry pi

编者注:这是一篇较旧的文章,已引起我们注意,这些说明可能不适用于较新的Raspberry Pi型号。

CoderRaspberry Pi的实验, Raspberry Pi是由纽约Google小组组成的。 它将Raspberry Pi转换为用于学习Web编程的友好环境。 它是初学者的理想选择,完全不需要任何编码经验。

入门

    项目主页 提供了有关Coder的出色教程

    要开始使用Coder,我们需要:

    • Raspberry Pi(任何型号均可:A,B,A +,B +)
    • 已安装Coder的SD卡

    我使用Raspberry Pi B +AdaFruit发行的SD卡编码器版本来探索 编码 。 但是,您也可以免费下载Coder ,并将其写到任何4Gb SD卡上,如项目页面所述

    启动就像将Micro SD卡插入Raspberry Pi并启动一样容易。

    SD Card with Coder from AdaFruit

    Coder Micro SD card inserted in Raspberry Pi B+

    Booting process as Coder set up the Raspberry Pi as a Server

    在引导过程中,Coder将Raspberry Pi配置为Web服务器。 它还将其设置为自己的WiFi接入点。 这里的想法是,我们将使用一台计算机进行编程(例如,可以是笔记本电脑,台式机或平板电脑),然后通过它,我们将连接到Raspberry Pi中由Coder自动配置的服务器。

    可以使用以太网电缆或WiFi接入点进行连接 。 我使用了第二种方法,因此我将笔记本电脑(HP Chromebook)连接到SSID为“ CoderConfig”的WiFi网络。 然后,我只是打开了一个网络浏览器(以下情况为Chrome)并输入了地址:

    http://192.168.0.1

    如果您使用家庭网络,可能已经看到很多次分配给设备的IP地址以192.168。开头 这是由于国际惯例将192.168.xx地址块保留为专用网络 。 这种情况下的结果是,此时笔记本电脑和Raspberry Pi正在共享一个非常小巧且舒适的专用网络。

    实际上,这也意味着,要使用Coder进行播放,我们甚至不需要将显示器,键盘和鼠标连接到Raspberry Pi。 由于它可以作为服务器使用,并且所有配置都是通过客户端计算机(笔记本电脑,台式机或平板电脑)完成的,因此我们可以简单地将Raspberry Pi连接到网络电缆,或者插入Wifi USB适配器 ,然后为Pi供电。使用通常的Micro USB连接器。 如果您没有所有组件,那么Coder项目页面会提供购物清单

    Coder呈现的第一页允许我们为Raspberry Pi中Web服务器的未来配置设置密码。 迈出安全性基本实践的第一步。

    Screenshot of first login page, when connecting the laptop to the Raspberry Pi Wifi network

    请注意,这还将更改Raspberry Pi中“ pi”用户的密码。 默认情况下,“ pi”用户的密码为“ raspberry”。 但是,在上面的屏幕中设置密码后,该新密码也将应用于“ pi”用户。 仅当您使用直接键盘或SSH连接登录Raspberry Pi时才重要。

    然后在该页面上进行实际登录,在此我们使用刚创建的密码:

    Screenshot of first login page in Coder

    然后,我们直接进入页面,在这里我们可以开始创建新的编码项目或探索一些简单的示例以开始使用。

    Screenshot of top projects page in Coder

    Screenshot of initial projects in Coder
    你好编码员

    一个很好的起点是右上角的项目:“ Hello Coder”。 如果单击它,将转到该项目的入口页面。

    Screenshot of the Hello Coder project entry page.

    按照说明并单击右上角带有图标“ </>”的按钮,我们进入主编辑窗口,在这里我们可以检查和修改示例应用程序的代码。 我们立即看到了这些变化的影响。

    典型的Web应用程序包含两个部分:

    • 在服务器端运行的代码。 通常是数据库和管理逻辑。
    • 在客户端运行的代码。 主要是显示从服务器发送的数据。

    客户端由我们的Web浏览器管理,在这种情况下,该浏览器在笔记本电脑上运行。 在这种情况下,服务器端是由运行Coder的Raspberry Pi管理的。 Web应用程序的客户端通常通过以下组合实现:

    • HTML:页面的布局和分发,以及文本内容,图像,音频和视频。
    • CSS:定义页面的外观,特别是:颜色,字体,大小和对齐方式。
    • Javascript:提供逻辑和动态行为。

    Screenshot of editing page in Coder.

    通过Coder编辑窗口的顶部图标栏,我们可以访问Web应用程序的以下各个组件中的每个组件:HTML,CSS,JavaScript和Nodejs。

    Screenshot of CSS editing page in Coder

    Screenshot of CSS editing page in Coder

    Screenshot of JavaScript editing page in Coder.

    右上角的齿轮图标打开一个窗口,我们可以在其中编辑应用程序的名称,其作者以及将用于在顶部项目页面中显示它的颜色。 眼睛图标将窗口分为两部分,左侧显示编辑页面,右侧显示最终渲染的页面。 这很方便,因为它可以快速反馈我们在左侧代码中所做的任何更改。 我们尝试更改代码的时间与看到更改的时间之间的快速迭代,是帮助初学者熟悉每个代码段功能的关键因素。

    Screenshot of the editing and rendering windows side by side.

    从Coder开始的一个好方法是遍历这些编辑页面,进行一些小的更改,并观察这些更改对最终呈现的网页的影响。

    配置WiFi

    到目前为止,我们在Raspberry Pi和笔记本电脑之间使用了一个小型专用网络。 可以快速入门,但有一个局限性,即我们并未真正连接到Internet,例如,无法浏览Coder教程页面。 要解决此问题,我们可以转到顶部项目页面,并使用齿轮图标在Raspberry Pi中配置常规无线。 就我而言,我需要将Raspberry Pi连接到我的家庭WiFi接入点。

    Screenshot of the Coder settings page.

    Screenshot of the WiFi configuration page in Coder.

    Screenshot of final WiFi setup in Coder.

    完成此操作后,Raspberry Pi将重新启动,然后连接到您选择的无线网络。 现在,我们可以从笔记本电脑的网址下找到Coder服务器:

    http://coder.local

    另外,我们可以查看Raspberry Pi的启动消息,并在本地网络中找到其新IP地址:

    Picture of boot messages in the Raspberry Pi after configuring the Wireless network.

    就我而言,Raspberry Pi在重启过程中被分配了IP地址:192.168.1.15。

    然后,我使用该地址从笔记本电脑中找到Web服务器页面:

    Screenshot connecting to the Coder web server in the Wireless network.

    眼球项目

    在“ Hello Coder”项目中玩了一点之后,下一个最佳步骤是看一下Eyeball项目。

    Screenshot of Eyeball project in Coder.

    该项目提供的Eyeball动画立即使我们感到奇怪:“它是如何工作的?” 这是任何学习工具的关键功能! 玩Eyeball项目CSS文件中的数字可带来极大的乐趣……您必须尝试一下!

    太空岩石项目

    下一站是“太空岩石”项目,这是一个相对简单的游戏,我们在太空中驾驶太空舱,同时避免致命的小行星! (我仍在“回避”部分上工作...)

    Screenshot of the Space Rocks game in Coder.

    我告诉你,玩游戏并不像看起来那么容易。 但是,我们可以通过使用“ HACK”按钮并使游戏的基本参数(例如船速或弹丸速度)更容易一些。

    Screenshots of parameters settings in Space Rocks game in Coder.

    当然,检查HTML,CSS和Javascript文件并尝试对其进行更改是另一种有趣的尝试。 然后,我们可以进入创建自己的项目的过程,并在学习网络编程的过程中继续快速编写代码并观察其行为。

    查找和共享项目

    Coder是一个完全开源的项目,可在GitHub上获得并根据Apache 2.0 License分发

    您可以在以下网址找到更多更酷的项目: http : //googlecreativelab.github.io/coder-projects/

    忠于开源方式,我们也鼓励在此分享我们的项目

    结论

    编码器是学习编程的绝佳资源。 它简化了入门过程,需要非常便宜的组件,并提供了有趣而有趣的活动。 如果您打算在假期里(或已经有一个)使用Raspberry Pi,那么Coder是一个不错的选择,它可以为您带来更多的乐趣并向那块小木板学习

    现在,如果您能原谅我,我必须去太空摇滚公司解决一个问题。

    翻译自: https://opensource.com/education/14/11/learning-web-programming-everyone-coder

    raspberry pi

    评论
    添加红包

    请填写红包祝福语或标题

    红包个数最小为10个

    红包金额最低5元

    当前余额3.43前往充值 >
    需支付:10.00
    成就一亿技术人!
    领取后你会自动成为博主和红包主的粉丝 规则
    hope_wisdom
    发出的红包
    实付
    使用余额支付
    点击重新获取
    扫码支付
    钱包余额 0

    抵扣说明:

    1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
    2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

    余额充值