Forem: Julien

💡 Vue Typescript State Management : We can do better than “isLoading” in 2022

Julien — Tue, 04 Jan 2022 10:57:22 +0000

Sorry for the clickbait title, but I needed your attention 👀

Have you ever encountered code like this one :

new Vue({
  el: '#app',
  data () {
    return {
      info: null,
      loading: true,
      errored: false
    }
  },
  filters: {
    currencydecimal (value) {
      return value.toFixed(2)
    }
  },
  mounted () {
    axios
      .get('https://api.coindesk.com/v1/bpi/currentprice.json')
      .then(response => {
        this.info = response.data.bpi
      })
      .catch(error => {
        console.log(error)
        this.errored = true
      })
      .finally(() => this.loading = false)
  }
})

...

<div id="app">
  <h1>Bitcoin Price Index</h1>

  <section v-if="errored">
    <p>We're sorry, we're not able to retrieve this information at the moment, please try back later</p>
  </section>

  <section v-else>
    <div v-if="loading">Loading...</div>

    <div
      v-else
      v-for="currency in info"
      class="currency"
    >
      {{ currency.description }}:
      <span class="lighten">
        <span v-html="currency.symbol"></span>{{ currency.rate_float | currencydecimal }}
      </span>
    </div>

  </section>
</div>

It’s an example I found in the Vue documentation here https://vuejs.org/v2/cookbook/using-axios-to-consume-apis.html#Dealing-with-Errors

What if you have multiple things that could load, do you add a loading2 variable ? 👀

To solve this issue, you can use a variable for each async actions you have with this 4 “states” :

IDLE : the user didn’t trigger the action yet
WAITING : the action is ongoing
ERROR : there was an error
DONE : The action succeeded

Using an enum with the different states, and better naming, the code can be rewritten like this :

enum AsyncState {
  IDLE = 'IDLE',
  WAITING = 'WAITING',
  ERROR = 'ERROR',
  DONE = 'DONE',
}

new Vue({
  el: '#app',
  data () {
    return {
      info: null,

      AsyncState,
      currentPriceLoadState: AsyncState.WAITING,
    }
  },
  filters: {
    currencydecimal (value) {
      return value.toFixed(2)
    }
  },
  mounted () {
    axios
      .get('https://api.coindesk.com/v1/bpi/currentprice.json')
      .then(response => {
        this.info = response.data.bpi
        this.currentPriceLoadState = AsyncState.DONE
      })
      .catch(error => {
        console.log(error)
        this.currentPriceLoadState = AsyncState.ERROR
      })
  }
})

...

<div id="app">
  <h1>Bitcoin Price Index</h1>

  <div v-if="currentPriceLoadState === AsyncState.WAITING">Loading...</div>
  <section v-else-if="currentPriceLoadState === AsyncState.ERROR">
    <p>We're sorry, we're not able to retrieve this information at the moment, please try back later</p>
  </section>

  <section v-else>
    <div v-for="currency in info" class="currency">
      {{ currency.description }}:
      <span class="lighten">
        <span v-html="currency.symbol"></span>{{ currency.rate_float | currencydecimal }}
      </span>
    </div>

  </section>
</div>

With better naming and this simple enum, you can almost cover all the use cases where you need to load one or multiple things and manage errors ✨

If you want to manage different error messages, you can add another variable with an enum type like this :

enum CurrentPriceLoadErrors {
  INVALID_CURRENCY = 'INVALID_CURRENCY',
  API_LIMIT_REACHED = 'API_LIMIT_REACHED',
  DEFAULT = 'DEFAULT',
}

Tell me in the comment section if you like this trick or not, and if you have an even better technique !

And don’t forget to like and share this post if you liked it 💙

🚀 Flutter CI/CD using Git Tags in 5 minutes

Julien — Fri, 14 May 2021 09:50:20 +0000

What you will need
What you will do
Step 1: Deployment script
Step 2: Git push with tag

What you will need

📲 A Flutter app (obviously)
📦 A Github, Gitlab or Bitbucket account
✨ A Codemagic account (linked to your app repository)
😁 Your best smile

What you will do

You will create a git tag containing your new app version, then push it to your repository. It will automatically trigger a Codemagic build, and release your app on the Play Store 🚀

