Найти на сайте
  2. Пользователи
  3. Vunderkind
  4. Форум
Vunderkind

Vunderkind

+32
Репутация
9
Рейтинг
#1 Разработка моб. приложения - конструктора 5 февраля 2020 в 08:54
Добавлен функционал:

1. Ленивая подгрузка записей (пагинация).
2. Обновление списка при свайпе до упора вниз.

Обновлены планы на ближайшие дни:

github.com/VunderkindMedia/Instantcms-2-mobile-app/blob/master/README.md
Игорь Дмитриевич =)
0
#2 Разработка моб. приложения - конструктора 5 февраля 2020 в 02:53


Проект возможно открыть в Android Studio?

fincheck

Нет, это не нативный проект. Это фреймворк React Native
Игорь Дмитриевич =)
0
#3 Разработка моб. приложения - конструктора 5 февраля 2020 в 00:19


Читал читал… вообщем нечего так и не понял.
Куда что загружать и устанавливать.
нужна инструкция и описание- желательно пошаговое введение в процесс.

Алексей Тимофеев

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

Если вас интересует, как открыть у себя проект и работать с проектом, то инструкция есть на гитхабе.
Игорь Дмитриевич =)
0
#4 Разработка моб. приложения - конструктора 5 февраля 2020 в 00:16


И я правильно понимаю, что это один код сразу на 2 платформы(IOS and Android)?
2 нативных приложения?

Donto

Да, все верно.
Игорь Дмитриевич =)
0
#5 Разработка моб. приложения - конструктора 4 февраля 2020 в 13:36
Как только будет более менее нормальная версия — выложу в Google Play. С IOS посложнее — нужно покупать аккаунт, а стоит он не дешего.
Игорь Дмитриевич =)
0
#6 Разработка моб. приложения - конструктора 3 февраля 2020 в 14:45
Друзья, постараюсь на следующих выходных записать более-менее подробный и понятный Гайд, как для пользователей, так и для разработчиков. Возможно распилю на несколько уроков.

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

Кому интересно помочь в разработке, как раз будет время почитать статейки про React Native. Более того, если кому нужно — поделюсь очень хорошим курсом на Русском языке (стучите в телеграмм канал: teleg.run/icms2app ).
Игорь Дмитриевич =)
0
#7 Разработка моб. приложения - конструктора 3 февраля 2020 в 12:30


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

GoodMade

Уже скомпилированный проект должен быть привязан к их сайту я полагаю? А для этого нужно, чтобы я выложил доработаннный компонент JSON API. Очень скоро выложу.
Игорь Дмитриевич =)
0
#8 Разработка моб. приложения - конструктора 3 февраля 2020 в 12:26


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

GoodMade
А собственно после всех шагов инструкции ставим Visual Studio Code или любой другой редактор и просто открываем в нем директорию проекта. Все изменения мгновенно будут применяться и отражаться в приложении.
Visual Studio Code просто легче и проще. Необходимо только расширение поставить для react.

Вообще, если знаний по react js/native нет, то врятли сможете помочь с разработкой)
Игорь Дмитриевич =)
0
#9 Разработка моб. приложения - конструктора 3 февраля 2020 в 04:22

Один только вес архива разработки чего стоит..

Vunderkind

Прошу прощения, в дальнейшем вес станет по лояльнее — забыл удалить неиспользуемые библиотеки из проекта.
Игорь Дмитриевич =)
0
#10 Разработка моб. приложения - конструктора 3 февраля 2020 в 04:19

Как поставить и тестировать? Или еще слишком рано?

vikont

github.com/VunderkindMedia/Instantcms-2-mobile-app/blob/master/README.md

Обновил Readme => Добавил инструкцию по установке проекта для тестирования.
Игорь Дмитриевич =)
0
#11 Разработка моб. приложения - конструктора 3 февраля 2020 в 02:38
В GIT-репозитории обновлен Readme.
Вся информация о прогрессе будет дублироваться туда.

github.com/VunderkindMedia/Instantcms-2-mobile-app/blob/master/README.md
Игорь Дмитриевич =)
0
#12 Разработка моб. приложения - конструктора 2 февраля 2020 в 12:23
Разобрался-таки с гитом. Ранее с ним дел не имел, поэтому сперва локально разработку вел.

Репозиторий доступен по данной ссылке:
github.com/VunderkindMedia/Instantcms-2-mobile-app
Игорь Дмитриевич =)
0
#13 Разработка моб. приложения - конструктора 2 февраля 2020 в 10:18
На 02.02.2020 г. добавлен функционал:

Страница вывода объекта типа контента;
Доработано SideMenu;

Игорь Дмитриевич =)
0
#14 Разработка моб. приложения - конструктора 1 февраля 2020 в 07:01

