Приложения для разработки приложений: как сделать приложение для iOS и Android самостоятельно

Сомневаетесь, стоит ли инвестировать в разработку мобильного приложения? Его можно сделать самостоятельно и абсолютно бесплатно. У вас может получиться тестовый вариант, с помощью которого удобно оценивать эффективность мобильной стратегии. А если постараетесь, вы сделаете приличное мобильное приложение, которое станет основным инструментом онлайн-взаимодействия с владельцами смартфонов и планшетов.

Только учтите, что даже самое крутое мобильное приложение не может быть единственным инструментом продвижения. Максимальный результат по трафику и продажам дает только комплексный интернет-маркетинг.

Что такое программа

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

Для тех, кому нужно найти самый дешевый отель, создали программу Booking. Если нужно написать заметку — Evernote, отредактировать фотографию — Photoshop. Для пользователя программа — это продукт, который должен решить его задачу.

Как это выглядит для компьютера

В обработке программы участвуют три компонента компьютера: процессор (ЦПУ), запоминающее устройство (HDD) и оперативная память (ОЗУ). Процессор обрабатывает и исполняет указанные инструкции, жесткий диск их хранит, а оперативная память служит буфером для процессора: отсюда берутся данные и команды, необходимые процессору для выполнения операций.

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

Постановка задачи

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

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

Windows: Как создать программу

В этой статье я попробую показать, как создать программу самому, ведь это очень просто. Многие из нас постоянно работают с программами, сложными и попроще, но многие не задумываются, а что-же на самом деле есть программа. Если описать коротко, то программа — это набор инструкций, которые отдаются компьютеру в соответствии с происходящими событиями. Событиями могут быть такие очевидные вещи как нажатие кнопок клавиатуры, перемещение мыши и нажатие ее кнопок. Также событиями, не такими очевидными для непосвященного пользователя, могут быть уведомления от от операционной системы, компьютерного железа таймера, часов, и так далее.

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

Изначально создание программы можно разделить на следующие этапы:

Разработка алгоритма работы программы.

Дизайн пользовательского интерфейса. Размеры и свойства окна программы, расположение элементов управление внутри окна (окошки, кнопочки, менюшки и другие) и так далее.

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

Так как большинство из нас не гениальные мальчики и девочки, родившиеся с клавиатурой в руках и не впитали языки программирования с молоком матери, нам понадобится программа более функциональная и наглядная чем блокнот. Эта программа называется интегрированной средой разработки (IDE — Integrated Development Eniroenment). Таких сред разработки много — это Microsoft Visual Studio, SharpDevelop, Netbeans, и другие. В данной статье мы будем писать программу под Windows, используя язык програмирования C#, поэтому остановим свой выбор на среде разработки SharpDevelop, которая является бесплатным продуктом с открытым исходным кодом. SharpDevelop содержит в себе все средства, которые нужны для написания полноценной программы: Средство визуального проектирования пользовательского интерфейса, автодополнение кода и многое другое.

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

Lightbox

Устанавливаем программу, думаю здесь не должно возникнуть сложностей.

После установки запускаем среду разработки.

Нажимаем кнопку New solution, или меню File — New — Solution.

В открывшемся диалоговом окне выбираем: C# — Windows Applications — Windows Application — Название програмы — Create (Создать)

В закладке Projects открываем файл MainForm.Designer, как показано на рисунке.

В закладке Tools выбираемм элемент управления Button (Кнопка), перетаскиваем ее на форму. Теперь у yас форма содержит кнопку.

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

Переименовуем кнопку: В окне Properties находим свойство Text, Меняем значение Button1 на Close

Назначаем обработчик события нажатия кнопки

Для этого делаем двойное нажатие на кнопке, программа автоматически создаст необходимую функцию Button1Click. Внутри этой функции пишем: this.Close();

Запускаем программу:

При нажатии кнопки Close, окно программы закроется, в след за этим завершит работу и сама программа.

