Как настроить Python для Android разработки с Ubuntu и Buildozer

В этой статье мы увидим, как собрать Python для Android разработки с Ubuntu (проверено на Ubuntu 14.04) и Buildozer. Итак, давайте начнем.

buildozer-cloud[1]
image-859

 

Установка Buildozer

Вы можете прочитать полную документацию здесь про Buildozer.

Сам Buildozer не зависит от какой-либо библиотеки, и работает на Python 2.7 и >= 3.3. Я рекомендую вам использовать Python 2.7.

Во-первых, нам нужно скачать pip, инструмент для установки и управления пакетами Python.

apt-get install python-pip

Теперь, чтобы установим Buildozer:

pip install --upgrade buildozer

Если все работает нормально, вы увидите результат: Successfully installed buildozer

Настройка для Android

Для разработки под Android, необходимо установить как минимум Cython и Java SDK. Некоторые двоичные файлы Android SDK все еще находятся в 32 битных библиотеках, так что нужно сделать их доступными.

Установка Cython:

apt-get install python2.7-dev
pip install --upgrade cython

Теперь, сделаем 32х битные библиотеки доступными:

dpkg --add-architecture i386

После этого, вы можете обновить и установить необходимые пакеты:

apt-get update
apt-get install build-essential ccache git lib32z1 libncurses5:i386 libstdc++6:i386 python2.7 openjdk-7-jdk unzip zlib1g-dev zlib1g:i386

Хорошо, теперь у нас есть все, чтобы начать разработку с Python под Android. Давайте попробуем.

Простой пример

Давайте создадим Hello World приложение, чтобы проверить, все ли работает. В этом примере, я собираюсь использовать Kivy. Если у вас не установлен Kivy, запустите следующую команду:

apt-get install python-kivy

Теперь создадим новый файл с именем main.py, и не забудьте добавить строку __version__ = "1.0" в вашем файле, потому что buildozer будет пытаться найти эту строку, чтобы определить версию приложения.

Код программы Hello World:

__version__ = “1.0”
from kivy.app import App
from kivy.uix.button import Button
class Hello(App):
    def build(self):
        btn = Button(text='Hello World')
        return  btn
Hello().run()

Теперь откройте терминал и перейдите к папке с main.py. После этого, создадим buildozer.spec файл, с помощью команды:

buildozer init

Вы можете открыть файл buildzoer.spec и изменить настройки приложения, такие как имя, разработчик и другие подобные параметры.

Для создания проекта, выполним:

buildozer -v android debug

Эта команда скачивает python-for-android, Android SDK и Android NDK, если вы запускаете ее первый раз. Это процесс займет определенное время, так как их размеры не маленькие.

После этого, вы увидите сообщение:

# Android packaging done!
# APK MyApplication-1.2.0-debug.apk available in the bin directory

Теперь вы можете взять apk файл из папки bin, и установить его на ваше устройство. Если ваше устройство подключено к usb, просто запустите эту команду для установки:

adb install bin/MyApplication-1.2.0-debug.apk

Пример работы приложения:

screenshot_2014-05-21-21-47-56
image-860

Android разработка с Python и Kivy

В этой статье я покажу вам, как начать разработку для Android с использованием Python и Kivy. Вы увидите, как загрузить и настроить Kivy, и создать простое Hello World приложение. В конце, мы построим наше APK приложение, и установим его на Android.

kivy-logo-black-256
image-849

Установка

Чтобы облегчить разработку, Kivy предоставили нам виртуальную машину готовую для использования. Нужно просто скачать ее и использовать.

Прокрутите сайт к концу страницы и вы увидите ссылку на скачивание.

captura-de-tela-de-2014-05-21-201146
image-850

Каждая платформа имеет разный процесс установки, поэтому я рекомендую вам скачать и установить виртуальную машину, чтобы избежать проблем. Вы можете запустить виртуальную машину (на основе Ubuntu 32 бит) с использованием Oracle Virtual Box.

Создание первого проекта

Сейчас мы создадим простой проект, чтобы проверить, все ли работает. Вы сможете запустить его на компьютере. После того как мы закончим, мы сможем создать приложение для Android.

from kivy.app import App
from kivy.uix.button import Button
class Hello(App):
    def build(self):
        btn = Button(text='Hello World')
        return  btn
Hello().run()

Этот код создаст простое окно, и кнопку с текстом «Hello World».

Создание Android приложения

Теперь, давайте построим нашу программу для Android. (Основной файл проекта должен назван main.py)

Для создания Android проекта с Python и Kivy, откройте терминал и выполните команду:

git clone git://github.com/kivy/python-for-android
cd python-for-android

