如何在Ubuntu 14.04的Docker容器裡安裝WordPress？ | Sanuker

對於不懂寫程式的初學者來說，使用WordPress這個免費且自由開源的網誌軟件及內容管理系統是非常便利的，只需要自己簡單設定，就可以很快製造一個專屬自己的網頁出來。Docker則是一個開放原始碼軟體專案，讓應用程式可以在軟體容器之下的工作自動化進行。

WordPress通常在LAMP包環境下運行，即Linux、Apache、MariaDB及PHP。這一次我們就來學學，如何在Ubuntu 14.04的Docker容器裡安裝WordPress。

Let’s continue to work on our half-finished product done in part 1 last time. What we have done so far is to prepare and deploy the website you are going to put onto Facebook tab. If you follow through carefully our previous tutorial last time, by this time you should have a functioning work page. In part 2, we will finish off the remaining work and you will be able to have fun with your customized Facebook Tab on your Facebook page!

Before you go for a mobile app solution, did you ever notice that you can create a Facebook custom tab app to try it out first? Check out the example created by Sanuker here. Such Facebook tab app is highly customizable and it is one of the Facebook marketing trend which makes your Facebook page more attractive and competitive.

However, there are quite some steps you have to pay attention to so follow this tutorial closely to finish off your first Facebook Tab App!

Last time we finished the tutorial on making payment on Alipay and today we are moving forward to part 2: capture payment. After this tutorial, you will be able to finish a complete purchase process and capture user’s payment successfully.

Meteor/Cordova: How to Use Alipay Cross-Border E-Payment Service? (Part 1: Make Payment) | Sanuker

Have you ever thought of including the payment function in your app? When it comes to payment, it is always in-app purchase or third-party payment gateway. There are a lot of choices for third-party payment gateway and one of the most popular one would be PayPal.

Nevertheless, if you want to capture the Mainland market, you would come across another payment gateway: Alipay. However, the integration of Alipay seems to be a difficult task for most of us.

We would therefore like to share our way to integrate global Alipay in Meteor in the following article. Internal companies would then be able to make payment of Mainland users through Alipay after this tutorial.

Meteor/Cordova：利用微信开发工具包SDK实现朋友圈分享 | Sanuker

现在社交媒体的影响程度庞大且广泛，很多开发者都不断寻找方法在自己的产品或品牌中整合各类社交媒体，特别是在移动应用上的社交媒体整合更是必不可少的。

除了Facebook、Instagram和推特，针对中国大陆的用户，微信的整合更为重要。如何才能在自己的移动应用上跳到微信朋友圈分享文字或图片？

网络上有很多关于这个问题的讨论，但是有用的资源却非常少。因此，我们针对在Meteor上利用微信开发工具包SDK实现朋友圈分享这个问题，写了一份详细的教学，希望能帮助各位有需要的朋友。

Meteor/Cordova: How to Share Texts or Images in WeChat Moment on both platforms? | Sanuker

People nowadays engage in social media connections way more than face-to-face conversations. Producers have been finding ways to engage their brands or products with social media. Social media integration on your mobile applications definitely adds value to your apps.

Have you ever thought of providing additional social media experience apart from Facebook, Instagram and Twitter? How about the most important social media in Mainland China–WeChat? How can you share texts or medias on WeChat Moment?

Since there are tons of questions but little resources on the internet in respect to the integration of WeChat on Meteor, we decided to give a detailed tutorial on this matter.

How to Display a Native Alert Box in Meteor? | Sanuker

Implementation of alert box seems to be an essential needs for most programmers. Normally, you will be able to create an alert by simply typing this line:

alert("hi")

1	alert("hi")

However, the effect may not be pleasant as it is a default browser’s alert box and it looks like this:

It is less customizable and less appealing.

Here is a way to enhance the UI of alert box. Similar to what we have taught you in previous Globalization lesson, you should install a plugin by typing this line in the root of project on console:

meteor add cordova:cordova-plugin-dialogs@0.2.10

1	meteor add cordova:cordova-plugin-dialogs@0.2.10

This plugin allows you to create native alert or dialog UI elements. For details of the plugin, you may visit here.

Then, you may put the following lines in the place you would like to create an alert message:

navigator.notification.alert(message, alertCallback, [title], [buttonName])

1	navigator.notification.alert(message, alertCallback, [title], [buttonName])

message: Dialog message. (String)
alertCallback: Callback to invoke when alert dialog is dismissed. (Function)
title: Dialog title. (String) (Optional, defaults to Alert)
buttonName: Button name. (String) (Optional, defaults to OK)

And you will see a UI-enhanced alert box!

For coding convenience, we have further simplified the above code in Meteor. Simply include the following code in your js file:

Meteor.startup(function(){
    if (Meteor.isCordova) {
            window.alert = navigator.notification.alert;
        }
});

