https://github.com/louis70109/announcer-vue

Announcer frontend with Vue3
https://github.com/louis70109/announcer-vue

liff line vue3

Last synced: 2 months ago
JSON representation

Announcer frontend with Vue3

• Host: GitHub
• URL: https://github.com/louis70109/announcer-vue
• Owner: louis70109
• License: mit
• Created: 2020-09-07T14:39:34.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2023-01-08T16:05:35.000Z (over 2 years ago)
• Last Synced: 2025-01-31T22:11:26.201Z (4 months ago)
• Topics: liff, line, vue3
• Language: Vue
• Homepage:
• Size: 1.12 MB
• Stars: 5
• Watchers: 3
• Forks: 2
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Announcer Frontend(AF)

AF is based on Vue3, the backend API is [Announcer](https://github.com/louis70109/Announcer), it uses [LIFF](https://developers.line.biz/en/reference/liff/)'s [shareTargetPicker](https://developers.line.biz/en/reference/liff/#share-target-picker) to send and generate form data to [FlexMessage](https://developers.line.biz/en/docs/messaging-api/using-flex-messages/) template for LINE User/Group/Room 🙂.

Template like this:

![](https://i.imgur.com/scb0PxL.jpg)

> If you want to get these, you need to follow [Announcer](https://github.com/louis70109/Announcer) README.

[![Deploy](https://www.herokucdn.com/deploy/button.svg)](https://heroku.com/deploy)

> [static.json] is Heroku setting file, if you want to understand more, you can follow [this page](https://elements.heroku.com/buildpacks/heroku/heroku-buildpack-static)

## Project setup

- Clone this project👍

```sh

git clone https://github.com/louis70109/announcer-vue.git

cd announcer-vue/

npm install

cp .env.example .env # Input backend API url in VUE_APP_API

npm run dev

```

- Build a new terminal and input the following command to forward localhost to SSL environment by [Ngrok](https://ngrok.com/).:

```

npx ngrok http --region ap --host-header=rewrite 8080

```

![ngrok](https://i.imgur.com/05shvgv.png)

- Next step you need to create a **LINE Login channel** in [Developer Console](https://developers.line.biz/console)

  - Create a LIFF app with `https://DOMAIN_URL/liff/template` endpoint url.

  - publish LINE Login channel.

  - enable shareTargetPicker button.

![](https://i.imgur.com/nm6PKK3.png)

### Compiles and minifies for production

```

npm run build

```

# License

MIT License