Эта команда загрузит необходимые инструменты, чтобы начать разработку.

Теперь, вам нужно построить модули, которые вы будете использовать в вашем проекте. В этом случае, мы используем только Kivy. Таким образом, запустите:

./distribute.sh -m "kivy"

Эта команда скачает и настроит все что вам нужно.

Теперь перейдите к папке dist/default и выполним команду:

./build.py --dir <path to your app>
           --name "<title>"
           --package <org.of.your.app>
           --version <human version>
           --icon <path to an icon to use>
           --orientation <landscape|portrait>
           --permission <android permission like VIBRATE> (multiple allowed)
           <debug|release> <installd|installr|...>

В нашем случаем мы получим:

./build.py --dir /tmp/python
           --name "Hello"
           --package com.wordpress.bytedebugger.hello
           --version 1
           debug installd

Эта команда создаст Apk. Apk создаст папку bin.Теперь установите приложение на ваше Android устройство.

screenshot_2014-05-21-21-47-56
image-851

 

Вот и все. Теперь, вы можете разрабатывать с помощью Python + Kivy под Android.

Введение CockpitCMS — CMS для разработчиков

В этой статье мы увидим, как использовать CockpitCMS, установку CMS на бэкенд и использование интерфейса API, который предоставляет Cockpit для создания специальных функций интерфейса.

CockpitCMS не такой как другие тяжелые и полномасштабные CMS, он легкий и простой, и обеспечивает только базовый функционал, в то время как интерфейс полностью зависит от разработчика.

Установка

CockpitCMS можно скачать здесь. После загрузки, просто распакуйте архив в папку на вашем веб-сервере. В моем случае, это HTTP: http://test.webtoks.ru/cockpit/

Затем, переходим на страницу установки CMS: http://test.webtoks.ru/cockpit/install, чтобы начать процесс установки.

ПРИМЕЧАНИЕ: Кокпит использует SQLite в качестве базы данных по умолчанию. Если вы еще не установили SQLite, сделайте это перед установкой.

ПРИМЕЧАНИЕ: Кокпит также требует, чтобы каталог /storage/data был доступен.

Установка одним кликом, когда установка будет завершена, вам увидите эту страницу:

1419552599installation[1]
image-827

Теперь мы можем войти с учетной записью администратора с логином и паролем admin, панель администратора будет иметь следующий вид:

INAZu7P6PSs[1]
image-828

Ну у нас пока на сайте ни чего нету. Прежде, чем мы добавим наш контент, давайте узнаем о нескольких ключевых модулях в Cockpit.

Модули в Cockpit

Два наиболее важных модулей в Cockpit являются: коллекции и галереи.

Мы можем относиться к «коллекциям» как связке таблиц. Все коллекции определяется в Cockpit с различными полями практически всех типов. Коллекции заполняется «Элементами», который похож на запись в таблице.

Галереи являются «Фотоальбомами». Пользователь создает фотоальбом, который может содержать фотографии, которые могут быть использованы в дальнейшем.

Cockpit также имеет и другие модули: формы, области(своего рода сниппеты для фронтэнд страниц), медиа менеджер(модуль для управления всеми медиа-файлы на сайте). Подробная документация для этих модулей (в том числе для коллекций и галерей) можно найти на официальном сайте.

Создать первую коллекцию

Для начала, я создам простую коллекцию. Мы должны написать имя для коллекции (Путешествия) и определить, какие поля она будет содержать:

l6DqDPmrNeU[1]
image-829

Это простая структура состоит из следующих полей:

  • name: текстовое поле
  • date: поле дата
  • location: текстовое поле
  • diary: поле markdown, чтобы записать некоторые основные моменты поездки
  • pic: текстовое поле, чтобы связать в галерею изображений

ПРИМЕЧАНИЕ: Cockpit также создает несколько другие полей автоматически, чтобы хранить информацию, такую id, дата создания, дата изменения и т.д. Мы также можем использовать эти мета поля в нашем коде.

Вы также можете заметить, что, хотя Cockpit поддерживает тип поля «Галерея», мы до сих пор используете поле «Текст». Это потому, что Cockpit пока не может связать существующую галерею в записи коллекции. Позже мы увидим, как обойти это. Мы можем создавать много коллекций, галерей.

rIhsjT-nINE[1]
image-830

Теперь, давайте перейдем к фронтенду.

Фронтенд

ПРИМЕЧАНИЕ: Мы будем использовать фреймворк Silex с Twig для фронтенда, но вы можете выбрать любой другой фреймворк, логика останется схожей.
После того как скачали Selix у нас получится следующая структура папок:

public_html/
├── cockpit/
├── silex/
├── views/
└── index.php

