Quickstart Sample Implementation

We provide sample code in Github which you can download and modify according to your own requirements.

The example code installs a small server running on Node.js that automatically retrieves a token from our API, so you can instantiate the Wink widget.

The example implementation is composed of two parts:

Backend

• Under /node, you will find server-side Javascript code that will retrieve the token. You will need to download and run Node.js to run the code.

Frontend

• Under /frontend, you will find example code in HTML that already has the Wink Javascript SDK embedded already.
• Under /android-webview, you will find example code in Android that already has Wink Javascript SDK embedded already.
• Under /react-native, you will find example code in react-native that already has Wink Javascript SDK embedded already.

Implementation steps

Below steps are also included in the README.md document included in the the Quickstart [repository] and [archive].

1. Download the Quickstart files onto your machine.

2. Go to /node directory of Quickstart.

3. Create a new file with called ".env" in that directory.

4. Make sure you have proper permissions in your machine to be able to create the file.

For example, in Mac or Linux machines open up the Terminal, you can use vi and enter the following commands as a Super User:

sudo touch .env

On Windows machines, Windows will not allow you to create a .env file directly from Windows Explorer since it will not allow file names starting with a ".". To get around this:

1. Open Notepad oand write the content of the file (see below).
2. Goto FILE-> SAVE AS Save as Screen in the notepad.
3. Select the All files() type in the selection window.
4. Save the file as ".env"

5. Open up the ".env" file that you just created in your favorite editor, and enter the following:

# The port you want the example server to listen to
APP_PORT=<portnumber>

# Smile Link API keys (you can get this by requesting access from access@getsmileapi.com)
API_KEY=<apikeyid>
API_SECRET=<apisecret>

#Open API Host. for example: https://sandbox.smileapi.io/v1
OPEN_API_HOST=<openApiURL>

#Link api host. for example: https://link-sandbox.smileapi.io/v1
LINK_API_HOST=<linkApiURL>

The .env file is normally hidden by your system. You may want to enable showing of hidden files in your system preferences to be able to see it. You can use ".env.example" file, included in the Quickstart repository, as a reference.

6. Save and close your file.

7. If you don't have Node.js installed in your machine, install Node.js.

For example on the Mac you can open up the Terminal and run:

    curl "https://nodejs.org/dist/latest/node-${VERSION:-$(wget -qO- https://nodejs.org/dist/latest/ | sed -nE 's|.*>node-(.*)\.pkg</a>.*|\1|p')}.pkg" > "$HOME/Downloads/node-latest.pkg" && sudo installer -store -pkg "$HOME/Downloads/node-latest.pkg" -target "/"

For Windows you can download the installer.

For other operating systems, you can find the instructions from the Node.js website.

8. Run Yarn with npm package manager which is included with Node.js and enter the following commands:

In Mac or Linux, you will need to open up the Terminal. If you are using Windows, you can go to the command line. Make sure you are still in the /node directory of the Quickstart files you just downloaded onto your machine.

    npm install --global yarn
    yarn install

You may need to run as a Super User if you don't have enough permissions. On a Mac or Linux machine, you can run the commands as a superuser by using 'sudo'. On Windows, you can run the command with an administrator trust-level, or by right-clicking the program in the UI and choosing "run as administrator."

8. Run the server:

    node index.js

9. Open up the your browser and open up the example Wink Widget. For example, if you specified port:8000 in your ".env" configuration file, open up http://127.0.0.1:8000 in your web browser.

10. Sit back, relax, and pat yourself on the back for a job well done!

Additionally, if you want to use Wink Javascript SDK in Android Webview

Run the above Implementation Steps 1 to 8 if you haven't done, continue the following steps:

1. Import the /android-webview folder in your favorite IDE(example:Android Studio)

2. After all dependencies successfully loaded, start the your App.

Additionally, if you want to use Wink Javascript SDK in iOS Webview

Run the above Implementation Steps 1 to 8 if you haven't done, continue the following steps:

1. Import the /iOS-webview folder in your Xcode

2. After all dependencies successfully loaded, start the your App.

Additionally, if you want to use Wink Javascript SDK in React Native Webview

Run the above Implementation Steps 1 to 8 if you haven't done, continue the following steps:

In Mac or Linux, you will need to open up the Terminal. If you are using Windows, you can go to the command line. Make sure you are in the /react-native directory of the Quickstart files you just downloaded onto your machine.

1. Configure the React Native development environment to ensure normal operation you can find the instructions

2. Run Yarn with npm package manager which is included with Node.js and enter the following commands:

    npm install --global yarn
    yarn install

3. Start your App.

    # iOS
    yarn react-native run-ios
    # if no simulator available, you can try:
    # yarn react-native run-ios --simulator="iPhone <your simulator version>"
    # if build failed! try below commands:
    # pod cache clean --all
    # pod deintegrate
    # pod install 
    

    // Android
    yarn react-native run-android

Additionally, if you want to use Wink Javascript SDK in Flutter Webview

In Mac or Linux, you will need to open up the Terminal. If you are using Windows, you can go to the command line. Make sure you are in the /flutter_webview directory of the Quickstart files you just downloaded onto your machine.

Run the above Implementation Steps 1 to 8 if you haven't done, continue the following steps:

1. Configure the Flutter development environment to ensure normal operation you can find the instructions

🚨 Attention 🚨

When running the project on the Android emulator, please ensure to replace 127.0.0.1 with 10.0.2.2 in all request URLs within the embedded HTML files (flutter_webview/assets/smile.html). This is because the Android emulator uses the 10.0.2.2 address to access the localhost of the development machine.

2. Change to the Flutter project directory:

    cd flutter_webview

3. Run the following commands to fetch the project dependencies and prepare your Flutter application for launch:

    flutter pub get

4. View the list of available devices and select the one you want to run your app on:

    flutter devices

This command will list all connected and available devices.

5. Start the project:

    flutter run

If you have multiple devices connected, you may need to specify the target device.