Step 1: Create a deployment script 🛠

Below you'll find code to configure the CI/CD. You just have to add it to the root of your repository in a file named codemagic.yaml
I've used a script instead of the workflow editor (Codemagic GUI) for multiple reasons (versioned, faster...) but mainly because the version handling isn't possible using the editor.

# codemagic.yaml

# ... <- Here you will include the "reusable" parts that are described afterward

workflows:
  play-store:
    name: Play Store Release
    max_build_duration: 30
    cache: *caching

    environment:
      flutter: *flutter_version
      xcode: latest
      cocoapods: default
      vars:
        <<: *gcp_service_credentials
        <<: *keystore_release

    # ! THE IMPORTANT PART IS HERE !
    triggering:
      events:
        - tag
      branch_patterns:
        - pattern: "master"
          include: true
          source: true
      tag_patterns:
        - pattern: "*"
          include: true

    scripts:
      - *android_key_properties_setup
      - *flutter_android_properties_setup
      - *flutter_pub_get
      - *flutter_test
      - *flutter_build_play_store_release

    artifacts:      
      - build/**/outputs/**/*.aab

    publishing:
      google_play:
        credentials: *play_console_credentials
        track: alpha
        in_app_update_priority: 0

Next are the reusable parts, to be clean and not repeat yourself ✨. Replace the encrypted variables using your credentials and the Codemagic encrypting tool.

# codemagic.yaml

reusable:
  flutter_version: &flutter_version 1.22.6

  environment-variables:
    - &keystore_release
      FCI_KEYSTORE_PATH: /tmp/keystore.keystore
      FCI_KEYSTORE: Encrypted(...)
      FCI_KEYSTORE_PASSWORD: Encrypted(...)
      FCI_KEY_PASSWORD: Encrypted(...)
      FCI_KEY_ALIAS: Encrypted(...)

    - &gcp_service_credentials
      GCLOUD_SERVICE_ACCOUNT_CREDENTIALS: Encrypted(...)      

    - &play_console_credentials Encrypted(...)

  scripts:
    - &android_key_properties_setup
      name: Android - Setup key.properties
      script: |
        echo $FCI_KEYSTORE | base64 --decode > $FCI_KEYSTORE_PATH
        cat >> "$FCI_BUILD_DIR/android/key.properties" <<EOF
        storePassword=$FCI_KEYSTORE_PASSWORD
        keyPassword=$FCI_KEY_PASSWORD
        keyAlias=$FCI_KEY_ALIAS
        storeFile=/tmp/keystore.keystore
        EOF

    - &flutter_android_properties_setup
      name: Flutter x Android - Setup local.properties
      script: echo "flutter.sdk=$HOME/programs/flutter" > "$FCI_BUILD_DIR/android/local.properties"

    - &flutter_pub_get
      name: Flutter - Get dependencies
      script: flutter packages pub get

    - &flutter_test
      name: Flutter - Run tests
      script: flutter test --machine

    # ! THE IMPORTANT PART IS HERE !
    - &flutter_build_play_store_release
      name: Build AAB for Play Store release
      script: |
        GCLOUD_SERVICE_ACCOUNT_CREDENTIALS=$(echo $GCLOUD_SERVICE_ACCOUNT_CREDENTIALS | base64 --decode)
        NEW_BUILD_NUMBER=$(($(google-play get-latest-build-number --package-name 'com.company.example') + 1))
        NEW_VERSION_NAME=$(git describe --tags)

        echo $NEW_VERSION_NAME
        echo $NEW_BUILD_NUMBER

        flutter build appbundle --build-name=$NEW_VERSION_NAME --build-number=$NEW_BUILD_NUMBER  --obfuscate --split-debug-info=$FCI_BUILD_DIR/debug_files

  caching: &caching
    cache_paths:
      - $HOME/.gradle/caches
      - $FLUTTER_ROOT/.pub-cache

# ... <- The workflow part described before should be here

In the previous script, the "flutter_build_play_store_release" script handle the versioning :

Version is retrieved from the tag.
Build number is retrieved from the play console (fetching the highest build number, and incrementing it for this release).

Don't forget to replace com.company.example with your app package name

You can now push this script onto your repository. It should then be visible from Codemagic and you should be able to trigger it manually.