В папке views будут хранится наши шаблоны.

Чтобы облегчить работу с фронтендом, Cockpit предоставляет некоторые фундаментальные API, которые классифицируются по различным модулям. Официальная документация содержит список этих функций. В этой демо-версии, мы остановимся только на некоторых из них.

Во-первых, давайте посмотрим, как отобразить страницу приветствия со всей сводной информацией.

ПРИМЕЧАНИЕ: Для использования API Cockpit, необходимо подключить require_once __DIR__. '/../cockpit/bootstrap.php';

f9XINXQ8b1U[1]
image-831

Код приведен ниже:

$app->get('/', function () use ($app) {
    $collections = cockpit('collections:collections', []);
    $galleries = cockpit('galleries:galleries', []);
    return $app['twig']->render('index.html.twig', ['collections' => $collections, 'galleries' => $galleries]);
})->bind('home');

Мы получаем все коллекции и галереи с помощью API. Это очень просто.

Раздел коллекции могут быть отображены с помощью Twig:

<h2>Collections</h2>
<p>There are total <strong>{{collections|length}}</strong> collection(s) in the CMS:</p>
<ul>
{% for col in collections|keys %}
    <li>
        <a href="{{ url('collection', {col: col})}}">{{col}}</a>
    </li>
{% endfor %}
</ul>

С помощью VarDumper, очень удобно смотреть внутреннюю структуры переменной, так что мы можем легко найти нужные значения, которые будут использоваться.

ПРИМЕЧАНИЕ: VarDumper могут быть использованы в Silex. Чтобы использовать его, необходимо использовать Symfony\VarDumper; и добавить одну строку в composer.json

"symfony/var-dumper": "3.0.*@dev"

Получение Коллекций

$app->get('/', function () use ($app) {
    $collections = cockpit('collections:collections', []);
    $galleries = cockpit('galleries:galleries', []);
    return $app['twig']->render('index.html.twig', ['collections' => $collections, 'galleries' => $galleries]);
})->bind('home');
$app->get('/collection/{col}', function ($col) use ($app) {
    $entries = collection($col)->find()->toArray();
    foreach ($entries as &$entry) {
        $text = $entry['diary'];
        $html = MarkdownExtra::defaultTransform($text);
        $entry['diary'] = $html;
    }
    return $app['twig']->render('entries.html.twig', ['collection' => $col, 'entries' => $entries]);
}
)->bind('collection');

Получение галерей

$app->get('/gallery/{gal}', function ($gal) use ($app) {
    $images = cockpit("galleries")->gallery($gal);
    foreach ($images as &$img) {
        $image = $img['path'];
        $imgurl = cockpit('mediamanager:thumbnail', $image, 200, 200);
        $img['cache']=$imgurl;
        $path=$img['path'];
        $url=str_replace('site:', 'http://'.$app['request']->getHost().'/', $path);
        $img['url']=$url;
    }
    return $app['twig']->render('gallery.html.twig', ['images'=>$images, 'gal'=>$gal]);
}
)->bind('gallery');

Вывод

Cockpit легкая, простая в установке и настройке CMS. Создавать коллекций и галерей, заполнение запись в коллекции и загрузка изображений в галерее все очень просто.

У Cockpit  хороший API, для реализации в  фронтенде различных задач. Кокпит CMS лучше для тех разработчиков,  которые обладают определенным уровнем PHP, CSS и знаниями фреймворков, которые не желают быть связанными других тяжелыми CMS, и хотят создать простой, аккуратный сайт. Тем не менее, важно подчеркнуть, что это может увеличить время разработки.

Демонстрационный код для этой статьи можете посмотреть здесь.

Skeleton — быстрый старт

skeleton
image-818

В начале декабря Skeleton выпустила новую обновленную версию. На самом деле, это было его первое обновление для почти двух с половиной лет. Это хорошая новость для тех из нас, кто использовал его в прошлом и полюбили его простоту!

В этой статье я познакомлю вас с этим легким фреймворком.

Что такое Skeleton?

Как уже упоминалось выше, Skeleton  легкий CSS фреймворк, созданный Дейвом Гамашом. В частности, это два CSS файла: normalize.css и skeleton.css. Последний файл содержит стили фреймворка, это около 400 строк несжатого кода.

Наиболее важной частью скелета является грид система, которую я буду анализировать ниже. Кроме того, фреймворк обеспечивает основные стили для общих компонентов HTML таких как кнопки, списки, таблицы и формы.

Чтобы скачать последнюю версию Skeleton, вы можете перейти на официальный веб-сайт. Альтернативный вариант сделать форк с репозитория GitHub.