В большинстве учебников для начинающих программистов первая программа выводит простое сообщение «Hello world!». Мне кажется это немного тупо, так как для того, чтоб заинтересовать начинающего программиста, нужно показать нечто большее и полезное, нежели просто окно с текстом, например возможности языка программирования C# и .Net Framework. Давайте в нашей программе реализуем возможность выполнения простейших арифметических операций. Мне кажется это будет гораздо полезней.

Итак, давайте создадим четыре кнопки: «+», «-«, «*», «/», а также три текстовых поля: два для выполнения арифметических операций и один для результата.

Назначим обработчики событий нажатия кнопок

Пишем код

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

void ButtonAdditionClick(object sender, EventArgs e) { textBoxResult.Text = (Convert.ToInt32(textBoxOperand1.Text.ToString()) + Convert.ToInt32(textBoxOperand2.Text.ToString())).ToString(); }

Проверяем работу программы

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

Пока все. Если есть вопросы или замечания — пишите в комментах.

profhelp.com.ua

Что такое алгоритмы

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

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

Создаем приложение своими руками: что нужно знать

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

Что такое мобильное приложение

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

Приложение состоит из front- и back-end’а. Front-end — это компоненты программы, с которой взаимодействует клиент. Back-end или серверная часть — это компоненты, с которыми взаимодействует разработчик. Условно говоря, front-end находится на устройстве пользователя, а back-end на личном или арендованном сервере владельца программы.

Пользователи смартфонов и планшетов загружают приложения с сайтов разработчиков или из магазинов. Самые известные магазины — Google Play и App Store. Аудитория считает приложения из магазинов безопасными, так как модераторы проверяют программы перед публикацией.

Как конвертировать теоретические знания об анатомии мобильных приложений в практические действия? При выборе конструктора обратите внимание на две позиции. Первая: сервис должен обеспечивать хостинг приложения. Вторая: выбранный ресурс должен обеспечить возможность управления приложением и его публикацию в Google Play, App Store и других популярных магазинах.

Как определить необходимую функциональность приложения

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

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

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

• В приложении должна быть удобная навигация. Клиент должен иметь возможность искать продукты по категориям, заданным параметрам, производителям.
• Программа должна иметь удобный блок оформления покупок: корзину, систему оплаты, отслеживание статуса заказа.
• В приложении нужен личный кабинет. В нем будут разделы «История покупок», «Желания», «Избранное».
• С помощью push-уведомлений клиент будет получать сообщения о новых поступлениях товаров и акциях.
• В разделе «Информация» пользователь сможет прочитать новости и обзоры.

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

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

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

Нужно мобильное приложение для iOS или Android? Обращайтесь! Подробнее

Языки программирования

В курсе «Основы программирования» от Geekbrains используется язык программирования JavaScript. Во-первых, у него широкая область применения: JavaScript используют в веб-разработке, в разработке офисных и серверных приложений. Во-вторых, он универсален. Для работы с JavaScript не нужно устанавливать среду разработки, то есть систему для написания программного обеспечения — все операции проводятся в браузере.

Начать писать на JavaScript довольно просто. Нужно создать файл с расширением HTML (подойдет любой текстовый редактор, даже «Блокнот») и прописать в нем несколько строчек кода.

На Windows лучше всего использовать программу Notepad++. На OS X ее нет, но есть неплохие аналоги, например Sublime Text или TextMate. Чтобы вывести на экран всем знакомую надпись ‘Hello, World!’, нужно прописать в редакторе следующие строчки:

< script language=»javascript» >

alert (‘Hello, World!’);

< / script >

После этого сохранить файл в формате HTML и открыть. Он откроется в браузере — если все сделано верно, то появится окно с введенным текстом.

Пишем скрипт для работы с задачами