Meteor.startup(function(){

if (Meteor.isCordova) {

window.alert = navigator.notification.alert;

}

});

And then you could achieve a more beautiful and native UI alert function by simply typing the first line that we taught you!

alert("hi")

1	alert("hi")

Trim Length of Text and Show Ellipsis in Meteor | Sanuker

Displaying a long piece and large chunk of text on your website or app may not always be the best option because it is sometimes unpleasant to the user experience. Look at this:

This isn’t appealing, right?

People start to find way to trim the length of text so it won’t look terrible. The easiest way is to limit the text length and put ellipsis at the very end.

One simple way is to add the below text into CSS:

.truncate {
  width: 250px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.truncate {

width: 250px;

white-space: nowrap;

overflow: hidden;

text-overflow: ellipsis;

}

However, we find that this code is not very effective as you cannot limit the text into multiple lines but only one line. Therefore, we have edited the code to make it work in Meteor and shared it here.

Template.ListViewDisplay.onRendered(function () {
  this.autorun(function(){
    Tracker.afterFlush(function () {
       Meteor.defer(function (argument) {
        $(".listView-Item--content").dotdotdot({});
       })
     })
    });
});

Template.ListViewDisplay.onRendered(function () {

this.autorun(function(){

Tracker.afterFlush(function () {

Meteor.defer(function (argument) {

$(".listView-Item--content").dotdotdot({});

})

});

It looks much better now!

For normal practice of adding dotdotdot in other platforms, you may refer here for more details.

Meteor Globalization Lesson 1: Deployment to Different Currencies | Sanuker

It seems that there are rapid discussions on language globalization on the internet. Recently, we have come across a similar question: how to deploy to different currencies according to the users’ locations? Here’s how it works in Meteor:

First, you should install this plugin by typing this line in the root of project on console:

meteor add cordova:cordova-plugin-globalization@1.0.2

1	meteor add cordova:cordova-plugin-globalization@1.0.2

This plugin obtains information and performs operations specific to the user’s locale, language, and timezone.

Then, you have to create a code which suits your needs and purposes. Put this globalization code in ** lib.js**.

var currConveter = {
    "ZH-HK": {
        A： "HKD 8"
    },
    "ZH-TW": {
        A: "TWD 30"
    }
}


if (Meteor.isClient) {
    document.addEventListener("deviceready", onDeviceReady, false);

    function onDeviceReady() {
        console.log(navigator.globalization);
        // starting from here, do whatever you want

        navigator.globalization.getPreferredLanguage(
            function(language) {
                alert('language: ' + language.value + 'n');
                Meteor.currency = language.value;
                if (!_.has(currConveter, Meteor.currency))
                    Meteor.currency == "ZH-HK";
            },
            function() {
                alert('Error getting languagen');
            }
        );

    }
}

var currConveter = {

"ZH-HK": {

A： "HKD 8"

"ZH-TW": {

A: "TWD 30"

}

if (Meteor.isClient) {

document.addEventListener("deviceready", onDeviceReady, false);

function onDeviceReady() {

console.log(navigator.globalization);

// starting from here, do whatever you want

navigator.globalization.getPreferredLanguage(

function(language) {

alert('language: ' + language.value + 'n');

Meteor.currency = language.value;

if (!_.has(currConveter, Meteor.currency))

Meteor.currency == "ZH-HK";

function() {

alert('Error getting languagen');

}

);

}

You may click here to learn more about the code.

You can start your login in line 21. There are a few points to note: firstly, you may hardcode the currency unit for your different products or options; secondly, you should set location checking to check the location of the user; thirdly, you should set a default currency in case the user is not in the location list you have set.

Last but not least, you must change your locations in your phone setting so as to be successfully detected by the app. After that, it will display the currency unit according to the location setting in your phone.

For more information, you may also refer to here. We will continue to discuss the deployment to payment gateway in globalization in Meteor.

Sanuker Blog

Messaging Solutions Consultancy

SanukerHacks

如何在Ubuntu 14.04的Docker容器裡安裝WordPress？ | Sanuker

Meteor: How to Create a Facebook Custom Tab? (Part 2: Facebook Tab Customization) | Sanuker

Meteor: How to Create a Facebook Custom Tab? (Part 1: SSL Configuration & Deployment) | Sanuker

Meteor/Cordova: How to Use Alipay Cross-Border E-Payment Service? (Part 2: Capture Payment) | Sanuker

Meteor/Cordova: How to Use Alipay Cross-Border E-Payment Service? (Part 1: Make Payment) | Sanuker

Meteor/Cordova：利用微信开发工具包SDK实现朋友圈分享 | Sanuker

How to Display a Native Alert Box in Meteor? | Sanuker

Trim Length of Text and Show Ellipsis in Meteor | Sanuker

Meteor Globalization Lesson 1: Deployment to Different Currencies | Sanuker