Xcode and android studio

Xcode and Android Studio Integration

The Fuse.Views package allows you to take any UX UI component and export them as a native Library for iOS and Android. In this tutorial we will step by step look at how this is done.

Step 0: Setting up dependencies

In your .unoproj , add a package reference to Fuse.Views . It should look something like the following.

Step 1: Exporting Views

In Fuse Views you must explicitly specify which views you want to be able to instantiate from Swift, Objective-C and Java. You can export any UX component, except for non-UI elements (like Triggers and Animations) and UX Classes that have dependencies.

Let’s say that, for example, you have defined the following components somewhere in your Fuse project:

We can then export these components by providing them as UX Templates to a special ExportedViews tag.

Export an Xcode Framework or an Android aar by compiling with -DLIBRARY set.

Now you will find the Xcode framework and the Android aar under the following paths:

• Xcode framework – build/iOS/Debug/build/Release-iphoneos/ProjectName.framework
• Android aar – build/Android/Debug/app/build/outputs/aar/app-debug.aar

Step 2: Setting up the native Library

Now that we have built our library, we need to add it to our Xcode or Gradle project.

Add the framework you just built as an embedded binary in Xcode

And finally, disable Bitcode.

Android

In YourAndroidApp/app/build.gradle , just under this line:

Add the following:

and in the dependency section, add:

In AndroidManifest.xml add the following attributes to the main activity declaration:

And finally, copy build/Android/Debug/app/build/outputs/aar/app-debug.aar to YourAndroidApp/app/libs/app-debug.aar

Updating the framework or aar after fuse rebuild

After a rebuild you need to manually update the framework or aar in your native project. Do this by overwriting the old library with the one you just produced. This is easily automated by scripting the copy-overwrite procedure.

Notes when updating the framework/aar:

• By default Xcode imports frameworks to the project root directory. This is where you want to overwrite.
• If you are using Android Studio you must do a rebuild after updating the aar for code completion and code errors to work properly.

Notes when updating Fuse:

• To ensure that your project is running the last FuseViews package, cut compile(name:’app-debug’, ext:’aar’) line from your gradle file, Sync and add the dependency again.

Step 3: Bootstrapping Fuse Views

Before you can instantiate your exported views, fuse needs to be initialized.

Objective-C

Add the following in your AppDelegate

Swift

Add a Swift-Objective-C bridging header and add this import:

Then add the following to your AppDelegate .

In your main Activity , inherit from com.fuse.views.FuseViewsActivity .

Fragment support

To use your View as Fragment , inherit from com.fuse.views.FuseViewsFragment

In your Activity init FuseViewsFragment on your onCreate() method just before the setContentView()

Step 4: Instantiating a View

You are now ready to instantiate your exported views. To interop with your views you will get a handle object with some methods that act as the interface for interop. Through the handle you can get a native View that will display your exported view.

Objective-C

Make sure to have these headers imported:

Instantiating the view handle and getting the native view:

Swift

Make sure to have these headers imported in your Swift-Objective-C bridging header:

Instantiating the view handle and getting the native view:

Make sure you have these imports in your java file:

Instantiating the view handle and getting the native view:

Step 5: Use the fuse view in a native layout

A Fuse View will interop with the native layout, for size it relies on the native layout doing a measure pass on its views. On iOS this might not be the case depending on what kind of layout you have used. So you might have to manage the size by yourself. Using the super view’s bounds should be sufficient in most cases.

Objective-C

Swift

Step 6: Interop between native and fuse

As mentioned the ViewHandle object acts as your interface with fuse. You can set a data context for your view in the form of JSON, a key-value pair and add callbacks.

Lets take a look at the API:

Objective-C

The signature of Callback is as follows:

The interface of ICallback is as follows:

If you are familiar with JavaScript and DataBinding in fuse this will be quite easy to understand. setDataJson is the equivalent of having a module.exports in JavaScript and setCallback is the equivalent of adding a function to the exports . The function arguments passed to the native callback in Fuse views will contain the same data you would get in JavaScript , but you get the through the methods available on the Arguments . Since the function arguments needs to be serialized to strings and JSON, accessing the Arguments will lazily serialize what you request. In the common case you are more interested in getting the callback than accessing the whole data context. Please have a look at Binding functions for an overview of what arguments will be passed.

Let’s look at an example with UX and see how that component can be populated with data from JavaScript and from a native language with fuse views:

For the above UX code we can populate it with JavaScript:

The equivalent in fuse views will look like this:

Источник

О том, как я написал простое приложение для Android/iOS

Хочу сразу отметить, что это не статья от профессионала, скорее взгляд любителя на мобильную разработку, скажем так, «с нуля». Мое основное занятие — это создание сайтов. В данное время я работаю у провайдера интернета и занимаюсь поддержкой внутреннего биллинга/сайта и так далее (PHP и немного Perl), довольно скучное занятие, скажу я вам. В общем, я обычный провинциальный «программист».

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

Придя на работу в один из серых скучных дней, я решился и написал в поиске Google «как сделать мобильное приложение». Это было очень наивно. Кажется, я даже попробовал задать вопрос на Toster, «с чего начать разработку под мобильные приложения», тогда я еще не понимал насколько глупым воспринимается этот вопрос профессионалами.