Всю скрип­то­вую часть мы будем писать в кон­це стра­ни­цы, что­бы сна­ча­ла у нас в фай­ле шёл CSS, затем HTML-код самой стра­ни­цы, а после него — JavaScript. Поэто­му все бло­ки поме­ща­ем после послед­не­го тега

, когда у нас закон­чи­лась вся визу­аль­ная часть.

Нам пона­до­бит­ся биб­лио­те­ка jQuery, что­бы код мог быст­ро рабо­тать с полем вво­да и спис­ком задач.

jQuery — это отдель­ная биб­лио­те­ка, напи­сан­ная на язы­ке JavaScript. Про­ще гово­ря, это некий набор гото­вых функ­ций, кото­рые упро­ща­ют жизнь раз­ра­бот­чи­ка и напи­са­ние кода. Осо­бен­ность jQuery в том, что она поз­во­ля­ет напря­мую рабо­тать с любым эле­мен­том на стра­ни­це. Это нам при­го­дит­ся для обра­бот­ки кон­крет­ных дел из наше­го спис­ка. Стро­го гово­ря, всю рабо­ту в этой зада­че мож­но было про­де­лать и без jQuery, на чистом JavaScript, но это зай­мёт немно­го боль­ше вре­ме­ни и будет не так удоб­но и кра­си­во.

А теперь пишем сам скрипт, кото­рый будет делать сле­ду­ю­щее: ждать, пока поль­зо­ва­тель не вне­сёт текст в поле вво­да и не нажмёт кла­ви­шу вво­да. После это­го скрипт поме­ща­ет новую зада­чу в память ком­пью­те­ра, а потом добав­ля­ет её в конец спис­ка. Когда зада­ча выпол­не­на и на неё щёлк­ну­ли мыш­кой, скрипт уда­лит соот­вет­ству­ю­щую стро­ку из спис­ка и из памя­ти устрой­ства.

Доба­вим раз­дел с нашим скрип­том после раз­де­ла с jQuery:

// Тут будет наш скрипт

Заве­дём пере­мен­ные для наших задач, кото­рые отве­ча­ют за спи­сок:

