<h1>Preparing your blog for Telegram Instant View (IV)</h1>
If you are looking into making your website/blog more appealing for your 
customers, you can look into how social media/messengers are presenting 
your content to customers. Luckily, some of them allow you to control that 
process a bit. Let&#39;s dive into Telegram Instant Views and follow their 
<a href="https://instantview.telegram.org/">official tutorial</a>.
<h2>Pre-requisites:</h2>
<ol>
<li>Have an account in Telegram</li>
<li>Have a publicly accessible website</li>
</ol>
<h2>Example of implementation of Telegram IV</h2>
When we are starting to work on Telegram IV, we need to know the HTML part that 
we want to display and which section/domain we want to be understandable by IV 
system. 
First, we need to define the version of IV, by <code>~version: &quot;2.1&quot;</code>. 
Then, we will limit IV to work only on all links, which are located on <a href="https://decodeapps.pp.ua/blog">https://decodeapps.pp.ua/blog</a>,
we will do that by using <a href="https://instantview.telegram.org/docs#path">?path</a> condition. 
Every DeCODE blog post has an &lt;h1&gt; tag, we can use it for the title of IV. Desciption 
we will extract using the XPath specification, and for the date display - we will use the function <code>@datetime</code>
provided by Telegram IV engine. 
<pre><code>body: //div[has-class(&quot;content&quot;)]
title: $body//h1
description: /html/head/meta[@name=&quot;description&quot;]/@content
@datetime(0): ($body//span)[1]
published_date: $@
</code></pre>If you will also define <code>channel</code> property, you will also display a link to 
your public Telegram channel
![/blog/channel-join-button.png](Telegram channel join button)
When you will declare <code>published_date</code>, you will have something like this: 
![/blog/date-parsed.png](Published date of Instant View)
In order to remove all elements, which you don&#39;t want to show in IV, you can 
use <code>@remove</code> function.
<h2>Complete code for Telegram IV</h2>
<pre><code>~version: &quot;2.1&quot;

?path: /blog/.+

channel: &quot;@decode_news&quot;
body: //div[has-class(&quot;content&quot;)]
title: $body//h1
description: /html/head/meta[@name=&quot;description&quot;]/@content
@datetime(0): ($body//span)[1]
published_date: $@

&lt;figure&gt;: $body//p[.//img]

@remove: //div[@id=&quot;tags&quot;]
@remove: ($body//span)[1]
@remove: //div[@id=&quot;social_shares&quot;]
</code></pre>Photo by <a href="https://unsplash.com/@pluyar?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash">Shane Aldendorff</a> on <a href="https://unsplash.com/photos/gray-and-black-metal-electronic-device-lot-3AzL-IR3v7Y?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash">Unsplash</a>

How to prepare your website for Telegram Instant View

How to automate uploading of Android applications to Amazon

<h1>How to automate build and testing in Flutter with Gitlab</h1>
Let&#39;s use Docker image by <a href="https://github.com/PlugFox/docker_flutter">Plugfox</a>, which is targeting Flutter and comes with all dependencies required, such as Android SDK, JVM and so on. 
In this example, we&#39;ll be using free tier of Gitlab, and in order to minify the load on the flow, we&#39;ll define the GIT_DEPTH variable, which should speed up the 
cloning of repository alongside other environment variables, which are required during the building of <a href="https://developer.android.com/guide/app-bundle">APK/AppBundle</a>.
<h2>Prerequisites for this pipeline</h2>
<ol>
<li>Have a <a href="https://developer.android.com/studio/publish/app-signing#generate-key">android keystore</a> file. You can quickly generate it using following command:</li>
</ol>
<pre><code class="hljs language-bash">keytool -genkey -v -keystore example.keystore -alias alias_name -keyalg RSA -keysize 2048 -validity 10000
</code></pre><ol start="2">
<li>Setup your <a href="https://docs.gitlab.com/ee/ci/secure_files/">Gitlab secure files</a>.
</li>
<li>Prepare integration test, for example
</li>
</ol>
<pre><code class="hljs language-dart">import &#x27;package:flutter_test/flutter_test.dart&#x27;;
import &#x27;package:integration_test/integration_test.dart&#x27;;

void main() {
 IntegrationTestWidgetsFlutterBinding.ensureInitialized();

 group(&#x27;example test&#x27;, () {
 testWidgets(&#x27;dummy test&#x27;, (tester) async {
 expect(10, greaterThanOrEqualTo(2));
 });
 });
}
</code></pre><h2>Building release appbundle</h2>
In order to build the Flutter application, we will use the keystore, which you configured at the prerequisite 1 and upload it to 
the Gitlab secure files. In order to download secure files, Gitlab requires to execute shell script, let&#39;s run it: 
<pre><code class="hljs language-bash">curl --silent &quot;https://gitlab.com/gitlab-org/incubation-engineering/mobile-devops/download-secure-files/-/raw/main/installer&quot; | bash
</code></pre>Now, let&#39;s configure the signing process. In order to do so, we will use key.properties file. Make sure, that your build.gradle inside flutter 
application. Check the <code>android/app/build.gradle</code> file, and make sure it has something like this:
<pre><code class="hljs language-gradle">def keystoreProperties = new Properties()
def keystorePropertiesFile = rootProject.file(&#x27;key.properties&#x27;)
if (keystorePropertiesFile.exists()) {
 keystoreProperties.load(new FileInputStream(keystorePropertiesFile))
}

android {
 // rest of configuration...

 signingConfigs {
 release {
 keyAlias keystoreProperties[&#x27;keyAlias&#x27;]
 keyPassword keystoreProperties[&#x27;keyPassword&#x27;]
 storeFile keystoreProperties[&#x27;storeFile&#x27;] ? file(keystoreProperties[&#x27;storeFile&#x27;]) : null
 storePassword keystoreProperties[&#x27;storePassword&#x27;]
 }
 }
}
</code></pre>Now, let&#39;s prepopulate the key.properties file with necessary details for signing to work
<pre><code class="hljs language-bash">echo &quot;storeFile=$(pwd)/key.keystore&quot; &gt; android/key.properties
echo &quot;storePassword=$KEYSTORE_PASSWORD&quot; &gt;&gt; android/key.properties
echo &quot;keyAlias=$ALIAS&quot; &gt;&gt; android/key.properties ## Testing Flutter application in CI system
echo &quot;keyPassword=$KEY_PASSWORD&quot; &gt;&gt; android/key.properties
</code></pre>Finally, you can execute building command like this:
<pre><code class="hljs language-bash">flutter build appbundle --no-pub --obfuscate --split-debug-info=debug-info-appbundle # if you need appbundle format
flutter build apk --no-pub --obfuscate --split-debug-info=debug-info-apk # if you need apk
</code></pre><h2>Implementing CI testing in Flutter</h2>
In order to test, make sure that your Android device is visible with the <code>adb devices</code> command. The following steps assume that you have followed this step. 
Optional 
If you would like to precache the Android SDK, you can use following command for extracting the <code>compileSdk</code> value and pass it to sdkmanager for installation
<pre><code class="hljs language-bash">cat android/app/build.gradle | grep compileSdk | tr -d -c 0-9 | /opt/android/cmdline-tools/latest/bin/sdkmanager &quot;platforms;android-$(cat -)&quot;
</code></pre>Usually, tests assume that your screen is unlocked, so we can schedule unlocking of your screen beforehands by inputting following command:
<pre><code class="hljs language-bash">adb shell input keyevent 26 &amp;&amp; adb shell input touchscreen swipe 930 880 930 380
</code></pre>Optional 
If you want to have the screen opened upon installation of your application, you can modify your <code>MainActivity.kt</code> with the following changes: 
<pre><code class="hljs language-kotlin">override fun onCreate(savedInstanceState: Bundle?) {
 super.onCreate(savedInstanceState);
 if (BuildConfig.DEBUG) { // we don&#x27;t want to have this behavior on release builds, so keep it only to tests
 val keyguardManager = getSystemService(Context.KEYGUARD_SERVICE) as KeyguardManager;
 if (Build.VERSION.SDK_INT &gt;= Build.VERSION_CODES.P) {
 setShowWhenLocked(true)
 setTurnScreenOn(true)
 keyguardManager.requestDismissKeyguard(this, null)
 } else {
 // For older versions of Android, you can use the deprecated method as a fallback
 keyguardLock?.disableKeyguard()
 window.addFlags(WindowManager.LayoutParams.FLAG_TURN_SCREEN_ON or WindowManager.LayoutParams.FLAG_KEEP_SCREEN_ON);
 }
 }
}
</code></pre>We also were having timeouts while connecting to the device and Flutter VM. We solved it using following command: 
<pre><code class="hljs language-bash">sed -i &#x27;/).timeout(/,/);/{ s/).timeout.*/);/; t; d;}&#x27; /opt/flutter/packages/flutter_tools/lib/src/test/integration_test_device.dart
</code></pre>Finally, execute <code>flutter test path/to/your_test.dart</code> and you&#39;re ready to go!
<h2>Complete .gitlab-ci.yml</h2>
Here&#39;s the complete .gitlab-ci.yml for building and testing of Flutter applications
<pre><code class="hljs language-yaml">image: plugfox/flutter:3.10.6-android

variables:
 GIT_DEPTH: &quot;1&quot;
 KEYSTORE_PASSWORD: your_keystore_password
 ALIAS: your_alias
 KEY_PASSWORD: your_key_password

stages:
 - build
 - test
 - deploy

e2e_test:
 stage: test 
 interruptible: true
 only:
 - merge_requests
 script: 
 - flutter pub get
 - flutter precache --no-web
 - cat android/app/build.gradle | grep compileSdk | tr -d -c 0-9 | /opt/android/cmdline-tools/latest/bin/sdkmanager &quot;platforms;android-$(cat -)&quot;
 - flutter build apk --no-pub --debug
 - adb shell input keyevent 26 &amp;&amp; adb shell input touchscreen swipe 930 880 930 380
 - sed -i &#x27;/).timeout(/,/);/{ s/).timeout.*/);/; t; d;}&#x27; /opt/flutter/packages/flutter_tools/lib/src/test/integration_test_device.dart
 - flutter test integration_test/app_test.dart

build_flutter_bundle:
 stage: build
 timeout: 2 hours
 variables:
 SECURE_FILES_DOWNLOAD_PATH: &#x27;./&#x27;
 script:
 - curl --silent &quot;https://gitlab.com/gitlab-org/incubation-engineering/mobile-devops/download-secure-files/-/raw/main/installer&quot; | bash
 - echo &quot;storeFile=$(pwd)/key.keystore&quot; &gt; android/key.properties
 - echo &quot;storePassword=$KEYSTORE_PASSWORD&quot; &gt;&gt; android/key.properties
 - echo &quot;keyAlias=$ALIAS&quot; &gt;&gt; android/key.properties
 - echo &quot;keyPassword=$KEY_PASSWORD&quot; &gt;&gt; android/key.properties
 - flutter pub get --verbose
 - flutter precache --no-web
 - cat android/app/build.gradle | grep compileSdk | tr -d -c 0-9 | /opt/android/cmdline-tools/latest/bin/sdkmanager &quot;platforms;android-$(cat -)&quot;
 - apk add openjdk17-jre-headless openjdk17-jdk # you should install the java version that your application was written with during CI
 - flutter build appbundle --no-pub --obfuscate --split-debug-info=debug-info-appbundle
 - flutter build apk --no-pub --obfuscate --split-debug-info=debug-info-apk
 - cp build/app/outputs/bundle/app-release.aab ./app-release.aab
 - cp build/app/outputs/flutter-apk/app-release.apk ./amazon-release.apk
 artifacts:
 paths:
 - app-release.aab
 - app-release.apk
 expire_in: 1 week
 rules:
 - if: $CI_COMMIT_BRANCH == &#x27;master&#x27;
 when: manual
 - when: never
</code></pre>Photo by <a href="https://unsplash.com/@toluobde?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Tolu Olubode</a> on <a href="https://unsplash.com/photos/PlBsJ5MybGc?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>

How to automate building and testing of Flutter app

Autopublish TechDocs to Confluence

<h1>TEB 1.4.0 have aired in Google Play</h1>
A new version of TEB have been released and it&#39;s packed with quite handy features, which can improve your posting performance.
<h2>Changed profile picker</h2>
<h3>Hints</h3>
<img style="width: auto;max-height: 400px" src="/blog/teb-added-multiple-signatures/profiles-hint-screen.jpg" />
If you are not familiar with the principle of profiles in the TEB, now it contains a small built-in reminder, which can be opened at any time by pressing the question mark icon

<h3>New all-in-one Editor and Selector</h3>
<img style="width: auto;max-height: 400px" src="/blog/teb-added-multiple-signatures/editor-selector.jpg" />
Interface for making modifications to your profile have been updated

<h3>Handy tooltips for the different states of your editing</h3>
<img style="width: auto;max-height: 400px" src="/blog/teb-added-multiple-signatures/tooltips.jpg" />

<h2>Fixed issue with the multiple signatures per different profiles</h2>
<h2>Premium TEB subscription</h2>
<img style="width: auto;max-height: 400px" src="/blog/teb-added-multiple-signatures/editor-selector.jpg" />

<h3>Custom icon</h3>
<img style="width: auto;max-height: 400px" src="/blog/teb-added-multiple-signatures/teb_premium_icon.svg" />


<h3>Additional signatures</h3>

Upgraded TEB at the Play Market

<h1>Automating Ionic mobile applicaton building</h1>
Today for developing a cross-platform application, you have a lot of options, like <a href="https://flutter.dev">Flutter</a>, <a href="https://cordova.apache.org/">Cordova</a>, <a href="https://ionicframework.com/">Ionic</a>, <a href="https://reactnative.dev/">React Native</a> and so on. 
When comes to development, frameworks/solutions, which utilize JavaScript are quite popular, due to the smoother transition from Web to Mobile. 
In this article let&#39;s focus on Ionic framework, which is framework-agnostic and can be developed with Vanilla JS. 
Namely, we will be looking at <a href="https://capacitorjs.com/">Capacitor</a>, which is recommended by Ionic team.
<h2>How to create Vanilla Ionic project</h2>
As been mentioned, Ionic have possibility to build with such libraries/frameworks as React/Angular, but it does not limiting in choice of frameworks. 
Let&#39;s create a folder <code>vanilla-ionic-app</code> and install Ionic dependencies. In this example we&#39;ll use yarn, but you can utilize <code>npm</code> as well.
We will also use Webpack for better 
<pre><code class="hljs language-bash">mkdir vanilla-ionic-app
cd vanilla-ionic-app
npm init -y 
yarn add -D @capacitor/core @capacitor/cli @capacitor/android webpack webpack-cli html-webpack-plugin
npx cap init 
npx cap add android
</code></pre>This should create a basic skeleton, where you should be able to write smallest example for building application
Open your preferred text editor and make following changes: 
<ol>
<li>Add src/index.js file and fill it with following:</li>
</ol>
<pre><code class="hljs language-javascript">function App() {
 // let&#x27;s show to user simple greeting
 const helloWorld = document.createElement(&#x27;h1&#x27;);
 helloWorld.innerHTML = &#x27;Hello World!&#x27;;
 document.body.appendChild(helloWorld);
}
App();
</code></pre><ol start="2">
<li>Make sure, that your capacitor.config.json looks similar to this:</li>
</ol>
<pre><code class="hljs language-json">{
 &quot;appId&quot;: &quot;com.example.app&quot;,
 &quot;appName&quot;: &quot;vanilla-ionic-app&quot;,
 &quot;webDir&quot;: &quot;build&quot;,
 &quot;bundledWebRuntime&quot;: false
}
</code></pre><h2>Creating the necessary steps in Gitlab pipeline</h2>
For compilation of Capacitor application you should have both NodeJS and Java installed on the system. 
For that reason, we have constructed a <a href="https://github.com/FallenAngel97/alpine-android-nodejs">base Docker image</a>, which we will use in this example.
In order to compile the Ionic/Capactitor application you need to execute the build step for Webpack, copy result to the <code>android</code> folder and compile using Gradle
For reference, you can use snippet below and adjust for your needs
<pre><code class="hljs language-yaml">default:
 image: ghcr.io/fallenangel97/alpine-android-nodejs:master

stages:
- build

build_android:
 stage: build
 script:
 - yarn
 - yarn build
 - npx cap sync android
 - npx cap copy
 - cd android
 - ./gradlew bundleRelease
 - cp ./app/build/outputs/bundle/release/app-release.aab ../app-release.aab

 artifacts:
 paths:
 - ./app-release.aab
 expire_in: 1 week
</code></pre>Photo by <a href="https://unsplash.com/@dovilerm?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Dovile Ramoskaite</a> on <a href="https://unsplash.com/s/photos/vanilla?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>