Довольно быстро я разделил для себя разработку на две части, это был Android и iOS, потому что они совсем разные (поиск подсказал.

Как-то я наткнулся на Phonegap, насколько я понял, пишем на Javascript+html+css, а потом получаем готовое приложение для Android/iOS, но почему-то мне не хотелось пользоваться подобными решениями, во-первых: были непонятные отзывы, кто-то хвалил, кто-то ругал, а во-вторых: мне хотелось попробовать как это изнутри, каково это сделать «нативное» приложение.

План и подготовка

Собственно, идея довольно проста:

• Логин экран с логином/паролем
• Основной экран с информацией об абоненте (ФИО, № договора, баланс, статус (Активен, Отключен), есть ли авария на доме, кнопка Активировать обещанный платеж
• Экран с платежами (зачисления на счет)
• Экран со списаниями по счету

Для функционирования приложения я написал простейшее API на PHP, скрипт который по определенному запросу отвечал строкой в JSON-формате. Сделать это оказалось элементарно.

Начать решил с Android.

Android

Начал я с установки Android Studio, первоначально смутило количество кнопочек/иконок, но за пару дней я уже был как рыба в воде. Для начала надо было понять как вообще делаются приложения, очень помогает изначальное «Hello world!» которое создается по-умолчанию. Выглядело все достаточно просто и понятно. Погуглив «Как начать разработку в Android Studio», я понял, что надо скачать SDK. Открыв SDK-manager я не понял вообще ничего, ну, точнее, не понял что именно надо делать, поэтому поставил все галочки и ждал пока все скачается. Для чего оно мне нужно я совсем не понимал, общее представление конечно было «чтобы работала поддержка такой-то версии», но почему надо все отдельно качать и выбирать среди сотен галочек — бррр.

Вторым достаточно сложным этапом было запустить приложение на симуляторе. Погуглив, пришлось повозиться с AVD, конечно, потыкашись как слепой котенок я сделал несколько виртуальных устройств. На одном даже запустилось приложение. Честно сказать, симулятор у Android Studio совсем не User-friendly, очень долго я с ним воевал, пытался запускать по-разному, хотел чтобы кнопки управления были на экране и работали, но почему-то не работали. Видимо, сказывалось отсутствие опыта.

Как оказалось, для Android пишут на Java. Про Java я знал только то, что это язык программирования и это не Javascript.
Решил разбить большую задачу на более мелкие.

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

Выбирая минимальную версию Android я остановился на 4 что-то там 🙂 (Охват аудитории 90%+ если верить Google).

Опять же разбив свои задачи на более мелкие я искал туториалы в youtube, например: «how to get json in android» или «menu in android studio». Конечно, пришлось пересмотреть штук 30 разных видео и все они были на английском (одно на немецком и одно на китайском — когда показывают не так сложно самому дойти что же говорят :)).

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

Публикация в Google Play

Сначала я думал что будет очень сложно и даже переживал, но как оказалось всего 25$ и фактически без каких-либо серьезных проверок приложение попало в Google Play и через несколько часов было доступно в поиске, публикация заняла около одного дня.

Отдохнув пару дней и поразмыслив, решил что пора реализовать тоже самое приложение под iOS. Но, оказалось, что бесплатная среда разработки xCode может быть запущена исключительно в среде Mac. Пришлось скачать образ виртуальной машины MAC OS Yosemite и запустить ее через VMWare. Сделать это было очень просто и фактически не требовало от меня никаких телодвижений кроме как «ждать».

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

Язык программирования выбрал Swift. Версию iOS минимум 7.1+

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

Использовал тоже самое API (тот же скрипт, что и для Android).

Публикация в iOS

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

Опять же, при создании аккаунта был выбор между «компания» и «индивидуальный разработчик», но начитавшись страшилок про 4+ месяца проверки компаний я решил регистрироваться как индивидуальный разработчик. Сделать это было не сложно, главное оплатить 99$ за аккаунт разработчика iOS со своей кредитной карты чтобы имя совпадало (подсказал поиск). Платеж проходил 2 дня.

После чего пришлось искать целое видео «how to publish in app store» и следовать инструкции, настолько там все непонятно. Какие-то сертификаты, туда — сюда. В общем, не очень удобно, хотя и сделать надо лишь один раз :).

Приложение ушло на проверку и ждало очереди около полутора недель. После чего было принято. Кстати, как показали логи, проверка была примерно такая: Логин -> Баланс -> Платежи -> Баланс. И все, хотя была еще страница «Пополнить баланс», но ее не проверяли (а зря, я там накосячил и пришлось выкладывать новую версию программы 1.1 которую тоже проверяли больше недели).

Выводы

1. Как оказалось это не сложно даже для человека который никогда не использовал Java/Swift/Mac OS.

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

3. Очень быстрое устаревание руководств/видео уроков. Платформы настолько быстро развиваются, что надо сразу проверять актуальность информации. На русском языке ее очень мало, после нескольких попыток я даже бросил искать и сразу начал штудировать stackoverflow и англоязычный интернет. Youtube со своими видео-уроками просто спас меня! Я открывал видео на одном мониторе и работал на втором. Без базового английского — никуда.

4. Сервисы вопрос-ответ реально помогают! Иногда, впадая в ступор я задавал вопросы и почти сразу получал ответы — очень удобно если находишься в тупике.

5. Apple более чутко относится к публикации приложений, но особых проблем кроме длительного времени я не заметил. Android же делают все очень быстро (зато пускают всех подряд, как я понял).

6. В общей сложности я потратил почти месяц (на разработку около двух недель с перерывами). Стоило ли оно того — думаю да, было очень интересно. Если у вас есть желание — попробуйте, все оказалось не так сложно. У меня нет смартфона Android/iPhone, но и без них все оказалось просто. Симуляторы работают достоверно.

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

Понятия не имею, зачем я написал эту статью и какие цели преследовал, но раз написал, решил опубликовать.

Источник