CHATIE APP

Chatie App for Android & Ios & Web

Chatie.io - Make your own ChatBot in no language, in minutes.

Picture Credit: https://blog.ionicframework.com/angular-2-ionic/

FEATURES

• Passwordless Auth
• Serverless Deploy
• Languageless Programing

DEVELOPMENT

Linux

OS: Ubuntu 17.10

Install Android SDK

sudo apt install \
  adb \
  android-platform-tools-base \
  android-sdk \
  android-sdk-platform-23 \
  android-sdk \
  android-sdk-platform-tools

cd $ANDROID_HOME
# download link comes from https://developer.android.com/studio/index.html
wget https://dl.google.com/android/repository/sdk-tools-linux-3859397.zip
sudo unzip -n sdk-tools-linux-3859397.zip
sudo chmod +x \
  tools/bin/sdkmanager \
  tools/bin/avdmanager

# XXX: make sure the following line is required...?
sudo ./tools/bin/sdkmanager "build-tools;27.0.3"

# IMPORTANT: Accept all the licenses
./tools/bin/sdkmanager --licenses

Build Android APK

./scripts/android.sh

Mac

Install ...

# Ios: https://cocoapods.org/
$ sudo gem install cocoapods

Build iOS IPA

./scripts/ios.sh

Browser

Build

ionic cordova platform add browser
ionic cordova build browser --prod

APP PUBLISHING

Google Play

• https://play.google.com/apps/publish/

Apple Store

• https://developer.apple.com
• https://itunesconnect.apple.com/

1. Xcode -> Product ->
   1. Build
   2. Archive

Web

Develop

Debug Switch

By adding ?BROLOG_LEVEL=silly to URL, you can enable full debug output messages in the console.

For example:

• https://localhost:8100/?BROLOG_LEVEL=silly
• https://app.chatie.io/?BROLOG_LEVEL=silly

Learning Resources

Copy Cat Clone

• Build a WhatsApp Clone with Ionic 2, Angular 2, and Meteor!

Angular

• Angular Package Format v6.0, design document at Google Docs
• How to Build an Angular 5 Material App

Material

• Angular Material And Angular 6 — Material Design For Angular

Auth0

• OAuth 2.0
• Silent Authentication
• Doc for Get User Info
• Calling your APIs with Auth0 tokens
• User profile claims and scope
• Tokens used by Auth0
• What is the right setup for Lock + SPA + Native + Rest API?
• Auth0 Ionic2 Quick Start
• Ionic 2 and Auth0(outdated: v0.9)
• Experimenting With Auth0 Passwordless Email Authentication In Angular 2.4.1
• OpenID Standard Claims
• Server + API Architecture Scenario
• Verify Access Tokens
• Auth0 + Scaphold

<<<<<<< HEAD

RxJS

=======

Rxjs

ec6237233f54b2f152977a6b8964732ce6f054c4

How to use Observable.

• Observables for ECMAScript
• Migrating from RxJS 4 to 5

Build from Scratch

• Creating Observable From Scratch(Video)
• Learning Observable By Building Observable

Others

• Functional Programming in Javascript
• How to build Angular 2 apps using Observable Data Services - Pitfalls to avoid
• 3 Common Rxjs Pitfalls that you might find while building Angular 2 Applications
• 10 Need-to-Know RxJS Functions with Examples
• Asynchronous Programming at Netflix - @Scale 2014 - Web
• RxJS, the smartest dumbest tool ever
• COLD VS HOT OBSERVABLES
• The Difference Between Throttling and Debouncing
• RxJS: Don’t Unsubscribe

Machine Learning

• architecture-free neural network library for node.js and the browser

Progressive Web Apps

A Progressive Web App(PWA) uses modern web capabilities to deliver an app-like user experience.

• Ionic PWA Doc
• Ionic PWA Blog
• Creating (near) native mobile web app (aka progressive web app) for iOS with Ionic 2

Database

1. GraphQL

• Zero to GraphQL in 30 Minutes – Steven Luscher
• New features in GraphQL: Batch, defer, stream, live, and subscribe
• GraphQL(with Subscription) Backend As A Service

2. PouchDB

• Offline Syncing in Ionic 2 with PouchDB & CouchDB

Testing

• Writing Marble Tests
• Introduction to RxJS Marble Testing

Open API Specification

• Top Specification Formats for REST APIs
• Speed up your RESTful API development in Node.js with Swagger
• Medium.com API Specification
• Writing OpenAPI (Swagger) Specification Tutorial

Push

• PhoneGap Day US Push Workshop 2016 Build a Hybrid Mobile App with Push

UI

• https://vex.visurel.com/

TODO

1. Use Lighthouse to improve quality
   1. GitHub: https://github.com/ebidel/lighthouse-ci
   2. Try: https://lighthouse-ci.appspot.com/try

• Hostie Event Page
• Hostie QR Code Push
• Store Publish
• Other
  • Feedback enable Wilddog & Scrollglue
  • Gavatar in menu with Matrix CSS

SEE ALSO

• Motion.AI - Chatbots made easy.
• Static web publishing for Front-End Developers

CHANGELOG

v0.3 (master) Apr, 2018

1. Promote Auth service as a solo npm package auth-angular

v0.2 Feb, 2018

1. Upgrade to Ionic 3 & Angular 5
2. GraphQL DB Integration

v0.1 Apri, 2017

1. Auth0 Integration
2. FastLane.tools Integration
3. Ionic DB Integration

v0.0 Dec 16, 2016

1. Build with Ionic/Angular 2
2. Prototype with Ionic Creator

AUTHOR

Huan LI <[email protected]>

COPYRIGHT & LICENSE

• Code & Docs © 2017-2018 Huan LI <[email protected]>
• Code released under the Apache-2.0 License
• Docs released under Creative Commons

MEMO

title: "Welcome to the Platform!", description: "The Ionic Component Documentation showcases a number of useful components that are included out of the box with Ionic.",

title: "What is platform?", description: "Ionic Framework is an open source SDK that enables developers to build high quality mobile apps with web technologies like HTML, CSS, and JavaScript.",

title: "What isPlatform?", description: "The Ionic Platform is a cloud platform for managing and scaling Ionic apps with integrated services like push notifications, native builds, user auth, and live updating.",

ALPHA DESIGN

import { Giftie } from '@chatie/giftie'

import { Botie } from '@chatie/botie'

const botie = new Botie()

const botie = new Botie('token')

try {
  await botie.init()
  await botie.test().pipe(
    tap(progress => {
      console.log('on progress...', progress)
    })
  ).toPromise()
  wechaty.addBotie(botie)
} catch (e) {
  if ( e.instanceof(UnitTestingException )) {
    // botie test fail
  } else {
    // other exception
  }
}

function addBotie(botie: Botie): Promise<void> {
  // const eventNameList     = botie.eventNameList()
  // const eventListenerList = botie.eventListenerList()

  // for (const i in eventNameList) {
  //   this.addListener(eventNameList[i], eventListenerList[i])
  // }

  botie.bind(this)

  botie.listener.subscribe.pipe(
    tap(
      (event, listener) => this.addListener(event, listener),
    ),
  ).toPromise()
}

function removeBotie(botie: Botie) Promise<void> {
  botie.listener.subscribe.pipe(
    tap(
      (event, listener) => this.removeListener(event, listener),
    ),
  ).toPromise()
}

const wechaty = Wechaty.instance()
wechaty.setPuppet(new HostiePuppet('token'))
wechaty.start()