Vunderkind, а почему например не карусель виджетов?
Можно и в ЛС но лучше в теме форума обсудить )

GoodMade

Сделать на самом деле можно, только нужно видеть, что мы хотим получить в конечном результате. Я пока не могу представить карусель виджетов scratch
Покажите на примере — может где-то такая карусель в моб. версии реализована?
Игорь Дмитриевич =)
0
#15 Разработка моб. приложения - конструктора 1 февраля 2020 в 06:46


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

Упустил ) Обычный php html шаблон? А для виджетов?

GoodMade


Нет. Шаблон строится на JSX разметке, свойственной для React Native.

К примеру, вот так выглядит шаблон объявлений, который отражен на скрина:

  1. <TouchableOpacity onPress={myHandler}>

  2. <View

  3.     style={{

  4.       borderRadius: 6,

  5.       marginTop: 2,

  6.       marginBottom: 2,

  7.       marginLeft: 4,

  8.       marginRight: 4,

  9.  
  10.     }}

  11.   >

  12.     <View

  13.       style={{

  14.         flexDirection: "row",

  15.         backgroundColor: '#fff'

  16.       }}

  17.     >

  18.       <Image

  19.         imageStyle={{ borderRadius: 4 }}

  20.         source={{

  21.           uri: photo.big

  22.         }}

  23.         style={{

  24.           width: 80,

  25.           height: 80,

  26.           borderTopLeftRadius: 6,

  27.           borderBottomLeftRadius: 6

  28.         }}

  29.       />

  30.       <View

  31.         style={{

  32.           flexDirection: "column",

  33.           flex: 1

  34.         }}

  35.       >

  36.         <Text

  37.           style={{

  38.             color: main_color,

  39.             flex: 1,

  40.             margin: 7

  41.           }}

  42.         >

  43.           {title}

  44.         </Text>

  45.         <View

  46.           style={{

  47.             margin: 10,

  48.             flexDirection: "row"

  49.           }}

  50.         >

  51.           <Ionicons

  52.             style={{

  53.               color: main_color,

  54.               fontSize: 14

  55.             }}

  56.             name={Platform.OS === "ios" ? "ios-calendar" : "md-calendar"}

  57.           />

  58.           <Text

  59.             style={{

  60.               fontSize: 12,

  61.               color: main_color,

  62.               marginRight: 7,

  63.               marginLeft: 3

  64.             }}

  65.           >

  66.             {date_pub}

  67.           </Text>

  68.           <Ionicons

  69.             style={{

  70.               color: main_color,

  71.               fontSize: 14

  72.             }}

  73.             name={Platform.OS === "ios" ? "ios-eye" : "md-eye"}

  74.           />

  75.           <Text

  76.             style={{

  77.               fontSize: 12,

  78.               color: main_color,

  79.               marginRight: 7,

  80.               marginLeft: 3

  81.             }}

  82.           >

  83.             {hits_count}

  84.           </Text>

  85.           <Ionicons

  86.             style={{

  87.               color: main_color,

  88.               fontSize: 14

  89.             }}

  90.             name={Platform.OS === "ios" ? "ios-text" : "md-text"}

  91.           />

  92.           <Text

  93.             style={{

  94.               fontSize: 12,

  95.               color: main_color,

  96.               marginRight: 7,

  97.               marginLeft: 3

  98.             }}

  99.           >

  100.             {rating}

  101.           </Text>

  102.           <Ionicons

  103.             style={{

  104.               color: main_color,

  105.               fontSize: 14

  106.             }}

  107.             name={Platform.OS === "ios" ? "ios-heart" : "md-heart"}

  108.           />

  109.           <Text

  110.             style={{

  111.               fontSize: 12,

  112.               color: main_color,

  113.               marginRight: 7,

  114.               marginLeft: 3

  115.             }}

  116.           >

  117.             {comments}

  118.           </Text>

  119.         </View>

  120.       </View>

  121.     </View>

  122.   </View>

  123.   </TouchableOpacity>
Вот таким образом задан шаблон для элемента списка объявлений.
Разметка очень напоминает HTML. Тег View — аналог тега div, стили так же CSS подобные — практически все те же свойства, но в кэмелКейс стиле.
На стороне приложения этот код парится и переводится в реальные объекты.

TouchableOpacity — это тег, который вешает слушатель нажатия на элемент списка, поэтому если речь о шаблоне для списка, то в данной реализации он обязателен. myHandler — это функция на стороне приложения, которая вызывается по нажатию на элемент (она статично прописана в приложении) и позволяет перейти на страницу объекта.
Игорь Дмитриевич =)
0

InstantCMS Team

Связь с нами
Email dev@instantcms.ru

Делаем полезные Интернет проекты с 2008 года 💫

О проекте

Поддержка

Дополнения

🍪Мы используем файлы cookie для работы сайта. Читать подробнее.