После загрузки и извлечения сжатую папку, ваша структура файла будет выглядеть следующим образом:

Skeleton/
├── css/
│     ├── normalize.css
│     └── skeleton.css
├── images/
│     └── favicon.png
└── index.html

Аналогично фреймворкам Bootstrap и Foundation, Skeleton также использует мобильный подход. Тем не менее, он не включает в себя большое количество компонентов; он содержит только некоторые основные правила CSS, которые помогут вам начать процесс разработки.

Стоит отметить, что Skeleton является полностью функциональным во всех последних браузерах, включая IE9 +. И наконец, вы также можете выбрать Sass или Less расширения Skeleton.

Изменения по сравнению с последней версией

Есть много различий между текущей версией и предшествующей ее. В таблице ниже приведены наиболее важные различия:

Особенности V2.0.2 (Current Version) V1.2 (Previous Version)
CSS файлов 2 3
Мобильный вид Да Нет
Grid 12 адаптивных столбцов 16 адаптивных столбцов
Типографские единицы rem px

Grid

Последняя версия Skeleton определяет сетку из 12 столбцов.

1421719099grid-example[1]
image-819

Строки должны быть размещены внутри обертки, которая может иметь максимум ширины 960px. Чтобы создать обертку вы должны определяете div элемент и применить container класс к нему. Если вы знакомы с сеткой Bootstrap, вы знаете, что Bootstrap использует то же имя класса, чтобы определить его обертку.

Ширина элемента обертки в Skeleton варьируется в зависимости от размера экрана. В любом случае, как уже упоминалось, он не может превышать 960px.

Колонны вложены в ряды. Они масштабируются до 12 для каждой строки. Чтобы настроить колону вы должны определить div элемент и назначить ему два класса. Во-первых, вы добавляете класс, который отвечает за определение ширины столбца. Чтобы добиться этого, вы можете использовать классы one до eleven (от одного до двенадцати) или one-third, two-thirds, и one-half.

7661

Второй класс отвечает за настройки полей столбцов. Возможные классы columns и column. Если вы определите ширину столбцов с первым вариантом (например, с помощью two класса), вы должны использовать columns класс (вместо column) в качестве второго класса. Исключением является при использовании one класса, который может быть в равной степени в сочетании с columns и column.

В то время как другие механизмы поддерживает вложенные строки, Skeleton рекомендует не использовать вложенные строки в столбцах. Кроме того, grid система Skeleton обеспечивает дополнительные классы для отступов столбцов. Смещение (например, offset-by-two) позволяют увеличить пространство между колоннами, добавив свойство margin-left.

Кнопки

Как уже упоминалось, фреймворк содержит дополнительные стили. Например, есть класс button, который позволяет обернуть ссылку(a) в виде кнопки. Также возможно сделать кнопку светло-голубого цвета с помощью класса button-primary.

7661

Формы

Формы это частая проблема для проекта, но здесь есть большое количество классов для облегчения работы с ними.

7661

Вывод

Skeleton отличный легкий CSS фреймворк, он подходит когда необходимо создать адаптивный дизайн но нет надобности в тяжелых фреймворках. Skeleton отлично подойдет для создания лэндингов.

Создание пошаговой формы регистрации на React

Хорошей особенностью React является как этот фреймворк обрабатывает состояние нашего приложения. Каждый раз, когда у  React  обновляются компоненты, React будет рендерить обновленный вид. Иначе: React отлично показывает пользователям то что происходит на странице — если это необходимо.

Хороший пример демонстрации этой способности будет реализация пошаговой регистрации, где мы обновляем состояние компонента, чтобы показать на каком этапе пользователь находится, и показывать поля для этого шага. Но прежде, чем мы углубимся давайте посмотрим, что мы будем создавать.

Демо

Исоходники на github

Начинаем работу

У нас будет процедура регистрации состоять из 4-х шагов. Пользователь будет:

  1. Вводить основную информацию об учетной записи
  2. Заполнит основную информацию о себе
  3. Подтвердит что информация верна
  4. Увидит сообщение об успешной регистрации

Самый простой способ, чтобы показать только необходимые поля для данного шага, это хранить контент организованный в дискретных компонентах. Затем, когда пользователь переходит к следующему шагу в процессе заполнения, мы увеличим шаг на 1. React увидит изменения и автоматически рендерит компонент, чтобы показать то, что мы хотим, показать пользователю. Вот основной код:

