Игра для тех, кому интересно научиться создавать мобильные приложения. Уровень 1

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

Здесь не обязательно понимать все досконально, главное понемногу продвигаться к цели. От уровня к уровню. Будут маленькие блоки, на которые не обязательно тратить больше 15 минут (но при желании можно погрузиться детальнее).

Будем использовать язык программирования JavaScript и платформу для создания мобильных приложений React Native. Для старта не нужны никакие навыки. Устанавливать на компьютер тоже ничего не нужно будет, в этом нам поможет платформа Expo.

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

__________________________________________________________________________________

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

Для этого сначала нужно скачать на свой телефон приложение Expo Go, отсканировав вот этот QR код:


Теперь точно так же отсканируйте QR код ниже. И вы увидите, что скрывает программный код из левой части
 


Надеюсь вам понравилось :)

Если вы поменяете код сверху, то отображение его в вашем телефоне тоже изменится.
Например:
  • попробуйте изменить resizeMode с "contain" на "cover" или "repeat"
___________________________________________________________________________

*Расшифровка кода

Давайте попробуем почитать код, который написан выше, и который сейчас исполняется на вашем телефоне:
- Первые две строчки это импорт нужных нам библиотек.
- Затем мы создаем функцию App, которая отвечает за то, что мы увидим на экране.
- Мы используем ImageBackround, чтобы разместить картинку на нашем экране. С помощью стиля style={{flex: 1}} мы растягиваем ее на весь экран.
secretPhoto.jpg - это название картинки, которая у нас лежит в проекте
resizeMode= "contain" - говорит о том, что мы хотим увидеть всю картинку целиком.

*Задание со звездочкой
  • перейдите по этой ссылке https://snack.expo.io/@merry_ejik/junny-apps-level-1
  • добавьте в проект другую картинку вместо secretPhoto.jpg просто перетащив ее в проект (который вы открыли по ссылке выше) и назвав ее так же (или вставив новое название в код)
___________________________________________________________________________

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



Комментарии

  1. polar lights30 марта 2021 г. в 05:29

    задумка топчик, пока что игровой составляющей процесса чётко не представляю.

    ОтветитьУдалить
    Ответы
    1. Junny Apps. Игра для тех, кому интересно научиться создавать мобильные приложения30 марта 2021 г. в 09:46

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

      Удалить
  2. vadim7 апреля 2021 г. в 07:37

    Ура, у меня все получилось!

    ОтветитьУдалить
  3. Natalya8 мая 2021 г. в 14:19

    Этот комментарий был удален автором.

    ОтветитьУдалить
  4. Natalya8 мая 2021 г. в 14:21

    Я добралась))
    https://snack.expo.io/Obzsr4_Lm

    ОтветитьУдалить
  5. Unknown7 сентября 2021 г. в 03:11

    Шо за магия?))

    ОтветитьУдалить

Отправить комментарий

Популярные сообщения из этого блога

Уровень 2. Нажми меня еще раз

Изображение
В прошлый раз  мы делали простое окно с одной картинкой и запускали его на своем телефоне. Посмотрим на что еще вы способны :) Отсканируйте QR код со своего телефона (у вас должно быть установлено приложение Expo Go с прошлого урока) и посмотрите, что делает код ниже: Согласитесь, текст, который вы увидели, немного странный давайте изменим его, чтобы вышло вот так: Напомню, что изменять код можно просто сверху. У вас это точно получится без даже малейшего понимания, а что собственно этот код делает.  Если что-то пошло не так и все перестало работать, просто обновите страницу и начните заново. ____________________________________________________________________________ *Расшифровка кода: В первой строчке мы импортируем React, чтобы у нас вообще что-либо работало :) Во второй импортируем компоненты из React Native (компонент - элемент приложения, который мы увидим на экране)      Text  - это текст :)      Button  - это кнопка :)      View  - контейнер для остальных элементов (часто
Далее...

Уровень 3. React Native, Expo, что это все такое?

Изображение
*Здесь все со звездочкой. Можете пролистать на следующий урок :) В прошлый раз я упоминала  React Native и все задания мы делаем на платформе expo.io , так что это такое? Любознательные конечно уже успели загуглить эти названия. Но понять все могло быть сложно, особенно в отсутствии навыка чтения на английском. Кстати, сейчас не знание английского не такая уж большая проблема. В худшем случае можно воспользоваться авто-переводом страницы. А лучше поставить расширение для браузера, когда при клике на незнакомое слово, отображается его перевод и записывается в словарик. В этом словарике их потом можно легко выучить. Набор используемых слов в технических статьях не такой большой, как кажется. Итак React Native - фреймворк (набор библиотек и кодовой базы, которая находится под "капотом", которую можно не знать, а просто использовать по списку открытых функций), который позволяет используя язык программирования JavaScript  писать мобильные приложения одновременно на две платформ
Далее...