var List = $(‘#tdlApp ul’); var Mask = ‘tdl_’;

Теперь напи­шем функ­цию, кото­рая берёт из памя­ти наши зада­чи (если они там уже есть) и дела­ет из них спи­сок. Функ­ция — это малень­кая про­грам­ма внут­ри боль­шой про­грам­мы, в нашем слу­чае она отве­ча­ет за визу­а­ли­за­цию спис­ка задач.

У каж­до­го бра­у­зе­ра есть своё внут­рен­нее хра­ни­ли­ще дан­ных, где он запо­ми­на­ет инфор­ма­цию с раз­ных сай­тов. Хра­ни­ли­ще назы­ва­ет­ся localStorage. Любой сайт может туда что-то запи­сать, а потом, когда пона­до­бит­ся, извлечь из памя­ти свои дан­ные и рабо­тать с ними даль­ше LocalStorage хорош тем, что не обну­ля­ет дан­ные, когда вы пере­за­гру­жа­е­те стра­ни­цу. То есть сохра­нён­ная тут инфор­ма­ция будет жить в бра­у­зе­ре, пока вы спе­ци­аль­но её не уда­ли­те. Но есть и мину­сы: если вы откро­е­те стра­ни­цу в дру­гом бра­у­зе­ре или с дру­го­го ком­пью­те­ра, там будет свой localStorage и посмот­реть свои зада­чи с дру­го­го устрой­ства не удаст­ся.

Что­бы хра­нить еди­ный спи­сок задач на раз­ных ком­пью­те­рах и полу­чать к нему доступ по паро­лю, потре­бу­ет­ся боль­шое хозяй­ство с сер­ве­ром, базой дан­ных, авто­ри­за­ци­ей и кучей все­го. Мы в такие дебри пока не поле­зем.

function showTasks() { // Узнаём размер хранилища var Storage_size = localStorage.length; // Если в хранилище что-то есть… if (Storage_size > 0) { // то берём и добавляем это в задачи for (var i = 0; i < Storage_size; i++) { var key = localStorage.key(i); if (key.indexOf(Mask) == 0) { // и делаем это элементами списка $(‘ ‘).addClass(‘tdItem’) .attr(‘data-itemid’, key) .text(localStorage.getItem(key)) .appendTo(List); } } } }

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

// Если в хранилище уже есть какие-то задачи, то показываем их showTasks();

Теперь при запус­ке скрип­та он про­ве­ря­ет, нет ли чего-то ста­ро­го в памя­ти, и как бы «вспо­ми­на­ет» ваши зада­чи.

Теперь нуж­но сде­лать так, что­бы мы мог­ли вво­дить эти зада­чи. Для это­го нам нуж­но отсле­дить тот момент, когда поль­зо­ва­тель ввёл текст в поле на стра­ни­це и нажал Enter. Если он хоть что-то напи­сал — запо­ми­на­ем это и добав­ля­ем в спи­сок. Нестраш­но, если сей­час вы не до кон­ца пони­ма­е­те, что в этом коде про­ис­хо­дит, — все­му своё вре­мя. Про­сто исполь­зуй­те его, так дела­ет боль­шин­ство про­грам­ми­стов:

$(‘#tdlApp input’).on(‘keydown’, function (e) { if (e.keyCode != 13) return; var str = e.target.value; e.target.value = «»; // Если в поле ввода было что-то написано — начинаем обрабатывать if (str.length > 0) { var number_Id = 0; List.children().each(function (index, el) { var element_Id = $(el).attr(‘data-itemid’).slice(4); if (element_Id > number_Id) number_Id = element_Id; }) number_Id++; // Отправляем новую задачу сразу в память localStorage.setItem(Mask + number_Id, str); // и добавляем её в конец списка $(‘ ‘).addClass(‘tdItem’) .attr(‘data-itemid’, Mask + number_Id) .text(str).appendTo(List); } });

Теперь наша про­грам­ма уме­ет запо­ми­нать зада­чи, кото­рые вы вве­ли в поле вво­да. Это про­ис­хо­дит по нажа­тию кла­ви­ши Enter. Оста­лось сде­лать так, что­бы по кли­ку на любой стро­ке в перечне задач она исче­за­ла из памя­ти и уби­ра­лась из спис­ка:

$(document).on(‘click’, ‘.tdItem’, function (e) { // Находим задачу, по которой кликнули var jet = $(e.target); // Убираем её из памяти localStorage.removeItem(jet.attr(‘data-itemid’)); // и убираем её из списка jet.remove(); })

Всё, пла­ни­ров­щик готов. Копи­ру­ем эти части кода в наш раз­дел со скрип­том и про­ве­ря­ем рабо­ту:

Если мы закро­ем эту стра­ни­цу или пере­за­гру­зим ком­пью­тер, то дан­ные всё рав­но оста­нут­ся в памя­ти. Зна­чит, про­грам­ма рабо­та­ет как нуж­но и у нас всё полу­чи­лось. Пол­ный текст стра­ни­цы (мож­но ско­пи­ро­вать цели­ком и вста­вить в тек­сто­вый редак­тор):

Список задач /*Задаём общие параметры для всей страницы: шрифт и отступы*/ body { text-align: center; margin: 10; font-family: Verdana, Arial, sans-serif; font-size: 16px; } /* Настраиваем внешний вид поля ввода*/ input { display: inline-block; margin: 20px auto; border: 2px solid #eee; padding: 10px 20px; font-family: Verdana, Arial, sans-serif; font-size: 16px; } /*Как будет выглядеть каждый элемент нашего списка*/ .tdItem { text-align: left; padding: 10px; cursor: default; border-radius: 7px; } /*Что произойдёт, когда мы наведём курсор на любую задачу из списка*/ .tdItem:hover { background-color: lightblue; } /*Закончили со стилями*/