Step 2: Add git tag 🔖 -> push it 🚀

Creating a git tag is very easy. We will use 1.0.0 as our version, and tag.
You just have to run the following commands :

git tag -a 1.0.0 -m "Release 1.0.0"
git push origin 1.0.0

That's it! You should see a build running in Codemagic 🏄‍♂️

What's next?

You can add as many workflows as you want using Codemagic! You can use the GUI editor, and then extract to code to have more control over the code.

Here we deploy on Alpha, so you can change to Production when you feel ready. And then, you can add an iOS workflow with mostly the same code.

Leave a comment, a like or even a unicorn 🦄 if you've achieved this tutorial! 🚀🔖

⏱ 5 min chrono FREE admin panel with ForestAdmin

Julien — Fri, 17 Jan 2020 11:15:17 +0000

Product guy : Hey, could you give me access to database ?

Tech guy : Hmm.. why ?

Product guy : To avoid to bother you each time I need to update something

Tech guy : So, you would need a BackOffice for that.

Product guy : Ok, could you please develop it ?

You probably already had this discussion...
Let's imagine now that you can solve it ... in MINUTES !

What is ForestAdmin 🌲 ?

"Forest Admin provides an off-the-shelf admin panel based on a highly-extensible API hosted on your servers."

In other words, it's a SaaS platform providing all common admin tasks you'll need as developer if you want to create your own Back Office.

With Forest you can :

📝 View / Create / Edit / Delete entries of your database
🔐 Handle access control list
📈 Create awesome dashboards and views with 0 or few code lines.
🌍 Create custom actions that triggers your backend API
✨ And many more !

All of this only with configurations and few lines of Javascript 👨‍💻!

Here is an example of what it looks like out of the box :

Installation

Create your account for FREE at https://www.forestadmin.com/
Follow the instructions provided to connect to your database*
Install in local using Docker or Node.js
npm start 🚀
Go to http://app.forestadmin.com/projects

*For the time being, you can only connect to Mysql, PostgreSQL, SQL Server and MongoDB.

Deployment

You can host your server anywhere you want using Docker or Node.js. For example, Forest provide a tutorial to host your server on Heroku here (it takes really 3 minutes !)

Customization

You have 2 categories of customization :

Model : You can modify your database model, relationships and custom actions (called "smart actions") using Javascript !
UI : That's the best part for developers. You can modify your UI using the GUI layout editor provided by forest admin (based on ember.js)

Here are some examples :

You can even develop your own UI with HTML/CSS/JS code to have custom views like this one :

How it works ?

It's quite interesting to know how the product is made because it's atypical. Indeed, the code and model is hosted on your servers but the UI layout configuration is hosted on Forest servers. Here is a schema of the architecture :

This way, your data remain secure 🔐

Conclusion

It's been 6 months that we use Forest and the whole team is very happy with it. The product and marketing love the dashboard and custom views (you know, they love fancy graphs 😄). The customer support work is easier thanks to views displaying customer data to answer questions quickly.

Also, it's free up to 10 users so you can test it before using it in your profesional projects !

And above all, it doesn't take time to your dev team, and they can use time for "real work" ^^

Hope it helps !

Github private package with CI/CD

Julien — Fri, 03 Jan 2020 12:33:28 +0000

With the newly created Github Package Registry, you can store your private packages in the same place as your code.

Deploying packages and use them inside a package.json file is very simple. When it comes to use them in a CI/CD environment it's a bit tricky.

First, we need to provide our ci/cd environment a secure way to retrieve packages from our private repositories. Using the classic npm login is secure but not very handy. So the TOKEN approach is what I chose. See more info about creation here. You only need to provide read access to packages.

Then we need to set a reference to our private repositories for npm to resolve and find it. The easiest way is to set an .npmrc file at the root of your project and put things this way :

registry=https://registry.npmjs.org/
@owner:registry=https://npm.pkg.github.com/
//npm.pkg.github.com/:_authToken=${GITHUB_TOKEN}

The trick here is to indicate the default registry (registry.npmjs.org) for all other public packages you want to use.

Be sure to replace owner by your organisation name. The GITHUB_TOKEN is stored as environment variable (you have many ways to hide it on your machine and in some ci/cd tools, don't need to hardcode it).