// file: Registration.jsx
var React         = require('react')
var AccountFields = require('./AccountFields')
var SurveyFields  = require('./SurveyFields')
var Confirmation  = require('./Confirmation')
var Success       = require('./Success')
var Registration = React.createClass({
  getInitialState: function() {
    return {
      step : 1
    }
  },
  render: function() {
    switch(this.state.step) {
      case 1:
        return <AccountFields />
      case 2:
        return <SurveyFields />
      case 3:
        return <Confirmation />
      case 4:
        return <Success />
    }
  }
}
module.exports = Registration

Когда пользователь находится на первом шаге (когда наш первый компонент загружается) мы покажем поля данных, на втором мы покажем вопросы анкеты, на третьем подтверждение пользователя, на четвертом сообщение об успешной регистрации. Мы будем подключать эти компоненты используя CommonJS паттерн; каждый из них будет React компонентом.

Далее, мы создадим объект, для хранения данных которые вводит пользователь. У нас будет поля имя, email, пароль, возраст, и любимый цвет. Давайте сохраним эту информацию в качестве FieldValues в верхней части нашего родительского компонента (Register.jsx).

// file: Registration.jsx
var fieldValues = {
  name     : null,
  email    : null,
  password : null,
  age      : null,
  colors   : []
}
// The rest of our file
...

Наш первый компонент, , содержит поля, используемые для создания новой учетной записи: имя пользователя, пароль и электронную почту. Когда пользователь нажимает «Сохранить и продолжить» Мы сохраним данные и перейдем к шагу 2.

// file: AccountFields.jsx
var React = require('react')
var AccountFields = React.createClass({
  render: function() {
    return (
      <div>
        <label>Name</label>
        <input type="text" ref="name" defaultValue={this.props.fieldValues.name} />
        <label>Password</label>
        <input type="password" ref="password" defaultValue={this.props.fieldValues.password} />
        <label>Email</label>
        <input type="email" ref="email" defaultValue={this.props.fieldValues.email} />
        <button onClick={this.saveAndContinue}>Save and Continue</button>
      </div>
    )
  },
  saveAndContinue: function(e) {
    e.preventDefault()
    // Get values via this.refs
    var data = {
      name     : this.refs.name.getDOMNode().value,
      password : this.refs.password.getDOMNode().value,
      email    : this.refs.email.getDOMNode().value,
    }
    this.props.saveValues(data)
    this.props.nextStep()
  }
})
module.exports = AccountFields

Основные моменты в этом компоненте :

  1. defaultValue будут установлены начальные значения при входе. Это необходимо React. Нажмите здесь, чтобы прочитать больше на эту тему.
  2. Мы устанавливаем defaultValue к ключу, связанному this.props.fieldValues, который передается в качестве свойств от родительского компонента (Registration.jsx). Это так, когда пользователь сохраняет и продолжает к следующему шагу, но затем возвращается к предыдущему шагу, и данные которые он ввел будут уже отображаться в полях.
  3. Мы получаем значение этих полей, ссылаясь на DOM узлов с использованием ссылок.
  4. saveValues метод для nextStep передает в качестве свойства параметры. Так как на этапе 2, мы можем вернуться к предыдущему шагу, мы должны создать previousStep.

// file: Registration.jsx

saveValues: function(fields) {
return function() {
// Remember, `fieldValues` is set at the top of this file, we are simply appending
// to and overriding keys in `fieldValues` with the `fields` with Object.assign
// See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign
fieldValues = Object.assign({}, fieldValues, fields)
}()
},

nextStep: function() {
  this.setState({
    step : this.state.step + 1
  })
},
// Same as nextStep, but decrementing
previousStep: function() {
  this.setState({
    step : this.state.step - 1
  })
},
...

Затем мы передадим эти данные вновь, как свойства каждому из наших следующих компонентов.

// file: Registration.jsx
...
render: function() {
  switch (this.state.step) {
    case 1:
      return <AccountFields fieldValues={fieldValues}
                            nextStep={this.nextStep}
                            saveValues={this.saveValues} />
    case 2:
      return <SurveyFields fieldValues={fieldValues}
                           nextStep={this.nextStep}
                           previousStep={this.previousStep}
                           saveValues={this.saveValues} />
    case 3:
      return <Confirmation fieldValues={fieldValues}
                           previousStep={this.previousStep}
                           submitRegistration={this.submitRegistration} />
    case 4:
      return <Success fieldValues={fieldValues} />
  }
}

В нет previousStep, так как это наш первый шаг, и вы не можете вернуться назад. Кроме того, вместо передачи saveValues или с nextStep для мы передаем только что созданный метод submitRegistration, который будет обрабатывать представления для входа пользователей (FieldValues) и изменит шаг нашего процесса регистрации на 4, тем самым показывая .

Компоненты , и вы можете посмотреть на Github здесь, здесь, и здесь.

Вывод

React является хорошим выбором для обработки и вывода пользователю данных и форм. В нашем примере, мы показываем поля ввода, и когда эти поля показаны определяется текущей стадии (шаг нашего компонента регистрации). В зависимости от состояния нашего приложения, мы можем просто и предсказуемо сделать что-то другое, будь то, как маленький одно изменение характера или показывая совершенно иной компонент в целом.

Небольшое руководство по React

react-javascript-library-building-user-interfaces[1]
image-756

Эта статья даст вам краткий обзор того, как построить пользовательские интерфейсы в React JS. Код статьи доступен в репозитрии, или же вы можете все делать постепенно как в статье.

Основная концепция

React имеет довольно небольшую API. Это делает этот фреймворк приятным в использовании, легким в обучении, и простым для понимания. Однако, будучи простым, не означает, что все это вам уже знакомо. Есть несколько концепций, которые надо знать перед началом работы. Давайте рассмотрим их по очереди.

Элементы React  являются объектами JavaScript, которые представляют HTML элементы. Они не существуют в браузере. Они представляют собой элементы браузера, такие как h1, div или section.

Компоненты разработчик создает React элементы. Они, как правило, более крупные части пользовательского интерфейса, которые содержат как структура и функции. Подумайте о таких понятий, как NavBar, LikeButton или ImageUploader.

JSX представляет собой метод для создания React элементов и компонентов. Например, <h1>Hello</h1> является React элементом, записанный в JSX. Некоторые React элементы могут быть записан в виде JavaScript как React.DOM.h1 (NULL, 'Hello');. С JSX вы затратите меньше усилий, на чтение, запись и трансформацию в JavaScript перед запуском в браузере.

Виртуальный DOM является JavaScript деревом React элементов и компонентов. React создает виртуальный DOM для браузера, для вывода пользовательского интерфейса. React следить за виртуальным DOM для изменения и автоматического изменения в браузере, чтобы соответствовать виртуальному DOM.

С понимание этих понятий мы можем двигаться дальше к использованию React. Мы будем строить серию пользовательских интерфейсов, каждый из которых добавляет слой функциональности на предыдущий. Мы будем строить фотогалерею, похожую на Instagram.

Rendering

Первым делом рендерим визуальный элемент (React элементы или компоненты). Запомните, что виртуальный элемент существует только в памяти JavaScript, мы должны явно указать React, чтобы вывести его в браузере DOM.

React.render(<img src="http://tinyurl.com/lkevsb9" alt="" />, document.body);

Функция render принимает два аргумента: виртуальный элемент и реального DOM узла. React принимает визуальный элемент и вставляет его в данный DOM узлел. Изображение теперь отображается в браузере.

Компоненты

Компоненты сердце и душа React. Они настраиваемый React элементы. Они, как правило, расширены с уникальной функциональностью и структурой.

var Photo = React.createClass({
  render: function() {
    return <img src='http://tinyurl.com/lkevsb9' />
  }
});
React.render(<Photo />, document.body);

Функция createClass принимает объект, который реализует рендеринг функции.

Компонент photo создает <Photo />, и выводит его в теле документа.

Этот компонент не делает ничего, что делает предыдущий React элемент изображения, но он может быть расширен с пользовательскими функциями и структурами.

Свойства

Свойства можно рассматривать в качестве опций компонента. Они используются в качестве аргументов компонента и выглядят в точности как атрибуты HTML.

var Photo = React.createClass({
  render: function() {
    return (
      <div className='photo'>
        <img src={this.props.imageURL} />
        <span>{this.props.caption}</span>
      </div>
    )
  }
});
React.render(<Photo imageURL='http://tinyurl.com/lkevsb9' caption='New York!' />, document.body);

Внутри функции React render: два параметра передаются в компонент Photo: ImageUrl и caption.

Внутри компонента функция render свойство ImageUrl используется в качестве SRC для React элемента изображения. caption также используется как обычный текст в React элементе span.

Стоит отметить, что компонент никогда не должны изменять свои параметры, они неизменны. Если компонент имеет данные, которые надо менять, используйте состояния объекта.

Состояние

Состояние объекта является внутренним для компонента. Он содержит данные, которые могут меняться с течением времени.

var Photo = React.createClass({
  toggleLiked: function() {
    this.setState({
      liked: !this.state.liked
    });
  },
  getInitialState: function() {
    return {
      liked: false
    }
  },
  render: function() {
    var buttonClass = this.state.liked ? 'active' : '';
    return (
      <div className='photo'>
        <img src={this.props.src} />
        <div className='bar'>
          <button onClick={this.toggleLiked} className={buttonClass}>
            ♥
          </button>
          <span>{this.props.caption}</span>
        </div>
      </div>
    )
  }
});
React.render(<Photo src='http://tinyurl.com/lkevsb9' caption='New York!'/>, document.body);

Благодаря состоянию в компоненте, можно реализовать более сложные вещи.

У компонента появилась новая функция getInitialState. React вызывает эту функцию, когда компонент инициализируется. Возвращаемый объект установлен в качестве начального состояния компонента (как имя функции).

Компонент имеет еще один новый функцию toggleLiked. Эта функция вызывает SetState для компонента, и меняет значение liked.

В визуализации функции компонента переменной buttonClass присваивается либо «активый» или стирается — в зависимости от liked состояния.

buttonClass используется в качестве имени класса для кнопки React элемента. Кнопка также имеет обработчик событий OnClick и настроена на работу в toggleLiked.

Вот что происходит, когда компонент оказывается в DOM браузера:

  • Когда кнопка компонента нажата, вызывается toggleLiked
  • liked состояние изменяется
  • React повторно рендерит компонент в виртуальный DOM
  • Новая виртуальная DОМ  сравнивается с предыдущим виртуальной DOM
  • React изолирует, что изменилось и обновляет DOM браузера

В этом случае, React изменяет имя класса на кнопке.

Состав

Состав означает объединение более мелких компонентов с образованием большего целого. Например компонент фотография может быть использовано в качестве компонента фотогалерии, например, так:

var Photo = React.createClass({
  toggleLiked: function() {
    this.setState({
      liked: !this.state.liked
    });
  },
  getInitialState: function() {
    return {
      liked: false
    }
  },
  render: function() {
    var buttonClass = this.state.liked ? 'active' : '';
    return (
      <div className='photo'>
        <img src={this.props.src} />
        <div className='bar'>
          <button onClick={this.toggleLiked} className={buttonClass}>
            ♥
          </button>
          <span>{this.props.caption}</span>
        </div>
      </div>
    )
  }
});
var PhotoGallery = React.createClass({
  getDataFromServer: function() {
    return [{
      url: 'http://tinyurl.com/lkevsb9',
      caption: 'New York!'
    },
    {
      url: 'http://tinyurl.com/mxkwh56',
      caption: 'Cows'
    },
    {
      url: 'http://tinyurl.com/nc7jv28',
      caption: 'Scooters'
    }];
  },
  render: function() {
    var data = this.getDataFromServer();
    var photos = data.map(function(photo) {
      return <Photo src={photo.url} caption={photo.caption} />
    });
    return (
      <div className='photo-gallery'>
        {photos}
      </div>
    )
  }
});
React.render(<PhotoGallery />, document.body);

Компонент Photo точно такой же, как и раньше.

Новый компонент PhotoGallery, который генерирует Photo компоненты. В этом случае есть некоторые поддельные данные сервер, который возвращает массив 3 объектов, содержащие url и caption.

Данные создают 3 компонента Photo, которые вставляются в возвращаемом значении render функции компонента.

Вывод

Этого должно быть достаточно, чтобы начать создавать пользовательские интерфейсы с React. React документация можно более подробно узнать об этом фреймворке. Я настоятельно рекомендую прочитать ее.

Использование Python для разбора табличных данных

python_excel_logos

Когда вы работаете над веб-приложений для крупных организаций и предприятий, я уверен, что вы столкнулись с этой уникальной проблемой. Организации часто хранят данные в таблицах, и вы должны предоставить интерфейс для вывода этих данных в веб-приложении. Общая идея, это загрузить файл, прочитать его содержимое, и хранить его либо в файле или базе данных, которую использует веб-приложение. Вам также может понадобиться, экспортировать данные из ваших веб-приложений. Например, как бы вы экспортировали оценки всех студентов в классе? Опять же, электронные таблицы является предпочтительным средством.

В этой статье мы обсудим различные способы обработки этих файлов и анализа их, чтобы получить необходимую информацию с помощью Python (2.7).

Электронная таблица

До начала анализа таблицы, необходимо понять, как они устроены. Файл таблицы представляет собой набор листов и каждый лист представляет собой набор ячеек данных размещены в сетке. В листе, клетка данных идентифицируется двумя значениями — его номера строк и столбцов.

1419667062spreadsheet
image-618

Например, в данном примере, таблица содержит только один лист, Query1. Ячейка 2A соответствует второй строке и первом столбце. Значение ячейки А2 является «12510001».

Хотя программы с графическим интерфейсом назначать буквы названия столбцов, когда мы разбираем данные, мы начнем номера строк и столбцов с 0 Это означает, что клетка A2 будет соответствовать (1, 0),  В4, это (1,3) , 3C (2, 2), и так далее.

Быстрый Резюме CSV-файлов

CSV означает «значения разделенные запятыми» (или любым другим разделителем). Типичный файл CSV выглядит следующим образом:

"ID", "Name", "Age"
"1", "John", "11"
"2", "Mary", "12"
"3", "Sherlock", "13"

Вы можете конвертировать электронные таблицы в CSV-файлы, чтобы облегчить обработку. CSV файлы могут быть легко проанализированы с помощью модуля CSV в Python.

Получение необходимых модулей Python

Для чтения и записи XLS файлов, вам нужно будет установить два модуля — xlrd и xlwt. Вы можете установить их с помощью одного из Python менеджеров: pipили easy_install.

pip install xlrd
pip install xlwt

Для чтения и записи файлов CSV, необходимо модуль CSV, который поставляется с предварительно установленным Python 2.7.

Чтение электронной таблицы

Если у вас есть файл, и вы хотите анализировать данные в нем, необходимо выполнить следующее пункты в указанном порядке:

  • Импорт модуля xlrd
  • Откройте файл электронной таблицы (или книги)
  • Выберите лист
  • Извлеките данные из отдельных ячеек

Откройте файл электронной таблицы

Давайте сначала открыть файл в Python.

import xlrd
workbook = xlrd.open_workbook('my_file_name.xls')

Если ваш файл имеет символы, отличные от ASCII, вы должны открыть его в формате Юникод следующим образом:

workbook = xlrd.open_workbook('my_file_name.xls', encoding='cp1252')

Если ваша электронная таблица очень большая, вы можете добавить аргумент on_demand в open_workbook, который загружает только текущие листы в память:

workbook = xlrd.open_workbook('my_file_name.xls', on_demand = True)

Открытие листа

Если вы знаете имя листа, вы можете открыть его, выполнив следующие действия:

worksheet = workbook.sheet_by_name('My_Sheet_Name')

Если вы не уверены в названии листа, вы можете открыть первый лист по его индексу:

worksheet = workbook.sheet_by_index(0)

workbook.nsheets возвращает количество листов. workbook.sheet_names() выдает список имен листов в файле, который поможет вам с перебором листов.

Получение данных из ячеек

После того как вы выбрали таблицу, вы можете извлечь значение конкретной ячейки данных следующим образом.

# Value of 1st row and 1st column
worksheet.cell(0, 0).value

Вы можете использовать циклы для получения всех данных.

Вы можете обнаружить пустую ячейку с помощью empty_cell.

if worksheet.cell(0, 0).value == xlrd.empty_cell.value:
    # Do something

Создание электронной таблицы

Процесс создания таблицы состоит из следующих пунктов:

  • Импортировать модуль xlwt
  • Создайте пустой файл электронной таблицы (или книги)
  • Создать лист в файле
  • Разместить значения в ячейках
  • Сохранить книгу

Создайте новый файла

Вы можете создать новый файл электронной таблицы с помощью xlwt. Пример создания файла:

import xlwt
workbook = xlwt.Workbook()
workbook.save('my_file.xls')

Вы можете открыть его в Unicode так же, как и в случае с xlrd.

Добавление листов

Вы можете добавить листы с помощью add_sheet.

sheet = workbook.add_sheet('Sheet_1')

Работа с ячейками

После того как вы создали таблицу, вы можете добавить значения в конкретную ячейку следующим образом.

sheet.write(0, 0,'Inserting data in 1st Row and 1st Column')

Если вы хотите, записать данные в строки, вы можете выбрать строку и добавить данные.

row = sheet.row(1) # Selecting the second row
row.write(0,'2nd Row and 1st Column')
row.write(1,'1st Row and 2nd Column')

Если вы хотите, чтобы удалить данные в строке, это может быть сделано одной командой.

row.flush_row_data()

Так же, вы можете установить ширину столбца

sheet.col(0).width = 625 # In pixels

Добавление стилей к ячейкам

С xlwt, вы можете не только записать значения в ячейках, но вы можете добавить пользовательские стили. Следующий фрагмент кода показывает, как это сделать:

style = xlwt.XFStyle()
font = xlwt.Font('Arial')
style.font = font
pattern = xlwt.Pattern()
pattern.pattern = xlwt.Pattern.SOLID_PATTERN
pattern.pattern_fore_colour = xlwt.Style.colour_map['red']
style.pattern = pattern
sheet.write(0, 0, "Some data", style)

Вывод

Как я уже упоминал ранее, создания и анализа электронных таблиц неизбежно, когда вы работаете с огромными веб-приложениями. Таким образом, знакомство и разбор библиотек может только помочь вам, когда возникает необходимость.